3、css基础
css基础
1、css三种引入方式
1、行间式
<div style="width: 100px; height: 100px; background-color: red"></div>
2、内联式
<head> <style> div { width: 100px; height: 100px; background-color: red; } </style> </head>
3、外联式
file: zero.css
div {
width: 100px;
height: 100px;
background-color: red;
}
file: zero.html <head> <link rel="stylesheet" type="text/css" href="css/zero.css" /> </head>
4、三种方式的优先级
1、三种方式可以同时存在，协同完成布局
2、三种方式之间其实没有优先级，按照代码的解析顺序确定，执行后是覆盖效果
3、总结：就是与样式表的解析顺序有关
注意：同时存在时，操作同一对象同一属性，才会出现冲突
2、样式与长度颜色
1、基本样式
file: zero.html <head> <link rel="stylesheet" type="text/css" href="css/zero.css" /> </head>
2、长度
• px：像素（pixel），屏幕上显示的最小单位，用于网页设计，直观方便
• mm：毫米
• cm：厘米
• in：英寸
• pt：点（point），一个标准的长度单位，1pt=1/72in，用于印刷业，非常简单易用
• em：相当长度，通常1em=16px，应用于流式布局
3、颜色
• rgb（）：三个值可为【0-255】数值或百分比，以逗号相隔（r：red，g：green，b：blue）
• rgba（）：前三个值可为像素或是百分比，最后一个为【0,1】数值，以逗号相隔（r：red，g：green，b：blue，a：alpha）
• hsl（）：第一值为【0,360】数值，后二个值可为百分比，以逗号相隔（h：hue，s：saturation，l：lightness）
• hsla（）：第一个值为【0,360】数值，中间二个值可为百分比，最后一个为【0,1】数值，以逗号相隔（h：hue，s：saturation，l：lightness，a：alpha）
• AABBCC：六个十六进制位，每两位一整体，分别代表red，green，blue，可以简写#abc
3、常用式样
1、字体样式
• font-family：字体族科，多值用于备用，以逗号隔开
font-family: "STSong", "Arial";
• ont-size：字体大小
• ont-style：字体风格 normal，italic斜体，oblique斜体
• font-weight：字体重量 normal，bold，lighter，100-900，字体的粗细
• line-height：行高
• font：字重 风格 大小/行高 字族，每种设置以空格隔开
2、文本样式
• color：颜色
• text-align：横向排列
left 居左 | center 居中 | right 居右
• vertical-align：纵向排列
baseline：将支持valign特性的对象的内容与基线对齐
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：将支持valign特性的对象的内容与对象顶端对齐
text-top：将支持valign特性的对象的文本与对象顶端对齐
middle：将支持valign特性的对象的内容与对象中部对齐
bottom：将支持valign特性的对象的文本与对象底端对齐
text-bottom：将支持valign特性的对象的文本与对象顶端对齐
• text-indent：字体缩进
• text-decoration：字划线
• text-spacing：字间距
• word-spacing：词间距
• word-break：自动换行
normal：默认换行规则
break-all：允许在单词内换行
3、背景样式
• background-color：颜色
• background-image：图片
background-image: url(bg.png);
• background-position：定位
top | bottom | left | right | center
注意：定位值可为方位词，百分比及固定值，值个数默认为两位（水平/垂直），一个值时垂直默认center
• background-attachment：滚动模式
scroll | fixed
注意：父级设置属性，子集内容超出父级范围
4、css选择器
1、基础选择器
1、通配选择器
* {
border: solid;
}
匹配文档中所有标签：通常指html、body及body中所有显示类的标签
2、标签选择器
div {
background-color: yellow;
}
匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span
3、类选择器
.red { color: red; } 匹配文档中所有拥有class属性且属性值为red的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配
4、id选择器
#div { text-align: center; } 匹配文档中所有拥有id属性且属性值为div的标签：如<div id="div"></div> <section id="div"></section>均会被匹配
2、基础选择器优先级
• 基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
• 基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
• 基础选择器优先级：id选择器>类选择器>标签选择器>通配选择器
注意：id选择器必须保证单文档的唯一性
3、组合选择器
1、群组选择器
div, span, .red, #div {
color: red;
}
• 一次性控制多个选择器
• 选择器之间以逗号隔开，每一个选择器位均可以为任意合法选择器或选择器组合
2、子代（后代）选择器
子代选择器用>连接
body > div {
color: red;
}
后代选择器用空格连接
.sup .sub {
color: red;
}
• 一次性控制一个选择器（逻辑最后的那个选择器），前置位的选择器为修饰性选择器
• 每一个选择器位均可以为任意合法选择器或选择器组合
• 子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系
3、相邻（兄弟）选择器
相邻选择器用+连接
.d1 + .d2 {
color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
color: red;
}
• 一次性控制一个选择器（逻辑最后的那个选择器），前置位的选择器为修饰性选择器
• 每一个选择器位均可以为任意合法选择器或选择器组合
• 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系
4、交集选择器
<div class="d" id="dd"></div> div.d#dd { color: red; } <div class="d1 d2 d3"></div> .d1.d2.d3 { color: red; }
4、组合选择器优先级
• 组合选择器优先级与权值相关，权值为权重和
• 权重对应关系
选择器 权重
通配 1
标签 10
类、属性 100
id 1000
!important 10000
• 选择器权值比较，只关心权重和，不关心选择器位置
• 不同级别的选择器间不具备可比性：一个类选择器优先级高于n个标签选择器的任意组合
5、属性选择器
[attr]：匹配拥有attr属性的标签
[attr=val]：匹配拥有attr属性，属性值为val的标签
[attr^=val]：匹配拥有attr属性，属性值以val开头的标签
[attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
[attr*=val]：匹配拥有attr属性，属性值包含val的标签
注意：属性选择器权重等价于类
5、伪类选择器
1、a标签四大伪类
：link：未访问状态
：hover：悬浮状态
：active：活跃状态
：visited：已访问状态
2、内容伪类
：before：内容之前
：after：内容之后
:before, :after {
content: "ctn";
}
3、索引伪类
：nth-child（n）：位置优先，再匹配类型
：nth-of-type（n）：类型优先，再匹配位置
值可以为位置数，也可以为2n，3n。。。代表2的倍数，3的倍数，且位置数从1开始
4、取反伪类
：not（selector）：对selector进行取反
