CSS三种引入方式 常用样式 CSS选择器
CSS三种引入方式
三种引入方式分别是：行间式、内联式、外联式
行间式
行间式：
1.在标签头部的style属性内
2.属性值满足的是css语法
3.属性值用key：value的形式赋值，value具有单位
4.属性值之间用；隔开
<div style="width: 100px; height: 100px; background-color: red"></div>
内联式
1.在style标签内（style标签一般作为head的子标签）
2.属性值满足的是css语法
3.属性值用key：value的形式赋值，value具有单位
4.属性值之间用；隔开
5.格式：选择器{样式块}
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: brown;
}
</style>
外联式
1.在外部css文件中
2.属性值满足的是css语法
3.属性值用key：value的形式赋值，value具有单位
4.属性值之间用；隔开
5.格式：选择器{样式块}
6.将html与css文件建立联系：html通过link标签链接外部css（一般写在head中）
<link rel="stylesheet" type="text/css" href="01.css">
三种引入的优先级
三种方式没有优先级
1.三种方式是协同布局的
2.不重复的属性一定为唯一位置的唯一值
3.重复的属性采用覆盖赋值，保留最后位置的属性值
4.行间式一定是逻辑上最后被解析的位置（js正常操作的就是行间式）
!important 会影响优先级。有！important的会在页面上显示最终效果，不管有没有行间式，如果没有行间式将根据 内联式 外联式的顺序来显示效果，在最后的将最终显示效果
长度及颜色单位
基本样式
<head>
<style type="text/css">
body {
width: 200px;
height:200px;
background-color: yellow;
}
</style>
</head>
长度
长度单位
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 > 标签 > 通配(*)
