一.关于css(Cascading style sheets)的理解
这是我参与「第五届青训营 」伴学笔记创作活动的第 2天
1.用途
（1）css是用来控制页面的样式和布局的,修饰页面效果,可以配合脚本语言动态的对页面进行格式化,在提升用户体验方面功不可没。使得网页变得更加的绚烂多彩，CSS最大的贡献就是：让HTML从样式中脱离苦海，实现了HTML专注做结构，样式使用CSS来实现。
(2)一般叫做css样式表或者叠层样式表（级联样式表），改变HTML页面中文字的字体、大小、样式、图片的（高度、边框样式、边距）
（3）CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等。而且还可以针对不同的浏览器设置不同的样式。
2.css的样式规则
书写方式
选择器(变量名){
书写样式(键值对)
:值a
}
二.css的引入方式
1.行内样式引入（给对应的标签增加一条style属性）
行内样式引入会将样式和结构混在一起，行内样式会失去样式表的很多优势。将html代码和css代码放在一个HTML文件中，但是css代码放在style标签内部，style标签放在head标签内部。
2.外联样式引入（作为一个标签）
在使用外联样式引入的时候必须使用link标签来引入，将link标签放在head标签内部
三.三种引入样式的优缺点对比
样式表样式 优点 缺点 使用情况 控制范围 行内样式引入 书写方便，权重高 没有实现结构和样式的分离 较少 控制一个标签 外联样式引入 部分结构和样式分离 没有彻底分离 较多 控制一个页面 内部样式引入 完全实现结构和样式分离 需要引入 最多 控制整个站点 1.行内样式表 > 内部样式表 = 外部样式表
四.css字体属性
1.font-size: 表示字体的大小
浏览器不支持12px以下的文字大小
2.font-family: Arial, Helvetica, sans-serif;
font-family用于设置字体的，可以支持多个属性:中间用,隔开---这里不做混合做匹配(从左到右依次匹配,一旦匹配成功就不再继续,当多个单词代表一个文字字体的时候,要用"引起来)
3.font-weight代表字体的粗细
字体粗细的改变以100作为倍数2.以单词(blod/lighter) */
4.font-style代表字体风格
代表文字的倾斜italic倾斜/oblique倾斜/normal 正常
5.font综合设置字体的样式
选择器 { font: font-style font-weight font-size/line-height font-family; }
在使用font属性时必须使用上面的语法顺序不可以改变顺序,各个属性之间用空格隔开。
五.文本样式
1.文本颜色
/* 1颜色 */
/* color: aqua; */
/* (1).color-name */使用颜色名称
/* (2).hex-number(16进制颜色)
(3).rgba(red,green,blue,opacity)使用rgba颜色表示，表示透明度，取值范围 (0-255 ,0-255 ,0-255, 0-1)*/
/* (4).hsla使用（hue)色相、饱和度(saturation)、亮度(lightness)来定义颜色，取值范围为(0-360,100%,100%) */
2.文本对齐方式(text--align)
取值为left、right、center、justify（两端对齐方式）
/* 一定要注意元素的性质是否为独占一行(非独占一行元素会失效) */
/* text-align: center; */
/* 文字的对齐方式为居中对其 */
3.文本修饰text-decorations
/* text-decoration: underline;文字的下划线 */
/* text-decoration: line-through;文字穿过 */
/* text-decoration: line-through;red;穿过文字颜色的设置 */
/* text-decoration--overline*/在文本上面有一条线
4.文本转换text-transform
/* text-transform: lowercase;所有单词字母都小写 */
/* text-transform: uppercase;所有单词字母都大写 */
/* text-transform: capitalize;文本中每个单词以大写字母开头 */
5.文本阴影text-shadow
/* text-shadow:h-shadow v-shadow blur color;
h-shadow水平阴影的位置.可以为负值,horizontal， X轴往右是正值
v-shadow：垂直阴影的位置.允许负值. vertical，Y轴向下是正值*/
/* blur可选,模糊的距离 */
/* color可选择,阴影的颜色 */
6.文本方向direction
ltr默认的，文本方向从左到右left to right
rtl文本方向从右到左，right to left
7.字符间距（letter-spacing）
增加字符之间的空白，使用数值表示，可以是负数，主要是用于汉字。
word-spacing:字间距
增加单词之间的空白，使用数值表示，可以是负数，只要是用于英文单词的字符距离
9.line-height行高
用于改变文字之间行与行之间的距离
六.选择器
1.元素选择器（元素标签名称--当前页面上的所有特定的元素）
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。
2.类选择器--class
类选择器使用“.”进行标识。后面紧跟类名，格式如下：
.two {
color: blue;
/* 类选择器 */
}
类选择器最大的优点就是可以为元素对象定义单独或者相同的样式
3.id选择器--id
id选择器使用“#”进行标识，后面紧跟id名称，基本的形式如下
#san {
color: blue;
/* id选择器 */
}
/* id和class有一个特点叫是否唯一？
class是可以有多个的但是id是不能有多个的 */
/* class是允许我们使用多个id获知多个id重复使用，但是在脚本阶段是会报错的 */
4.通配符选择器--*
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
*{
margin: 0px;
padding: 0px;
}
/* 清除浏览器默认样式 */
额外了解：通配符是用来干嘛的？
优点：1.清除浏览器默认样式 缺点：1.增加运行时间，延缓加载速度（页面优化问题） 浏览器运行和加载时间过长就是因为使用了大量的通配符 5.行内样式 --
七.伪类选择器 伪类选择器用“：”来表示，如:link{} a：link/未访问过的链接/
a：visited/已经访问过的链接/
a:hover/鼠标移动到链接上/
a:active/选定的链接/
写得时候不能颠倒顺序，可以按照love和hate的顺序来记忆
(2) 结构（位置）伪类选择器（CSS3）
:first-child 获取第一个子元素
在 HTML 中，文本本身是 HTML 元素的父节点，head 和 body是 HTML 元素的子节点。
:last-child 获取最后一个子元素。注意：IE8不支持X:last-child。
:nth-child(n) 选取某个元素的一个或者多个特定的子元素。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式<2n-1>（n从0开始，当表达式的值小于等于0时，将不选择任何子元素）。
:nth-last-child(n) 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始获取。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式（n从0开始）。
:first-of-type 选择特定元素的第一个子元素
:last-of-type 选择特定元素的最后一个子元素
:nth-of-type(n) 只计算父元素中指定的某种类型的子元素
:nth-last-of-type(n) 只计算父元素中指定的某种类型的子元素，从这个元素的最后一个元素开始获取
a:first-of-type{
font-size: 100px;
}
/* 先找冒号之前，再找冒号之后 */
a:last-of-type{
font-size: 50px;
}
/* 隔行变色 */
tr:nth-of-type(){
color:blue;
}
/* 奇数行变色 */
tr:nth-of-type(even){
color: red;
}
/* 偶数行变色 */
:only-child 匹配没有任何兄弟元素的元素
p:only-child{
width: 50px;
height: 50px;
background-color:red; */
/* 选中只有一个孩子的元素（没有兄弟姐妹只有自己一个人） */
:empty 现在的元素里面没有任何的内容或子节点
:empty{
width: 50px;
height: 50px;
background-color:red;
}
/* ：empty--空元素标签既没有子节点也没有内容 */
:root 匹配文档的根节点 html
:root{
background-color: black;
}
/* 根节点颜色，这个页面的颜色 */
（3）目标伪类选择器
:target选择器用于选取页面中的某个target元素，target元素是指该元素id被当作页面的超链接来使用
八.css的复合选择器
1.交集选择器
交集选择器有两个选择器构成，第一个为标签选择器，第二个为css选择器或者id选择器
注意点：选择器之间没有任何的链接符号；选择器可以是class，也可以是id，还可以是标签，但是标签需要放在前
1234
12345
p{
color: brown;
}
.one{
font-size: 10px;
}
p.one{
font-style: italic;
}
p#two.one{
background-color: blueviolet;
}
2.并集选择器
并集选择器的选择器之间是用逗号来连接的，
1234
12345
p,div{
font-weight: bolder;
}
/* 并集选择器指的是选中对应的元素，元素之间用逗号隔开，元素与元素之间没有联系 */
