CSS样式基础
From Evernote: |
CSS样式基础Clipped from: http://sophie627.iteye.com/blog/1288211 |
一、如何创建 CSS
插入样式表的方法有三种：
1.外部样式表
<head>
<link rel="stylesheet" type="text/css"
href="/YGFMISWebRes/html/component/css/jquery.ygsoft.common.css"/>
</head>
2. 内部样式表(在html中,位于 <head> 标签内部)
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
3. 内联样式（在 HTML 元素内部）
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
优先级：内联样式 > 内部样式表 > 外部样式表
二、CSS选择器
1. id 选择器
ID属性用于定义一个元素的独特的样式。
DOM中id= sidebar的样式定义。
#sidebar {
border: 1px dotted #000;
padding: 10px;
}
2. 类选择器（class）
1) class = center的样式定义。
.center {text-align: center}
2) 可以为对象的 class 属性(特性)指定多于一个值( className )，其方法是指定用空格隔开的一组样式表的类名。例如：<div class="class1 class2">。注：id不可以用此方法。
3. 元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、td、a。
td { font-size:14px; width:120px; }
a { text-decoration:none; }
4. 包含选择器（后代选择器）E1 E2 { sRules }
1) 实例：
table td { font-size:14px; }
div.sub a { font-size:14px; }
2) 在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为"... 在 ... 找到"、"... 作为 ... 的一部分"、"... 作为 ... 的后代"，但是要求必须从右向左读选择器。
可以是ID选择器和类选择器之间相互包含，实用范围非常大。
5. 组选择器 E1 , E2 , E3 { sRules }
1) 实例：
.td1, div a, body { font-size:14px; }
td, div, a { font-size:14px; }
2) 将同样的定义应用于多个选择器，可以将选择器以逗号分隔的方式并为组。
6. 子对象选择器 E1 > E2 { sRules }
1) 实例：
h1 > strong {color:red;}
//这个规则会把第一个 h1 下面的 strong 元素变为红色，但是第二个 strong 不受影响：
<h1>This is <strong>very</strong> important.</h1>
2) 如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，使用子元素选择器（Child selector）。
7. 相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
这个选择器读作："选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素"。
8. 属性选择器
对带有指定属性的 HTML 元素设置样式。
[title] { color:red; }
input[type="text"]
{
background-color:yellow;
}
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
注：Internet Explorer 7 （以及更高版本）在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。
三、伪类及伪对象
css内部本身赋予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿来使用，当然你也可以改变它的部分属性比如：a:link{color:#ff0000;}
1. 伪类
CSS 伪类用于向某些选择器添加特殊的效果。
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
2. 伪对象
语法：（伪对象选择符共有4种）
1). Selector:first-letter
2). Selector:first-line
3). Selector:before
4). Selector:after
说明：
1). 设置对象内的第一个字符的样式表属性。此伪对象仅作用于块元素。内联元素要使用该伪对象，必须先设定对象具有块元素的表状。
2). 设置对象内的第一行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象具有块元素的表状。
3). 用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容。
4). 用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容。
注：first-letter和:first-line目前所有主流浏览器均支持；:before和:after非IE核心浏览器及IE8支持。
0 评论 :
发表评论