Cascading Style Sheets 层叠样式表.
CSS主要用来修饰HTML的显示.代码复用.将页面元素与样式进行分离.
语法：选择器{属性1:属性值;属性2:属性值;..}
CSS的引入方式（3种）
行内样式：直接在html的元素上使用style的属性编写CSS
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
内部样式：在html的<head>标签中使用<style>标签来定义CSS
<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head>
外部样式：将CSS定义成一个.css的文件，在html中将该文件引入到html中
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
CSS的基本选择器
id选择器： #d1
<html> <head> <style type="text/css"> #red {color:red;} #green {color:green;} </style> </head> <body> <p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p> </body> </html>
元素选择器：
<html> <head> <style type="text/css"> div{ color: green; } </style> </head> <body> <div class="d1"> 杜小胖</div> <div>杜小</div> <div class="d1">杜小胖</div> </body> </html>
//全变绿了
类选择器： .d1
<html> <head> <style type="text/css"> .d1{ color: green; } </style> </head> <body> <div class="d1">王小胖</div> <div>王胖</div> <div class="d1">王小胖</div> </body> </html>
CSS的其他选择器
属性选择器
<html> <head> <style type="text/css"> [title] { color:red; } </style> </head> <body> <h2 title="Hello world">Hello world</h2> </body> </body> </html>
css样式
背景色
h1 {background-color: #00ff00}
缩进文本
p {text-indent: 5em;}
css文字
body {font-family: sans-serif;}
连接样式
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
列表
ul {list-style-type : square}
表格
table, th, td
{
border: 1px solid blue;
}
CSS的盒子模型
设置盒子的外边距：margin
Margin-top Margin-right Margin-bottom Margin-left
设置盒子的内边距：padding
Padding-top Padding-right Padding-bottom Padding-left
css定位
相对定位
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
绝对定位
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
浮动
img
{
float:right;
}