8.HTML5 CSS3

一、CSS样式的基本使用

1.引入外部样式文件

2.导入外部样式文件

<style type="text/css">
@import "outer.css";
</style>

二、CSS选择器

1.元素选择器

div{background-color: grey;font: italic normal bold 14pt normal 楷体_GB2312;   }

2.属性选择器

/* 对有id属性的div元素起作用的CSS样式 */div[id] {background-color:#aaa;}/* 对有id属性值包含xx的div元素起作用的CSS样式 */div[id*=xx] {background-color:#999;}/* 对有id属性值以xx开头的div元素起作用的CSS样式 */div[id^=xx] {background-color:#555;color:#fff;}/* 对有id属性值等于xx的div元素起作用的CSS样式 */div[id=xx] {background-color:#111;color:#fff;}

3.ID选择器

#xx {border:2px dotted black;background-color:#888;}

4.class选择器

/* 对所有class为myclass的元素都起作用的CSS样式 */.myclass {width:240px;height:40px;background-color:#dddddd;}/* 对class为myclass的div元素起作用的CSS样式 */div.myclass {border:2px dotted black;background-color:#888888;}

5.包含选择器

/* 对处于div之内、且class属性为a的元素起作用的CSS样式*/div .title {width:200px;height:35px;border:2px dotted black;background-color:#888;}

6.子选择器

/* 对处于div之内、且class属性为a的元素起作用的CSS样式*/div>.a {width:200px;height:35px;border:2px dotted black;background-color:#888;}

7.兄弟选择器

/* 匹配id为android的元素后面、class属性为long的兄弟节点 */#android ~ .long{background-color: #00FF00;}

8.选择器组合

/* div元素、class属性为a的元素、id为abc的元素都起作用的CSS样式 */div,.title,#abc {width:200px;height:35px;border:2px dotted black;background-color:#888;}

9.伪元素选择器

1./* 指定对于div元素内部的尾端插入content属性对应的内容 */div>div:after{content: url("wjc.gif");}2./* p元素里第一个字母加粗、变蓝 */p:first-letter{color:#00f;font-size:40pt;font-weight:bold;}3./* p元素里第一行文字的字体加大、变蓝 */p:first-line{color:#00f;font-size:30pt;}4./* 指定对于div元素内部的前端插入content属性对应的内容 */div>div:before{content: 'CrazyIt:';color:blue;font-weight:bold;background-color:gray;}5./* 指定对于div元素内部的尾端插入content属性对应的内容 */div>div:after{content: url("wjc.gif");}/* 指定对于class属性为no的div元素内部的尾端插入content属性对应的内容 */div>div.no:after{content: url("buy.gif");}6./* 定义open-quote为<<，close-quote为>> */div>div{quotes: "<<" ">>";}/* 指定为div的子div的前端插入open-quote */div>div:before{content: open-quote;}/* 指定为div的子div的尾端插入close-quote */div>div:after{content: close-quote;}7./* 为div的子div元素定义了一个计数器：mycounter */div>div{counter-increment: mycounter;}/* 在div的子div元素的前端插入mycounter计数器和一个点  */div>div:before{content: counter(mycounter) '.';font-size: 20pt;font-weight: bold;}8.自定义编号decimaldisccirclesquarelower-romanupper-romanlower-alphaupper-alphanonecjk-ideographicgeorgianlower-greekhebrewhiraganahiragana-irohakatakanakatakana-irohalower-latinupper-latin/* 为div的子div元素定义了一个计数器：mycounter */div>div{counter-increment: mycounter;}/* 在div的子div元素的前端插入自定义风格的mycounter计数器  */div>div:before{content: '第' counter(mycounter , lower-greek) '本.';font-size: 20pt;font-weight: bold;}8.多级编号/* 为div的子h2元素定义了一个计数器：categorycounter   并使用counter-reset重置subcounter计数器 */div>h2{counter-increment: categorycounter;counter-reset: subcounter;}/* 为div的子div元素定义了一个计数器：subcounter */div>div{counter-increment: subcounter;}/* 在div的子h2元素的前端插入categorycounter计数器和一个点  */div>h2:before{content: counter(categorycounter , georgian) '.';font-size: 20pt;font-weight: bold;}/* 在div的子div元素的前端插入自定义的subcounter计数器 */div>div:before{content: '第' counter(subcounter , cjk-ideographic) '本.';font-size: 14pt;font-weight: bold;margin-left:24px;}

二、CSS3新增的伪类选择器

1.:root伪选择器:root {background-color: #ccc;}

body {background-color: #888;}

三、UI元素状态伪类选择器

1.<style type="text/css">td {border:1px solid black;padding:4px;}/* 为处于鼠标悬停状态的表格行定义CSS样式 */tr:hover {background-color: #aaa;}/* 为处于激活状态的input元素定义CSS样式 */input:active {background-color: blue;}/* 为得到焦点的任意元素定义CSS样式 */:focus {text-decoration: underline;}/* 为可用的任意元素定义CSS样式 */:enabled{font-family: "黑体";font-weight: bold;font-size:14pt;}/* 为不可用的任意元素定义CSS样式 */:disabled{font-family: "隶书";font-size:14pt;}/* 为处于勾选状态的任意元素定义CSS样式 */:checked {outline: red solid 5px;}/* 为页面打开时处于勾选状态的任意元素定义CSS样式 */:default {outline: #bbb solid 5px;}</style>2.<style type="text/css">td {border:1px solid black;padding:4px;}/* 为处于只读状态的元素设置背景色 */:read-only {background-color: #eee;}/* 为处于读写状态的元素设置背景色 */:read-write {background-color: #8e8;}/* 专为基于Gecko内核浏览器指定CSS样式：为处于只读状态的元素设置背景色 */:-moz-read-only {background-color: #eee;}/* 专为基于Gecko内核浏览器指定CSS样式：为处于读写状态的元素设置背景色 */:-moz-read-write {background-color: #8e8;}</style>3.浏览器专属的属性<style type="text/css">td {border:1px solid black;padding:4px;}/* 为有内容被选择的元素设置CSS样式 */::selection {background-color: red;color: white;}/* 专为基于Gecko内核浏览器指定CSS样式：为有内容被选择的元素设置CSS样式 */::-moz-selection {background-color: red;color: white;}</style>4.:target{background-color: #ff0;}5.li:not(#ajax) {color: #999;font-weight: bold;}6.立体效果/* 对所有class属性值为solid的元素起作用的CSS定义 */.solid {width:160px;text-align:center;border-right: #222 3px solid; border-top: #ddd 3px solid; border-left: #ddd 3px solid; border-bottom: #222 3px solid;background-color: #ccc;}