从零开始学CSS - 概述

概述

CSS 指层叠样式表 (Cascading Style Sheets)
所有的主流浏览器均支持层叠样式表。

样式层叠次序优先级 （从上到下，由底到高）

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

选择器的分组

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

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

继承与兼容性

我们可以通过对body元素设置规则，来使子元素都可以继承该规则。
如果某些浏览器不支持继承原则的话，可采用针对性设置，解决问题，如下：

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

p, td, ul, ol, li, dl, dt, dd  {
    font-family: Verdana, sans-serif;
}

派生选择器

当strong为li元素内时生效。

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

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

id 选择器

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

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

通过id，指定特有的元素独立发挥作用

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

<div id="template">
    ...
</div>

类选择器

类选择器以一个点号显示：

.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 .center 选择器中的规则。

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

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

其它同id选择器类似，优先级比id选择器低。

属性选择器

对带有指定属性的 HTML 元素设置样式。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

[title]
{
    color:red;
}
[title=haha]
{
    border:5px solid blue;
}
[title~=hello]  /*适用于由空格分隔的属性值*/
{ 
    background-color:salmon; 
}

属性如下

<li title="haha hello"> message </li>

如何创建 CSS

外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

内部样式表

<head>
<style type="text/css">
    hr {color: sienna;}
    p {margin-left: 20px;}
    body {background-image: url("images/back40.gif");}
</style>
</head>

内联样式

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

作者：Zyao89；转载请保留此行，谢谢；

最后编辑于：2017.12.06 05:27:20

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

从零开始学CSS - 概述