标签：伪类 day03 元素 样式 font 选择器 CSS
1.CSS:层叠样式表，用来美化网页的。做到结构（HTML）和表现（CSS）分离。
2.基本语法：
选择器 {
属性: 属性值;
}
3.CSS引用方式：行间样式、内部样式、外部样式、导入外部样式。
行间样式：直接在标签上书写样式。
内部样式：在文件的内部书写样式。
<style type="text/css">
样式内容
</style>
外部样式：（1）先创建一个CSS文件；（2）再用link标签引入这个文件。
导入外部样式：（1）先创建一个CSS文件；（2）在style标签中用import导入这个样式文件。
以上四种CSS引用方式的区别：
行间样式只作用于当前标签；而内部样式作用于当前文件；外部样式可以被多个HTML文件引用。
在实际项目开发中，最好使用外部样式。
外部样式分为link引入和import引入两种方式。这两种方式区别：
1）link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4）link支持使用Javascript控制DOM去改变样式；而@import不支持。
4.CSS选择器分类：
1）*：匹配html中所有元素（注意：*的性能差，因为它要匹配所有元素，所以在开发时，不建议使用）
2）标签选择器：用来匹配对应的标签
3）类选择器：用来选择class命名的标签
4）ID选择器：用来选择用id命名的标签
5）派出选择器：根据上下文来确定选择的标签
6）伪类选择器
7）伪元素选择器
5.选择器的分组
让多个选择器（元素）具有相同的样式，一般用于设置公共样式。
6.选择器的继承
子元素可以继承父元素的样式，反之不可以。
7.样式权重
!important(10000)>内联样式(1000)>id选择器(100)>类、伪类和伪元素选择器(10)>标签选择器(1)
8.CSS字体
1)font-size:字号(px/%)
2)font-family:字体
3)font-style:文字样式(normal/italic/oblique)
4)font-weight:文字加粗(normal/bold/bolder/lighter/100-900)
5)line-height:行高(px/数字/em等)
6)color:文字的颜色(颜色的单词/rgb()->r:0-255,g:0-255,b-0-255/16进制(以#开头，后跟6位(#rrggbb)或3位(#rgb)16进制数）
7)text-decoration:文字修饰(none/underline/overline/line-through)
8)text-align:文本对齐方式(left/right/center)
9)text-transform:字母大小写(capitalize/uppercase/lowercase/none)
10)text-indent:文本缩进(px/em/%/pt等)
Tip:
font复合属性：
font:font-style font-variant font-weight font-size/line-height font-family;
注意：
1）属性值的位置顺序
2）除了font-size和font-family之外，其它任何一个属性值都可以省略
3）font-variant：normal/small-caps（让大写字母变得小一些）
9.CSS背景
1)background-color:背景色(transparent/color)
2)background-image:背景图(none/url)
3)background-repeat:背景图像铺排方式(repeat/no-repeat/repeat-x/repeat-y)
4)background-position:设置对象的背景图像位置({x-number | top | center | bottom } {y-number | left | center | right })
5)background-attachment:背景图像滚动位置(scroll/fixed)
6)background:设置背景的复合写法
background: color image repeat attachment position
10.CSS伪类选择器
伪类：专门用来表示元素的一种特殊状态。
常用伪类选择器：
1)a标签的伪类：
:link/:visited/:hover/:active
2):focus 获得焦点
3):first-child/:last-child/:nth-child(number)
11.属性选择器
[属性名]:包含有指定属性名的元素（常用）
[属性名=值]:属性名的值为指定值的元素（常用）
[属性名~=值]:属性名的值包含指定值的元素
[属性名^=值]:属性名的值以指定值的开头的元素
[属性名$=值]:属性名的值以指定值的结尾的元素
12.关系选择器
1)空格：后代选择器
2)>：只选择儿子元素
3)+：兄弟选择
13.CSS伪元素
1）CSS伪元素与伪类区别：
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，
并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
2）伪元素&伪类的特点：
伪元素和伪类都不会出现在源文档或者文档树中
伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面
伪元素名和伪类名都是大小写不敏感的
有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果）
3）:before/:after/:first-letter/:first-line : 前面可以是1个冒号也可以是双冒号
::selection/::placeholder/::backdrop : 前面只能是双冒号
标签：伪类,day03,元素,样式,font,选择器,CSS 来源： https://www.cnblogs.com/jinshanshan/p/14346145.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。