CSS学习总结

最新推荐文章于 2025-06-14 20:01:51 发布

Ra1n .

最新推荐文章于 2025-06-14 20:01:51 发布

阅读量492

点赞数 1

文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_52728674/article/details/114021619

版权

思维导图:
在这里插入图片描述

CSS简介

CSS全称Cascading Style Sheets，中文译为“层叠样式表”是一种用来表现HTML的一种计算机语言。关于HTML相关的内容可以阅读我之前发表的HTML文章。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。(因为脚本语言本人还没进行详细学习所以在本文中不进行讲述)
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS的语法由三部分构成：选择器、属性和值

p{font-size:80px;}

上述代码中，P便属于语法中的“选择器”部分；括号内冒号前的font-size属于语法中的“属性”部分；而冒号后的80px属于语法中的值

CSS的引入方式

内嵌式引入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body{font-size:36px;}
	</style>
</head>
<body>
<p>一些老的<b>浏览器不支持 iframe。</b></p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>

如代码中将style标签嵌套在head标签中的这种引入方式就是内嵌式引入

行内样式

<b style="font-size:56px;">浏览器不支持 iframe。</b>

上述代码演示的是行内样式，即将style属性直接添加到b标签中，实现对html样式的表现

外链样式

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

外链样式就是把css当成一个文件，通过link标签引入到html中。

嵌入样式

<style type="text/css">
  @import url("css/style.css");

</style>

嵌入样式是内嵌和外链一种综合性的使用，不太常用了解即可。

当html中出现多种css引入方式，显示那种取决与那种样式离修饰目标更近

选择器

要用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的

标签选择器

标签选择器通过标签的名字来命名的

body{color:red;} p{color:red}

上述标签选择器实现的就是对html中所有body标签的样式进行修改

ID选择器

当标签中出现id属性的那么可以使用id选择器
id选择器通常应用于某些标签中独有的样式
Id选择器的标识是#
代码如下

#one{color:gold;}

类选择器

当标签中出现class属性的时候那么可以使用类选择器
类选择器通常应用于某几个标签具有相同的样式
类选择器的标识是.
代码如下

.pink{color:pink;}

全选择器

全选择器使用*号来表示，对整个html中的所有标签都起作用
代码如下

*{font-size:36px;color:black;}

CSS的特性

继承性

网页中子元素，将继承父元素的样式
例如：要控制段落p中的文字大小，可以直接给body标记加样式。

层叠性

网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式
后面定义的样式，会覆盖前面定义的样式

优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。内联样式(inline style) > ID选择符 > 类选择符(class), 伪类(pseudo-class)和属(attribute)选择符 > 类别(type)，伪对象(pseudo-elemen加粗样式t)*

CSS常用样式

字体颜色

可通过color属性修改文本中的字体颜色

案例如下

代码：在这里插入图片描述

一下是效果
在这里插入图片描述

背景颜色

修改背景颜色可以用到background-colo这一属性
一下是实例

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div style="width:100px;background-color:red"><p>hello world</p></div>
</body>
</html>

效果如下图
在这里插入图片描述

字体样式

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）
CSS 定义了 5 种通用字体系列：Serif 字体；Sans-serif 字体；Monospace 字体；Cursive 字体；Fantasy 字体
font-style 属性最常用于规定斜体文本。该属性有三个值：normal - 文本正常显示；italic - 文本斜体显示；oblique - 文本倾斜显示
font-weight 属性设置文本的粗细
font-size 属性设置文本的大小
下面是实例展示
在这里插入图片描述
效果如下图

字间距

word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近。

在这里插入图片描述

从上述两个实例实例中我们可以清除的看出该样式对字间距的改变，字间距随设置的像素值变大而变大

列表样式

list-styl——列表样式的简写属性，用于把所有的列表属性设置于一个声明中。
list-style-image——将图象设置为列表项标志
list-style-position——设置列表中列表项标志的位置
list-style-type——设置列表项标志的类型

一下实例是对上述三种属性的应用
在这里插入图片描述

超链接伪类

链接有四种状态：1.未访问的链接 2.已访问的链接3.鼠标移动到链接上4.鼠标按下到链接上

a:link {color:#FF0000;} 未被访问的链接
a:visited {color:#00FF00;} 已被访问的链接
a:hover {color:#FF00FF;} 鼠标指针移动到链接上
a:active {color:#0000FF;} 正在被点击的链接

需注意链接为不同状态时设置样式，需要按照以下次序规则
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

下面是实际操作
在这里插入图片描述

上面所展示的后三幅图分别是鼠标未移至链接处，鼠标移至链接处，鼠标点击链接所产生的效果（因截屏操作，鼠标未截入图片中）

盒子模型

要学习盒子模型，首先我们先观察一张盒子模型的结构图
在这里插入图片描述
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
其中内边距 padding 用于填充内容内部；外边距 margin 用于描述浏览器边缘到内容的之间的距离；边框 border即图中绿色部分，可通过设置改变边框的粗细；Content(内容) 盒子的内容，显示文本和图像