CSS简介_cssvsvsvzvvvvzxs0?-CSDN博客

CSS

CSS 指层叠样式表 (Cascading Style Sheets)
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
多个样式定义可层叠为一

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于标签内部）
4.内联样式（在 HTML 元素内部）
例如，外部样式表拥有针对 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语法

selector {declaration1; declaration2; ... declarationN }

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

h1 
{
     color:red; 
     font-size:14px;
     font-family: Georgia, Palatino, serif;
}

选择器的分组

对所有标题进行分组，区别于派生选择器，各元素以’,’隔开，而不是空格：

h1,h2,h3,h4,h5,h6 
{
    color: green;
}

通配符选择器 [universal selector]

使用星号(*)，与任何元素匹配，等价于列出了文档中所有元素的一个分组选择器：

* { color:red; }

则页面中的所有元素字体颜色都将是红色。

样式继承

根据CSS，子元素从父元素继承属性。

body 
{
    font-family: Verdana, sans-serif;
}

所有body的子元素诸如p,td,ul,ol,ul,li,dl,dt,和dd都应该显示Verdana字体（假如访问者的系统中存在该字体的话），子元素的子元素也一样。
但是并不是所有的浏览器都支持，请测试验证！

派生选择器（或后代选择器）descendant selector

派生选择器允许你根据文档的上下文关系来确定某个标签的样式，以空格隔开，如：

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

那么在列表(li)中的所有 strong元素将变为斜体字。

假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。
解决方法：

div.sidebar            { background:blue; }
div.maincontent        { background:white;}
div.sidebar a:link     { color:white;     }
div.maincontent a:link { color:blue;      }

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
例如，如果写作 ul em，这个语法就会选择从ul元素继承的所有em元素，而不论em的嵌套层次多深。如：

<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em> </li> <!-- em元素将应用'ul em'样式 -->
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

子元素选择器 child selector

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，可使用子元素选择器，如：

h1 > strong {color:red;}

子结合符(大于号)两边可以有空白符，这是可选的。可以解释为: 选择作为h1元素子元素的所有 strong元素，这个规则会把第一个h1下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响:

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

结合后代选择器和子选择器：

table.company td > p

上面的选择器会选择作为td元素子元素的所有p元素，这个td元素本身从table元素继承，该table元素有一个包含company的class属性。

相邻兄弟选择器 adjacent sibling selector

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
注意：用一个结合符只能选择两个相邻兄弟中的第二个元素，如：

li + li { font-weight:bold; }

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式，以#来定义，如：

#red   { color:red;  } <!-- 相当于'*#red { color:red; }' --> 
#green { color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

id选择器建立派生选择器(对id元素的子元素也适用)

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

上面的样式只会应用于出现在id是sidebar的元素内的段落，如下：

<div id="sidebar">
    <p>use id descendant selector</p>
</div>

元素基于id创建选择器(只针对id元素)

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

id为sidebar的div块将使用这个样式，那些没有分配id为sidebar的div不受影响。如：

<div id="sidebar">
    <p>use id element selector</p>
</div>

类选择器

类选择器以一个点号.定义，如：

.center { text-align: center }  <!-- 相当于'*.center { text-align: center }' -->

<h1 class="center">
    This heading will be center-aligned
</h1>

<p class="center">
    This paragraph will also be center-aligned.
</p>

class选择器创建派生选择器(对class元素的子元素也适用)

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

类名为fancy的元素内部的表格单元都会以灰色背景显示橙色文字，如下所示：

<table class="fancy">
    <tr>
        <td>use class descendant selector</td>
    </tr>
</table>

元素基于类创建选择器(只针对class元素)

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

类名为fancy的td将使用上面的样式，那些没有被分配类名fancy的单元格不会受这条规则的影响。如：

<td class="fancy">

多类选择器

在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。如：

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

这两个词的顺序无关紧要，写成 warning important 也可以。
我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景。如下所示：

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

则应用此样式后，文字将显示成粗休加斜体，同时背景色为银色。
如果类列表包含多于上面定义的数，则也将显示多类样式，如下所示：

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

id选择器 VS. 类选择器

两者都是区分大小写的
id选择器只能在文档中使用一次
id选择器不能使用id词列表
id的优先级(100)高于class(010)
一般而言，ID is for JavaScript, Class is for CSS.
id选择器能包含更多含义（因为只出现一次，可以提前定义某一个）

属性选择器

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

[title]
{
    color:red;
}

为带有 title 属性的所有元素设置样式。

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

为 title=”W3School” 的所有元素设置样式。

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

为包含指定值(hello)的title属性的所有元素设置样式。适用于由空格分隔的属性值。

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

为带有包含指定值(en)开头的lang属性的所有元素设置样式。适用于由连字符分隔的属性值。

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

为所有属性type=”text”的input元素设置样式。
属性选择器在为不带有class或id的表单设置样式时特别有用。

CSS伪类 pseudo-class

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

selector : pseudo-class { property: value }

也可与类搭配使用：

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

伪类有以下常用的几种：关于超链接的：

:link, :visited, :hover, :active

其中a:hover必须位于a:link和a:visited 之后，a:active必须位于a:hover之后，以及其他的:

:focus, :first-child, :lang

其中:first-child一般可能认为这会选择作为段落第一个子元素的元素，但事实上并非如此，如果要选择段落的第一个子元素，应当写为p > *:first-child。

设置超链接的各个状态：

a:link    { color: #FF0000 }
a:visited { color: #00FF00 }
a:hover   { color: #FF00FF }
a:active  { color: #0000FF }

当输入框获取焦点时，设置背景色：

input:focus
{
    background-color:yellow;
}

对于所有作为首个子元素的段落(p)，字体设置成粗体：

p:first-child { font-weight: bold; }

<div>
    <p>This paragraph will use the style.</p>
    <p>This paragraph will not use the style.</p>
</div>
<div>
    <p>This paragraph will use the style.</p>
    <p>This paragraph will not use the style.</p>
</div>

为lang类带有值为”no”的引用(q)定义引号的类型：

q:lang(no)
{
    quotes: "~" "~"
}

<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>

CSS伪元素 pseudo-element

CSS伪元素用于向某些选择器设置特殊效果。伪元素的语法为：

selector:pseudo-element {property:value;}

伪元素也可与类配合使用：

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

伪元素有以下常用的几种：

:first-letter, :first-line, :before, :after

为段落的第一行设置特殊样式：

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

“first-line” 伪元素只能用于块级元素。

为段落的首字母设置特殊样式：

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

“first-letter” 伪元素只能用于块级元素。

在标题1之前插入一幅图片：

h1:before 
{
    content:url(/i/w3school_logo_white.gif)
}

默认地，这个伪元素是行内元素，不过可以使用属性display改变这一点。

在标题1之后插入一幅图片：

h1:after 
{
    content:url(/i/w3school_logo_white.gif)
}

默认地，这个伪元素是行内元素，不过可以使用属性display改变这一点。

更多请参考：W3School