CSS基础语法和盒模型
CSS简介
Cascading Style Sheet 层叠样式表 用于给HTML标签添加样式
CSS3是CSS的最新版本 增加了大量的样式/动画/3D特效以及移动端特性
前端三剑客 HTML/CSS/JS 结构/样式/行为
HTML 与 CSS 之间的绑定 -> 选择器
CSS的书写位置
①内嵌式
内嵌在HTML结构中 : 标签对
②外链式
将CSS单独存为.css文件,通过标签引入
③导入式
<style></style>标签对中使用@import 引入
导入式引入的样式表,不会等待CSS文件加载完毕,而是会立即渲染HTML结构,所以会存在将只有结构没有样式网页的展现在用户眼前的可能
④行内式 直接给标签添加style属性
CSS的基本语法
选择器 {
key : value;
}
ps:最后一条样式可以不写分号
CSS选择器
CSS2.1即存在
标签选择器
元素选择器,类型选择器,将选中页面上所有该标签 通常用于标签初始化
标签名 {
key : value;
}
id选择器
id是标签的唯一标识
id命名规则
只能由字母/数字/下划线/短横构成
不能以数字开头
区分大小写(习惯上一般为小写字母)
同一个页面不能有相同id的标签
#id{
key: value;
}
class选择器
class 类名
命名规则与id相同
多个标签可以为相同类名
同一个标签可以同时属于多个类
.class{
key:value
}
原子类 符合样式的命名,如color-green , 文字颜色为绿色
复合选择器
后代选择器
.box .spec 定位为类名为box的标签内部的类名为spec的标签
交集选择器
li.spec 标签为li,类名为spec的元素
并集选择器
ul,ol 同时选择所有ul和ol标签
伪类
a标签的四个特殊状态 :
a:link 没有被访问的链接
a:visited 已经被采访过的链接
a:hover 正被鼠标悬停的链接
a:active 正被激活的链接(按下未松开)
CSS3新增
元素关系选择器
子选择器 div>p div标签的子标签p(从ie7开始兼容)
相邻兄弟选择器 img+p 图片后紧跟着的段落将被选中(ie7开始兼容)
通用兄弟选择器 p~span p元素之后的所有同层级span元素(ie7开始兼容)
序号选择器
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(3) 第3个子元素
:nth-of-type(3) 第3个某类型子元素
:nth-last-child(3) 倒数第3个子元素
:nth-last-of-type(3) 倒数第3个某类型子元素
属性选择器(ie9兼容)
举例
img[alt] 具有alt属性的img标签
img[alt = '故宫'] 具有alt属性,且属性值为故宫的img标签
img[alt^ = '故宫'] alt属性以北京开头
img[alt$ = '夜景'] alt属性以夜景结尾
img[alt* = '美'] alt属性含有美字
img[alt~ = '手机拍摄'] alt属性中有空格隔开的手机拍摄字样
img[alt | = '参赛作品'] alt属性以参赛作品-开头
CSS3新增伪类
选中某元素,用户赋予的状态
:empty 选择空标签 即标签中无内容
:focus 选择当前获得焦点的表单元素
:enabled 选择当前有效的表单元素
:disabled 选择当前无效的表单元素
:checked 选择当前已经勾选的单选按钮或者复选框
:root 选择根元素 ,即 <html> 标签
伪元素
无中生有,创造出的元素
::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素
content属性 元素内容,必须存在的属性
::after 与before类似,但是为最后一个子元素
::selection 用于文档中被用户高亮的部分(鼠标圈选部分)
::first-letter 选中某元素中(块元素)第一行的第一个字母
::first-line 选中某元素中(块元素)第一行的全部文字
层叠性和选择器权重计算
层叠性 : 多个选择器可以同时作用同一个标签,效果叠加
选择器权重 : !important > id > class > 标签
文本与字体属性
color属性 设置文本内容的前景色
表示方法:英语单词/十六进制/rgb()/rgba()
ps:rgba从ie9开始兼容
font-size属性 设置文本内容的字体大小 单位通常为px 像素
font-weight属性 设置文本内容字体的粗细程度
normal 正常粗细 等价于400/bold 加粗 等价于700/lighter 更细 大多数中文字体不支持/bolder 更粗 大多数中文此题不支持
font-style属性 设置文本内容字体风格
normal 取消倾斜 比如将i标签,em标签包裹的字体设置为不倾斜/italic 倾斜/oblique 用常规字体模拟倾斜
text-decoration属性 设置文本的修饰线外观
none 没有修饰线/underline 下划线/line-through 删除线
font-family 字体家族 用于设置字体格式 如 楷体等等
font属性 font-style,font-weight,font-size,line-height,font-family 属性的合写
font : italic bold 20px/1.5 Arial,'微软雅黑' 倾斜 加粗 字号/行高 字体,备用字体
扩展:
字体文件,需要同时有 eot/woff2/woff/ttf/svg五种文件
@font-face 拥有字体文件以后,定义字体
阿里巴巴普惠体 定义好的@font-face 注意:阿里巴巴普惠体示例中的文字就是改字体的所有文字
段落和行相关属性
text-indent属性 用于定义首行文本内容之前的缩进量
举例:text-indent : 2em 首行缩进两个字符
line-height属性 行高
举例:line-height : 30px/2/200% 30px的行高/字号的2倍/两倍
设置单行文本垂直居中: 行高 = 盒子高度
设置文本水平居中: text-align:center
继承性:设置祖先相关的属性,后代所有标签中生效
具有继承性的属性:
color
font-
list-
text-
line-
注意:继承的情况下,选择器权重计算失效,遵循就近原则
盒模型
所有HTML标签都可以看成矩形盒子,由width/height/padding/border构成,称为 盒模型
width/height 为 内容的宽度/高度 padding 为内容与边框的距离 border 为边框
盒子总宽度 = width + 左右padding + 左右border
高度同理
padding 属性 内边距 四个方向
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左
合写 padding : 10px 20px 30px 40px 上右下左
padding : 10px 20px 30px 上 左右 下
padding : 10px 20px 上下 左右
margin 属性 外边距 与padding类似
竖直方向的margin由塌陷现象,小的margin会塌陷,从而margin不叠加,只以大值为准
有默认margin的元素 body/ul/p…
盒子的水平居中 通过设置margin -> margin : 0 auto 可以实现
box-sizing 属性
添加 box-sizing:border-box后,盒子的width和height就会变成盒子实际宽高,padding/border内缩,不再外扩
display 属性
block 转为块元素
inline 转为行内元素
inline-block 转为行内块元素
none 将元素隐藏,彻底放弃位置 // visibility : hidden 也可以隐藏元素,但是仍旧持有元素位置
行内元素 可以并排显示,不能设置宽高,width自动收缩
块元素 不能并排显示,可以设置宽高,不设置width自动撑满
行内块元素 既能够设置宽高,同时也能并排显示
``
提供CDN加速