CSS三种引入方式

三种引入方式分别是：行间式、内联式、外联式

---

行间式

行间式：

​ 1.在标签头部的style属性内

​ 2.属性值满足的是css语法

​ 3.属性值用key：value的形式赋值，value具有单位

​ 4.属性值之间用；隔开

内联式

​ 1.在style标签内（style标签一般作为head的子标签）

​ 2.属性值满足的是css语法

​ 3.属性值用key：value的形式赋值，value具有单位

​ 4.属性值之间用；隔开

​ 5.格式：选择器{样式块}

外联式

​ 1.在外部css文件中

​ 2.属性值满足的是css语法

​ 3.属性值用key：value的形式赋值，value具有单位

​ 4.属性值之间用；隔开

​ 5.格式：选择器{样式块}

​ 6.将html与css文件建立联系：html通过link标签链接外部css（一般写在head中）

---

三种引入的优先级

三种方式没有优先级

1.三种方式是协同布局的

2.不重复的属性一定为唯一位置的唯一值

3.重复的属性采用覆盖赋值，保留最后位置的属性值

4.行间式一定是逻辑上最后被解析的位置（js正常操作的就是行间式）

!important 会影响优先级。有！important的会在页面上显示最终效果，不管有没有行间式，如果没有行间式将根据 内联式 外联式的顺序来显示效果，在最后的将最终显示效果

---

长度及颜色单位

基本样式

长度

长度单位

pt：点，一个标准的长度单位，72pt=1in

px：像素

mm：毫米

cm：厘米

in：英寸

em：想当长度，通常 1em=16px 用于流失布局

rem 和em一样

vw ： 50%vw 表示当前浏览器宽度的50%

vh： 50%vw 表示当前浏览器高度的50%

颜色单位

rgb（0，0，0） 三个值范围为 0~255 数值或者百分比

rgba（0,0,0,0）前三个值可为像素或是百分比，最后一个为 0~1的数值表示透明度

单词：直接使用单词也可以

#FFFFFF ：六个十六进制位，每两位以整体，如果满足#AABBCC 可以简写成#abc

---

样式

字体样式

font-size ：30mm 大小

font-weight：900 字重 100~900

font-height：50mm 行高：行高设置大于等于字体大小，字体在行高中垂直居中显示

font-style：字体风格 normal | italic |oblique

font-family ： 字族 可以自定义字族

font-family: 华文彩云，微软雅黑;

当华文彩云不存在或不起作用，在选取微软雅黑

font ： 字重 风格 大小/行高 字族

文本样式

color 文本颜色

text-align： 水平居中方式 left|center|right

text-decoration 字划线 underline|line-through | overline none

letter-spacing： 字间距

word-spacing 词间距

text-indent 字体缩进

vertical-align 纵向排列

baseline：将支持valign特性的对象的内容与基线对齐 sub：垂直对齐文本的下标 super：垂直对齐文本的上标 top：将支持valign特性的对象的内容与对象顶端对齐 text-top：将支持valign特性的对象的文本与对象顶端对齐 middle：将支持valign特性的对象的内容与对象中部对齐 bottom：将支持valign特性的对象的文本与对象底端对齐 text-bottom：将支持valign特性的对象的文本与对象底端对齐

word-break 自动换行

normal：默认换行规则break-all：允许在单词内换行

背景样式

background-image：url（） 背景图片

background-repeat：平铺 no-repeat|repeat-x|repeat-y|repeat

background-color：颜色

background-position ： 定位 top|bottom|left|right|center

定位值可为方位词、百分比及固定值，值个数默认为两位(水平/垂直)，一个值时垂直默认center

background-attachment：滚动模式 scroll | fixed

---

CSS选择器

1.通配选择器(*): 匹配所有(html,body,body中的所有子标签)(具有显示效果的所有标签)

* {    border: solid;}

2.标签选择器(标签名):匹配指定标签名的对应所有标签

div {    width: 100px;    height: 100px;    background-color: red;}section {    width: 200px;    height: 200px;    background-color: yellow;}

3.类选择器(.):匹配指定类名对应的所有标签

.dd {    color:blue;    font-size: 50px;}

4.id选择器(#):匹配指定id名对应的唯一标签

html,css都是标记语言,所有对id可以进行多匹配,但js是编程语言.只能匹配到一个

#ele {    color: blue;}

总结

​ 1.通配选择器一般用于整体reset操作（reset操作：清楚系统自定义样式）

* {        margin: 0;    }

​ 2.标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局

​ 3.类选择器为布局首选(建议基本全用class选择器进行布局)

基本选择器优先级:id > class > 标签 > 通配(*)