目录
CSS入门（一）
样式表类型
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性
内嵌样式
当单个文件需要特别样式时，就可以使用内嵌样式表。你可以在 head 部分通过 <style> 标签定义内部样式表
外部样式
把已有的内嵌样式表代码（不含<style>和</style>）剪切到新建的文本文件中，保存文件到HTML文档同一文件夹下（文件名叫test.css），在head标签内添加link标签：
<link href="test.css" rel="stylesheet" type="text/css" />
选择器
1.元素选择器
可以使用标签名来选出指定名称的元素(标签)，如：p、div、img、a等，甚至还包括 html 标签。
特别的选择符 “*” ，它可以代表任意标签
若需要将整个网页中所有的文字字号设置为12px，那可以写成： * { font-size : 12px; }
2.id选择器
我们可以为标签指定一个ID，如：<p id=”p1”></p>，这样在内联样式表或外联样式表中即可使用 #p1 选中该元素
3.类选择器
我们可以把HTML标签分为多个类别（类名自己定义），然后在标签中使用class属性说明该标签属于哪个分类
注意样式表中，类名最前面有个句点”.”
一个 class 属性中可以有多个样式类名, 使用空格分隔即可, 如: class="classA classB"
4.伪类选择器
对于诸如超链接 <a> 这样的标签，根据状态不同，它可能显示不同的显示外观。例如下面4个图分别是超链接处于普通链接状态（link）、鼠标处于其上方（hover）、鼠标按住（active）和已访问过（visited）4个不同状态
a:link { color : black; text-decoration:none;}
a:hover { color : red; text-decoration:underline;}
a:active { color : green; }
a:visited { color : blue; }
5.属性选择器
根据元素标签中的属性来进行选择
样式表:
a[title]{ color: red;}
a[href="http://www.cctv.com"]{color: green;}
a[href="http://www.cctv.com"][title="cctv"]{color: blue;}
HTML:
<a href="http://www.163.com" title="163">超链接1</a>
<a href="http://www.cctv.com">超链接2</a>
<a href="http://www.cctv.com" title="中央电视台">超链接3</a>
<a href="http://www.cctv.com" title="cctv">超链接4</a>
结果:
超链接1为红色，超链接2、3为绿色，超链接4为蓝色 注意：
1. 若”[ ]”中只有属性名（如第1行）则表示元素存在该属性即匹配；
2. ”[ ]”中既有属性名，又有值（如第2行），则表示元素必须存在该属性，且值为指定值。；
3. 若有多个”[]”，表示多个属性选择必须同时匹配
6.组合选择器
前述几种基本选择符还可以组合使用，根据组合形式不同，表示不同的选择方式
(1) 直接结合：例如: p.classA表示选择<p>标签中 class="classA" 的元素。
(2) 逗号分隔：表示并列关系。例如： p, span 表示选择 <p> 和 <span>
(3) 空格分隔：表示选择后代。例如： p span 表示选择 <p> 的后代中的 <span>
(4) “>”分隔：表示选择 “直接儿子”。例如：p > span 表示选择 <p> 的直接儿子中的 <span>
(5) “+”分隔：表示选择相邻的兄弟元素。例如：p + span表示选择 <p> 的兄弟元素中其后紧邻的 <span>。
| # | 样式表 | HTML |
| 1 | p.classA {color : red;} | <p>段落1</p> <span>标签</span> <p class=”classA”>段落1</p> |
| 2 | p, span {color : red;} | <p>段落</p> <span>标签</span> <div>DIV里的文字</div> |
| 3 | p span {color : red;} | <span>标签</span> <p><span>标签</span></p> <p><a><span>标签</span></a></p> |
| 4 | p > span {color : red;} | <span>标签</span> <p><span>标签</span></p> <p><a><span>标签</span></a></p> |
| 5 | li + li {color : red;} | <ul> <li>第1项</li> <li>第2项</li> <li>第3项</li> </ul> |
常用属性
1.background
background-color : red;
背景为红色，支持多种颜色表示法, 如RGB表示法:#FF0000或#F00
background-image : url(“bg.jpg”);
设置背景图片为bg.jpg（相对路径表示） 设置了背景图，背景色就看不到了，除非背景图片失效
background-repeat : repeat-x;
背景图只在X方向（水平方向）上重复，还有其它值 ( repeat-y, no-repeat )
background-attachment : fixed;
背景图固定，不随滚动条滚动
background-position : 5px 10px;
设置背景图相对于元素左上角向右偏移5px, 向下偏移10px。可取负值。
2.font*
font-size : 12px;
设置文字大小为12像素 (请查阅其它资料了解其它单位)
font-family : 宋体;
设置文字字体为”宋体”。应避免使用非主流字体，原因此处暂略，请自行思考
font-weight : bold;
文字加粗
3.text*
text-align : center;
文字水平居中
text-decoration : underline;
文字加下划线
text-indent : 24px;
首行缩进24像素
4.color*
color : red;
文字为红色，支持多种颜色表示法, 如RGB表示法:#FF0000或#F00
5.line-height
line-height : 24px;
每行文字的行高为24像素
6.border*
以 border 开头的这一组修饰元素的边框。 边框分上、右、下、左四个方向，每个方向的边框可分别修饰”型”、”色”、”宽”。
| 样式 | 含义 |
| border-left-color: red; border-left-style: solid; border-left-width:2px; | 设置元素左边框为2px宽的红色, 实线边框 |
| border-left : 2px solid red; | 设置元素左边框为2像素宽的红色实线边 (上例的简写形式) |
| border : 1px dotted red; | 设置元素四周边框为1px宽的红色虚线边 |
| border-width : 2px 5px 10px 15px; border : 1px solid red; | 四周边框均为红色实线边，上、右、下、左边框宽度分别为2px、5px、10px、15px |
小结：
(1) 第2行的代码覆盖了第1行中关于宽度的说明
(2) 四个方向的边框可属性可一起简写说明，中间以空格分隔，顺序为从”上”开始顺时针方向一周
| border : 1px solid red; border-width : 5px 10px; | 四周边框均为红色实线边，上下边为5px宽，左右边为10px. |
| border : 1px solid red; border-width : 5px 10px 15px; | 等同于 border-width : 5px 10px 15px 10px; |
7.margin*
margin指的是元素边框之外的空白
8.padding*
padding则指元素边框之内与内容之间的空白。
其他样式属性
| width:50px; height:100px; | 定义元素宽50px，高100px |
| cursor: pointer; | 鼠标处于元素上方时显示为手指形状，类似处于超链接上方的效果 |
| display | display: block; 设置元素以块标签方式显示 display: inline; 元素以行内标签方式显示 display: none; 隐藏元素。 |
| visibility: hidden; | 隐藏元素 与display: none的区别在于： |
| position: absolute; | 设置元素的定位方式为绝对定位。 |
| left:50px; | 设置元素左外边距边界与其父容器左边界之间的偏移为50px left、top、right、bottom 4个属性的效果与position属性的取值有很大关系 |
| z-index:999; | 设置元素的叠放层次，z-index值越大，就越靠上层。 |
| float:left; | 元素向左浮动 |
| clear:both; | 清除浮动效果, |
| overflow:scroll; | 若元素中的内容超出了元素本身的大小，则显示滚动条。 |
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
