CSS基础

CSS概述

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

CSS样式

CSS背景

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
CSS 在这方面的能力远远在 HTML 之上。
背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。这条规则把元素的背景设置为灰色：

p {background-color: gray;}

如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：

p {background-color: gray; padding: 20px;}

背景图像
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

大多数背景都应用到 body 元素，不过并不仅限于此。

下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：

p.flower {background-image: url(/i/eg_bg_03.gif);}

您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：

a.radio {background-image: url(/i/eg_bg_07.gif);}

背景定位
可以利用 background-position 属性改变图像在背景中的位置。

下面的例子在 body 元素中将一个背景图像居中放置：

body {
background-image:url(’/i/eg_bg_03.gif’);
background-repeat:no-repeat;
background-position:center; }

CSS文本

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

缩进文本
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：

p {text-indent: 5em;}

水平对齐
text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

字间隔
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：

p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;}

This is a paragraph. The spaces between words will be increased.

CSS字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

指定字体系列
使用 font-family 属性 定义文本的字体系列。

body {font-family: sans-serif;}

字体风格
font-style 属性最常用于规定斜体文本。

该属性有三个值：
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示

字体变形
font-variant 属性可以设定小型大写字母。

p {font-variant:small-caps;}

字体大小
font-size 属性设置文本的大小。

h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;}

CSS 链接

链接的四种状态：

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

CSS的引入方式:

​ 外部样式: 通过link标签引入一个外部的css文件

​ 内部样式: 直接在style标签内编写CSS代码

​ 行内样式: 直接在标签中添加一个style属性, 编写CSS样式

CSS定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。

CSS相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative { position: relative; left: 30px; top: 20px; }

CSS绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative { position: absolute; left: 30px; top: 20px; }

CSS浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。浮动的元素会脱离正常的文档流,在正常的文档流中不占空间。

float属性:
left
right
clear属性: 清除浮动
both : 两边都不允许浮动
left: 左边不允许浮动
right : 右边不允许浮动 流式布局

CSS选择器

元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。

类选择器

类选择器允许以一种独立于文档元素的方式来指定样式，以.开头。
该选择器可以单独使用，也可以与其他元素结合使用。

id选择器

首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

*#intro {font-weight:bold;}

与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：

#intro {font-weight:bold;}

第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。

属性选择器

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

后代选择器

后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

子元素选择器

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

伪类选择器

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

selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用。

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

扩展

• CSS的优先级

  按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器

  就近原则: 哪个离得近,就选用哪个的样式

  CSS: 层叠样式表

  主要作用:

1. 美化页面
2. 将页面美化和HTML代码进行分离,提高代码的服用型

• 选择器:

  • 元素选择器: 标签的名称{}
  • 类选择器: 以. 开头 .类的名称
  • ID选择器: 以#开头 , #ID的名称 (ID必须是页面上面唯一)

• CSS中的其它选择器

  • 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}

  • 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代

  • 子元素选择器: 父选择器 > 儿子选择器

  • 伪类选择器: 通常都是用在A标签上