CSS之语法与选择器

Phoebe的学习天地 2020-05-31

一、基础语法

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

selector {declaration1; declaration2; ... declarationN }

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

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

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

selector {property: value}

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

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

注意:

1、请使用花括号来包围声明

2、当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。

3、如果值为若干单词,则要给值加引号

4、如果要定义不止一个声明,则需要用分号将每个声明分开,称为声明分组

二、高级语法

选择器的分组

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

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)。

注意:

1、Netscape 4 就不支持继承,它不仅忽略继承,而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题,在表格内的字体样式会被忽略。

2、如果你不希望被所有的子元素继承,创建一个针对 子元素的特殊规则,这样它就会摆脱父元素的规则。

三、选择器

1、元素选择器(类型选择器)

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。

如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

2、派生选择器

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

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

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

li strong {
    font-style: italic;
    font-weight: normal;
  }

3、id 选择器

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

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

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

#red {color:red;}
#green {color:green;}

 

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

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }

特别地定义这个选择器所属的元素

div#sidebar {
    border: 1px dotted #000;
    padding: 10px;
    }

注意:

1、ID 选择器使用一次,而且仅一次。

2、ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。

3、可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写,所以类和 ID 值的大小写必须与文档中的相应值匹配。

4、类选择器

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

.center {text-align: center}

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

.fancy td {
    color: #f60;
    background: #666;
    }

元素也可以基于它们的类而被选择,类选择器结合元素选择器来使用

td.fancy {
    color: #f60;
    background: #666;
    }

多类选择器,在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:

<p class="important warning">
This paragraph is a very important warning.
</p>

假设 class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。如果一个多类选择器包含类名列表中没有的一个类名,匹配就会失败。请看下面的规则:

.important.urgent {background:silver;}

注意:

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

2、在 IE7 之前的版本中,不同平台的 Internet Explorer 都不能正确地处理多类选择器。

3、可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写,所以类和 ID 值的大小写必须与文档中的相应值匹配。

5、属性选择器

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

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

[title]
{
color:red;
}

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

[title=W3School]
{
border:5px solid blue;
}

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

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

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

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

还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。

例如,为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:

a[href][title] {color:red;}
选择器描述
[attribute]用于选取带有指定属性的元素。
[attribute=value]用于选取带有指定属性和值的元素。
[attribute~=value]用于选取属性值中包含指定词汇的元素。
[attribute|=value]用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value]匹配属性值以指定值开头的每个元素。
[attribute$=value]匹配属性值以指定值结尾的每个元素。
[attribute*=value]匹配属性值中包含指定值的每个元素。

注意:

1、只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

6、通配符选择器

CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。

例如,下面的规则可以使文档中的每个元素都为红色:

* {color:red;}

7、后代选择器

定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。

举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:

h1 em {color:red;}

8、子元素选择器

如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。

例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

h1 > strong {color:red;}

9、相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

h1 + p {margin-top:50px;}

10、伪类

伪类的语法:

selector : pseudo-class {property: value}

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

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

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

a.red : visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

锚伪类:在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */

注意:

1、a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

2、a:active 必须被置于 a:hover 之后,才是有效的。

3、伪类名称对大小写不敏感。

属性描述CSS
:active向被激活的元素添加样式。1
:focus向拥有键盘输入焦点的元素添加样式。2
:hover当鼠标悬浮在元素上方时,向元素添加样式。1
:link向未被访问的链接添加样式。1
:visited向已被访问的链接添加样式。1
:first-child向元素的第一个子元素添加样式。2
:lang向带有指定 lang 属性的元素添加样式。2

11、伪元素

伪元素的语法:

selector:pseudo-element {property:value;}

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

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

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

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

p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }

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

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

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

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

h1:before
  {
  content:url(logo.gif);
  }

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

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

h1:after
  {
  content:url(logo.gif);
  }
属性描述CSS
:first-letter向文本的第一个字母添加特殊样式。1
:first-line向文本的首行添加特殊样式。1
:before在元素之前添加内容。2
:after在元素之后添加内容。2

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

selector {declaration1; declaration2; ... declarationN }

相关推荐

aSuncat / 0评论 2020-08-18