CSS语法
如同下面形式p {color:red;text-align:center;}
CSS由选择器和{}包含的声明组成。每条声明必须由;结束，是一个由:分隔的键值对。
HelloWord程序
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> p { color:red; text-align:center; } </style> </head> <body> <p>Hello World!</p> <p>这个段落采用CSS样式化。</p> </body> </html>
效果是 所有的<p>标签的内容都变红和居中
CSS选择器
id选择器
#para1 { text-align:center; color:red; }
使用
<p id="para1">Hello World!</p>
class选择器
选择器名字由.开头
.center { text-align:center; }
使用
<h1 class="center">标题居中</h1> <p class="center">段落居中。</p>
p.center {text-align:center;} 选择class为center的p标签元素
标签选择器
选择器名称使用标签名， 比如p,h1,div，表明相应的标签会匹配对应css。
p {color:red;text-align:center;}
嵌套选择器
p{ }: 为所有 p 元素指定一个样式。 .marked{ }: 为所有 class="marked" 的元素指定一个样式。 .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。 p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
复合标签选择器
/*选择并设置所有 <h1> 样式和所有 <p> 元素的样式：*/ h1,p { background-color:yellow; }
/*选择并设置位于 <div> 元素内部的每个 <p> 元素的样式*/ div p { background-color:yellow; }
/*选取父元素是 <div> 元素的每个 <p> 元素，并设置其背景色*/ div>p { background-color:yellow; }
/*选择 <div> 元素之后紧跟的每个 <p> 元素，并设置其背景色*/ div+p { background-color:yellow; }
//选择器 http://www.w3school.com.cn/cssref/css_selectors.asp
插入样式表
外部
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
mystyle.css内容可能如下
hr {color:sienna;} p {margin-left:20px;} body {background-image:url("/images/back40.gif");}
内部
<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
内联
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
优先级：内联>内部>外部
背景
body { background-color:#6495ed; background-image:url('img_tree.png'); /*有图片会覆盖颜色背景*/ background-repeat:no-repeat;/*默认在X和Y轴方向重复，值还有repeat-x,repeat-y*/ background-position:right top;/*图片位置，其他值参考 http://www.runoob.com/cssref/pr-background-position.html*/ background-attachment:fixed;/*图片是否随滚轮滚动，默认值scroll*/ }
文本
.myclass { color:#00ff00; text-align:center;/*文本居中，right，文本靠右，justify，所有行宽度相等，左右*/ text-decoration:overline;/*文字上方有线，还有line-through，underline*/ text-transform:uppercase;/*还有lowercase，capitalize*/ text-indent:50px;/*首行缩进*/ }
字体
.myclass { font-family:"Times New Roman",Times,serif; /*font-family:Arial,Helvetica,sans-serif;*/ font-style:normal;/*italic,oblique*/ font-size:40px; font-size:2.5em;/*1em的默认大小是16px*/ font-size:100%;/*使用百分比，默认字体大小16px*/ }
链接
a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ /*注意顺序*/ /*例子2*/ a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}
列表
ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;} /*use image*/ ul { list-style-image: url('sqpurple.gif'); }
表格
table,th,td { border:1px solid #00ff00; } /*此表格为绿色双边框,如果需要边框为单线条边框，增加*/ table { border-collapse:collapse; } /*表格宽度和高度*/ table { width:100%; } th { height:50px; } /*表格颜色*/ table, td, th { border:1px solid green; } th { background-color:green; color:white; }
盒子模型
div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }
边框
border-style:solid; /*其他值dotted,dashed，groove,*/ border-5px; border-color:#98bf21; /* 边框四周风格可以单独设置*/ border-right-style:solid;
例子
<p>两个不同的边界样式。</p> <style> p { border-bottom: 1px solid #ccc;padding:14px;border-color: #f44336; } </style>
{border: 1px solid #ccc;padding:14px;border-radius: 16px;}
{background-color: #ddffff;padding: 14px;border-left: 6px solid #ccc;border-color: #2196F3;}
Margin 和Padding
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; /*简写 margin后面可以是1~4 个数值 1:四个外边距都是这个值 2：上下， 左右 3：上，左右，下 4：上，右，下，左 */ padding 同理
显示隐藏，块和内联
/*隐藏元素的两种方法*/ {visibility:hidden;}/*空间依然占用*/ {display:none;}/* 不占用空间*/
块元素是一个元素，占用了全部宽度，在前后都是换行符，可设置宽和高。
块元素的例子：
- <h1>
- <p>
- <div>
- li、dt、dd
内联元素只需要必要的宽度，不强制换行，不能设置宽和高。
内联元素的例子：
- <span>
- <a>
- b、i、u、em
/*把列表作为内联*/ li {display:inline;} /*把span作为block*/ span {display:block;}
定位
{
position:XXX;
left:32px;
}
XXX可以是static,fixed,relative,absolute,sticky
/*
static 是默认值
fixed相对于浏览器窗口的位置
relative相对于元素本来应该的位置
absolutex相对于最近定位父元素，如果没有就是html
sticky在relative和fixed之间
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
*/
浮动
一般用于图像，img { float:right; }
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
对齐
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
img { display: block; margin: auto; width: 40%; }