零基础入门web开发(3) —— 学习CSS样式

简介

一个优秀的网站必须拥有较高的颜值，今天我们就来学习如何给网页增加样式。

目标

• 学习使用style属性修改元素的显示效果
• 学习CSS语法

任务

• 使用HTML+CSS构建页面

示范代码

从本节课开始课程中的一些例子将会给出完整的示范代码，共享地址为我的github，同时每节课内容的.md文件也收录在内（这意味着你以后也可以用github来追本教程了！）。

请关注本教程对应的github仓库吧！(求follow求star)

• 仓库地址

预期时间

• 1-2天

---

样式

迄今为止我们所教的内容只能让你写出黑白的文字和线条组成的页面，这实在是有悖正常人类的审美，为了能够使得网页拥有高可定制的效果，HTML引入了样式的概念。每个元素都拥有非常多可以自己定义的样式：字体，背景色，背景图片，边框...

目前有三种方式来使用自定义的网页样式

1.使用style属性（内联样式）

这个非常好理解，直接在想要修改的元素中添加style属性，然后添加对应的样式描述就可以了

一个非常简单的例子：让我们定制一个字体颜色为红色的段落：

这是一个红色的段落...

把它放在html的body中，用浏览器访问，你就能看到效果。

2.使用

这是一个红色的段落

*注意作用域，这样的写法会使得整个网页中所有的p标签中的文字都变为红色

3.使用外链引入CSS

当页面的样式变得繁多时，在页面中写大量的CSS内容就显得不合适了，因此可以将他们单独写在一个.css文件中，再引入。

创建demo.css，内容如下：

p {
    color: red
}

在demo.html中的标签中，添加下面的代码

注意href里的链接写法，参考第一节中提到的相对路径和绝对路径

效果同上

样式的继承和覆盖

我们来考虑这样一个问题，html中的元素是存在嵌套关系的，因此互相嵌套的元素之间的样式会发生互相影响。

如果一个元素本身没有对应的样式，那么它的样式就会继承它的父元素
如果一个元素和它的父元素都声明了同一种样式，那么它的样式就会覆盖它的父元素

简单举例

继承

        
这是蓝色的文字

覆盖

        
这是红色的文字

之所以会产生这样的原因，是因为样式的渲染是存在一个类似“就近原则”的优先级

另外即便只有一个元素，它的样式也存在优先级：

内联样式 > ID样式 > 类别样式 > 标记样式

后面三种样式之后会详细讲解

尝试入门样式！

参考下面教程来学习使用样式！

• HTML样式教程

CSS

样式的写法应该拥有统一的语法和规范，因此诞生了CSS

CSS版本经过了多年的迭代，目前主要使用CSS 3版本，此外也衍生出多个变种（比如LESS,SESS）

接下来有关CSS的教程会把主要的css和html内容分开，使用外链方式引入一个.css文件来实现。

基础语法

一个css区块的形式大致如下：

选择器 {
    样式名称:值
}

它会对选择器所能选择的所有元素都应用大括号里面的样式

补充知识：元素的class和id

html元素有两个特别的“身份”属性，它们是应用css样式的重要基础。

class 类别

一个字符串，可以对多个元素应用同一个class，它表明了多个元素归属于“同一类”，如下：

    

        
this is card 1
    
    

        
this is card 2
    

这两个div就都是“card”类型的了（现在还看不出有什么用）

id 标识

一个id只能应用给一个元素，是该元素的唯一标识符。

注意：id不能是纯数字

    

        
this is card 1
    
    

        
this is card 2
    

接下来我们使用不同类型的选择器来应用样式

类别选择器：.

.example 可以选择所有class="example"的元素

id选择器：#

#example 可以选择所有id="example"的元素

综合示范

创建两个class为card的div，id分别为card1和card2

html

    

        
this is card 1
    
    

        
this is card 2
    

对所有card类应用样式使得其背景色为粉色，字体颜色为蓝色

对card1单独应用样式使其字体颜色为黑色

对card2单独应用样式使其背景色为灰色

css

.card {
    background-color: pink;
    color: blue;
}

#card1 {
    color: black;
}

#card2 {
    background-color: gray;
}

使用外链方式引入css文件，得到显示效果为：

请仔细体会样式的优先级。

示范代码

请查看case2目录下的3-1.html和3-1.css

CSS学习路径与指南

CSS在网页的��编写中拥有重要的地位，但是大多数时间我们会引入一些现有的CSS样式表来改善网页样式，而不是从头编写。

限于精力和篇幅限制，本节课有关css样式的内容只能点到为止了，下面给出CSS较为完整的学习路径和指南，以及一些相关课程，对于CSS和网页样式有兴趣的同学不妨尝试学习一下。

CSS主要应用于web前端，�在后面的前端篇课程中我们会继续深入讲解CSS�。

学习路径与知识点�

• 基础属性：

  文字，颜色等

• 布局属性：

  �外边距，内边距，边框，盒子模型

• 布局*� ：

  这里是个重点也是个坑，传统技术�一般使用绝对定位和相对定位加上浮动布局来实现各种布局，现在我们则多采用新的flex布局方式，如果你想了解布局可以看看上面讲到的知识点，后面的前端教程篇我们会深入讲解flex布局

css推荐学习教程

• 完整css3手册和教程
• �学习css布局

小结

本节课介绍了一些基本，简单的css样式和用法，因为不是本次教程的重点所以没有深入讲解，�建议有兴趣的同学自己了解一下，后面前端篇的课程也会进一步讲解。