<h3>CSS基础知识</h3>
<h5>一、用处</h5>
在前端开发中，CSS只有一个作用，就是用来<strong>修改样式</strong>
<h5>二、格式</h5>
外链样式表
<link href="mystyle.css" rel="stylesheet" type="text/css">
内部样式表
<style type="text/css">
标签名/id名/类名 {
属性:值;
}
</style>
内嵌样式表
<p style="color: sienna;margin-left: 20px;">
<h6>注意：</h6>
- style标签必须写在head标签的开始标签和结束标签之间
- style标签中的type属性其实可以不用写，默认就是
type="text/css" - 设置样式时必须按照固定格式来设置，注意标点符号，不能省略
<h5>三、 文字属性</h5>
-
font-style（fs+tab）：规定文字的<strong>样式</strong> -
font-weight（fw+tab）：规定文字的<strong>粗细</strong>
3.font-size/line-height（fz/lh+tab）：规定文字的<strong>大小/行高</strong> -
font-family（ff+tab）：规定文字的<strong>字体</strong> - 简写：
font：style weight size/lineheight family
注意属性值之间用空格隔开，其中前两个可以不写，默认值是normal，顺序也可以颠倒，但是后两个必须填写且位置不能变
<h6>注意：</h6>
- 文字的粗细可以用英文单词赋值，也可以是100-900<strong>整百</strong>的数字，100最细，900最粗
- 文字的字体如果是中文需要用<strong>" "</strong>或者<strong>' '</strong>包起来。字体必须是电脑里已安装的字体，如果设置的字体不存在，系统会使用默认的字体（宋体）来显示，字体可以填写多个用来设置备选方案
- 由于中文字体中包含英文字体，英文字体中却不包含中文，为了中文和英文字体不一样，可以把英文字体写在前面，中文字体写在后面，然后用<strong>，</strong>隔开
- 企业开发中常用字体：
中文：宋体、黑体、微软雅黑
英文：Times New Roman、Arial
并不是名称是英文就一定是英文字体，取决于它是否能够处理中文
<h5>四、文本属性</h5>
-
text-decoration(td+tab)：规定文本的装饰 -
text-align(ta+tab)：规定文本的对齐方式 -
text-indent(ti+tab)：规定文本首行缩进（2em）
<h5>五、颜色属性</h5>
color=red：英文单词赋值
color=rgb(255,0,0)：三原色赋值，分别代表红绿蓝，0代表不发光，255代表最亮，值越大越亮，注意用逗号隔开
color=rgba(255,0,0,0)：三原色赋值的同时a控制透明度，取值范围0-1，0为完全透明，1为不透明，注意用逗号隔开
color=#FF0000：十六进制颜色赋值，FF=R，00=G，00=B
十六进制转十进制：十六进制数的第一位*16+第二位数=十进制数
color=#F00：十六进制颜色赋值的缩写，每两位的值都是一样的就可以简写为一个数。
<h5>六、标签选择器</h5>
- 根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性
- 格式：
标签名{ } - 标签选择器选中的是当前界面中所有的标签，不管隐藏的多深，但是不能单独选中某一个标签，
- 只要是html中的标签都可以作为便签选择器
<h5>七、id选择器</h5>
- 根据指定的id名称找到对应的标签，然后设置属性
- 格式：
#id名{ } - 每个html标签都有一个id属性：
id=" " - id相当于人的身份证号码，在当前界面中不能重复
- id名称是有规范的，只能由字母，数字和下划线组成。不能是html标签名，而且数字不能开头
- 在企业开发中一般情况下仅仅是为了样式我们不会使用id选择器，id选择器是留给JS用的
<h5>八、类选择器</h5>
- 根据指定的类名称找到对应的标签，然后设置属性
- 格式：
.类名{ } - 每个html标签都有一个class属性：
class=" " - 同一界面中class的名称是可以重复的
- 类名的命名规范和id名的命名规则一样
- 一个标签可以绑定多个类名，两个类名之间必须用空格隔开：
class="类名1 类名2"
<h5>九、后代选择器</h5>
- 根据指定的名称找到所有的后代标签，然后设置属性
- 格式：
名称1 名称2{ } - 两个名称之间必须用空格隔开，可以无限延续下去
- 后代不仅仅指儿子，也包括孙子/重孙等，只要是在父标签内的指定标签都会被设置
- 两个名称可以是标签名，id名和类名
<h5>十、子元素选择器</h5>
- 根据指定的名称找到特定的直接子元素，然后设置属性
- 格式：
名称1>名称2{ } - 两个名称之间必须用 > 隔开，不能有空格，可以无限延续下去
- 子元素选择器只会找到指定直接的子标签
- 两个名称可以是标签名，id名和类名
<h5>十一、交集选择器</h5>
- 给所有选择器选中的标签中相交的那部分标签设置属性
- 格式：
名称1名称2{ } - 两个名称之间没有任何符号
- 作为了解，企业开发少用
- 两个名称可以是标签名，id名和类名
<h5>十二、并集选择器</h5>
- 给所有选择器选中的标签设置属性
- 格式：
名称1,名称2{ } - 两个名称之间必须用 , 隔开，不能有空格，可以无限延续下去
- 两个名称可以是标签名，id名和类名
<h5>十三、兄弟选择器</h5>
<h6>相邻兄弟选择器</h6>
- 给指定名称选择器后面紧跟着的标签设置属性
- 格式：
名称1+名称2{ } - 两个名称之间必须用 + 链接，不能有空格
- 两个名称可以是标签名，id名和类名
<h6>通用兄弟选择器</h6>
- 给指定名称选择器后面的所有的指定名称标签设置属性
- 格式：
名称1~名称2{ } - 两个名称之间必须用 ~ 链接，不能有空格
- 两个名称可以是标签名，id名和类名
<h5>十四、序选择器</h5>
css3中新增的选择器最具代表性的就是序选择器
<h6>同级别的第几个</h6>
名称:first-child{ }：选中同级别中的第一个标签
名称:last-child{ }：选中同级别中的最后一个标签
名称:nth-child(x){ }：选中同级别中的第x个标签
名称:nth-last-child(x){ }：选中同级别中的倒数第x个标签
名称:only-child{ }：选中父元素中指定的只有唯一的一个的子元素标签，只能有一个标签
名称:nth-child(odd){ }：选中同级别中所有的奇数标签
名称:nth-child(even){ }：选中同级别中所有的偶数标签
名称:nth-child(xn+y){ }：n为计数器，从0开始计数。x和y为指定数字，当x为2，y为0时即为所有偶数项，当x为2，y为1时即为所有奇数项，以此类推，选中同级别中满足计算结果的指定标签
注意：不区分类型
<h6>同级别同类型的第几个</h6>
名称:first-of-type{ }：选中同级别中同类型的第一个标签
名称:last-of-type{ }：选中同级别中同类型的最后一个标签
名称:nth-of-type(x){ }：选中同级别中同类型的第x个标签
名称:nth-last-of-type(x){ }：选中同级别中同类型的倒数第x个标签
名称:only-of-type{ }：选中父元素中指定的同一个类型的标签，可以有多个标签但只能有一个指定的类型标签
名称:nth-of-type(odd){ }：选中同级别中同类型的所有的奇数标签
名称:nth-of-type(even){ }：选中同级别中同类型的所有的偶数标签
名称:nth-of-type(xn+y){ }：选中同级别中同类型的满足计算结果的指定标签
<h5>十五、属性选择器</h5>
名称[attribute]：根据指定的属性名称找到对应的标签，然后设置属性
名称[attribute=value]：根据指定的属性名称并且属性取值等于value，找到对应的标签，然后设置属性。主要用于区分input属性
名称[attribute^=value]：根据指定的属性名称并且属性取值开头value，找到对应的标签，然后设置属性。
名称[attribute$=value]：根据指定的属性名称并且属性取值结尾等于value，找到对应的标签，然后设置属性。
名称[attribute*=value]：根据指定的属性名称并且属性取值包含value，找到对应的标签，然后设置属性。
<h5>十六、通配符选择器</h5>
- 设置当前页面上所有的标签的属性
- 格式：
* { 属性：值 } - 由于通配符选择器会遍历一遍页面中的所有标签，所以当标签过多时，性能就会变差。
