欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css 博客分类: 编程基础  

程序员文章站 2024-03-04 17:50:06
...

一、如何创建 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支持。