CSS介绍及选择器

1. CSS

1.1 定义

Cascading Style Sheets： 层叠样式表、级联样式表

1.2 css引入方法

            1.行内样式，在开始标签 ，style属性写样式

            2.内联样式，在head标签中写style标签，样式写在style标签中

            3.外联样式，新建css文件，通过link方式引入css文件

推荐书写形式：外部 > 内部 > 行内  （优雅可读耦合性）

<div style="color: blue;">行内样式</div>

<style>
        div {
            color: red;
        }
        span {
            color: blue;
        }
</style>
<div>内联样式</div>
<span>我是span</span>

<!-- rel: 外部引入的文件和当前文件的关系 ，stylesheet： 样式表 -->
<link rel="stylesheet" href="./03-css引入.css">

引入方式优先级：行内样式 >   内联 / 外联（就近原则，后来者居上）

1.3 字体样式

1. 字体大小：font-size

        浏览器默认字体大小为16px，浏览器支持得到最小12px；px： 像素

2. 字体粗细：font-weight

        英文： normal，默认值 ；bold，bolder加粗 ，lighter变细

        数字： 100- 900，100的整数倍，400==normal ，700==bold

3. 字体风格: font-family

        从前往后，支持第一位有的字体，英文字体放在中文字体之前。

        英文字体不支持中文，

4. 字体样式：font-style

取值： 倾斜italic、oblique

5.综合设置 顺序不好记，一般不建议

font: font-style  font-weight  font-size/line-height  font-family;

1.4 文本样式

1. 文本修饰符 text-decoration

overline 上划线  underline 下划线  line-through 删除线

2.转换：text-transform

capitalize:首字母大写 uppercase: 大写 lowercase: 小写

3. 文本缩进：text-indent 针对块级元素

单位

em：相对于自己的font-size的值的大小，自己没有：先继承父级元素 最后为浏览器默认值

rem：移动端html，相对于html的font-size的值的大小

px：相对于电脑屏幕

4. 文本水平方向对齐方式：text-align

left: 默认值  center: 居中 rigth: 居右

单行文本垂直居中 : line-height ==  height

5. 字符间距

letter-spacing：汉字之间的距离

word-spacing：英文字母间的距离

6. 文字阴影 text-shadow

x轴阴影距离  y轴阴影距离  阴影模糊距离  阴影颜色

7. 文本颜色 color

英文（red , blue）、十六进制数（#ccc #001123）、rgb、rgba（0（完全透明）-1(完全不透明)）

2 选择器

2.1 基本选择器

1. 标签选择器 eg: div span p img ...

选中所有满足的标签，缺少差异化设置

2. class类选择器 eg: .box .first .second .....

            1）定义：在开始标签写class属性

            2）使用方式：在style中 ， . + 类名

            3) 类名命名规则：最好见名知意，大小写英文、数字、_ 、$，不能以数字开头

3. id选择器 eg: #box #first #outer....

唯一性

            1）定义：在开始标签写id属性

            2）使用方式：在style中 ， # + id名

            3）命名规则：最好见名知意，大小写英文、数字、_ 、$，不能以数字开头

总结：id和class区别： 类似身份证号(id) / 名字(class)

4. 多类名

通过空格分隔多个类名，提取公有的样式

 <div class="font head child">多类名写法</div>

5. 通配符：*

选中所有标签

6. 选择器优先级

!important > 行内样式> ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

2.2 伪类选择器

1. 链接伪类选择器

a:link  链接未点击过的状态

a:visited   链接点击过的状态

a:hover  鼠标悬浮在链接上时

a:active   鼠标抓住链接时

2. 位置伪类选择器

:nth-child(n)  第几个子元素

:last-child 最后一个子元素

:nth-child(n)  第n个子元素

:nth-last-child(n)  倒数第n个子元素

eg：span:first-child { }   第一个子元素 并且 元素span  1.找位置  2.看选择器类型

过滤类型：1.过滤不同类型  2.看位置

:first-of-type 特定元素的第一个子元素

:last-of-type 特定元素的最后一个子元素

:nth-of-type(n) 特定元素的第n个子元素

:nth-last-of-type(n)  特定元素的倒数第n个子元素

2.3 复合选择器

交集选择器：挨着写 eg:div:nth-child(1){ }

并集选择器：通过逗号隔开  eg:.head, #head, span, input { } 

兄弟选择器：+ ：下一个兄弟   ~ ：下所有兄弟

子代选择器：下一代 父选择器 > 子选择器

后代选择器：表示所有的后代  通过空格表示