css规则

1. 为文档添加样式的三种方法：行内样式、嵌入样式、链接样式（此处按优先级排序）

<div style="display:block">123</div>
<style>Your css code
<style>
<link href="style.css" rel="stylesheet" type="text./css">
@import url（css/style.css）
复制代码

需要注意的是，在链接文件中是不需要写style标签的。否则会加载不出来链接文件中的样式。使用import引入样式时不需要再链接上加引号

1. css规则命名的三种方法：
   • 最基础的方法：将多个声明包含在一条规则里
   • 当有多个元素的样式内容一样时，我们可以使用“，”将标签隔开然后在书写样式。
   • 在上述情况下，如果有一个元素有特别情况，我们可以再把它挑出来单独书写

h1{font-size:18px;display:flex;}
h1,h2,h3{font-size:18px;display:flex;}
h1,h2,h3{font-size:18px;display:flex} h3{color:yellow;}
复制代码

css选择符

1. 上下文选择符：
   • 最常用的“后代组合式选择符”就是空格。在例子中，无论p元素在article元素下的第几层有几个，都会应用这个样式
   • 特殊的上下文选择符
     1. 子选择符“>”。就是加以限制的空格，它只能选择article元素的子元素中是p元素的元素，孙子啥的都不行。拒绝远亲
     2. 一般同胞选择器（兄弟选择器）“~”，其能选择与h2同层且在h2元素后面的a元素。（选择很多个元素）其实应该叫弟弟选择器。啊哈哈哈...
     3. 紧邻同胞选择器“+”，其实就是h2后面紧邻的元素，并且这个元素必须是p元素才能被应用。（只选择一个）
     4. css中的通配符：通用选择器“*”。单独使用其背后可以不加元素直接写样式，这个样式将被应用到全部的元素中；他还可以构成非子元素的子孙元素选择器。在p元素后写一个空格，代表其所有的子元素，在写一个通配符表示选中这些子孙元素，此时选择的层就是p元素的下一层开始选择的了，这时候再加一个空格表示选择的层再向后推了一层，即从孙子元素开始选择

article p{color:yellow;}
article>p{color:yellow;}
h2~a{color:yellow;}
h2+a{color:yellow;}
*{margin：0；padding：0；}
p * a{font-size:100px;}
复制代码

1. ID与类选择符
   • 类选择器：类属性就是元素标签中的class属性。借此引出类选择器“.”，就是一个点点然后加上类属性名加样式。
   • ID选择器：基本同上，选择器是“#”。
   • 常见问题：在语义化编写HTML文档的前提下，如何正确的区别使用这两个选择器。A：我们从名字上来看，“类”指的当然就是一类东西，一类东西的意思就是这些东西具有一些共同的特点，所以元素的类名是可以重复的。它的作用自然就是为一些具有相同样式的元素添加样式。或是给由于其他属性的不同的同一个标签分类。这里要指出的是，我们提倡语义化的编写代码，所以不要给元素乱加类，就如什么class=“div1”这样的类，加上了就是为了这一个元素加上样式而已。我们完全可以使用上面说的上下文选择器来选择它。而“ID”选择器，在国外我们的身份证都叫做“IDcard”，这里的ID属性也是如此，他是独一无二的，常常用于一个鸡群里的丹顶鹤。就比如一堆a中将一个叫uinique的a设置为yellow。

<ul><li class="boy"></li><li class="girl"></li><li class="boy"></li><li class="girl"></li>
</ul>
.boy{color:blue;
}
.girl{color:yellow;
}
-------------------------------
<p></p>
<p></p>
<p id="mainP"></p>
<p></p>
#mainP{font-weight:bold;
}
复制代码