一、什么是css?
css（cascading style sheet）层叠样式表，是一个用于修饰文档（可以是标记语言HTML,也可以是XML）的语言，可以将文档以更优雅的形式呈现给用户。（css不能脱离html而单独存在）
二、语法
1、属性的设置
属性名和属性值之间用冒号分隔
多对属性之间用分号分割
最后一对属性可以不加分号
（1、）style
<div style="width:100px;height:100px;backgroundcolor:red"></div>
（2、）其他
代码块
选择器{
width:100px;
height:100px;
backgroundcolor:red
}
2、注释
（1、）写法
/* 注释内容* /
（2、）作用：增加代码的可读性，有利于代码的维护和管理。
（3、）注意
注释不能嵌套使用
3、速记写法
简写形式
padding-top:10px//上边距10px
padding-bottom:10px//下边距10px
padding-right:10px//右边距10px
padding-left:10px//左编剧10px
简写为：
padding:10px;//上下左右均为10px
padding:10px 20px;//上下为10px,左右为20px
padding:10px 20px 30px;//上10px,左右20px，下30px
padding:10px 20px 30px 40px;//上10px,右20px，下30px，左40px
margin-top
margin-left
margin-right
margin-bottom
注：margin简写形式同padding
margin：0 auto//设置给具有宽度的块级元素时，元素可以在父元素中自动居中
border属性简写：
border：1px solid red;//表示上下左右四个边框的样式都为：宽1px,实线，红色
也可以分别设置，如：
border-top-width:1px;//上边框宽1px
border-top-style:solid;//上边框为实线
border-top-color:red;//上边框颜色为红色
三、css如何作用到html上？
1、行内样式
写在标签内部的style属性上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 100px;height:100px;background-color: lightcoral;">
</div>
</body>
</html>
2、内嵌式/内部样式表
在head内部使用style标签设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3、外部样式表（建议使用）
当前html文件外部，创建一个后缀名为.css文件。
3.1>link标签
建议使用link标签
优先加载html
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div></div>
</body>
</html>
css代码：（改代码为style.css文件）
div{
width: 100px;
height: 100px;
background-color: aliceblue;
}
3.2>@import属性
< style >
@import url('style.css');
< /style >
注： 优先加载css
优先级：
行内样式>内嵌式=外部引入
结论：
就近原则：哪一个样式离html近，谁的优先级就高。
四、选择器
标签选择器：
通过标签名称选择一类元素
div{}
span{}
id选择器：
通过id属性选择一个元素
类选择器：
class：通过class属性选择一类元素
.one相当于class='one'。
普遍选择器：
* 选择所有
在style属性里面设置：
*{
margin：0px;
padding:0px;
}
可解决外边距合并的问题
后代选择器：
空格：选择所有的后代元素
>：选择直接子元素
兄弟选择器：
+：选择当前元素之后的一个兄弟元素
~：选择当前元素之后的所有兄弟元素
组合选择器：
div #one .class
div#one
div.one
多选择器：
div,p,span,#one,.one{
}
属性选择器：
根据元素的一类属性选择一类元素
[id]:具有id属性的
[id='one']:具有id属性，属性值为one的
[class~='one']:具有class属性，并且属性值之一为one的元素
[class^='o']:具有class属性，并且属性值以o开头
[class$='o']:具有class属性，并且属性值以o结尾
[class*='o']:具有class属性，并且属性值中包含o字符的
伪类选择器：
div class="one"
.one
:伪类名称
:first-child(作为父元素的第一个孩子)
:last-child（作为父元素的最后一个孩子）
:only-child:（只有一个孩子）
:nth-child(num/odd/even)
:first-of-type
:first-of-type
a:
:link :未点击状态
:hover：悬停状态
:active:鼠标按下状态
:visited:点击之后的状态
link->visited->hover->active
伪元素选择器：
::伪元素名称
::first-letter
::first-line
::before
content:''/url()
::after
::selection
五、选择器优先级
！import://不计入优先级的计算，优先级最高
建议少用
特殊值的计算：
特性值越高，优先级越高；
特性值相同，谁靠近html，谁的优先级越高
写在style属性内部：
1000
id选择器：
100
类/伪类/属性：
10
标签/伪元素：
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{/* number=1 */
width: 200px;
height: 200px;
background-color: blue;
}
#one{/* number=100 */
background-color: red
}
.one{/* number=10 */
background-color: pink
}
[id='one']{/* number=10 */
background-color: orange
}
div.one{/* number=1+10=11 */
background-color: purple
}
div#one{/* number=1+100=101 */
background-color: green
}
body div.one{/* number=1+1+10=12 */
background-color: yellow
}
</style>
</head>
<body>
<div class="one" id="one"></div>
</body>
</html>
六、继承
1、有些默认继承父元素
有些不继承
2、属性
1）inheit继承父元素的样式
2）initial 不继承，应用浏览器的默认样式
七、尺寸+颜色+单位
尺寸：1>绝对单位
px
2>相对单位;
百分比
1em~1个M的宽度（16px）
颜色：
1、关键字
red
blue
2、rgb(r,g,b)
r:red
g:green
b:blue
0-255
3、rgba(r,g,b,a)
a:apcaity；透明度
0-1：
0：完全透明
1：完全不透明
4、16进制颜色值
#
#ff0000
#fff:白色
#ccc:灰色
…
八、文本样式
✔ color：为字体指定颜色
✔ font-size：为字体指定大小
✔ font-style：用于打开和关闭斜体文本（子元素默认继承）
normal:[默认]，正常字体，关闭斜体
italic:斜体
oblique:模拟斜体
✔ font-weight：为字体设置粗细程度
normal:[默认]，正常，400
bold:加粗字体，700
lighter:设置当前元素字体比父元素更细
bolder:设置当前元素字体比父元素更粗
100-900:数值类型，越大越粗
✔ text-align：文字排列方式（子元素默认继承）
left:左对齐
center:居中
right:右对齐
✔ text-decoration：设置或取消文本修饰
none 取消所有文本修饰
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
✔ text-transform：设置或取消字体改变
none:防止任何改变
uppercase:将文本转化为大写
lowercase:将文本转化为小写
capitalize:将所有单词第一个字母转化为大写
full-width:转化为类似于一个等宽字体
✔ text-shadow：设置或取消文本阴影
语法：
text-shadow: h-shadow v-shadow blur color;
取值:
none 取消所有阴影
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色。参阅 CSS 颜色值
✔ overflow：溢出处理
hidden:超出部分隐藏
auto:超出产生滚动条
scroll:滚动条
✔ font-family:为字体指定特殊字体，浏览器只会使用可以访问到的字体
web-font：网络字体
1、下载字体文件
2、声明字体
安装
3、引用
字体图标：
1、font-awesome
1、下载框架压缩包
2、在html中引入外部css文件
3、在行内元素上，设置class='fa fa-xxx'
2、icon-font
1、下载压缩包
2、在html中引入外部css文件
3、在行内元素上，设置class=‘iconfont’
✔ letter-spacing:设置字符之间的间距
✔ word-spacing:设置单词之间的间距
✔ width:
min-width:最小宽度
max-width:最大宽度
✔height:
min-height:最小高度
max-height:最大高度
✔ 设置元素的隐藏和显示
display：
none:元素的隐藏
不但隐藏元素本身，还会隐藏元素所占据的空间
block:元素的显示
visibility:
hidden:元素的隐藏
只隐藏元素，不隐藏元素所占用的空间
visible:元素的显示
✔ 表格样式：
border-collapse:collpase;//表格边框合并（该属性设置给table)
caption-side:bottom//表格标题位置（该属性设置给table)
✔ 列表样式：
list-style-type:设置列表选项标志类型
none:取消标志
disc:实心圆
circle:空心圆
square:实心正方形
decimal:
lower-roman:
upper-roman:
decimal-leading-zero:
list-style-position:设置标题选项出现的位置
outside:列表选项标志出现在主块框的外部
inside:列表选项标志出现在主块框的内部
list-style-imge:url('./xxx.png')
line-height:垂直居中
text-align:水平居中
八、盒子
1、盒子的组合
盒子=内容+内边距+边框+外边距
盒子的高度=内容+内边距+边框
盒子所占空间高度=内容+内边距+边框+外边距
2、盒子分类
1、标准盒子/w3c盒子
默认都是标准盒子
特点：
设置的宽高属性-》设置给元素内容的
box-sizing:content-box;
2、边框盒子/怪异盒子
box-sizing:border-box
特点：
宽高属性-》盒子：内容+内边距+边框
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
