CSS基础教程-优快云博客

从菜鸟教程中学习整理

一、初步了解CSS

二、 CSS相关语法

选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号(;)结束，声明组以大括号({})括起来。
CSS注释以 "/*" 开始, 以 "*/" 结束。
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。HTML元素以id属性来设置id选择器，CSS 中 id 选择器以 "#" 来定义。

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。

三、样式表相关

插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。

在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link> 标签在（文档的）头部。

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用 <style> 标签在文档头部定义内部样式表：

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

将表现和内容混杂在一起

但是内联样式会损失掉样式表的许多优势。慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

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

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

内联样式 > 内部样式 >外部样式 > 浏览器默认样式

如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

CSS基础学习（1）