CSS

前端三大要素：
html：木偶
css：化妆
javascript：动态展示

什么是css？

1.cascading style sheets
层叠样式表
2.语法
1.属性名和属性值之间使用:隔开
2.多对属性之间使用;隔开
3.最后一对属性可以不加分号

<style>
	选择器{
		width:100px;
		height:100px;
	}
	{
		width:200px;
	}
</style>
<div style="width:100px;height:100px;"></div>


速记写法：
	简写形式：
		div：10px
	盒子：内容区+内边距+边框+外边距margin

	padding-left:10px;
	padding-right:10px;
	padidng-top:10px;
	padding-bottom:10px;

简写：
padding:10px;//上下左右均为10px
padding:10px 20px;//上下 左右
padding:10px 20px 30px;//上 左右 下
padding:10px 20px 30px 40px;//上 右 下 左

margin-left:
-->
margin:

border:1px solid red;
border-width:1px;
	border-top-width
	border-left-width
	border-right-width
	border-bottom-width
border-style
border-color

3.注释
1.注释写法
/注释内容/
2.注释作用
解释说明
便于代码的维护和管理
3.注释能否嵌套使用
注释不能嵌套使用

		<!--注释
			<!--inner-->
		内容-->
		/*
			/*
				*/
		*/

html中引入css的方式

1.行内样式
style属性
2.内联样式
style标签

3.外部引入
创建一个以.css为后缀名的文件
link标签：优先解析css
不建议使用：@import url()：优先解析html

引入方式的优先级：
行内样式>内联/外部引入
就近原则：哪一个样式更靠近元素，那一个样式的优先级更高

内联样式
外部link标签：实际开发

CSS选择器

标签选择器 div p span…
类选择器 用点表示
ID选择器 用#表示
普遍选择器 *
后代选择器 div(空格) 选择的是所有的后代元素
子代选择器 div> 选择的是直接孩子元素
选择下一个兄弟元素 div+
选择之后所有的兄弟元素 div~
组合选择器 div#one,div.class,ul
多选择器 div#one
属性选择器 [class] 选择具有class属性的元素
[class=“one”] 选择具有class属性且属限值为one的元素
[class~=“one”] 选择具有属性且其中一个属性值为one的元素
[class^=“r”] 选择具有class属性且属性值以r开头的元素
[class$=“t”] 选择具有class属性且属性值以t结尾的元素
[class*=“e”] 选择具有class属性且属性值中包含e的元素
伪类选择器 :only-child 选中独生子元素
:first-child 选中第一个孩子元素
:last-child 选中最后一个孩子元素
:nth-child(even/odd/number) 选中作为该元素的偶数个/奇数个/第几个孩子元素
:nth-last-child() 选中作为该元素的倒数第几个孩子元素
:first-of-type 选中作为每一个类型元素的第一个孩子
:last-of-type 选中作为每一个类型元素中的最后一个孩子
:nth-of-type() 选中作为每一个类型元素中的第几个孩子
:nth-last-of-type() 选中作为每一个类型元素中的倒数第几个孩子
伪元素选择器 ::selection 改变用户选中的文字 eg：在用户选中时将字体变成红色
input::selection{
color: red;
}
::after 在id为text的div后加你好!
div#text::after{
content: ‘你好!’;
}
::before
::first-letter 选中第一个文本字符
::first-line 选中第一行文本

选择器优先级

根据特性值进行比较，特性值越大，优先级越高
!important:不计入特性值，优先级最高,不建议使用

style属性：1000
id选择器：100
类选择器/伪类选择器/属性选择器：10
元素选择器/伪元素选择器：1

设置样式

颜色单位：
1.关键字
2.rgb(r,g,b);0-255之间
3.rgba(r,g,b,a);a:0-1取值；0代表完全透明 1代表完全不透明
4.16进制的颜色值
#fff
#ccc
color属性默认继承父元素属性
默认不继承父元素属性 color:initial
继承父元素height属性 height:inherit

尺寸单位：
1.px：绝对单位
2.em 相对单位 1em=16px
3.百分比 相对单位

占父元素的100%

font-style 字体样式：
normal 正常字体
italic 斜体 </ i>
font-weight:bold 加粗
text-transform: uppercase 将文本转换为大写
lowercase 将文本转换为小写
capitalize 将所有单词首字母转换为大写
full-width 转换为类似于一个等宽字体
font-family:“黑体”（本机自带字体 电脑/用户/Fonts）
font-size:40px 修改字体大小
center 水平居中
text-indent 文字距离边框距离
text-shadow: 10px(x轴) 20px(Y轴) 5px(模糊量) 设置文字阴影
下划线
xxx删除线
{
text-decoration: none; 取消所以划线
text-decoration: underline 为文本添加下划线
text-decoration: overline 为文本添加上划线
text-decoration: line-through 为文本添加删除线
}

加载网络字体：
1.下载字体
2.声明字体
3.使用字体

字体图标：
fontawesome:

iconfont

index.html:
	<link rel="stylesheet" href="outer.css">

	<div class='one'></div>
outer.css:
	.one{
		background:red
	}