CSS的基础使用

最新推荐文章于 2025-03-26 16:02:47 发布

it_s_ranining

最新推荐文章于 2025-03-26 16:02:47 发布

阅读量1k

点赞数 35

文章标签：前端 css

本文链接：https://blog.youkuaiyun.com/it_s_raining/article/details/143356493

版权

一、CSS的作用

美化界面：CSS可以设置网页中文字的大小、颜色、字体加粗等样式，以及背景颜色、边框等，使网页更加美观。
控制布局：通过CSS，可以精确地控制网页中元素的布局和位置，包括浮动、定位等，使网页布局更加灵活和自如。

二、CSS的工作原理

浏览器解析：浏览器首先解析HTML文档，将其转换为文档对象模型（DOM）树。然后解析CSS文件，将其转换为样式表对象模型（CSSOM）树。
匹配与渲染：浏览器将DOM树和CSSOM树匹配，确定每个元素应用哪些样式。最后，根据匹配结果渲染网页，生成最终的视觉效果。

三、CSS的特性

继承性：某些样式规则会被子元素继承，从而减少了代码量和重复性。但需要注意的是，如果子元素自己有样式，则会生效自己的样式，不继承父级的样式。
层叠性：当多个样式规则应用于同一元素时，它们的优先级和顺序会影响最终的样式。具体来说，相同的属性会覆盖，即后面的CSS属性会覆盖前面的CSS属性；不同的属性会叠加，即不同的CSS属性都会生效。
优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则，选择器优先级高的样式会生效。选择器的优先级从低到高依次为：通配符选择器、标签选择器、类选择器、id选择器、行内样式。此外，还可以使用!important来提高特定样式的优先级，但应慎用。

四、CSS的基本语法

CSS的基本语法由选择器和声明块组成。选择器用于选择要应用样式的HTML元素，声明块则包含一组样式声明，每个声明由属性和值组成，属性和值之间用冒号分隔，多个声明之间用分号分隔。

五、CSS的应用方式

内嵌样式：在HTML文档的<head>部分使用<style>标签直接编写CSS代码。
外部样式表：将CSS代码编写在一个独立的.css文件中，并在HTML文档中使用<link>标签引用。
行内样式：在HTML元素的style属性中直接编写CSS代码。

六、CSS的调试与优化

使用开发者工具：大多数现代浏览器都提供了开发者工具，可以用来检查元素、修改样式、调试JavaScript等。在开发者工具中，可以通过选择元素并查看其样式来检查CSS。
使用CSS预处理器：如Sass、Less等，它们提供了变量、嵌套规则、混合和继承等功能，可以化简代码并方便调试。
优化CSS代码：通过合并CSS文件、压缩CSS代码、避免使用过多的嵌套和冗余代码等方式来优化CSS性能。

综上所述，CSS是一种强大的样式描述语言，它不仅可以美化网页界面和控制布局，还具有继承性、层叠性和优先级等特性。通过合理地使用CSS，可以创建出更加美观、灵活和高效的网页。

下面是对css的使用

改变字体颜色的引入

改变字体颜色

在标签后面写上，stvle=color：（颜色），如图所示被指定写的字会变颜色

内部方式

在上面写上，你想改变的标签，然后写{}上颜色，确定后你写上的所有标签都会改变，是一个很好的该变方式

行内标签

也是该变字体颜色，在你想要改变的的东西写在它标签后面，就会进行改变

外部方式

新建一个代表颜色，名字随便但是，最好是英文，后面要加一个css然后把你想要改的标签写上去，加上颜色，最后回到，你想改的字面前，上面，加上link，后面写上那个文件夹就行了

方式引入

跟外部方式差不多，新建一个代表颜色，名字随便但是，最好是英文，后面要加一个css然后把你想要改的标签写上去，加上颜色，最后回到，你想改的字面前，上面加上style，写上@import，把文件名写上，就行

继承性

div 是包裹最大的标签，如果div在下面，最大的标签是不会被继承的，p标签只能包裹一些字，一般情况下，如图所示，上面标签的颜色包裹着什么，被包裹（也就是颜色下面的）会被上面的颜色继承

优先级

你可以先猜猜字优先级是什么颜色，里面有两种颜色

优先级就是，哪个颜色离字体比较近，它就会默认用离它最近的颜色

选择器

类型选择器

写上class，当做名字，记住，class可以重复写名，效果也一样，标签前面要加一个.如图所示

ID选择器

可以在标签前面加一个ID当做是名字，来标注一下，记得写上面前面要加一个#，不然无效

子代选择器

可以选择标签里面的里面的ID选择也可以选择class

相邻选择器

写上后，就比如上面可会选择p，h2就是标签+p，就是选择p，h2不会生效

通用兄弟选择器

通用就是，比如h2就是标题~p就是全部的p，是全选的。

通用选择器

通用选择器跟通用兄弟选择器不一样，通用兄弟选择器是~，通用选择器是*

就是星，使用这个在上面，在加一个比如颜色或者背景，*就会全部选中，就算是body也会加一个背景

并集选择器

并集选择器是，就是逗号，使用，可以无限添加标签或者id，class，写上面的都会生效

但是逗号也分大小写，大写的逗号不会生效

属性选择器

选择最上面的

这个可以选择最上面的一个，就拿上面的视图来说一下，a1是div的名字这里使用的是类标签a1包裹了这么多div，如果要选择最上面要怎么选择，直接用a1因为a1包裹了全部div，先选择全部然后空格后代标签，选择a1后面然后写上：first-of-type，就会选中第一个，因为first-of-type这个就是选中第一个不能选中别的

选择最下面的

这个可以选择最上面的一个，就拿上面的视图来说一下，a1是div的名字这里使用的是类标签a1包裹了这么多div，如果要选择最下面要怎么选择，直接用a1因为a1包裹了全部div，先选择全部然后空格后代标签，选择a1后面然后写上：last-of-type，就会选中第一个，因为last-of-type这个就是选中最后一个不能选中别的

任意选中

这个可以选择最上面的一个，就拿上面的视图来说一下，a1是div的名字这里使用的是类标签a1包裹了这么多div，如果要选择中间要怎么选择，直接用a1因为a1包裹了全部div，先选择全部然后空格后代标签，选择a1后面然后写上：nth-of-type（），然后在括号里面写你要选择第几个中间那个是第二个，我们就选择2，就可以选择了，任意选择器

伪类选择器

排除选择器

not一个排除选择器，比如前面选中body，加一个后代标签然后全选，写上not（）在括号里面写你不想选中的标签，就不会被选中，如图，在练习也可以找到

未访问

就是在你没点击或者鼠标悬停的时候会显示

已访问

就是你点击的时候就会变，效果图就是这两张

焦点

就比如这个框，你不点击上面就没事，加上focus后然后加上border线点击就会变色

悬停

鼠标悬停上面的时候就会发生变化

点击

点击时就会发生变化，仔细看，颜色变了

加外围线（知识）

第一张和第二张是一样的

写上后border后面直接选择宽度，然后写上solid，然后写上线的颜色

字体样式

字体粗细

以上用的是标签选择器，可以使用别的，看实际情况

在上面写上后，在写上font-weight后面可以自己选择粗细，选择时可以看到，最多可以选择900px，bold也是变粗，记住字体只是变粗并不会变大

字体斜体

以上用的是标签选择器，可以使用别的，看实际情况

斜体

字体样式

以上用的是标签选择器，可以使用别的，看实际情况

写上后font-family，后面选择字体样式，可以选择英文也可以选择写中文

小写字母变大写字母

以上用的是标签选择器，可以使用别的，看实际情况

写上font-variant后面选择small-caps就可以变了

还有就是这些可以写在一起

如图所示

css背景美化

背景位置

可以更改图片背景的位置，

背景的样式

添加背景图片和改变背景图大小

添加背景图片background-image：url

改变背景图片大小background-size：后面可以自己改变背景图片大小

同时如果写上字，因为这个是背景图片，所以不会被图片覆盖，字会在图片上面

背景图片水印

写上后可以让图片不会自动添加，

background-attachment:fixed，可以鼠标滑动时图片不动，字动，就相当于一个背景定在哪里

background-repeat: no-repeat，写上后可以让图片不会自动添加，因为如果有空白地方图片会默认添加，加上 background-repeat: no-repeat就不会了

背景图片不会重复

也是写上后图片就不会自动添加

因为如果有空白地方图片会默认添加，加上 background-repeat: no-repeat就不会了

背景图片居中

写上后，不管多缩的多小，图片都在中间

阴影

调节第一个，阴影条就在右

如果在第一个数字调节负数，那阴影条就在右边

在第二个可以调节，阴影条上下，如果是负数阴影条就在上面

如果在第二个调节正数那阴影条就在下面

第三个就是设置阴影，的长度正数就是长在外

如果设置成负数，那阴影就会在里面，就看不见了

阴影的半径，也就是你设置阴影的最里面的厚度

跟阴影一样，如果设置成负数，也会在里面就看不见了

阴影多选

其实阴影可以多选

每次写完后，后面加一个，就是逗号，只要数字不一样不会被覆盖，就会显示

如图

列表的美化

设置列表标记的类型

可以更改前面无序列表的样式，none是没有的意思也可以说是取消的意思

用图片替换列表标记

如视频，可以去网上找图片，使用url（）放上去后，注意：图片大小改不了，你放的图片有多大显示就多大

设置列表项的标记

红色是为了让你们更好的看见效果，加上list-style-position后可以调节前面标记的位置

图片字体行高（居中）

第一个是图片居中，二三个是图片里面字体居中

图片居中：background-repeat：no-repeat

字体居中：先调节字体后面的大小height：100px替换写上tetx-align下面在加上line-height：100px，后面这个一定要和上面的行高一样不然位置不一样

列表样式的多选

前面写list-style 后面可以多写，也会生效，如图我写了两个会也会生效

该样式手指

如视频，加上cursor：pointer，鼠标放上去后会变成手指

上划线，下划线，删除线

上划线

直接标签选择器写上tetx——decoration：overlinr就可以了如图

其实前面一样后面改一下就行了

下划线

直接标签选择器写上tetx——decoration：underline就可以了如图

删除线

直接标签选择器写上tetx——decoration-line：line-through就可以了如图

上划线和下划线一起

这个text-decoration是可以多写的，只要合理就行

字体阴影

几乎跟图片阴影一样，这个是改阴影左右的移动

这个是改阴影上下的移动

这个是改阴影清晰或者模糊

颜色渐变

线性渐变

background-image这个是传图片的可以用来做图片渐变里面也可以写字

但是后面是linear-gradient写上后就可以加位置和颜色了，颜色可以先加，但是位置一定要在前面

top是往上

bottom是往下

left是往左

right是往右

也可以只加一个，如果你加一个上一个下，他就不知道你要上还是下，你可以写上加左或者下加右

径向渐变

和线性一样前面是background-image但是后面不一样后面是radial-gradient

然后就可以写0px 0px是宽高中间那个是属性at不加不会生效移动，移动在后面是

0% 0%这个是移动

同时。颜色的后面也可以加大小，这个黑色本来是默认的，加了变大后黑色就更看的见了

如图

盒子边距

内边距

内边距padding-后面可以加那些上下左右的代码用于更好的调整方向

我们这里使用的是往上加内边距，图片演示不出来

就是往上加距离，字体就会被上面的距离挤下去，还有就是如果你刚开始就设置了div的本身大小，里面包裹了div的一些东西加了边距就不会生效或者往下，因为本身你如果设置div就设置这么大，。但是如果你本身没有设置高度，你字体又大，就会被字体给强行变大

外边距

外边距就是设置盒子与盒子之间的距离，如视频可以与盒子隔开，或者做别的事同事后面也可以加上下左右，还有就是如果你刚开始就设置了div的本身大小，里面包裹了div的一些东西加了边距就不会生效或者往下，因为本身你如果设置div就设置这么大，但是如果你本身没有设置高度，你字体又大，就会被字体给强行变大

块状元素和行内元素

块状元素

块状元素就是，span标签本来就是不换行，也不能设置大小背景，而块状元素就可以把像span标签这样的不能设置大小背景不能换行的标签设施成像div这样的，可以调节大小背景也会换行，如视频

行内元素

行内元素就是可以把像div这样可以换行还有可以改大小的标签该改成像span这样不能改背景大小，不能换行的标签，简单来说加上后，div就不能换行，也不能使用背景调节大小

块状元素和行内元素的结合

像图片这样，如果两个写在一起div，可以把块状元素和行内元素结合，这个div就不能换行，但是可以改大小，如图片，视频

浮动

左浮动

写上后，你标记的方块就会到最左边，还有比如你只有两个方块，你只在上面写float：left；，那么你下面的方块会上去，因为上面的方块脱离了文档流，会浮起来，肉眼看不见

浮起来下面的方块看到了上面有位置，就会自己跑到上面去，所以产生了方块消失了的效果

同时可以如图，如果你设置了范围，那方块会因为范围不足会换行移到下面去，可是如图不一样，他只会移到下一行，就跟行内样式差不多，不会换行，直接到下面去

浮动右

右浮动跟左浮动一样，写上float：right；就会到最右边

定位

相对定位

相对定位就是可以将图片或者字体，移动到任何位置，但是相对定位不脱离文档流

所以还是会占他移动后的位置，如视频，蓝色的方块不会上去

但是相对定位加上position：relative还要上下左右来使方块进行移动

相对定位to不需要

绝对定位

绝对定位，也可以使任何东西移动，但是他会脱离文档流，如视频，可以看到红色浮上去了，所以蓝色才会上去，被红色覆盖，但是肉眼看不见

## 组合

其实相对定位和绝对定位可以组合使用，将红色方块设置成相对定位，因为如果不设置，可以看到，边缘使有，一些白色的，如果移动了距离，白色也会算进去，这个移动不准

还要调节有点不好，加上相对定位，就可以了

如果你做一些比如图片字体，然后复制，因为绝对定位，你的字体全部在你原来的图片上，因为你复制了，代码没变，所以字体在你原来的地方，你可以在图片和字体的包裹处加上一个相对定位，这样你的字体只能在相对定位内移动，如果不去单独改代码是出不去的，这样你的字体就会在每个图片了

固定定位

加上position：fixed；后就是固定定位，可以使用上，下，左，右移动你所选择的东西，如果有滚动条，那个东西也不会移动，如视频，还有一种就是滚动条会消失，因为如果你设置的宽度高度太高，太宽，比屏幕都大，滚动条就会到你写的宽度那边，所以你看不见就相当于消失，设置的时候小一点，或者跟你的屏幕一样大，或者跟我一样，在bod哪里也设置一个宽高跟你设置的宽高一样也行