前端基础 -- CSS

糯米不开花ぴ

已于 2023-12-04 21:57:42 修改

阅读量83

点赞数 1

分类专栏：前端知识文章标签： python css3

于 2023-10-24 18:32:53 首次发布

本文链接：https://blog.csdn.net/weixin_54104072/article/details/133977178

版权

前端知识专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1. CSS基本概述

简单来说：CSS就是负责修饰内容，让内容"漂亮"起来

● 全称为Cascading Style Sheets，中文翻译为"层叠样式表"或者是“级联样式表”

● css是一种描述HTML文档样式的语言

● css描述应该如何显示HTML元素

● CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)，是Web网页开发技术的重要组成部分。

使用CSS的好处

* 使用CSS样式可以有效地对页面进行布局，更加灵活多样。

>

* 使用CSS样式可以对页面字体、颜色、背景和其他效果实现精确控制，同时对它们的修改和控制变得更加快捷，更加强大。

>

* 站点中所有的网页风格都使用一个CSS文件进行统一控制，达到一改全改。还可以快速切换主题，我们可以把HTML比作是骨架，CSS是衣服。

同一个HTML骨架结构，不同CSS样式，所得到的美化布局效果不同。

>

* CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等。

>

* CSS可以将网页表现与结构分离，使页面载入更快,更利于维护，这也是我们的最终目的。

>

核心功能：渲染和布局（渲染：着色、设置大小样式等；布局：放在具体的某个位置）

CSS基本语法

语法：选择器{属性1:值;属性1:值}

->->->->

● CSS的基本语法由选择器、属性、属性的值组成，如果选择符有多个属性，由分号隔开。

● 注意，这里的代码都是英文格式，例如花括号、冒号和分号。

->->->->

● 核心思想：

1、选择标签(即选择器)

2、操作标签(即属性)

2. CSS的3种引入方式

CSS样式有三种不同的使用方式，分别是行内样式，嵌入样式以及链接式。

我们需要根据不同的场合不同的需求来使用不同的样式。

⑴ 嵌入式

嵌入式，是把CSS样式写在HTML文档内部head标签中的style标签里。

浏览器加载HTML的同时就已经加载了CSS样式了。

当单个文档需要特殊，单独的样式时，可以使用内部样式表。

->->->->

⑵ 行内样式

行内样式，就是写在元素的style属性中的样式，这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不推荐大量使用内联样式，因为那样不利于后期维护。

```html
<div style="color: white;background-color: #369;text-align: center">行内设置</div>
```

我们可以根据不同的场合、不同的需求来使用不同的样式。

2.1 嵌入式

嵌入式，是把CSS样式写在HTML文档内部head标签中的style标签里。

浏览器加载HTML的同时就已经加载了CSS样式了。

当单个文档需要特殊，单独的样式时，可以使用内部样式表。

简单的引入案例

下面，让我们一起感受一下，将css代码嵌入到html代码的渲染效果

->->->->

我们在head里面加上全局属性关键字style(样式)：

使用选择器为div标签

● 设置属性1 = 字体大小(font_size)，属性值 = 具体尺寸px

● 设置属性2 = 字体加粗(font-weight)，属性值 = 具体尺寸px(最大900)

● 设置属性3 = 字体倾斜(font-style)，属性值 = italic

● 设置属性4 = 间距(margin)，属性值 = 具体尺寸px 0

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css渲染</title>
    <style>
        div{
        font-size: 60px;  /* 设置所有div标签的字体大小为60 */
        font-weight: 900;  /* 设置所有div标签的字体加粗 */
        font-style: italic; /* 设置所有div标签的字体倾斜 */
        margin: 30px 0;}  /* 设置div标签的字符间距 */
    </style>
</head>
<body>

<div>hello world!~</div>
<p>hello world!~</p>
<div>今天天天不错哦~</div>

</body>
</html>

执行上述代码后，我们在浏览器中看看渲染后的效果：

ps：在代码中，选择器使用的是div标签，则针对的全局所有的div标签的设置

同时，我们在F12中也可以看到，我们设置的css源代码及参数

>

还可以在F12中针对设置做一些调试效果的即时查看：

❶ 取消设置，只需要把对应元素在样式中的勾取消掉（下面截图1）

❷ 样式中--点击设置的属性值，可以用鼠标滑动、或者键盘上 /下键进行调整大小

2.2 导入式

导入式也叫链接式，就是把CSS样式写在HTML文档的外部，一个后缀为 .css 的外部样式表中，然后使用时在head标签中，使用link标签的href属性引入文件即可。

->->->->

上述嵌入式的html代码中，我们只是针对div标签定义了4个属性，但是在实际编程中，div标签有非常多，如果都嵌入到html代码中，不利于维护，所以外部样式表是最理想的选择。

->->->->

只需要在pychram中new -> Stylesheet ->默认第一个Css file，即可新建一个css文件。

ps：只有pycharm的专业版才能创建css文件，社区版不支持

如果是社区版，可以尝试new一个file纯文本文件，代码格式不变。

导入式案例

将上述的css代码copy出来，新建一个cssdemo.css文件

代码如下：

div{
    font-size: 60px;  /* 设置所有div标签的字体大小为60 */
    font-weight: 900;  /* 设置所有div标签的字体加粗 */
    font-style: italic; /* 设置所有div标签的字体倾斜 */
    margin: 30px 0;}  /* 设置div标签的字符间距 */

将之前的嵌入式html文件css部分的代码删除

同时引入cssdemo.css文件

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css渲染</title>

<!--link:导入标签; rel：引入类型，stylsheet表示css文件，icon表示图标文件；
href表示具体路径，我这里css和html在相同文件夹下，所以直接写css文件名 -->
    <link rel="stylesheet" href="cssdemo.css">

</head>
<body>

<div>hello world!~</div>
<p>hello world!~</p>
<div>今天天天不错哦~</div>

</body>
</html>

执行上述导入css的html文件后，效果与嵌入式效果一致：

2.3 行内样式

行内样式，就是写在元素的style属性中的样式，这种样式仅限于元素内部起作用。

当个别元素需要应用特殊样式时就可以使用内联样式。

但不推荐大量使用内联样式，因为那样不利于后期维护。

<div style="color: white;background-color: #369;text-align: center">行内设置</div>

3. CSS的选择器

选择器，上面有提到：即选择标签

3.1 基本选择器

⑴ id选择器

上面的嵌入式、导入式代码中，都是针对所有的div标签进行了一系列的文字渲染

如果，我们只想渲染div标签中的一部分，怎么办呢？

->->->->

我们可以给div标签中加上id属性(id值不可以重复)，这样，我们渲染时就可以指定div的id

->->->->

语法：#id名称{值}

->->->->

缺点：一次只能定位一个标签

->->->->

例如：我将2个div标签中都添加id属性，只针对其中一个id的字体进行渲染

⑵ 标签选择器

标签选择器，即标签名，例如<div>、<a>等等，案例如上述的嵌入式/导入式代码

缺点：选择标签，针对全局的对应标签做统一渲染

★ ⑶ class选择器

使用css的目的，不是让一个标签、或者所有的标签都渲染成某种样式，

更多是要让一类标签渲染成某种样式；比如不同的职业是不同的类型，类一定是下面有很多具体的对象。

->->->->

语法：.calss名称{值}

calss选择器是使用频率最高的一种。

单个class渲染：

例如：

代码中有一个ul无序列表的标签，其中有4行内容，我们只想让其中3行内容标红；

● 首先我们需要给对应的3行内容加上calss属性，设为c1，让它们共属1个具体类

● 其次在head -> style -> 加上对应的calss标签，设置值即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
       .c1{color: red;}  <!--对calss属性为c1的内容标红 -->
    </style>

</head>
<body>
<ul>   <!-- ul表示无序列表 -->
    <li>小明</li>
    <li class="c1">小红</li>    <!--加上calss属性为c1 -->
    <li class="c1">小白</li>   <!--加上calss属性为c1 -->
    <li class="c1">小蓝</li>    <!--加上calss属性为c1 -->
</ul>


</body>
</html>

多个class渲染

我们经常看到，实际网页代码中，calss标签会有很多个

我们只想对某一类标签进行样式渲染，且需要同时渲染出多个效果

就可以在style中添加多个calss，并且针对每个calss设置多个值

->->->->

代码示例及效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
       .c1{color: red;}
       .c2{color: red;
       font-size: 50px;
       font-style: italic;
       background-color: aquamarine;}
    </style>

</head>
<body>
<ul>
    <li>小明</li>
    <li class="c1">小红</li>
    <li class="c1">小白</li>   
    <li class="c1">小蓝</li>
</ul>
    <div class="c2">AAA</div>
    <div class="c3">BBB</div>

</body>
</html>

如果我们想让c3也渲染出与c2一样的效果，但是设置不同的背景色

只需copy下c2的代码，将背景色改一下即可；

如下：我们就轻松完成了对ul、div标签的的3种不同渲染效果

多个class渲染的代码简化

上面针对c3也想要渲染和c2一样的效果，仅区分背景色，我们是直接copy了c2代码

这样的方式使得代码比较冗余，那么我们可以进行改进：

->->->->

❶ 将c2、c3中相同的部分提取出来，新建一个c4，同时c2、c3只保留独有的部分

❷ 对div标签中，c2/c3的值加上c4（一个class可以有多个值），让它们都拥有c4的样式

这样，我们既简化了代码，同时也达到了我们想要的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
       .c1{color: red;}
       .c2{background-color: aquamarine;} /* 只剩下c2独有的背景色 */
       .c3{background-color: chocolate ;} /* 只剩下c3独有的背景色 */
       .c4{
           color: red;
           font-size: 50px; /* 将c2,c3相同的部分，取出来放在c4里 */
           font-style: italic;}
    </style>

</head>
<body>
<ul>
    <li>小明</li>
    <li class="c1">小红</li>
    <li class="c1">小白</li>
    <li class="c1">小蓝</li>
</ul>
<!-- 1个class可以有多个值，用空格作为分隔，重复的部分用c4代替 -->
    <div class="c2 c4">AAA</div>
    <div class="c3 c4">BBB</div>
</html>

3.2 组合选择器

后选择器

后代选择器（Descendant Selector）：使用空格（" "）来选择指定元素的后代元素。

例如，通常div标签会有多层嵌套，即div嵌多个div。

这时选择器可以帮助我们，更精确地选择HTML文档中的某些元素，以便对它们应用特定的样式。

->->->->

例如，上面的代码中，我们添加两个div嵌套c5和c6：

其中c5/c6是相当于父级，里面相同的abc相当于后代

现在，我们只想针对c5的内容进行字体颜色设置，不影响原有逻辑

->->->->

语法：.calss父级名称 .后代名{值}

如代码所示：在style中添加样式.c5 .abc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
       .c1{color: red;}
       .c2{background-color: aquamarine;} /* 只剩下c2独有的背景色 */
       .c3{background-color: chocolate ;} /* 只剩下c3独有的背景色 */
       .c4{
           color: red;
           font-size: 50px; /* 将c2,c3相同的部分，取出来放在c4里 */
           font-style: italic;}
       .c5 .abc{ /* 仅针对c5的叫123的后代，进行内容CCC设置为绿色 */
           color: chartreuse;
       }
    </style>

</head>
<body>
<ul>
    <li>小明</li>
    <li class="c1">小红</li>
    <li class="c1">小白</li>
    <li class="c1">小蓝</li>
</ul>
<!-- 1个class可以有多个值，用空格作为分隔，重复的部分用c4代替 -->
    <div class="c2 c4">AAA</div>
    <div class="c3 c4">BBB</div>

<!-- div嵌套div，外层的div是父类，里面的div是后代 -->
<div class="c5">
    <div class="abc">CCC</div> </div>

<div class="c6">
    <div class="abc">DDD</div> </div>


</html>

效果如下：

虽然c6中也有"abc" ，但因为我们代码中指定的是父级是c5，所以c6不受改变

同样：如果在c5 "abc" 再多嵌套几层div，那么只要是c5下的内容，全都都受影响，因为嵌套层级都属于c5的后代。

3.3 选择器优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重。

>

优先级遵循的规则：

● 有id不比较calss，有calss不比较标签名

● 多个calss优先级高于单个calss优先级

● 优先级相同的情况，按style中的代码顺序，代码在前面的优先级高

标签/calss/id的优先级：

例如：下面的html代码中，有一组多层级div嵌套

我们想要将p标签的内容设置为红色，标签名是p，calss是c4，都指向这行内容

但是，我们在style中将p标签、calss分别设为不同的颜色，执行后，渲染效果究竟是什么颜色呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        p{color: red;}
        .c4{color: chartreuse;}
    </style>

</head>
<body>

<div class="c1">
    <div class="c2">
        <div class="c3">
            <p class="c4">123</p>
    </div>

</div>

</html>

代码执行后，渲染效果为绿色

这就是因为：class的优先级高于标签的优先级

如果style中，再添加.c3 .c4设为蓝色，那么最终渲染结果就是蓝色

这就是因为c3+c4的优先级高于c4

有id的情况下，不再比较calss和标签名，id优先级最高

优先级关键字--!important

像上面的标签/calss/id的优先级对比，我们还需要去仔细地看谁的优先级高，就太不简单明了

所以，我们可以使用!important，忽略标签/calss/id的优先级~

>

!important具有以下特点：

● 有!important声明的规则高于一切。
● 如果!important声明冲突，则比较优先权。
● 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
● 由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
● 用数字表示只是说明思想，一万个class也不如一个id权值高

示例如下：

4. CSS的属性操作

下面，一起学习一些比较重要的属性操作：

● 文本样式font-

● background

● border

● 内外边距

● display

● float

文本样式属性示例：

★ 盒子模型

盒子模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。

HTML页面上的每个元素都可以看成一个个方盒子，这些盒子由元素的content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

padding（内边距及其缩写）

内边距，也叫“内补白”，表示页面中元素的边框与内容的距离。

内边距的值不能是负值，相当于table标签的cellpadding属性。

内边距可以设置多个值：
● 当padding只有一个值的时候表示同时控制上下左右的内边距。
● 当padding只有两个值的时候表示分别控制上下、左右的内边距。
● 当padding有三个值的时候表示分别控制上、左右、下的内边距。
● 当padding有四个只的时候表示分别控制上、右、下、左的内边距。

>

内边距也可以进行单独设置：

● padding-top            设置上边的外边距
● padding -bottom        设置下边的外边距
● padding -left           设置左边的外边距
● padding -right           设置右边的外边距

margin（外边距及其缩写）

外边距，也叫“外补白”，表示页面中元素与元素之间的距离。

外边距越大，两者的距离就越远，反之，如果外边距越小，则元素之间的距离就越近，外边距的值可以是正数，也可以是负值。

margin也可以像padding一样设置多个值和单独方向设置，用法一样。

>

● 在网页的开发过程中，需要让一个元素相对于父级元素作水平居中时，可以借助margin的特性来实现。

使用margin让元素自身居中： margin: 0 auto

css的属性非常多，这里就不一一举例了，使用也都相对简单

属性关键字汇总

以下整理了部分属性及属性值的说明，更多属性，可以自行百度哈~

⑴ 文本属性

属性名

属性值

属性名

属性值

font-family

(文本系列设置)

serif：衬线字体（如 Times New Roman）

sans-serif：无衬线字体（如 Arial）

monospace：等宽字体（如 Courier New）

cursive：草书字体（如 Comic Sans MS）

fantasy：幻想字体（如 Impact）

font-size

(设置字体大小)

可以使用像素值、百分比、相对值

例如：12px、100%、1.2em

font-style

(设置文本样式 )

normal：正常字体样式

italic：斜体字体样式

oblique：倾斜字体样式

font-variant

(设置字体变体效果)

normal：正常字体变体

small-caps：小型大写字母变体

font-weight

(设置文本粗细)

normal：正常字体粗细

bold：加粗字体

lighter：比正常字体更细的字体

bolder：比正常字体更粗的字体

number：用数字表示字体粗细，最大900

font

（设置字体的多个属性）

字体大小、字体样式、字体粗细等

例如：

font: italic bold 14px Arial, sans-serif

color

(设置文本颜色)

可以使用具体的颜色名称、十六进制值或RGB值

如：red、#FF0000、rgb(255, 0, 0)

direction

（设置文本方向）

从左到右或从右到左

ltr：从左到右（默认值）

rtl：从右到左

letter-spacing

(设置字符间距)

可以使用正负值来调整间距

例如：1px、-2px

text-align

(设置文本的对齐方式)

left：左对齐

center：居中对齐

right：右对齐

justify：两端对齐

text-transform

(文本大小写转换)

none：不进行大小写转换

uppercase：将文本转换为大写

lowercase：将文本转换为小写

capitalize：将每个单词的首字母转换为大写

line-height

(设置行高)

可以使用像素值、百分比、相对值等

例如：20px、1.5

text-indent

(设置文本首行缩进)

可以使用像素值或百分比

例如：20px、2em

word-spacing

(设置单词之间的间距)

可以使用正负值来调整间距

例如：2px、-1px

background-color

(设置文本背景色)

transparent（透明）、RGB十进制颜色表示、或颜色单词表示：

transparent：透明
rgb(255,0,0)：红色背景
#ff0000：红色背景
red：红色背景

background-image

(设置背景图片)

例如：

background-image: url('图片地址')

background-repeat

(设置背景平铺方式)

repeat：平铺

no-repeat：不平铺

repeat-x：x轴平铺

repeat-y：y轴平铺

background-position

(设置背景定位)

例如：

background-position: x轴坐标 y轴坐标

⑵ 列表相关属性

属性名

属性值

list-style-image

(设置列表项标记的图像)

可以使用URL指定一个图像文件作为列表项标记 none：（无图像标记）或一个图像的UR

list-style-position

(设置列表项标记的位置)

inside：列表项标记位于列表项内容内部（默认值）

outside：列表项标记位于列表项内容外部

list-style-type

(设置列表项标记的类型)

none：无标记（默认值）

disc：实心圆

circle：空心圆

square：实心方块

decimal：十进制数字

lower-roman：小写罗马数字

upper-roman：大写罗马数字

lower-alpha：小写字母

upper-alpha：大写字母

list-style

(设置列表项标记的多个属性)

设置图像、位置、类型

例如：list-style: square inside url("image.png")

⑶ 表格和其他相关属性

属性名

属性值

border-collapse

(控制表格边框的合并方式)

separate：表格边框会分开显示（默认值）

collapse：相邻单元格的边框会合并显示

border-spacing

(设置相邻单元格之间的间距)

可以使用像素值或百分比

例如：10px、2em

caption-side

(设置表格标题（caption）的位置)

top：表格标题位于表格上方

bottom：表格标题位于表格下方

empty-cells

(控制空单元格的显示方式)

how：显示空单元格的边框（默认值）

hide：隐藏空单元格的边框

cursor

(设置鼠标指针在元素上的样式)

auto：浏览器自动选择合适的指针样式（默认值）

pointer：指针样式，表示可以点击或选择元素

default：默认样式，表示没有特殊操作

糯米不开花ぴ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础 -- CSS

简单来说：CSS就是● 全称为Cascading Style Sheets，中文翻译为"层叠样式表"或者是“级联样式表”● css是一种描述HTML文档样式的语言● css描述应该如何显示HTML元素● CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)，是Web网页开发技术的重要组成部分。
复制链接

扫一扫

专栏目录