CSS学习

部分官方参考手册

参考一
参考二
参考三

CSS基础部分

定义

由 ①选择符(selector)②属性(propertise)③取值(value) 构成
格式：selector{ property: value}

例: h1{	color: blue}

说明：若属性的值是多个单词，必须在值上加引号.

例：p{ font-family: "sans serif"}

说明：一个选择符指定多个属性时，用分号将每个属性和值隔开。

例：p{ text-align: center  ;  color: red}

实际编写格式：

p, h1, h2,h3{
 	text-align:	center；
	color：black；
	font-family: arial;
}

注释： 以“ /* ”开始，以“ */ ”

选择器

六种选择器： HTML标记、具有上下文关系的HTML标记、用户自定义类选择符、用户定义的ID选择符、伪类、伪元素。

HTML 标记

格式：HTML标记{property：value}

具有上下文关系的HTML标记类选择符(继承选择符)

	例：div p {color：blue}  /*选择 所有div元素中 的p元素 **/
	例：div > p {color:	red}  /* 选择  所有父元素div元素  的p元素 */

用户自定义类选择符

①格式：HTML标记.类名{property： value}

例：p.right{text-align:right}
< p  class="right">这是内容< / p >

②格式：.类名{property：value}
注： ②这种方法可以把不同元素定义成相同的格式,更常见！

例：.right{text-align:right}

ID选择符

①格式： HTML标记#IDname { property：value}

例：p#intro{	font-size:	110% }

②格式：#IDname { property ： value}

例：#intro{	font-size:	110% }

注： 只能单独定义某个元素，文档中文档中只应用一次，适合用ID选择器。

伪类(Pseudo-classes)
全部伪类介绍手册
格式：选择符：伪类{property： value}

说明：一种特殊的类选择符，是CSS预定义的、能被浏览器自动识别的特殊选择符。
常见的用处是可以对超链接在不同状态定义不同的样式效果。

超链接案例：
	a:link{} 	/*未访问*/
	a:visited{}	/*以访问*/
	a:hover{}	/*鼠标悬浮在链接上(也可用于其他点击对象中)*/
	a:active{}	/*鼠标点击后(也可用于其他点击对象中)*/
注：按照link,visited,hover,active的顺序排列。

伪类和类组合
例：a.classname{property: value}
	a.classname:hover{property: value}

表单元素相关的伪类：
:focus伪类：设置对象在成为输入焦点时的样式。
:enabled伪类：选择可用的元素。
:disabled伪类：选择匹配E的所有不可用元素。
:checked伪类：选择匹配E的所有选中UI元素。
:first-child伪类：表示在一组兄弟元素的第一个元素。
:nth-child()伪类：
:not()伪类：

伪元素(Pseudo-elements)

 ::first-letter和::first-line伪元素，对首字和行设定不同的格式。
 ::before和::after伪元素，创建一个伪元素。通常配合content属性来添加装饰内容。

属性选择器
定义：使用属性控制HTML标记样式的选择器，称为属性选择器。

E[att] 选择具有attr属性的E元素。
E[att="val"] 选择具有att属性且属性值等于val的E元素
E[att~="val"] 选择具有att属性的元素，且元素值列表中有一个符合val的元素
E[att^="val"] 选择E元素中有att属性，且以val开头的元素。
E[att$="val"] 选择E元素中有att属性，且以val结尾的元素。
E[att*="val"] 选择具有att属性且属性值包含val的字符串的E元素。
E[att|="val"]属性值是value或者以“value-”开头的值（比如说zh-cn）。

例：
*[title] {color:red;}	/*包含标题（title）的所有元素变为红色*/
a[href] {color:red;} /*只对有 href 属性的锚（a 元素）应用样式*/
a[href][title] {color:red;} /*同时有 href 和 title 属性的 HTML 超链接的文本设置为红色 */
a[href=“http://www.w3school.com.cn/about_us.asp”] {color: red;} /*指向某个指定文档的超链接变成红色 */
input[type=“text”] /*选择所有文本输入框 */

全局选择器
格式：*{property: value}

选择符优先级

ID选择符 > 类选择符 > HTML选择符
注: 若想超越上述关系，在属性后面添加使用&#