前端之CSS
CSS
CSS简介
CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。
即>>>:css相当于是完成前端页面布局的一种语法规则。用于调整HTML标签的样式。
CSS的语法结构
每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
css的语法结构:选择器 {属性名1:属性值1;属性名2:属性值2}。
css的注释结构:/*注释内容*/。
CSS的三种引用方式
-
行间式
行内式是在标记的style属性中设定CSS样式。(标签内部通过style属性直接编写)
格式如下:
<p style="color: red">Hello world.</p>
特点:
- 写在标签的style属性中
- 属性与属性之间用 : >>>赋值
- 属性与属性之间用 ; >>>隔开
-
内联式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。(head内style标签内部直接编写css代码)
格式如下:
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>
特点:
- 写在style标签中(style标签一般出现在head标签当中)
- 用选择器与HTML建立连接
- 样式块书写在作用域内
-
外联式
外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可。(head内link标签引入外部css文件)
格式如下:
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
特点:
- 形成单独的.css文件,样式书写在.css文件当中
- 用选择器与HTML建立连接;样式块书写在作用域内
- 要将.css文件与.html文件建立关联>>>:
<link href="mystyle.css文件的相对路径" rel="stylesheet" type="text/css"/>
ps:
外联式是最常用的,一般用于开发;内联式可读性最强,并且有解耦合的复用性;行间式最不推荐,因为它会将HTML和CSS柔和到一起,增加了耦合度。
css层级样式表的三大组成部分
-
选择器:由标签、类、ID单独或组合出现。
-
作用域:一组大括号包含的区域。
-
样式块:满足css连接多种语法的众多样式。
css的基本选择器
css选择器是用来将CSS与HTML建立关联的一个桥梁,可以称之为CSS选择器。
将原来出现在标签内部的样式分离开来,可以用一个个选择器加以管理,达到页面与样式的解耦合的目的,从而提高代码的复用性与开发效率。
CSS选择器的本质就是:页面标签的各种名字。
-
标签选择器(范围查找)
直接通过标签名来查找标签。该标签名对应所有的标签。
h1 { color: deeppink; /*让所有h1标签内部所有的字体颜色变为深粉色*/ }
-
class类选择器(范围查找)
通过标签的class属性查找标签,(关键性符号是句点符)。标签中的class属性如果有多个,要用空格分隔。
.c1 { color: greenyellow; /*将所有class属性中含有c1的所有标签内部字体颜色改为亮绿色*/ }
-
id选择器(精确查找)
通过标签的id属性查找标签。(关键性符号是#)。
#d1 { color: orange; }
-
通用选择器(几乎不用)
查找所有的标签,HTML、body用于显示的标签。(关键性符号是*)
* { color: blue; }
组合选择器
标签通过嵌套层级来表示亲属关系。
<div>div1 <div>div2 <p>p1</p> </div> <p>p2 <span>span1</span> </p> <span>span2</span> </div> /* 通过嵌套层级来表示亲属关系,判断的时候一定要看层级关系 1.对于div1来说div2、p2、span2都是儿子 2.对于div2、p2、span2来说div1就是父亲 3.对于p1来说div2是父亲 div1是爷爷(可以将div1和div2统称为祖先) 4.对于span2来说div2、p2是哥哥 span2是弟弟 5.div1内部所有的标签无论层级都可以称之为是div1的后代 /*
-
儿子选择器(关键符号是大于号)
/*选择所有父级是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; } ---------------------------------------------------------- #d1 > span { /*查找id是d1标签内部所有的儿子span/* color: red; }
-
后代选择器(关键符号是空格)
/*li内部的a标签设置字体颜色*/ li a { color: green; } --------------------------------------------------- #d1 span { /*查找id是d1标签内部所有的后代span/* color: red; }
-
毗邻选择器(关键符号是加号)
/*选择所有紧接着<div>元素之后的<p>元素*/ div+p { margin: 5px; } -------------------------------------------------- #d1 + a { /*查找id是d1标签同级别下面紧挨着第一个a标签/* color: red; }
-
弟弟选择器(关键符号是小波浪号)
/*i1后面所有的兄弟p标签*/ #i1~p { border: 2px solid royalblue; } ----------------------------------------- #d1 ~ a { /*查找id是d1标签同级别下面所有a标签/* color: red; }
属性选择器(关键符号是中括号)
根据标签内部的属性名和属性值查找标签。
/*用于选取带有指定属性的元素。*/ p[title] { color: red; } /*方式1:直接通过属性名查找/* [type] { background-color: red; } --------------------------------------- /*用于选取带有指定属性和值的元素。*/ p[title="213"] { color: green; } /*方式2:属性名是type并且值是text的标签/* [type='text'] { background-color: red; } /*方式3:属性名是type并且值是text的div标签/* div[type='text'] { background-color: red; }
分组与嵌套
分组:
当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
div, p { color: red; } /*上面的代码为div标签和p标签统一设置字体为红色/* ------------------------------------------- /*通常,我们会分两行来写,更清晰/* div, p { color: red; } ------------------------------------------- div, p, span { /*查找div或者p或者span/* color: red; }
嵌套:
多种选择器可以混合起来使用。
/*比如:.c1类内部所有p标签设置字体颜色为红色/* .c1 p { color: red; } ----------------------------------------------------- #d1, .c1, span { /*查找id是d1或者class包含c1或者span/* color: red; }
分组嵌套组合:
/* div#d1 查找id是d1的div标签 div.c1 查找class包含c1的div标签 div #d1 查找div内部id是d1的后代标签 #d1>.c1 查找id是d1的内部class包含c1的儿子标签 /*
伪类选择器
- 鼠标悬浮
p:hover { /*鼠标移动到p标签上方 字体颜色动态修改为橙色/* color: orange; }
- 获取聚点
input:focus { /*输入框被鼠标左键选中(聚焦)/* background-color: black; }
- ps:
/* 未访问的链接 */ a:link { color: #FF0000 } /* 鼠标移动到链接上 */ a:hover { color: #FF00FF } /* 选定的链接 */ a:active { color: #0000FF } /* 已访问的链接 */ a:visited { color: #00FF00 } /*input输入框获取焦点时样式*/ input:focus { outline: none; background-color: #eee; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库