什么是CSS
CSS的全称是Cascading Style Sheets，层叠样式表
它用来控制HTML标签的样式，在美化网页中起到非常重要的作用
CSS的编写格式是键值对形式的，比如
color: red;
background-color: blue;
font-size: 20px;
冒号:左边的是属性名，冒号:右边的属性值
CSS有3种书写形式
行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">
页内样式：在本网页的style标签中书写
<style>
body {
color: red;
}
</style>
外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link rel="stylesheet" href="index.css">
CSS的两大重点
属性
通过属性的复杂叠加才能做出漂亮的网页
选择器
通过选择器找到对应的标签设置样式
CSS选择器 – 标签选择器
选择器的作用
选择对应的标签，为之添加样式
标签选择器
根据标签名找到标签
标签选择器.png
CSS选择器 – 类选择器
类选择器的格式
.类名
类选择器.png
CSS选择器 – id选择器
id选择器的格式
id
id选择器.png
CSS选择器 – 并列选择器
并列选择器.png
CSS选择器 – 复合选择器
复合选择器.png
CSS选择器 – 后代选择器
后代选择器.png
CSS选择器 – 直接后代选择器
直接后代选择器.png
CSS选择器 – 相邻兄弟选择器
相邻兄弟选择器.png
CSS选择器 – 属性选择器
属性选择器.png
属性选择器+.png
属性选择器++.png
CSS选择器 – 伪类
伪类.png
CSS选择器 – 伪元素
伪元素.png
CSS选择器 – 选择器优先级
选择器优先级.png
优先级排序
important> 内联 >id > 类 > 标签 | 伪类 | 属性选择 > 伪元素> 通配符 > 继承
HTML标签类型
HTML有N多标签，根据显示的类型，主要可以分为3大类
块级标签
独占一行的标签
能随时设置宽度和高度（比如div、p、h1、h2、ul、li）
行内标签（内联标签）
多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸（比如span、a、label）
行内-块级标签（内联-块级标签）
多个行内-块级标签可以显示在同一行
能随时设置宽度和高度（比如input、button）
修改标签的显示类型
CSS中有个display属性，能修改标签的显示类型
none：隐藏标签
block：让标签变为块级标签
inline：让标签变为行内标签
inline-block：让标签变为行内-块级标签（内联-块级标签）
CSS属性
CSS有N多属性，根据继承性，主要可以分为2大类
可继承属性
父标签的属性值会传递给子标签
一般是文字控制属性
不可继承属性
父标签的属性值不能传递给子标签
一般是区块控制属性
CSS属性 – 可继承属性（红色表示常用）
所有标签可继承
visibility、cursor
内联标签可继承
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
块级标签可继承
text-indent、text-align
列表标签可继承
list-style、list-style-type、list-style-position、list-style-image
CSS属性 – 不可继承属性（红色表示常用）
pdisplay、margin、border、padding、background
pheight、min-height、max-height、width、min-width、max-width
poverflow、position、left、right、top、bottom、z-index
pfloat、clear
ptable-layout、vertical-align
ppage-break-after、page-bread-before
punicode-bidi
盒子模型
网页上的每一个标签都是一个盒子
每个盒子都有四个属性
内容（content）
盒子里装的东西
网页中通常是指文字和图片
填充（padding，内边距）
怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料
边框（border）：盒子本身
边界（margin，外边距）
盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出
盒子.png
标准盒子模型
标准盒子模型.png
IE盒子模型
IE盒子模型.png
内容（content）–属性
属性.png
填充（padding，内边距）–属性
属性+.png
属性++.png
边框（border）–属性
属性+++.png
边界（margin，外边距）–属性
属性++++.png
边界（margin，外边距）–属性
属性++++++.png
CSS3新增特性
RGBA透明度
RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道，可用于设置透明值
块阴影与圆角阴影
box-shadow text-shadow
圆角
border-radius
边框图片
border-image
形变
transform: none | <transform-function>[<transform-fuction>]
CSS布局
默认情况下，所有的网页标签都在标准流布局中
从上到下，从左到右
脱离标准流的方法有
float属性
position属性 和 left、right、top、bottom属性
CSS布局 – float属性
float属性的常用取值有
left：脱离标准流，浮动在父标签的最左边
right：脱离标准流，浮动在父标签的最右边
CSS布局 – position属性
position属性.png
网友评论