1. CSS简介
CSS 是 Cascading Style Sheet 的缩写。层叠样式表。
用途：用于(增强)控制网页外观效果并允许将样式信息与网页内容分离的一种标记性语言。
2. CSS常用的属性
color：设置字体颜色（前景色）。
background-color：设置元素的背景色。
font-size：字体大小
font-weight：bold|100-900|lighter 文字加粗
text-decoration：underline|overline|line-through|none 文字装饰效果
text-indent：首行缩进 2em
line-height：文字的行高
height：元素的高度
width：元素的宽度
text-align：元素的水平对齐方式 left|right|center
3. 盒子模型
l border：边框
相关属性：border-left、border-right、border-top、border-bottom
常见写法：border:1px solid red; border-bottom:1px dashed green; border-right:none;
l margin：外边距
相关属性：margin-left、margin-right、margin-top、margin-bottom
常见写法：margin:10px; margin-bottom:10px; margin:10px 0px; margin:10px 20px 30px 40px;(上右下左)
l padding：内边距
相关属性：padding-left、padding-right、padding-top、padding-bottom
常见写法：padding:10px; padding-bottom:10px;
4. CSS代码的书写位置
1>.行内样式：直接在html元素的style属性中书写CSS代码
<div style="css代码"></div>
2>.内嵌样式：在网页文件的head标记中，title标记后书写CSS代码
| <head> <title></title> <style type="text/css"> css代码 </style> </head> |
3>.外部样式：将CSS代码单独写到一个样式表文件中（***.css），然后再将css文件导入到网页中
| <head> <title></title> <link type="text/css" rel="stylesheet" href="***.css" /> </head> |
5. CSS选择符的几种用法
1>.ID选择符 语法：#selectorName{...}
#box1{border:1px solid red;}
2>.类选择符 语法：.selectorName{...} class属性
.box{border:1px solid green;}
3>.标记选择符 语法：selectorName{...}
div{color:red;border:1px solid green;}
4>.组合选择符 语法：selector1,selector2,...{...}
.box,#mybox,span{border:1px solid red;}
.box{border:1px solid red;}
#mybox{border:1px solid red;}
span{border:1px solid red;}
5>.包含选择符 语法：selector1 selecotr2{...}
div span{font-size:20px;} .box span{font-size:20px;} #yourbox .box{font-size:20px;}
6>.通配符选择符 语法：*{...}
*{font-size:20px;}
6. 网页中颜色的几种用法
1>.拥有颜色名称的颜色。red、blue、black、white、gray、purple...
2>.WEB安全色。# + 6位（0-9A-F） #FFFFFF #000000 #A927C0 #FFF #081 #FFCA66
3>.rgb颜色值。rgb(0,255,100) rgb(100,100, 100) 每一位都介于0-255之间
7. CSS属性
1>.font-family 字体 宋体|微软雅黑
2>.border-collapse 边框收缩 separate|collapse 给table写样式时使用
3>.list-style
list-style-type：none|disc|circle|square|upper-alpha|lower-alpha|lower-roman|upper-roman|decimal
list-style-image
list-style-position
4>.float: left|right 浮动
注意：浮动使用完毕后记得清除浮动，否则会对后续元素造成影响。
clear: left|right|both 清除浮动
8. 伪类
:hover 鼠标悬浮到元素上时应用的效果 tr:hover{background-color:#aaccff;}
:link 未访问过的超链接
:visited 已经访问过的超链接的样式
:active 被激活（鼠标按下）时的样式
9. CSS常用属性
1>.background-image 设置背景图片
background-image:url("images/xxx.jpg");
2>.background-repeat 设置背景图片的重复
repeat(水平垂直方向重复)|no-repeat(不重复)|repeat-x(水平方向重复)|repeat-y(垂直方向重复)
3>.background-position 设置背景图片的坐标
background-position:x y; background-position:20px 50px;
4>.position 定位
static | absolute | fixed | relative
注意：当position设置为absolute、fixed或者relative后，top|bottom|left|right会被激活。
5>.z-index 设置z轴的大小
z-index:999;
6>.display 元素的呈现方式
inline：行内样式，无法设置宽度、高度
block：块，每次在新的一行显示
inline-block：行内块，不会换行，同时可以设置高度和宽度
none：隐藏元素，使元素不可见（并且不占据空间）。
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
