关于css:HTML与CSS之CSS的基本使用

CSS（英文全称：Cascading Style Sheets）层叠样式表, 是一种用来体现 HTML（规范通用标记语言的一个利用）或 XML（规范通用标记语言的一个子集）等文件款式的计算机语言。

CSS 目前最新版本为 CSS3，是可能真正做到网页体现与内容拆散的一种款式设计语言。绝对于传统 HTML 的体现而言，CSS 可能对网页中的对象的地位排版进行像素级的准确管制，反对简直所有的字体字号款式，领有对网页对象和模型款式编辑的能力，并可能进行初步交互设计，是目前基于文本展现最优良的体现设计语言。CSS 可能依据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

CSS 是用来丑化网页用的，没有网页则 CSS 毫无用处，所以 CSS 须要依赖 HTML 展现其性能。

CSS 款式由选择器和一条或多条以分号隔开的款式申明组成。每条申明的款式蕴含着一个 CSS 属性和属性值。[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-FmNcbENy-1605579325994)(/QQ 截图 20200205160701.png)]

选择器名 {
    属性 : 属性值;
    ......
}

div {background-color : red;}

留神：

css 申明要以分号; 完结，申明以 {} 括起来
倡议一行书写一个属性
若值为若干单词，则要给值加引号，如 font-family:“agency fb”;

多行正文：

/* 这里的内容就是正文 */

1. 行内式

行内款式将款式定义在具体 html 元素的 style 属性中。以行内式写的 CSS 耦合度高，只实用于以后元素，在设定某个元素的款式时比拟罕用。

<p style="color:red;font-size:50px;"> 这是一段文本 </p>

在以后元素应用 style 属性的申明形式。

style 是行内款式属性；

color 是色彩属性；red 是色彩属性值；

font-size 是字体大小属性；50px 是字体大小属性值

2. 嵌入式

嵌入式通过在 html 页面内容开拓一段属于 css 的代码区域，通常做法为在 < head> 标签中嵌套

<style type="text/css">p {color: blue;font-size: 40px;}</style>

3. 引入外联款式文件

在理论开发当中，很多时候都应用引入外联款式文件，这种模式能够使 html 页面更加清晰，而且能够达到更好的重用成果。

style.css

p {color: green;font-size: 30px;}

test.html

<link rel="stylesheet" type="text/css" href="style.css">

rel:rel 属性规定以后文档与被链接文档之间的关系。

stylesheet: 文档的内部样式表。

很多时候，大量的 HTML 页面应用了同一个 CSS。那么就能够将这些 CSS 款式保留在一个独自的.css 文件中，而后通过元素去引入它。

留神：当有多重款式时，记住前提规定，越准确越优先。

在 CSS 中，选择器是一种模式，用于抉择须要增加款式的元素。

CSS 选择器有很多，把握罕用的即可；

通用选择器

抉择所有 *

* {......}

* {color: orange;}

元素选择器

抉择指定标签

元素名称 {......}

p {
    color: red;
    font-size: 20px;
}

ID 选择器

抉择设置过指定 id 属性值的元素 #

#id 属性值 {......}

#p1 {font-weight: bold;}

类选择器

抉择设置过指定 class 属性值的元素 .

.class 属性值 {......}

.hidden {display: none;}

分组选择器

当几个元素款式属性一样时，能够独特调用一个申明，元素之间用逗号分隔

选择器 1, 选择器 2,... {......}

h2 , #pre1 {
    color: orange;
    font-style: italic;
}

CSS 款式的优先级，是依据选择器的精确度 / 权重来决定的，常见的权重如下，权重越大，优先级越高

元素选择器：1

类选择器：10

id 选择器：100

内联款式：1000

CSS 组合选择器阐明了两个选择器间接的关系。CSS 组合选择符包含各种简略选择符的组合形式。

在 CSS 中蕴含了四种组合形式: 后辈选取器(以空格分隔)，子元素选择器(以大于号分隔），相邻兄弟选择器（以加号分隔），一般兄弟选择器（以波浪线分隔）。

后辈选择器（派生选择器）

用于抉择指定标签元素下的后辈元素，以空格分隔

选择器 1 选择器 2 {......}

.food  li {border: 1px solid red;}

<h1> 食物 </h1>
<ul class="food">
    <li> 水果
        <ul>
            <li> 香蕉 </li>
            <li> 苹果 </li>
            <li> 梨 </li>
        </ul>
    </li>
    <li> 蔬菜
        <ul>
            <li> 白菜 </li>
            <li> 油菜 </li>
            <li> 卷心菜 </li>
        </ul>
    </li>
</ul>

子元素选择器

用于抉择指定标签元素的所有第一代子元素，以大于号分隔

选择器 1 + 选择器 2 {......}

#d + div {border: 1px solid red;}

html 代码同上

相邻兄弟选择器

可抉择紧接在另一元素后的元素，且二者有雷同父元素。以加号分隔

选择器 1 + 选择器 2 {......}

#d + div {border: 1px solid red;}

<div id="d">
    相邻兄弟选择器 1
    <ul>
        <li> 开心麻花 </li>
        <li> 贾玲 </li>
        <li> 宋小宝 </li>
    </ul>
</div>
<div>
    相邻兄弟选择器 2
</div>

一般兄弟选择器

抉择紧接在另一个元素后的所有元素，而且二者有雷同的父元素，以波浪线分隔

选择器 1 ~ 选择器 2 {......}

li ~ li {background-color : yellow;}

<div>
    一般兄弟选择器 1
    <ul>
        <li> 开心麻花 </li>
        <li> 贾玲 </li>
        <li> 宋小宝 </li>
        <li> 沈腾 </li>
        <li> 王宁 </li>
    </ul>
</div>

关于css:HTML与CSS之CSS的基本使用

CSS

CSS 的根本应用

CSS 根本语法

正文

CSS 的应用

CSS 选择器

根本选择器