CSS-级联样式表

最新推荐文章于 2025-03-28 23:22:40 发布

叫我剑锋

最新推荐文章于 2025-03-28 23:22:40 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/weixin_56846554/article/details/129771850

版权

前端基础专栏收录该内容

6 篇文章

订阅专栏

一、CSS概述

CSS（Cascading Style Sheets）级联样式表

CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。
例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。

CSS与HTML的关系

HTML是网页内容
CSS定义页面的样式

二、CSS基本语法

行内样式表

行内样式表、是通过标签的 style 属性来设置元素的样式，其基本语法格式如下：

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

内嵌样式表

内嵌式是将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义

外部样式表

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

使用link（链接）标签：
<head>
    <link href="newstyle.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    </style>
</head>

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便、权重高	没有实现样式和结构分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多	终止整个站点（多）

三、选择器

要使用 CSS 对 HTML 页面中的标签实现一对一，一对多的控制，这就需要用到 CSS 选择器。

常用的选择器：

标签选择器：通过标签选择器可以选择页面中的所有指定标签
语法：标签名{}
类选择器：通过标签的class属性选中一组标签
语法：.class属性值{}
id 选择器：通过标签的id属性值选中唯一的一个标签
语法： #id属性值 {}
选择器组合：通过选择器分组可以同时选中多个选择器对应的标签
语法：选择器1,选择器2,选择器N{}
通配选择器:可以用来选中页面中的所有的标签
语法：*{}

四、文本、背景、列表、伪类、透明

1、文本

color	字体颜色
font-size	字体大小
font-family	字体
text-align	文本对齐
text-decoration:line-through	定义穿过文本下的一条线
text-decoration:underline	定义文本下的一条线
text-decoration:none	定义标准的文本
font-style: italic	斜体文本
font-weight	字体粗细
line-height	设置行高
letter-spacing	可以指定字符间距
text-indent	用来设置首行缩进

2、背景

background-color	背景颜色
background-image	背景图片
background-repeat	背景重复
background-size	背景尺寸
background- position	背景位置

3、列表

CSS列表属性可以放置、改变列表项标志，或者将图像作为列表项标志

list-style-image	将图象设置为列表项标志
list-style-position	设置列表中列表项标志的位置
list-style-type	设置列表项标志的类型
list-style	简写属性

4、伪类

CSS 伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类

:hover	伪类表示鼠标移入的状态
:active	表示的是被点击的状态
:focus	向拥有键盘输入焦点的标签添加样式

5、透明

定义透明效果的属性是opacity

opacity属性设置标签的不透明级别值为1；
规定不透明度：从0.0（完全透明）到1.0（完全不透明）

五、块级、行级、行级块标签

● 什么是块级标签？

块级标签：无论内容多少都会独自占据一行的。

例如<p>、<h1>、<ul>、<ol>、<hr/>等。

● 什么是行级标签？

行级标签：只占自身大小的标签，不会占一行。

例如<font>、<b>、<i>、<a>等。

● 什么是行级块标签？

例如 <input/> <img>等

注意：

一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签。
a可以包含任何标签，除去a本身；
p标签不可以包含任何的块标签。

六、div和span

通过display样式可以修改标签的类型

block	设置标签为块标签
inline	设置标签为行级标签
inline-block	设置标签为行级块标签
none	隐藏标签（标签将在页面中完全消失）

div 标签

div是块级标签，可以放置任何标签。
div没有任何附加功能，给了什么属性就能变成什么样。
div主要的作用是被用来布局网页。

span 标签

span是行级标签
span 没有任何附加功能，给了什么属性就能变成什么样。
span标签被用来选中文档中的文字。

七、盒子模型、内边距、边框、外边距

CSS处理网页时，它认为每个标签都包含在一个不可见的盒子里。
如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

一个盒子分为几个部分：

1、盒子模型-内容区

内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标签都是存在于内容区中的。
如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小是一致的。
通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。
width和height属性只适用于块标签(包含行级块)。

2、盒子模型-内边距

内边距指的就是标签内容区与边框以内的空间。
内边距会影响整个盒子的大小。
使用 padding 属性来设置标签的内边距。

例如：

padding-left:10px;

padding-right:10px;

padding:10px 20px 30px 40px

这样会设置标签的上、右、下、左四个方向的内边距。

3、盒子模型-边框

可以在标签周围创建边框，边框是标签可见框的最外部。

可以使用 border 属性来设置盒子的边框：

border:1px red solid;

上边的样式分别指定了边框的宽度、颜色和样式。

也可以使用 border-top/left/right/bottom 分别指定上右下左四个方向的边框。

边框可以设置样式：

dotted （点线） dashed （虚线） solid （实线） double （双线） groove

（槽线）

border-radius 设置四个角为圆角边框

border-top-left-radius 设置左上为圆角边框

4、盒子模型-外边距

外边距是标签边框与周围标签相距的空间。使用margin属性可以设置外边距。用法和padding类似，同样也提供了四个方向的。

margin-top/right/bottom/left。

margin的值可以为负值。

margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为

auto时，浏览器会将左右外边距设置为相等.

垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。

外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子的实际控制范围

5、清除浏览器的默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的margin 和 padding ，而它的这些默认样式，正常情况下我们是不需要使用的。

所以我们往往在编写样式之前需要将浏览器中的默认的 margin 和 padding 统统的去掉。

*{

margin: 0;

padding: 0;

}

八、文档流--浮动、定位

1、文档流

文档流指的是文档中的标签在排列时所占用的位置。将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。
也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。
这样一来每一个块标签都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。

2、浮动

所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。

浮动使用 float 属性。

可选值：

none ：不浮动

left ：向左浮动

right ：向右浮动

块级标签和行级标签都可以浮动，当一个行级标签浮动以后将会自动变为一个块级标签。当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我们都会为其指定一个宽度。

当一个标签浮动以后，其下方的标签会上移。
浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流，这时不会再影响父标签的高度。也就是浮动标签不会撑开父标签。

3、清除浮动

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。

可选值：

left ：忽略左侧浮动

right ：忽略右侧浮动

both ：忽略全部浮动

4、CSS定位（Position）

定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。

5、相对定位（relative）

相对定位：

相对定位是一个非常容易掌握的概念. 相对于它的起点进行移动，移动后原来的位置还被占用。

可以通过position:relative; 开启相对定位，left right top bottom四个属性来设置标签的偏移量。

相对定位的特点：

当标签的position属性设置为relative时，则开启了标签的相对定位

1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化

2.相对定位是相对于标签在文档流中原来的位置进行定位

3.相对定位的标签不会脱离文档流

6、绝对定位

绝对定位

绝对定位是不占空间的，运用了绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉上会其他的标签重叠。可以通过position: absolute; 开启绝对定位，left right top bottom四个属性来设置标签的偏移量

绝对定位的特点

开启绝对定位，会使标签脱离文档流
开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位）如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位
绝对定位会使标签提升一个层级