`

CSS 语法

 
阅读更多
CSS 语法



CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }



选择器通常是您需要改变样式的 HTML 元素。



每条声明由一个属性和一个值组成。



属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。



selector {property: value}



下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。

在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

h1 {color:red; font-size:14px;}



提示:请使用花括号来包围声明。





值的不同写法和单位



除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:

p { color: #ff0000; }



为了节约字节,我们可以使用 CSS 的缩写形式:

p { color: #f00; }



我们还可以通过两种方法使用 RGB 值:

p { color: rgb(255,0,0); }

p { color: rgb(100%,0%,0%); }





多重声明:



提示:如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么的好处是,当你从现有的规则中增减声明时,会尽可能的减少出错的可能性。就像这样:

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



你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:

p {

  text-align: center;

  color: black;

  font-family: arial;

}



空格和大小写



大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:

body {

  color: #000;

  background: #fff;

  margin: 0;

  padding: 0;

  font-family: Georgia, Palatino, serif;

  }

是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。







选择器的分组



你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。



h1,h2,h3,h4,h5,h6 {

  color: green;

  }



继承及其问题



根据 CSS,子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则:



body {

     font-family: Verdana, sans-serif;

     }



根据上面这条规则,站点的 body 元素将使用 Verdana 字体(假如访问者的系统中存在该字体的话)。



通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有 body 的子元素都应该显示 Verdana 字体,子元素的子元素也一样。并且在大部分的现代浏览器中,也确实是这样的。



但是在那个浏览器大战的血腥年代里,这种情况就未必会发生,那时候对标准的支持并不是企业的优先选择。比方说,Netscape 4 就不支持继承,它不仅忽略继承,而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题,在表格内的字体样式会被忽略。我们又该如何是好呢?





友善地对待Netscape 4

幸运地是,你可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题。



body  {

     font-family: Verdana, sans-serif;

     }



p, td, ul, ol, li, dl, dt, dd  {

     font-family: Verdana, sans-serif;

     }



4.0 浏览器无法理解继承,不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽,但是如果需要对 Netscape 4 用户进行支持,就不得不这么做。





继承是一个诅咒吗?

如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承,又该怎么做呢?比方说,你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则,这样它就会摆脱父元素的规则:

body  {

     font-family: Verdana, sans-serif;

     }



td, ul, ol, ul, li, dl, dt, dd  {

     font-family: Verdana, sans-serif;

     }



p  {

     font-family: Times, "Times New Roman", serif;

     }





派生选择器



通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。



在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的。



派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。



比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:

li strong {

    font-style: italic;

    font-weight: normal;

  }



请注意标记为  的蓝色代码的上下文关系:



我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用



我是斜体字。这是因为 strong 元素位于 li 元素内。

我是正常的字体。





在上面的例子中,只有 li 元素中的 strong 元素的样式为斜体字,无需为 strong 元素定义特别的 class 或 id,代码更加简洁。



再看看下面的 CSS 规则:

strong {

     color: red;

     }



h2 {

     color: red;

     }



h2 strong {

     color: blue;

     }



下面是它施加影响的 HTML:

The strongly emphasized word in this paragraph isred.

This subhead is also red.

The strongly emphasized word in this subhead isblue.





CSS id 选择器

id 选择器



id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。



id 选择器以 "#" 来定义。



下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:

#red {color:red;}

#green {color:green;}



下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。



这个段落是红色。

这个段落是绿色。



注意:id 属性只能在每个 HTML 文档中出现一次。





id 选择器和派生选择器

在现代布局中,id 选择器常常用于建立派生选择器。



#sidebar p {

font-style: italic;

text-align: right;

margin-top: 0.5em;

}

上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元,尽管它也可能是一个表格或者其他块级元素。





一个选择器,多种用法

即使被标注为 sidebar 的元素只能在文档中出现一次,这个 id 选择器作为派生选择器也可以被使用很多次:

#sidebar p {

font-style: italic;

text-align: right;

margin-top: 0.5em;

}



#sidebar h2 {

font-size: 1em;

font-weight: normal;

font-style: italic;

margin: 0;

line-height: 1.5;

text-align: right;

}



在这里,与页面中的其他 p 元素明显不同的是,sidebar 内的 p 元素得到了特殊的处理,同时,与页面中其他所有 h2 元素明显不同的是,sidebar 中的 h2 元素也得到了不同的特殊处理。





单独的选择器

id 选择器即使不被用来创建派生选择器,它也可以独立发挥作用:

#sidebar {

border: 1px dotted #000;

padding: 10px;

}



根据这条规则,id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框,同时其周围会有 10 个像素宽的内边距(padding,内部空白)。老版本的 Windows/IE 浏览器可能会忽略这条规则,除非你特别地定义这个选择器所属的元素:



div#sidebar {

border: 1px dotted #000;

padding: 10px;

}





CSS 类选择器

在 CSS 中,类选择器以一个点号显示:

.center {text-align: center}

在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。



在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。



This heading will be center-aligned







This paragraph will also be center-aligned.



注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。



和 id 一样,class 也可被用作派生选择器:

.fancy td {

color: #f60;

background: #666;

}

在上面这个例子中,类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。(名为 fancy 的更大的元素可能是一个表格或者一个 div)



元素也可以基于它们的类而被选择:

td.fancy {

color: #f60;

background: #666;

}



在上面的例子中,类名为 fancy 的表格单元将是带有灰色背景的橙色。





你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。还有一点值得注意,class 为 fancy 的段落也不会是带有灰色背景的橙色,当然,任何其他被标注为 fancy 的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式,这个效果被限制于被标注为 fancy 的表格单元(即使用 td 元素来选择 fancy 类)。





CSS 属性选择器

对带有指定属性的 HTML 元素设置样式。



可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。



注释:Internet Explorer 7 (以及更高版本)在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。



属性选择器

下面的例子为带有 title 属性的所有元素设置样式:

[title]

{

color:red;

}



属性和值选择器

下面的例子为 title="W3School" 的所有元素设置样式:

[title=W3School]

{

border:5px solid blue;

}



属性和值选择器 - 多个值

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:

[title~=hello] { color:red; }





下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:



[lang|=en] { color:red; }





设置表单的样式

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用:

input[type="text"]

{

  width:150px;

  display:block;

  margin-bottom:10px;

  background-color:yellow;

  font-family: Verdana, Arial;

}



input[type="button"]

{

  width:120px;

  margin-left:35px;

  display:block;

  font-family: Verdana, Arial;

}





如何创建 CSS

如何插入样式表



当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种:



1.外部样式表

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用  标签链接到样式表。 标签在(文档的)头部:









浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。



外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子:



hr {color: sienna;}

p {margin-left: 20px;}

body {background-image: url("images/back40.gif");}



不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ,它仅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。





2.内部样式表

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用  标签在文档头部定义内部样式表,就像这样:

<head>

<style type="text/css">

  hr {color: sienna;}

  p {margin-left: 20px;}

  body {background-image: url("images/back40.gif");}







3.内联样式

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。



要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:





This is a paragraph







多重样式

如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。



例如,外部样式表拥有针对 h3 选择器的三个属性:



h3 {

  color: red;

  text-align: left;

  font-size: 8pt;

  }



而内部样式表拥有针对 h3 选择器的两个属性:



h3 {

  text-align: right;

  font-size: 20pt;

  }



假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:



color: red;

text-align: right;

font-size: 20pt;



即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。





CSS 伪类 (Pseudo-classes)

CSS 伪类用于向某些选择器添加特殊的效果。



CSS 伪类 (Pseudo-classes)实例:



超链接

    本例演示如何向文档中的超链接添加不同的颜色。

超链接 2

    本例演示如何向超链接添加其他样式。

超链接 - :focus 的使用

    本例演示如何对超链接应用 :focus 伪类(无法在 IE 中工作)。

:first-child(首个子对象)

    本例演示 :first-child 伪类的用法。

:lang(语言)

    本例演示 :lang 伪类的用法。





语法



伪类的语法:

selector : pseudo-class {property: value}



CSS 类也可与伪类搭配使用。

selector.class : pseudo-class {property: value}





锚伪类



在支持 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 之后,才是有效的。

提示:伪类名称对大小写不敏感。





伪类与 CSS 类

伪类可以与 CSS 类配合使用:

a.red : visited {color: #FF0000}

CSS Syntax

假如上面的例子中的链接被访问过,那么它将显示为红色。





例子 1 - 匹配第一个  元素

在下面的例子中,选择器匹配作为任何元素的第一个子元素的 p 元素:







p:first-child {

  color: red;

  }

some text

some text









例子 2 - 匹配所有  元素中的第一个  元素

在下面的例子中,选择器匹配所有  元素中的第一个  元素:







p > i:first-child {

  font-weight:bold;

  }

some text. some text.

some text. some text.









例子 3 - 匹配所有作为第一个子元素的  元素中的所有  元素

在下面的例子中,选择器匹配所有作为元素的第一个子元素的  元素中的所有  元素:







p:first-child i {

  color:blue;

  }

some text. some text.

some text. some text.









CSS 伪元素 (Pseudo-elements)

CSS 伪元素用于向某些选择器设置特殊效果。



语法



伪元素的语法:



selector:pseudo-element {property:value;}



CSS 类也可以与伪元素配合使用:



selector.class:pseudo-element {property:value;}



:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。

在下面的例子中,浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:

实例

p:first-line

  {

  color:#ff0000;

  font-variant:small-caps;

  }



注释:"first-line" 伪元素只能用于块级元素。

注释:下面的属性可应用于 "first-line" 伪元素:



    * font

    * color

    * background

    * word-spacing

    * letter-spacing

    * text-decoration

    * vertical-align

    * text-transform

    * line-height

    * clear





:first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式:

p:first-letter

  {

  color:#ff0000;

  font-size:xx-large;

  }



注释:"first-letter" 伪元素只能用于块级元素。



注释:下面的属性可应用于 "first-letter" 伪元素:



    * font

    * color

    * background

    * margin

    * padding

    * border

    * text-decoration

    * vertical-align (仅当 float 为 none 时)

    * text-transform

    * line-height

    * float

    * clear





伪元素和 CSS 类

伪元素可以与 CSS 类配合使用:

p.article:first-letter

  {

  color: #FF0000;

  }



This is a paragraph in an article。



上面的例子会使所有 class 为 article 的段落的首字母变为红色。





多重伪元素

可以结合多个伪元素来使用。

在下面的例子中,段落的第一个字母将显示为红色,其字体大小为 xx-large。第一行中的其余文本将为蓝色,并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示:

p:first-letter

  {

  color:#ff0000;

  font-size:xx-large;

  }



p:first-line

  {

  color:#0000ff;

  font-variant:small-caps;

  }





CSS2 - :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个  元素前面插入一幅图片:

h1:before

  {

  content:url(logo.gif);

  }





CSS2 - :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个  元素后面插入一幅图片:

h1:after

  {

  content:url(logo.gif);

  }



学习参考:

http://www.w3school.com.cn


分享到:
评论

相关推荐

    css语法

    css语法css语法css语法

    CSS语法手册(CSS手册).pdf

    在给定的内容片段中,我们看到了CSS语法手册的一些关键知识点和实例。 首先,CSS语法的基本结构非常简单,主要由选择器和声明块组成。选择器指向我们要样式化的HTML元素,而声明块包含了属性和值的列表,其中属性与...

    CSS语法

    本篇将深入探讨CSS的基本语法及其在实际应用中的实例,对于初学者来说,这是一份非常有价值的参考资料。 ### 1. CSS基础语法 CSS的语法结构主要由选择器和声明组成。选择器指向要应用样式的HTML元素,而声明则定义...

    css 语法大全截图

    "CSS语法大全截图"提供了全面的CSS语法参考,对于初学者尤其有帮助。下面,我们将深入探讨这个主题,详细解析CSS的核心概念、选择器、属性以及值。 1. **CSS简介** CSS是一种用于描述HTML或XML(包括如SVG、MathML...

    book-CSS语法手册

    本“书-CSS语法手册”旨在提供全面的CSS学习资源,帮助读者深入理解并熟练掌握CSS的核心概念、选择器、属性和值,以及布局技巧。 **一、CSS基础** 1. **CSS语法**:CSS由选择器和声明组成,声明由属性和值构成。...

    javascript CodeHints css语法提示功能

    JavaScript中的CodeHints是一种非常实用的开发工具特性,它为开发者提供了自动补全代码的功能,极大地提高了编写CSS语法的效率和准确性。在JavaScript中实现CSS语法提示功能,通常涉及到以下几个核心知识点: 1. **...

    HTML、CSS语法

    HTML、CSS详细介绍,附有经典案例和练习题。。。

    详细的CSS 语法应用

    以下是对CSS语法应用的详细说明: ### 1. **选择器与声明** CSS的核心是选择器和声明。选择器是用来定位HTML元素的,而声明则定义了元素的样式。一个简单的CSS规则由选择器和花括号内的声明组成,如下所示: ```...

    CSS语法一览表[学习CSS的好帮手]

    这份"CSS语法一览表"是学习和掌握CSS语法的极佳工具,无论你是初学者还是有经验的开发者,都可以从中受益。 1. **基本结构与选择器** CSS的基本结构由选择器和声明组成。选择器定位你想要应用样式的HTML元素,如`...

    asp语法+css语法+html语法+JavaScript语法等的电子书

    这四本书籍《ASP语法一览电子书》、《CSS语法一览电子书》、《HTML语法一览与参考索引电子书》和《JavaScript语法一览电子书》将为初学者和进阶者提供丰富的学习资源,帮助他们全面理解和掌握这些技术,从而提升网页...

    Dreamweaver表格边框设置的css语法 (2).pdf

    "Dreamweaver表格边框设置的css语法" Dreamweaver表格边框设置的css语法是指在Dreamweaver中使用css语法来设置表格边框的样式、宽度和颜色等属性。下面将详细介绍Dreamweaver表格边框设置的css语法。 一、上边框...

    CSS语法一览表

    CSS语法简洁而强大,能够帮助开发者实现精细化的页面控制,从而提升用户体验。以下是对"CSS语法一览表"的详细解析。 ### CSS基本结构 CSS的基本结构由选择器和声明组成。选择器指定了要应用样式的元素,声明则包含...

    Dreamweaver表格边框设置的css语法.pdf

    Dreamweaver表格边框设置的css语法 Dreamweaver表格边框设置的css语法是指在Dreamweaver中使用css语法来设置表格的边框。边框是指表格的边缘部分,可以设置其宽度、颜色、样式等属性。Dreamweaver提供了多种方式来...

    html-Javascript语法和css语法手册

    CSS语法涵盖以下内容: 1. **选择器**:如`#id`(ID选择器)、`.class`(类选择器)、`element`(元素选择器)用于定位HTML元素。 2. **属性和值**:如`color: red;`、`font-size: 16px;`,定义元素的样式属性。 3. ...

    CSS语法2.rar

    在"CSS语法2.rar"这个压缩包中,包含了一本关于CSS语法的教程,可能是以PPT形式呈现,还有下载说明和一个链接到资源平台的URL。 **CSS基本语法**: 1. **选择器与声明**:CSS的核心是选择器和声明。选择器指向你要...

    CSS语法表 CSS参考文档

    这份名为"CSS语法表"的参考资料详细介绍了CSS的基本概念、语法和高级特性,是初学者入门和专业人士查阅的理想资源。 一、CSS基础 1. **选择器**:CSS通过选择器来指定要应用样式的HTML元素,如`h1`(一级标题)、`....

    Web前端与移动开发之css语法规范及代码风格

    1.css 语法规范 选择器 { 属性1: 值; 属性2: 值; } 注释/**/ ctrl+/ 2.代码风格 (1)样式格式书写 ①紧凑格式 ②展开格式(属性值每行只写一个属性及样式) (2)样式大小写 推荐小写 (3)...

    表格边框的css语法.pdf

    CSS 表格边框语法详解 CSS 表格边框语法是指在 HTML 表格中使用 CSS 来设置表格边框的样式和宽度。下面是表格边框的 CSS 语法详解: 1. 上边框宽度语法:border-top-width border-top-width 属性用于指定一个元素...

Global site tag (gtag.js) - Google Analytics