CSS学习
入门
介绍
CSS的出现解决了一个问题: 内容与表现的分离.
当一个元素受到多个CSS效果的影响时, 存在一个”影响”规则:
1. Browser default
2. External style sheet
3. Internal style sheet (inside the <head> tag)
4. Inline style (inside an HTML element)
其中, d 的优先级最高.
语法
基本语法
一个CSS片断由3个部分组成: 选择器(selector), 属性, 值. 选择器表示谁讲受这段CSS影响.如:
body {color: black}
如果值由多个词组成,则需要使用引号, 如:
p {font-family: "sans serif"}
如果需要指定多个属性值, 则需要使用分号分隔. 如:
p {text-align:center;color:red}注意:属性值的数字与单位之间不能有空格.如: "margin-left: 20px" 不能写成"margin-left: 20 px"
父子选择器
div p (color:red)匹配div下的p元素节点.
分组
当多个选择器都使用同一个CSS效果时, 可以使用分组以节省代码. 如:
h1,h2,h3,h4,h5,h6 {color: green}
类
与分组相反, 相同的元素需要使用不同的效果时, 需要使用类选择器. 如:
p.right {text-align: right}p.center {text-align: center}<p class="right">This paragraph will be right-aligned.</p><p class="center">This paragraph will be center-aligned.</p>
有些时候, 一些类是对多个元素通用的, 这时候可以忽略元素的名称. 如:
.center {text-align: center}
id 选择器
可以使用id选择器为特定的节点分配CSS. 用法类似类选择器. 如:
#green {color: green}p#para1{text-align: center;color: red}
注释
类似C语言, 使用 “/**/” 进行注释.
How to
可以在三个地方编写CSS:
外部.css文件
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
html内部的样式表元素中
<head><style type="text/css">hr {color: sienna}p {margin-left: 20px}</style></head>
元素的style属性
<p style="color: sienna; margin-left: 20px">This is a paragraph</p>注意:如果一个节点被多个CSS效果影响,则使用继承原则 – 能保留的保留,不能保留的就覆盖.
背景
留做参考
文本
留做参考
字体
留做参考
边框
留做参考
对象间隙
留做参考
边界距离
留做参考
关于对象,边框,对象间隙与边界距离,可以根据下图进行区别:
图片来自于: http://edu.chinaz.com/Get/Website/Html_Css/06121355133452315.asp
列表
留做参考
高级
维度
维度定义了一组用于控制对象高度与宽度的属性. 可惜的是, 大部分属性是IE不支持的.
显示
位置
伪类
伪类用来给一些元素添加特定的效果.
声明一个伪类的语法如下:
selector:pseudo-class {property: value}
也可以为一个类声明伪类. 如:
selector.class:pseudo-class {property: value}
超链接的伪类
这是平时最常见的伪类:
a:link {color: #FF0000} /* unvisited link */a:visited {color: #00FF00} /* visited link */a:hover {color: #FF00FF} /* mouse over link */a:active {color: #0000FF} /* selected link */
有一点要注意: hover必须在link和visited后面, 而active必须再hover后面.
first-child 伪类
它有三种用法:
1. div > p:first-child
匹配任何一个div元素的第一个p元素.
2. p:first-child em
匹配任何一个p元素的第一个em元素.
3. a:first-child
匹配任何一个元素的第一个a元素.
lang伪类
为特定的lang属性值提供效果.例如:
q:lang(no){quotes: "~" "~"}以上示例匹配一个lang属性值为no的q元素.
focus伪类
此伪类为CSS2标准,目前没有任何浏览器实现了它.
