CSS 介绍

最新推荐文章于 2022-02-09 19:53:13 发布

too肥

最新推荐文章于 2022-02-09 19:53:13 发布

阅读量231

点赞数

分类专栏：前端 css 文章标签： css基础课程

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

CSS 介绍

简介

本节内容主要对 CSS 进行初步介绍，旨在理解 CSS 具体是什么，又是如何达到渲染文档，使网页看起来更美观；另外掌握一些 CSS 的基础概念，有助于后续内容的学习。
知识点

CSS 概述
CSS 运行机制
CSS 语法
CSS 数值与单位
CSS 样式类型
区块模型

CSS 概述

层叠样式表（英语：Cascading Style Sheets，简写 CSS），又称串样式列表、级联样式表、串接样式表、阶层式样式表，一种用来为结构化文档（如HTML文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，由 W3C 定义和维护。目前最新版本是 CSS2.1，为 W3C 的推荐标准。
注：定义来自维基百科
直观的来说CSS就是我们网页的美容师，为我们的网页添加样式，美化网页，让网页更加美观。而我们前面所学到的HTML是写出我们网页的结构。下面给大家看两张比较形象的图片。
HTML（结构标准，相当于人的骨架结构）：
在这里插入图片描述
CSS(表现标准，相当于人的穿着装扮)：

CSS 运作机制

CSS 以HTML为基础，通过其规则应用于文档从而渲染文档，使得我们的HTML页面更加美观。一个 CSS的规则如下：

一个选择器，它指定哪些元素应用CSS属性。就比如我们要把陶瓷涂成红色，那么我们首先需要指定哪一个或哪一些陶瓷，我们才能够开始涂抹。当然在我们的CSS中，如果指定的元素不存在，也是不会报错的，只是没有这个样式显示。
一组属性，属性的值更新了HTML的内容的显示方式。比如：我想让元素相对于浏览器居中，或者元素背景变为红色。

新建一个 test.html 文件(后续的例子中，将不再提醒建立 test.html 文件，大家根据个人需求自行创建对应的html文件，完成后续操作)：
例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p {
                color: red;
            }
        </style>
    </head>

    <body>
        <p>学习使我快乐！</p>
    </body>

</html>

注：上述例子中写了一个简单的p标签，首先通过p指定为元素p添加样式，再通过属性：color：red，使其颜色为红色。
在浏览器中显示效果如下：
在这里插入图片描述

CSS 语法

CSS 语法结构为：选择器{属性：值;属性：值;…}

选择器：通常是你需要设置样式的 HTML 元素。
属性：是你需要设置的样式属性，比如宽高，颜色，大小等。
属性值：你需要设置的样式属性的具体值，比如宽高具体是多少 px，颜色具体是什么颜色。
例子：

h1{
    color:red;
}

注：上述例子中 h1 是选择器，color 是属性，red 是属性值。

CSS 数值与单位

你会在很多地方看到 CSS 单位中使用到数值。下面为大家介绍数值的最常用类别。

长度和尺寸

像素（px）是一种绝对单位（absolute units），无论其他相关的设置怎么变化，像素指定的值是不会变化的。这也是我们最常用的单位。
em：1 em 与当前元素的字体大小相同（一个大写字母M的宽度）。在 CSS 样式被应用之前，浏览器给网页设置的默认基础字体大小是 16 像素，也就是说 1 em 的计算值默认为 16 像素。但是 em 单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，em 的像素值就会变得复杂。em 是 Web 开发中最常用的相对单位。
rem（root em）：（root em）和 em 以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用，但是在旧版本的IE上不被支持。

无单位的值
在 CSS 中，你有时会遇到一些无单位的数值——这并不总是意味着错误，在某些情况下，使用无单位的数值也是可以的。比如无单位的 0。因为 0 就是 0，与单位无关。
例子：

margin:0;

无单位的行高：行高（line-height）如果没有单位，那么：行高=文字大小*行高值。

百分比
大部分使用特定数值指定的内容同样可以使用百分比来指定。比如上面所提到的行高，如果行高单位是 "%"那么行高的计算也是：行高=文字大小*行高值。

颜色

颜色关键词：用英语名称的“关键字”来表示，比如：black，green，red，blue，yellow，white 等等。
十六进制值：每个颜色包括一个哈希/磅符号（#）和其后面紧跟的六个十六进制数，其中每个十六进制数可以是 0 和 F 之间的一个值（一共 16 个），0123456789abcdef。每对十六进制数代表一个通道（红色、绿色或者蓝色）允许我们指定 256 个可用值。 (16 x 16 = 256)
RGB：一个 RG 值是一个函数——RGB() ——给定的三个参数，分别表示红色，绿色和蓝色通道的颜色值，这与十六进制值的工作方式大致相同。区别在于，RGB中每个通道不是由两个十六进制数字表示的，而是由 0 到 255 之间的十进制数表示的。
不透明度（Opacity）:通过 opacity 设置透明度，CSS 中设置元素透明度有几种方法：（1）opacity : value ; value 值规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。（2）通过 RGBA，前三个值是 RGB 颜色值，最后一个是透明度的值。比如：background-color: RGBA(255,0,0,0.5);

CSS 样式类型

CSS 样式类型分为三种：

内联式(行内式)：通过标签的style属性来设置元素的样式，语法格式为：

<标签名 style="属性1:属性值1; 属性2:属性值2; ..."> 内容 </标签名>

例子：

<p style="color:blue;"> 哈喽，要保持微笑哦。</p>

优点：十分灵活，书写方便，权重高（后面会提到）。

缺点：只能操作某一个标签，没有实现样式和结构相分离。

内嵌式（内部样式表）：将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义。语法格式为：

<head>
<style type="text/css">
    选择器 {属性1:属性值1; 属性2:属性值2; ...}
</style>
</head>

例子：

<style type="text/css">
    p{color:blue;}     
</style>

优点：可以通过一条语句操作多个标签或类。

缺点：只能控制一个页面，没有彻底实现样式和结构分离。

外链式（外部样式表）：将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通过 link 标签将外部样式表文件链接到 HTML 文档中。语法格式为：

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

注：href 定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径。rel 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

例子：
首先我们要创建一个 css 文件，比如：main.css。然后在里面就能直接写 css 代码了。比如:

p{color:blue;}

其次我们在 html 文件中引入这个 css 文件。

<link rel="stylesheet" href="main.css" />

优点：一个单独的 CSS 文件，多个 HTML 文件可以引用一个 CSS 样式表文件。HTML 代码和 CSS 代码分离,要写什么就在哪个文件去找，修改方便。

注：这样写的前提是 HTML 页面与 CSS 文件在同一文件夹下。行内样式表一般写在标签头部，内嵌式样式表、外联式一般写在标签内。为了编码规范，希望大家尽量使用外联式来写我们的 CSS 代码。

区块模型

区块模型也就是我们常说的盒子模型，而所谓盒子模型就是把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。我们用一张图来表示：
在这里插入图片描述

padding（内边距）

padding内边距位于内容框的外边缘与边界的内边缘之间。padding-top:上内边距，padding-right:右内边距，padding-bottom:下内边距，padding-left:左内边距。设置内边距的写法：

padding:5px 10px 15px 20px;表示上内边距是 5 px，右内边距是 10 px，下内边距是 15 px，左内边距是 20 px。
padding:5px 10px 15px;表示上内边距是 5 px，右内边距和左内边距是 10 px，下内边距是 15 px。
padding:5px 10px;表示上内边距和下内边距是 5 px，右内边距和左内边距是 10 px。
padding:10px;表示所有 4 个内边距都是 10 px。

注：padding 属性接受长度值或百分比值，但不允许使用负值。如果使用百分比值，百分数值是相对于其父元素的 width 计算的。

border（边框）

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。还记得吗？前面我们所学的HTML中，我们用表格来创建文本周围的边框，现在我们可以通过使用CSS边框属性创建出效果出色的边框，并且可以应用于任何元素。
边框语法：

border:border-width||border-style||border-color

border-top设置上边框样式，border-bottom设置下边框样式，border-left设置左边框样式，border-right设置右边框样式。
border-width, border-style,border-color分别仅设置边框的宽度／样式／颜色，并应用到全部四边边界。
你也可以单独设置某一个边的三个不同属性，如border-top-width,border-top-style,border-top-color等。

border-style 的值：

值	描述
none	定义无边框
hidden	与“none”定义相同；不过应用与表除外，对于表，“hidden”用于解决边框冲突
dotted	定义点状边框；在大多数浏览器中为实线
dashed	定义虚线；在大多数浏览器中为实线
solid	定义为实线
double	定义为双线；双线的宽度等于border-width的值
groove	定义3D凹槽边框；其效果取决于border-color的值
ridge	定义为3D垄状边框；其效果取决于border-color的值
inset	定义为3D inset边框；其效果取决于border-color的值
outset	定义为3D outset边框；其效果取决于border-color的值
inherit	定义从父元素继承边框

注：你可以按照 top-right-bottom-left（上右下左）的格式，分别写出元素的各个边框的属性。
例子：

p {
    border-style: solid; 
    border-width: 15px 5px 15px 5px;
}

也可以简写为：

p {
    border-style: solid;
    border-width: 15px 5px;
}

注：和前面 padding 的简写方式一样，有遗忘的可以往前面看看哟。

边框的颜色可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：

p {
  border-style: dashed;
  border-color: yellow rgb(25%,35%,45%) #909990 red;
  }

注：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。

margin(外边距)

外边距（margin）代表 CSS 框周围的外部区域，称为外边距。和 padding 类似，也有 margin-top、margin-right、margin-bottom 和 margin-left。写法仿照 padding。
注：与 padding 不同的是 margin 可以是负值。另外需要注意的是外边距合并问题，简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者（两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值；两个相邻的外边距都是负数时，折叠结果是它们两者之间绝对值较大的值;两个外边距一正一负的时候,折叠的结果是两者相加的和）。边距合并问题只发生在块级元素之间

外边距合并示例图：
在这里插入图片描述

高级的框操作

溢流：当你使用绝对的值设置了一个框的大小（如，固定像素的宽/高），允许的大小可能不适合放置内容，这种情况下内容会从盒子溢流。我们使用 overflow 属性来控制这种情况的发生。常用的值：

auto:当内容过多的时候溢流的内容被隐藏，然后出现滚动条，让我们滚动查看所有的内容。
hidden: 当内容过多，溢流的内容被隐藏。
visible: 当内容过多，溢流的内容被显示在盒子的外边。
例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p {
                width: 500px;
                height: 2.5em;
                padding: 1em 1em 1em 1em;
                border: 1px solid black;
            }

            .one {
                overflow: auto;
            }

            .two {
                overflow: hidden;
            }

            .three {
                overflow: visible;
            }
        </style>
    </head>

    <body>

        <p class="one">
            我爱学习，学习使我快乐！我爱学习，学习使我快乐！
            我爱学习，学习使我快乐！我爱学习，学习使我快乐！
            我爱学习，学习使我快乐！我爱学习，学习使我快乐！
            我爱学习，学习使我快乐！我爱学习，学习使我快乐！
        </p>

        <p class="two">
            我爱学习，学习使我快乐！我爱学习，学习使我快乐！
            我爱学习，学习使我快乐！我爱学习，学习使我快乐！
            我爱学习，学习使我快乐！我爱学习，学习使我快乐！
            我爱学习，学习使我快乐！我爱学习，学习使我快乐！
        </p>

        <p class="three">
            我爱学习，学习使我快乐！我爱学习，学习使我快乐！
            我爱学习，学习使我快乐！我爱学习，学习使我快乐！
            我爱学习，学习使我快乐！我爱学习，学习使我快乐！
            我爱学习，学习使我快乐！我爱学习，学习使我快乐！
        </p>
    </body>

</html>

在浏览器运行效果展示图：
在这里插入图片描述

CSS框类型

之前我们说的所有对于框的应用都表示的是块级元素的。然而CSS还有一些表现不同的其他框类型。我们可以通过display属性来设定元素的框类型。display属性有很多的属性值。这里着重讲三个常见的 :block, inline, 和 inline-block。

display：block;将行内元素转换为块级元素。
display：inline;将块级元素转换为行内元素。
display：inline-block;转换为行内块元素
块级元素的特点：
1. 一个块级元素独占一行。
2. 元素的高度、宽度、行高以及顶和底边距都可设置。
3. 元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。
4. 常见的块级元素：<div>、<p>、<h1>、<form>、<ul>和 <li>。
行内元素的特点：
1. 和其他元素都在一行上。
2. 元素的高度、宽度、行高及顶部和底部边距不可设置。
3. 元素的宽度就是它包含的文字或图片的宽度，不可改变。
4. 常见的行内元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>。
行内块元素特点：同时具备内联元素、块状元素的特点。常见行内块元素：<img>、<input>。
例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            span{
                width: 500px;
                height: 2.5em;
                background: blue;
                margin-bottom: 50px;
                color: red;
            }
        </style>
    </head>
    <body>
        <span>我是行内元素1</span>
        <span>我是行内元素2</span>
    </body>
</html>

在浏览器显示为：
在这里插入图片描述
注：上述例子中，我们发现span标签中的 width，height 以及 margin-bottom 属性都没有生效。我们在上诉例子中加入：display:block; 这行代码。（放在span样式中），来看看效果：

如图所示，我们将行内元素转换为块级元素后，就能设置宽高了和下边距了。但是我们如果又想设置宽高，又想让它们在一行中显示该怎么办呢？我们试着把display的值设置为：inline-block；来看看会是什么效果呢：
在这里插入图片描述
果然转化为行内块后，既拥有了内联元素的特点又有了块级元素的特点，你也动手试试吧。

挑战：制作谷歌图标

通过我们前面所需的 CSS 内容，来制作一个谷歌图标的小案例。
在这里插入图片描述
源码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta charset="utf-8">
        <style>
            span {
                font-size: 200px;
            }

            .blue {
                color: blue;
            }

            .red {
                color: red;
            }

            .orange {
                color: orange;
            }

            .green {
                color: green;
            }
        </style>
    </head>

    <body>
        <span class="blue">G</span>
        <span class="red">o</span>
        <span class="orange">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red">e</span>
    </body>

</html>

注：有一点选择器的内容，看不懂没关系，可以先学后面的选择器章节后再过来看看这个案例，因为这个案例很简单，所以放在这增加一下大家对 CSS 语法的基础理解。

学习方法-通过浏览器进行 CSS 排错和调试代码

和 HTML 一样，在 CSS 中，如果选择器是无效的，那么它就不会选择任何东西，而整个规则也不会再做任何事情，浏览器只会继续执行下一个规则，而不是直接崩溃报错。这使得就算我们的代码有错，但是依然能够运行显示给用户，只是显示的样式可能和我们预期的不一样。但是，当你想要去修改这个错误的时候，似乎会显得无从下手，因为我们甚至都不知道错在哪个地方，当代码量庞大的时候，一行一行去找显然是不可取的。那么如何在浏览器中调试我们的 CSS 代码或者查看别人网站的 CSS 代码呢？下面将为大家一一讲解。

首先在浏览器中运行我们的前端代码，或者直接进去别人的网站，此处以实验楼为例。
然后我们点击 F12 或者点击鼠标右键再点检查，进入调试模式。如下图所示：
最右边 styles 里面的代码就是我们的 CSS 代码了。
如果是自己的项目，可以直接在 styles 里面修改我们的 CSS 代码，使得样式调到我们所需要的，最后再复制调试好的代码，到我们的本地。大大减少了我们本地改一次 CSS 代码，运行一次的时间，提高编程效率。
Elements 那一行最左边的这个图标用鼠标左键选中，直接点击页面，就能指定显示出那一块的样式。
styles 里面特别要注意有感叹号或者代码上面有一条线划掉的。这说明这些样式未成功生效。

too肥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 介绍

CSS 基础课程简介本节内容主要对 CSS 进行初步介绍，旨在理解 CSS 具体是什么，又是如何达到渲染文档，使网页看起来更美观；另外掌握一些 CSS 的基础概念，有助于后续内容的学习。知识点CSS 概述CSS 运行机制CSS 语法CSS 数值与单位CSS 样式类型区块模型CSS 概述层叠样式表（英语：Cascading Style Sheets，简写 CSS...
复制链接

扫一扫