CSS Cascading Style Sheet层叠样式表
一个HTML网页
结构 样式 行为
CSS引入方式：
1、行内样式 <标签 style=”样式规则rules”></标签
2、内嵌样式
<style type=”text/css” >
选择器{样式规则}
</style>
3、引入样式
<style type=”text/css”>
@import url（样式文件名）
</style>
4、外部样式
<link rel=”styelsheet” type=”text/css” href=>
选择器分类
1、 标签选择器
2、 类选择器
3、 id选择器
4、 层级选择器
5、 分组选择器
6、 组合选择器
7、 通用选择器
8、 伪类选择器
a链接的四个状态
a:link{} a链接正常状态
a:visited{} a链接访问后的状态
a:hover{} a链接鼠标县停其上的状态
a:active{} 鼠标a链接按下的状态
组合选择器：
例1：
div .box{} 表示选择div标签下的类为box的所有的元素
div.box{} 表示选择class属性为 box的div.
示例：
<style type="text/css">
。box{border:2px solid red;}
。box1{background:yellow;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="box box1">
<span>span1</span>
<span>span2</span>
</div>
尺寸属性：
width: px 百分比
height: px 百分比
字体属性：
color:
font-size:
font-family:
font-style:
font-weight:
font-transform:
letter-spacing: 设置字间隔
word-spacing: 设置词间隔
line-height: 设置行高
font: 复合属性
font-size与font-family是必须的 font-weight与font-style必须位于前面
文本属性：
text-decoration: underline、over-line、line-through
text-align: 主用用于文字或被包含的行内元素的水平对齐方式
vertical-align: 主用于tr或td
text-indent:
边框属性：
border-width:
border-style:
border-color:
注意：border-Width＜span style="">与border-style是属性 border-color默认是黑色
border：复合属性
border-left-width:
border-left-style:
border-left-color:
border-left: 复合属性
背景属性：
background-color:
background-image:
url（图片url）
background-position:
具体值 20px
位置名： left、center、top、right、center、bottom
background-repeat: no-repeat、repeat-x、repeat-y
bakcground-attachment: fixed scroll
background: 复合属性
background:red url（images/bgpic.jpg） 10px 20px no-repeat scroll
！important > 行内样式 > id选择器 > 类选择器 > 标签选择器
行内样式 > 内部样式 > 外部样式
important重要的意思（IE低版本不兼容）
由于父元素样式会被子元素继承，多个父元素的样式会同时施加在子元素上。为了让设计人员能够清楚的知道哪个选择器的样式最优先，人为的为类型设置了相应的等级：
标签选择器 1
类选择器 10
id选择器 100
行内样式 1000
继承：
会被继承的样式主要是与文本相关的样式
color、font-size、font-family、font-weigth、font-style、letter-spacing、word-spacing、line-Height＜/span>、text-indent、text-transform、text-align、text-deocration
边距属性
外边距：
margin: 复合属性 设置元素的外边距
margin-left: 设置元素与其父元素的左边距
margin-top: 设置元素与其父元素的上边距
margin-right: 设置元素与其父元素的右边距
margin-bottom: 设置元素与其父元素的下边距
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h61590.shtml
