定义
HTML 用于撰写页面的内容,而 CSS 将决定这些内容该如何在屏幕上呈现。涉及的方面例如整个页面的布局、元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
提示: 在 Internet 早期阶段(CSS大量使用之前),页面的内容和样式都由 HTML 来负责,这是一个相当糟糕的问题。
语法
一条CSS样式规则由两个主要的部分构成:选择器,以{}包裹的一条或多条声明:
说明:
选择器是您需要改变样式的对象(上图的规则就一级标题生效)。
每条声明由一个属性和一个值组成。(无论是一条或多条声明,都需要用{}包裹,且声明用;分割)属性(property)是您希望设置的样式属性(style attribute)。
每个属性有一个值。属性和值被冒号分开。
id 选择器
- id 选择器适用范围只有一个元素。
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
class 选择器
- 元素的class值可以多个
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
样式表
- 外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
- 内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。
盒子模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
边框与边距
CSS边框属性允许你指定一个元素边框的样式和颜色。
- border-style属性用来定义边框的样式
- 通过 border-width 属性为边框指定宽度。
组合选择器
- 后代选择器
后代选择器用于选取某元素的后代元素。
以下实例选取所有 p元素插入到 div元素中:
div p
{
background-color:yellow;
}
- 子选择器
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素直接/一级子元素的元素。
以下实例选择了div元素中所有直接子元素 p:
div>p
{
background-color:yellow;
}
文献
- 棋歌网
- 菜鸟教程runoob.com