CSS（Cascading Style Sheet） 层叠样式表
语法
选择器{
声明语句
}
例：
h{
color:red;
font-size:16px;
}
注释
/*这是单行注释*/
/*
这是多行注释
这是多行注释
*/
引入方式
1.行内引入
<h1 style="color:red;">这是个标题</h1>
2.内嵌
写在html的head里
<style>
h1{
color:red;
}
<style>
3.外链
写在.css文件里，在head里用link引入
<link rel="stylesheet" href="style.css">
选择器
基础选择器
- 元素选择器 例:p{ color:red}
- id选择器 例： #myText{color:red} 用#+id的形式 在html元素里写id="myText"
- 类选择器 例：.myClass{color:red} 用.+class的形式 在html元素里写class="myClass"
- 通用选择器 例 ： *{color:red} *可以匹配所有元素
关系选择器
- 后代选择器：用空格表示 例：
.block p{color:green}
会选中block类元素里面的所有p元素 - 子元素选择器: 用符号>
.block>p{color:blue}
会选中block类元素的子元素(只能选中下一级的p，下下级的p不能选中) - 兄弟选择器1：用符号 ~
p~div{width:200px;}
选中p后面所有div兄弟元素 - 兄弟选择器2:用符号+
p+div{width:300px;}
选中p后面一个div兄弟元素
伪类选择器
例:a:hover{color:blue} 在鼠标悬浮时会变蓝
状态伪类
- :link a元素未被访问前
- :visited a元素被访问后
- :hover 鼠标悬停时
- :active 鼠标按下时
结构伪类
- :first-child 选中第一个
- :last-child 选中最后一个
- :nth-child(n) 顺序选中n
- :nth-last-child(n) 倒序选中n
n可以是数字，表示选中第几个，编号从1开始（不是从0开始）
n可以是关键字(odd,even) 表示奇数和偶数
n可以是公式，比如2n+1:表示选中1,3,5,7,9,.....
伪元素选择器
注意，伪元素用双冒号(以前都是但冒号，所以有些老的网页是单冒号)
- ::first-letter 第一个字
- ::first-line 第一行
- ::before 内容之前插入一个元素
- ::after 内容之后插入一个元素
属性选择器
- [attribute] 用于选取带有指定属性的元素
- [attribute=value] 用于选取带有指定属性和值的元素
- [attribute^=value] 匹配属性值以指定值开头的每个元素
- [attribute$=value] 匹配属性值以指定值结尾的每个元素
- [attribute*=value] 匹配属性值中包含指定值的每个元素
- [attribute~=value] 用于选取属性值中包含指定词汇的元素
选择器分组
有相同属性的选择器都可以写在一起,用逗号分割
例：
h1,div,span{
color:#333;
font-family:"微软雅黑";
}
单位
- px:像素
- %:百分比,根据父对象为基准。ps：对font-size设置百分比，是以浏览器默认字体16px为基准的。所有浏览器默认字体都是16px
- em:对于font-size，1em表示和父对象字体一样，2em表示字体大小为父对象2倍。对于长度属性，em相当于该元素的字体大小，如果该元素没有字体属性，则往上查找。
- rem: 大小相对于根元素html的字体大小
- vw：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一
- vh：基于视窗的高度计算，1vh 等于视窗高度的百分之一
- vmin：基于vw和vh中的最小值来计算，1vmin 等于最小值的百分之一
- vmax：基于vw和vh中的最大值来计算，1vmax 等于最大值的百分之一
- calc计算
.box {
height: calc(50vh - 20px); /* 50% 的视窗高度减掉20px */
width: calc(100% / 3); /* 三分之一的父容器宽度 */
background: red;
}
盒模型
盒模型
- margin 外边距
- border 边框
- padding 内边距
- content 内容区域
复合属性有top right bottom left 分别对应四个方向
比如border-top 上面的边框
margin-left 坐标的外边距
box-sizing
挺重要的一个属性
- content-box 默认 width和height属性是内容区域大小
- border-box width和height属性是边框区域大小
- inherit 继承自父元素
border属性
border-width
border-style
border-color
简写:
.px1{
border:1px solid #ccc
}
上下左右的简写顺序:
.box-1{margin:10px 20px 30px 40px}
/*四个参数时，参数对应上，右，下，左*/
.box-2{margin:10px 20px 30px}
/*三个参数时，参数对应 上，左右，下*/
.box-3{margin:10px 20px}
/*两个参数时，参数对应 上下，左右*/
.box-4{margin:10px}
/*一个参数时，表示四条边都是*/
隐藏元素的方式
- display:none 相当于游戏引擎的active=false
- visibility:hidden 相当于游戏引擎的visible=false
- overflow:auto 裁剪滚动显示里面的东西
- overflow:hidden 裁剪里面的内容
样式的继承和层叠
有些样式会被子元素继承，比如字体颜色大小等。有些样式不能被继承，比如边框。
层叠权重：自己声明的样式>浏览器自带样式>继承样式
自定义样式优先级：style>id选择器>类选择器>元素选择器>*通用选择器
初始化
由于各个浏览器默认样式不统一，最好用一个初始化css来统一初始化样式
初始化用的css:https://necolas.github.io/normalize.css/6.0.0/normalize.css
网友评论