前端学习（八）：CSS

2022-10-28 10:00:39

进击のpython

*****

前端学习——CSS

现在的互联网前端分为三层：

HTML:超文本标记语言。从语义的角度描述页面结构
CSS:层叠样式表。从审美的角度负责页面样式
JS:Javascript。从交互的角度描述页面的行为

所以说HTML，CSS，JS也被称为前端三剑客

CSS是一个很神奇的东西，设计者可以通过修改样式表的定义从而使我们的网页呈现出完全不同的外观

也就是说，CSS其实就是网页的衣服，将网页打扮的“花里胡哨”

初识CSS

CSS全称为‘’层叠样式表‘（记住这个名字会对你后面的学习很有帮助）

他主要定义了HTML内容在浏览器的显示样式，比如文字的大小，颜色，字体的加粗等等

我们先看一下效果：

看，这个字就从原先的黑色，变成了现在的红色，穿上了一件红色的衣服！

使用CSS

那么，上面的效果是怎么达到的呢？想学吗？我教你啊

那要是想使用CSS，要先学一个标签<style></style>,style标签包含网页的样式信息

默认情况下，该标签的样式信息通常是CSS的格式

比如我有一段文字百因必有果！你的报应就是我！,现在我想让百因必有果！变红

这个时候我们就可以通过设置样式来作用，而且只需要编写一条CSS样式语句

首先在没有样式的时候是这么写的(只改变某一部分，所以用标签单独标记)：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<p><span>百因必有果！</span>你的报应就是我！</p>

</body>

</html>

然后我们需要在<head></head>标签里使用<style></style>

并使用以下语句：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        span {

            color: red;

        }

    </style>

</head>

<body>

<p><span>百因必有果！</span>你的报应就是我！</p>

</body>

</html>

接下来看看效果：

注意：单独将标语用span标签标示出来，不会影响文本的正常显示

如果再给span标签设置了样式，那么该span标签就体现了它的语义

那么在网页中，尤其是文本，在不影响文本内容变化的情况下

并且将凸显的内容标识出来，我们就可以使用span标签再配合我们的css来修改样式

CSS语法

那上一节写出了一行CSS代码，我们就要知道这CSS语法是怎么样子的

CSS样式是由选择符和声明组成的，而声明又由属性和值组成：

选择符:我们又称为选择器，指明网页中应用样式规则的元素，如上述图中网页的所有(span)的文本变为红色，而其它元素(如ul,ol等等)不会受到影响
声明：在英文大括号”{}”中的就是声明，属性和值之间用英文冒号”：“分割。当有多条声明时，中间可以英文分号”;”分割

那其实可以再举个栗子，帮助理解选择符，属性和值：

张三{身高：175cm；体重：50kg}

我想找个张三，然后把张三的身高设置成175cm，把体重设置成50kg

那为了使样式更加容易阅读，一般都将每条代码写在一个新行内

p{

    font-size：12px;

    color:red;

}

CSS注释

在css也有注释语句：

用/*注释语句*/来表明(html中使用)。就像下面代码：

/*设置段落默认样式*/

p {

    font-size：12px;

    color: red;

}

*****
*****

码农公寓