Tony学前端（八）：CSS起步，樱桃小丸子家的故事！

本文共有4700字，预计阅读时间：25分钟

在文章末尾可以观看本课的视频

首先我们复习一下上次都讲了哪些：

框架：

框架的横向、纵向划分。

内联框架：

标签与

表单元素：

的变化、单选框、复选框、下拉列表、按钮、多行文本框。

另外我们目前学习的是HTML4，再以后的阶段我们还会学习HTML5，在HTML5中，会学习更炫的元素，譬如画布、音频、视频等等。娃娃们加油，我们的目标是星辰大海！

讲完了如何造房子（HTML），接下来就要学习CSS，学习如何把房子装饰的漂漂亮亮的！

首先我们自然要学习，什么是CSS？

CSS的全称是层叠样式表（CascadingStyleSheets）。那什么是层叠？难道是叠被子？样式也能够叠起来？

样式确实会一层层叠起来，因为一个元素的样式属性可能会被不同的规则影响到。

就像老爸让你穿黄颜色，而老妈让你穿红颜色，那么最终你会穿什么颜色？当然是老妈的优先级高，穿红色！

每一条样式的定义就是一条规则，当一个样式被定义了多条规则时，将会按照一定的计算法则来决定最终这个样式呈现何种规则，就像一堆东西叠在一起，但是最上面的只会显示一件，这个就是层叠。

红色还是黄色？

像以上示例，首先我们在里设置了字体颜色是黄色，由于该属性能被的子元素所继承，因此内的

就被定义了一条样式：字体颜色为黄色；同时我们又在

里设置了字体颜色为红色，因此

又被定义了一条样式：字体颜色为红色。很明显一个元素的字体颜色不能既为黄色又为红色，因此浏览器会按照一定的计算法则来决定

的最终字体颜色，该示例中最终字体颜色为红色。

因此这个层叠不像是叠被子，而更像是叠罗汉。

CSS主要有两大优点：

1、解决了内容与表现分离的问题：

对于html元素来说，其目的是表达“我是什么？”， 而不是“我是怎么样？”，只是为了让html元素可以呈现的更丰富，才逐渐增加了众多html的属性。但是随着html属性的越来越多越来越复杂，会是整个html变的越来越杂乱。而使用css，则可以使的样式的设定与html元素之间分离。

2、可以极大的提高工作效率：

如果用属性来对html元素进行描述的话，那么即使元素具有相同的样式，也得每个元素都描述一遍，这太繁琐。而如果使用css来设定样式，我们可以使用各种选择器来对html进行批量的样式设定。

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

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中表：

浏览器缺省设置。

外部样式表（位于外部文件中）。

内部样式表（位于标签内部）。

行内样式（位于HTML元素内部）。

此时浏览器会按照以下的优先级来决定最终采用哪一个样式：

行内样式（位于HTML元素内部）。

内部样式表与外部样式根据一套优先级规则来决定。

浏览器缺省设置。

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明：

一、选择器：

选择器通常是我们需要改变样式的 HTML 元素。如所有的

标签、某个id的

、某类class的、表格里的第五行等等。

二、样式声明：

每条声明由一个属性和一个值组成，属性是我们希望设置的样式属性，每个属性有一个值，属性和值被冒号分开。多条声明由分号隔开。

如以下这个样式：

h1

其结构为：

因此，如果小丸子妈妈有这样的要求的话：

那么其样式应该这样写：

樱桃小丸子

我们先学习三种最常见的选择器：标签选择器、id选择器、以及类(class)选择器。当然选择器不止这三种，我们在后面还要学习更复杂的组合选择器。

1、标签选择器：直接写标签名，多种标签可以用逗号隔开，如以下都是标签选择器：

span

p

h1,h2,h3

tr,div

2、ID选择器：可以为标有特定id的 HTML 元素指定特定的样式，多个ID也可以用逗号隔开，ID选择器要以“#”开头，如以下都是ID选择器：

#tony

#tony,#tom

#a

3、类选择器：可以为标有特定class的 HTML 元素指定特定的样式。多个class也可以用逗号隔开，类选择器要以“.”开头。

.man

.man,.woman

.student

隔了这么多期我俩终于回归了！

创建CSS的方式有三种：外部样式表、内部样式表、以及内联样式。

1、外部样式表：我们通常将一个网站的公共样式写在一个外部样式表中，这样只要修改一个文件就可以改变整个网站的外观。外部样式表保存在.css文件中，通过

来引入，

位于中：

以上我们引入了一个名为mycss.css的外部css文件。

2、内部样式表：当单个页面要使用特殊样式时，便可使用内部样式表。内部样式表放在

以上我们写了两组内部样式，分别是"h1,h2,h3"的标签选择器以及".study"的类选择器。

三、行内样式：行内样式直接写在标签的style属性内，行内样式会损失CSS的许多优势，因此不建议这种写法：

你好

之前我们学习html时写的样式都是行内样式。

我们学习了这么多CSS的准备知识，接下来就开始学习具体的CSS样式吧！

在一个网站中，对HTML元素的背景进行处理总是必不可少的。背景处理分为背景颜色与背景图片。

背景颜色的属性为background-color，其值可以为颜色名、十六进制的颜色值或者rgb颜色值：

p

p

p

以上均把

的背景色设置为红颜色。

对于十六进制颜色值及rgb颜色值的具体表达方式我们将在后面专门学习。另外目前我们只能把背景色设置为简单的纯色，而当我们学习了CSS3（新一代CSS）后，就可以设置更丰富的背景色了，譬如渐变色、条纹等等：

css3专有

背景图片的样式控制就比较多了，包括：背景图片的获取、图片重复、图片定位以及图片固定等。

一、背景图片的获取：要把图像放入背景，需要background-img属性。其值为url值，采用相对路径。

body

要注意的是url不能漏写。

二、背景图片重复：背景图片默认是在元素中平铺的，因此假设用这个图片做背景：

那么在元素中会是这个效果：

控制图片重复的属性是background-repeat，其默认是repeat，表明图片重复，如果不想重复，则将其设置为no-repeat，其效果为：

如果设置为repeat-y，则图片只在垂直方向上重复：

如果设置为repeat-x，则图片只在水平方向上重复：

利用repeat-x，我们经常会来制作水平分割线的效果，我们通常会先制作一个很细的图片，填充到背景，随后让其 沿水平方向平铺。

先制作水平线单元，图像高度就是水平线的高度：

水平平铺以后的效果：

三、背景图片位定位：背景图片默认是从元素的左上角开始，通过background-position属性可以改变背景图片的起始位置。这个属性的值是一个组合值，分别为水平偏移和垂直偏移，例如：

body

以上表明该背景图片的起始位置是水平偏移20%，垂直偏移30%，基本上就是这样一个效果，在background-repeat设置为no-repeat时就观察的更明显了，背景图片其实是向右下方移动了：

水平及垂直偏移量可以有三种表示方式：

1、关键字，分别有：center、left、right、top、bottom，其表示的起始位置与字面意思相符，分别是中间、左侧、右侧、顶侧和底侧。

2、百分比，如10%、50%等。

3、具体的像素值，如15px、50px等。

因此，background-position可以有以下表示方式：

background-position:center left

background-position:20% 30%

background-position:20px 15px

background-position:50%

注意最后一个样式，如果只有一个偏移量值的话，表明水平和垂直方向的偏移量均是该值，因此最后一个样式的效果是背景图片居中。

四、背景图片固定：当页面垂直滚动的时候，背景图片也自然随之滚动，如果不想让背景图片滚动，而一直是固定着的，则可以将属性background-attachment设置为fixed。一般来说这个效果应用在广告、logo的显示上。

五、背景样式的懒人写法：就像我们之前学习的font属性一样，背景的样式也可以使用懒人写法，以避免我们每次都写长长的background-xxx属性名。我们可以把相关样式写在background属性中，如以下写法：

background:red url(“a.jpg”) no-repeat center 30% fixed

其等同于以下这些样式：

background-color:red;

background-img:url("a.jpg");

background-repeat:no-repeat;

background-position:center 30%;

background-attachment:fixed;

懒人写法果然很是方便呀！

后面暂时没有了，我们来总结一下，今天我们主要学习了：

CSS基本概念：

什么是CSS、层叠是什么意思、为什么要用CSS。

CSS深入：

CSS定义、语法、选择器、创建。

CSS背景：

CSS背景颜色、背景图片。

今天我们是CSS的开篇，主要讲述了什么是CSS，CSS相关的一些概念，最后学习了背景颜色与图片的样式设定，学习CSS以后，会使我们的网页变的漂亮起来，娃娃们加油，我们的目标是星辰大海！！

点击观看本课视频，也可以在腾讯视频上搜索“Tony学前端”：