1. css 概念
cascade style sheet
级联，层叠 样式 表格
控制网页上标签的各种样式： 颜色，字体，边框，间距…
2. css 格式
- 行内样式
每个标签加一个样式
<标签 style="多个样式"></标签>
缺点：样式代码重复
- 内部样式表
<html>
<head>
<style>样式定义</style>
</head>
</html>
可以解决样式重复
- 外部样式表
把样式信息定义在一个单独的 *.css 的文件中
<html>
<head>
<link rel="stylesheet" href="css文件路径">
</head>
</html>
3. 行内样式
<标签 style="多个样式"></标签>
3.1 颜色控制
color:颜色值
颜色值可以是英文单词：red，blue，green，yellow, black, white
也可以是红绿蓝三原色： rgb(255,0,0)
还可以是16进制的值来表示： #FF0000
background-color: 背景色
3.2 字体相关的样式
font-size 像素 n px; 字体本身大小 n em;
font-family 字体名称：如宋体，隶书 …
font-style: italic; 斜体
font-weight: bold; 粗体
3.3 对齐方式
text-align: center 居中， left 左对齐， right 右对齐
3.4 背景相关
background-image: url(背景图片路径)
background-repeat: 控制背景图片如何重复 no-repeat(不重复) repeat-x repeat-y repeat(xy方向上都重复)
background-size: 110px 缩放背景图大小
3.5 div 标签
容器标签，可以容纳其它标签
<div>
<p>
<table>
...
</div>
作用：1）页面布局， 2) 统一处理
3.6 宽高
width: 宽度
height: 高度
单位可以以像素为单位 n px, 还可以是百分比 n %(以父元素为基准)
3.7 边框
border-color: 颜色
border-style: 样式（实线等）
border-width: 宽度
可以把它们合并为一个
border: blue solid 100%;
格式： style=“样式”
前颜色 color:值 （单词, rgb(红,绿,蓝) 0~255, #红绿蓝 0~FF）
背景色 background-color: 值
背景图片 background-image: url(图片路径)
控制背景图重复 background-repeat: 值(no-repeat, repeat-x, repeat-y)
文字 font-family: 字体值 (宋体，黑体…)
文字大小 font-size: 值 (px 像素, em 以原始大小比例)
文字样式 font-style: italic; 斜体
文字粗细 font-weight: bold; 粗体
对齐方式 text-align: 值(center, left, right)
文字修饰 text-decoration: 值(line-through 贯穿线， underline 下划线)
边框 border 边框颜色 线条样式 线条宽度;
border-color: 边框颜色
border-style: 线条样式( solid 实心线)
border-width: 线条宽度
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框
4. 内间距
标签和内容之间的间隙，称为内间距
padding 可以同时控制4个方向上的内间距
padding : 10px 10px 10px 10px;
上 右 下 左
padding : 20px 5px;
上下 左右
padding : 10px
上下左右
padding-top
padding-right
padding-bottom
padding-left
5. 外间距
同级标签之间的间隙，称为外间距
margin: 10px 10px 10px 10px;
上 右 下 左
margin :10px
上下左右
margin-top
margin-right
margin-bottom
margin-left
6. 盒子模型
外间距 --》 边框 --》 内间距 --》内容
7. z-index
代表该元素在z轴的位置，数字越大越向外, 要配合绝对定位使用
position:absolute; left:x坐标（向右）; top:y坐标(向下)
绝对定位
rgba(红, 绿, 蓝, 透明度)
0~1 0 表示完全透明， 1 表示不透明
8. 样式表
重用样式
格式：
<html>
<head>
<style>
样式表
</style>
</head>
</html>
选择器 { 样式 }
首先使用选择器去匹配标签，匹配到的标签就会应用{}之中的样式
9.1 元素选择器
根据标签的名称进行匹配
例如div 是匹配页面中所有的div标签，p匹配页面中所有的p标签 …
9.2 class 选择器
根据标签的 class 属性的值进行匹配
<p class="值">
<td class="">
<input class="">
.class值 { 样式 }
9.3 id选择器
根据标签的id属性值进行匹配
<p id="值">
<td id="值">
<input id="值"> id的取值要唯一
#id值 {样式 }
9.4 父子选择器
父选择器>子选择器
最终选中的是子选择器匹配的标签，但必须满足条件：父标签要和父选择器匹配
9.5 后代选择器
祖先选择器 后代选择器
9.6 伪类选择器
:hover 当鼠标悬浮在标签之上，算匹配
:nth-child 当作为第n个孩子元素, n从1开始
:last-child 当作为最后一个孩子元素
9.7 选择器的优先级
- 当多个选择器都匹配到同一个标签时，会产生优先级问题：
!important > style行内样式 > #id > .class > 元素
!important 用来提升某个样式的优先级, 写法：
样式 !important
-
子标签可以从父标签继承某个样式， 例如color
子标签自己定义了同名样式，那么它会覆盖父标签的样式 -
同优先级别的选择器，后定义的会覆盖前面定义的
10. 在网页之间重用样式
需要用到外部样式表， 可以把选择器，样式的定义放在一个 *.css 的文件当中（样式表文件）
引入外部的样式表：
<link rel="stylesheet" href="路径/css文件名">
好处：可以更大程度地在多个网页间重用样式， 让网站的风格统一
内部样式表可以实现本网页特殊的样式，采用覆盖的方法，可以覆盖掉外部样式表的样式
1613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
