@linux1s1s 2017-07-13T11:37:26.000000Z 字数 2988 阅读 1505

Base Time-CSS

Base H5 2017-01

什么是CSS

Cascading Style Sheets 简称：CSS 中文：CSS 指层叠样式表

语法

此处输入图片的描述

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS实例

请参考W3School CSS实例

栗子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p
{
    color:red;
    text-align:center;
} 
</style>
</head>
<body>
<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>
</body>
</html>

此处输入图片的描述

id 和 class 选择器

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#para1
{
    text-align:center;
    color:red;
} 
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

这里仅仅对id为para1的字段做了CSS样式处理

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center
{
    text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

如何创建CSS

外部样式表

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

内部样式表

<head>
<style>
    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>

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

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

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS背景属性

此处输入图片的描述

栗子：

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

CSS文本属性

此处输入图片的描述

栗子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
    <style>
        h1 {text-align:center;}
        p.date {text-align:right;}
        p.main {text-align:justify;}
    </style>
</head>
<body>
    <h1>CSS text-align 实例</h1>
    <p class="date">2015 年 3 月 14 号</p>
    <p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
    <p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
</body>
</html>

CSS字体属性

此处输入图片的描述

栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title>
    <style>
        p.normal {font-style:normal;}
        p.italic {font-style:italic;}
        p.oblique {font-style:oblique;}
    </style>
</head>
<body>
    <p class="normal">这是一个段落,正常。</p>
    <p class="italic">这是一个段落,斜体。</p>
    <p class="oblique">这是一个段落,斜体。</p>
</body>
</html>

CSS链接

栗子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link {color:#FF0000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

CSS 盒子

此处输入图片的描述

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

关于CSS可以进一步学习CSS 实例，余下的部分不再展开。

参考：

Base Time-CSS

什么是CSS

语法

CSS实例

栗子

id 和 class 选择器

如何创建CSS

外部样式表

内部样式表

内联样式

CSS背景属性

CSS文本属性

CSS字体属性

CSS链接

CSS 盒子

内容目录