2020-09-15

CSS

CSS = CascadingStyleSheets
层叠样式表
1.介绍
层叠样式表，用于修饰页面元素

层叠
    多个样式修饰同一个元素
样式表(声明块)
    {
        color:"red"
    }

2.注释
/* */

3.html中如何应用css
1) style属性
2) style标签
3) 外部引入
link
@import

4.link和@import的区别?
1) 所属范围
link是html标签，在加载文档的同时加载样式
@import属于css语法,只能导入样式
2) 加载顺序
页面加载的时候，link标签引入的样式同时被加载
@import引入的样式，在页面加载完毕后再被加载
3) 兼容性
@import需要IE5+
link不存在兼容性问题

5.选择器
基本选择器
id
class
标签
逗号
组合
*

层次选择器
    子代
    后代
    相邻兄弟 +
    之后所有兄弟 ~

属性选择器
    [attribute]
        找到所有具有该属性名的标签, 设置属性
    [attribute=value]
        找到所有属性值为value的标签, 设置属性
    [attribute^=value]
        找到所有以value开头的标签, 无论有没有被-隔开
    [attribute$=value]
        找到所有以value结尾的标签
    [attribute~=value]
        找到拥有独立value的标签, value不可以和其他属性连接
    [attribute*=value]
        只要包含value就可以找到

伪元素选择器
    ::after
    ::before

伪类选择器
    与子元素相关
        :first-child
        :last-child
        :nth-child()
    与状态相关的
        :link  		未访问的链接
		:hover 		鼠标悬浮时的元素
		:active 	激活链接
		:visited 	已访问的链接
		:focus		聚焦时

6.选择器优先级
1. !important
优先级最高，不推荐
2. 特性值
1000
内联style属性
100
id
10
类名选择器、伪类选择器、属性选择器
1
标签选择器、伪元素选择器
3. 代码顺序
如果样式具有相同的特性值，则看代码顺序，样式离元素近的优先级更高

7.字体样式，文本样式，列表样式
字体样式
font-size
font-weight
font-family
font-style
color

文本样式
    text-align
    text-indent
    text-decoration
    text-shadow
    tetx-tranform   
    color

列表样式
    list-style-type
    list-style-image
    list-style-position

    速写：
        list-style

8.css单位
1) 颜色
关键字
十六进制
rgb
rgba
2) 单位
绝对单位
px
相对单位
em
1em = 当前元素上的font-size的值
font-size:16px;
1em = 16px;
2em = 32px;
rem 相对于根元素html
html{font-size:14px}
1rem = 14px;
%
相对于父元素

9.网络字体
1) webfont http://www.xiazaiziti.com/tag/ttf?btwaf=17865710
1. 下载对应的字体，如此处的ttf字体
2. 将下载好的字体文件放到对应的目录
3. 在style标签中引入
@font-face {
font-family: ‘随意’;
src: url(’./HYXinHaiXingKaiW.ttf’);
}
4. 在需要使用字体的文本的标签加上font-family即可
.test {
font-family:‘随意’;
}

2) 字体图标库iconfont、fontawesome
	iconfont
		1.加购 -> 添加至项目 -> 生成在线链接
		2.复制在线css代码到icon.css(自己新建)
		3.使用<i class="iconfont 图标名"></i>
	
	fontawesome
		1. 在bootcdn中搜索fontawesome，引入link到页面
		2. 使用<i class="fa fa-user-circle"></i>
		或者
		1.下载离线fontawesome
		2.引入离线包（所有）
		3.使用<i class="fa fa-user-circle"></i>

10.盒子模型
1) 属性
width
height
margin
margin-top
margin-right
margin-bottom
margin-left
margin
margin:10px; 上右下左
margin:0 10px; 上下为0，左右10px
margin:0 5px 10px; 上0，左右5px，下10px
margin:0 5px 10px 15px; 上右下左

	border
		border-width 	边框宽度
		border-style 	边框线类型
			solid	实线
			dotted	点
			dashed	虚线
			double	双实线
		border-color 	边框线颜色
		border-radius	边框圆角

		速写
			border:1px solid #333;
	padding
		padding-top
		padding-right
		padding-bottom
		padding-left

	box-shadow

	background-color	背景颜色
	background-image	背景图片
	background-repeat 	背景重复方式
		repeat-x
		repeat-y
		no-repeat
	background-size		背景图片大小
		background-size:100% 100%;

	一个盒子的组成
		width、padding、border、margin

2) 分类
    盒子可以通过box-sizing来设置分类
	1. 内容盒子【W3C标准盒子】【默认】
		box-sizing:content-box;

		width = 内容宽
		所占的宽 = width + padding + border + margin

	2. 边框盒子【IE盒子】
		box-sizing:border-box;

		width = 内容宽 + padding + border
		所占宽 = width + margin