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选择器为特定的节点分配CSS. 用法类似类选择器. 如:
#green {color: green}p#para1{text-align: center;color: red}
类似C语言, 使用 “/**/” 进行注释.
可以在三个地方编写CSS:
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
<head><style type="text/css">hr {color: sienna}p {margin-left: 20px}</style></head>
<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后面.
它有三种用法:
1. div > p:first-child
匹配任何一个div元素的第一个p元素.
2. p:first-child em
匹配任何一个p元素的第一个em元素.
3. a:first-child
匹配任何一个元素的第一个a元素.
为特定的lang属性值提供效果.例如:
q:lang(no){quotes: "~" "~"}以上示例匹配一个lang属性值为no的q元素.
focus伪类
此伪类为CSS2标准,目前没有任何浏览器实现了它.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。