1.CSS: 指层叠样式表。文件的后缀名为：.css
<div></div>
标签 ：是一个块级标签，可以理解为一个盒子，盒子里可以写独立的内容。
优先级：行内样式 高于 内部样式 高于 外部样式 还有就近原则
2.css的三种使用方式：样式优先级：就近原则，那个样式最后设置，那个样式起用。
行内样式(w3c不推荐用)：将样式写在标签中。eg:<div style="color:red;">今天大家很开心，为什么<span>开心</span>我也不知道</div>.
内部样式：在html的head标签中写<style type="text/css" >div{color:#0000FF;}</style>.
外部样式(w3c推荐用)：单独建一个css文件，再在html的头部导入<link rel="stylesheet" type="text/css" href="1.css">。
3.css的语法：选择器{属性名1：属性值1；属性名2：属性值2；…}
4.css的选择器：表示选中某个范围设置样式。选择器优先级：id选择器>类选择器>标签选择器
class= “名字” 点.类的名字
id选择器 以#号开头 同一个html文件中不能有相同的名字
background-color:#0000FF; 背景颜色
（1）标签选择器：标签名{属性名1：属性值1；属性名2：属性值2；...}
例子：
<div>1.dfeofoefoeojf</div>
div{
color:#00FF00;
}
(2)类选择器：.类名{属性名1：属性值1；属性名2：属性值2；...},<标签名 class="类名"></标签名>
例子：
<h1 class="r1">一级标题</h1>
.r1{
color:#FF0000;
}
(3)id选择器：在同一个html文件中不能有相同的id名。
eg:<h6 id="d1">六级标题</h6>
#d1{
color:#9900FF;
}
(4)通配选择器：*表示通配页面上所有的标签。
例子
*{
background-color:#0000FF;
}
（5）群组选择器（并集选择器）:选择器1，选择器2{属性名1：属性值1；属性名2：属性值2；…}。
例子：
div,p{
color:#FFFFFF;
}
<style type="text/css">
/*群组选择器： 组合的选择器*/
h1,.yy,#head{
color: red;
}
</style>
</head>
<body>
<h1>这是标题标签</h1>
<p class="yy">这是个段落</p>
<div id="head">这是个容器</div>
（6）后代选择器：选择器1 选择器2{属性名1：属性值1；属性名2：属性值2；…}以空格隔开
例子：
<div>今天大家很开心，为什么<span>开心</span>我也不知道</div>
div span{
font-size:36px;
}
<style type="text/css">
/*后代选择器 ：ol a{} 子标签孙标签等都起作用 */
ol a{
color: red;
}
</style>
(7)子选择器：选择器1>选择器2{属性名1：属性值1；属性名2：属性值2；…} 后代选择器包含子选择器
例子：
<ul>
<li>昨晚吃鸡了</li>
<li>网页写完了</li>
<li>要到女孩子的QQ了</li>
</ul>
ul>li{
color:#FF00FF;
}
<style type="text/css">
/*子代选择器 ：ol>a{} 仅仅子标签起作用 */
ol>a{
color: red;
}
</style>
</head>
<body>
<ol>
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
<a>D</a>
</ol>
</body>
</html>
(8)相邻兄弟选择器：选择器1+选择器2{属性名1：属性值1；属性名2：属性值2；…}
指的是指定的这个元素，紧跟着最相邻的这个元素
<style type="text/css">
/*相邻兄弟选择器 ：a+a{} 相邻兄弟起作用 */
#head+li{
color: red;
}
</style>
</head>
<body>
<ol>
<li id="head"><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
<a>D</a>
</ol>
例2
<style type="text/css">
td+td{
color: blue;
}
</style>
</head>
<body>
<table border="" cellspacing="" cellpadding="">
<tr><th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr><td>zs</td>
<td>30</td>
<td>男</td>
</tr>
<tr><td>ls</td>
<td>40</td>
<td>女</td>
</tr>
（9）属性选择器：选择器[属性名1][属性名2]{属性名1：属性值1；属性名2：属性值2；…}
img[src]{
border:8px solid red; //border 加边框，solid是实线
}
<style type="text/css">
/*属性选择器： 应用上属性的选择器 div[属性]*/
div[title='aa'][name]{
color: red;
}
</style>
.....
<div title="aa" name="aaa">这是个容器1</div>
<div title="aa">这是个容器2</div>
（10）锚伪类选择器。
<style type="text/css">
/*三原色： #rgb red green blue
* #f00: 纯红色
#FF0000: 纯红色 更精确-组合的颜色更多
* */
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #FFFF00} /* 选定的链接 */
</style>
</head>
<body>
<h1><a href="#">锚伪类选择器</a></h1>
</body>
5.超链接的伪类样式：
a:link 未单击前
a:visited 单击后的状态
a:hover 鼠标移动到链接上
a:active 鼠标单击时的状态
6.字体属性：
font-family:宋体，隶书…
font-size:字体大小
font-style:是否倾斜
font-weight:粗细
color:字体颜色
7.文本属性：
letter-spacing(字母间隔)
text-decoration（划线修饰）–》用它来去掉超链接的下划线 overline 上划线
text-align（文本对齐方式）
text-indent(文本缩进)
line-height（行高）
去掉超链接的下划线
a{
text-decoration:none;
}
8.背景属性
background-color
background-image 图片很多张平铺
background-repeat 只显示一张图片
值 描述
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
background-position
可能的值
值 描述
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
如果您仅规定了一个关键词，那么第二个值将是"center"。
默认值：0% 0%。
x% y%
第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值，另一个值将是 50%。
xpos ypos
第一个值是水平位置，第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果您仅规定了一个值，另一个值将是50%。
您可以混合使用 % 和 position 值。
background:图片 平铺方式;
9.列表属性：
list-style-type
list-style-image
10.边框：border:1px solid red;
11.内边距：元素到边框之间的距离。padding
12.外边距：元素的边框与其他元素之间的距离。margin
盒子模型的宽度：元素的宽度+左内边距+右内边距+左边框+右边框。
盒子模型的高度：元素的高度+上内边距+下内边距+上边框+下边框。
13.定位：标准文档流（static）,相对定位(relative)，绝对定位(absolute)，固定定位(fixed)。
（1）相对定位：相对于原有的位置发生改变，并且保留原有的空间位置。
eg:position:relative;
left:100px;
top:50px;
(2)绝对定位:相对于他有position属性的父级元素进行定位，如果父级元素没有postion定位，那么就找父级的 父级，直到向上找到position定位为止，如果他向上找不到position定位，那么就以最外层的body进行定 位。并且绝对定位不会保留原有的位置空间。
eg:position:absolute;
top:100px;
(3)固定定位：相对浏览器的原点固定位置的。(有部分浏览器不支持)
eg:z-index:1;
position:fixed;
top:200px;
left:500px;
14.浮动：float:left/right; 将块级元素变为行级元素。浮动的元素脱离了标准文档流。
注：浮动的元素之后，如果还有元素，一定要清除浮动，不然会对后面元素有影响。
15.清除浮动：clear:both;
小结：（1）整体模块水平居中：margin:0px auto;
（2）文本水平居中：text-align：center;
(3)文本垂直居中：line-height,vertical-align ;
布局：（1）整体布局用：div+css
（2）div+无序列表(ul-li)：作导航菜单
（3）div+自定义列表（dl-dt-dd）:图文混排
(4)form+table:规整的表单。
6144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
