CSS
一.引入（初识css）：
- css是层叠样式表的简称，css也是一种标记语言
- css是网页的美容师，css用于设置HTML网页中的文本内容，图片的样式，版面的布局，css美化HTML，布局网页
- HTML做结构呈现，样式交给CSS，即结构和样式的分离
- css语法规范：css代码由两部分构成，选择器以及一条或多条声明
选择器 {
属性：属性值；
属性：属性值；
属性：属性值；
}- 选择器用于指定css样式的html标签，即对谁进行改样式
- 花括号内属性+冒号+属性值+分号，属性值对之间以分号分开
- 代码规范：选择器+空格+花括号 属性+冒号+空格属性值
css大部分代码是放到<head>内的<style></style>标签的内部 - 选择器：就是根据不同的需求把不同的标签选出来就是其作用，选标签用的，
- 分为基础选择器和复合选择器两大类，基础选择器就是单个选择器
二.基础选择器（4种）
1.标签选择器
1.指用html标签名称作为选择器，为页面中某一类(按标签名分类)标签指定统一的css样式
<style>
p {
color:red;
}
</style>
</head>
<body>
<p>学习不间断</p>
</body>
2.类选择器
- .类名（类名是自定义的，类名前有个点）
- 结构中使用class属性调用 ，class="类名"
<style>
.red {
color: red;
}
</style>
</head>
<body>
<p class="red">学习不间断</p>
</body>
- 类名是自定义的,最好是英文字母，而且见名知意，不要简写，常见nav表示导航的意思
- 类选择器实现差异化选择不同的标签，就是允许多个标签中出现“class="类名”，允许多次调用
- 多类名
可以给一个标签调用多个类名，在class属性中写多个类名，多个类名间用空格隔开，这个标签就可以同时具有这些类名的样式
例如：三个盒子，若有着相同的高和宽，只是颜色不同时
<style>
.red {
background-color: red;
}
.box {
width: 150px;
hight: 100px;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="red box" >红盒子</div>
<div class=" box green" >绿盒子</div>
<div class="red box" >红盒子</div>
</body>
说明：div标签是一个盒子模型
使用多类名的作用：可以将一些标签元素相同的样式放到一个类里面，这些标签可以调用这个公共的类，然后再调用自己的独有的类，从而节省css代码，统一修改也方便
3,id选择器
1.和类选择器很相似：
# id名（id名是自定义的，id名前有个#）
结构中使用class属性调用 ，** id="id名"**
<style>
#red {
color: red;
}
</style>
</head>
<body>
<p id="red">学习不间断</p>
</body>
3.和类选择器区别：id选择器只允许HTML文档中出现一次，而类选择器允许HTML文档中被不同的标签调用多次
4.通配选择器
它表示选取页面中的所有标签，通配选择器在使用时不需要调用，自动就给所有标签使用该样式
<style>
* {
color: red;
}
</style>
</head>
<body>
<p>学习不间断</p>
</body>
三.CSS字体属性：
1.字体类型font-family
- font-family:"微软雅黑"，用英文表示“Microsoft Yahei” font-family：Microsoft Yahei；
- 属性值可以是多个字体类型，系统会依次检查本机是否安装此字体，就应用了，若都都没有安装，则使用本机默认字体类型
- 各种字体之间必须使用英文状态下的逗号隔开
- 使用css代码时会应用于body标签，就是整篇文档的字体类型的设置
2.字体的粗细font-weight
- 属性值：normal指的是默认值（不加粗）
bold指的是粗体
数字（100~900） 400等同于normal, 700等同于bold
注意数字后没有单位 - 应用：让加粗标签（比如h和strong）不加粗 font-weight：normal；
- 实际开发中用数字较多
3.字体的样式font-style
- 属性值： normal 指的是默认值，会显示标准的字体样式
italic 指的是显示斜体， - 应用：让斜体标签（em ,i 标签）改为不倾斜字体
4.字体大小font-size
一般以像素为单位，在css中单位一般不可以省略
font-size：16px;
5.字体复合属性：font
1. 有严格的书写顺序：font-style font-weight font-size/line-height font-family
各个属性间以空格隔开
2. 不需要设置的属性可以省略（取默认值），但必须保留font-size和 font-family
3. 例如：font:20px "Micrsoft Yahei";
font:italic 700 20px "Micrsoft Yahei";
四.CSS文本属性
1.文本颜色 color
有三种表达颜色的方式：1. red,green, blue 2.十六进制 #FF0000红色
3.rgb(255,0,0)红色
2.对齐文本 text-align
- 用来设置盒子内的文字的水平对齐方式
- 属性值： left 左对齐（默认） right 右对齐 center居中对齐
3.装饰文本 text-decoration
- 属性值：none 默认，没有下划线 underline 下划线，超链接自带下划线
overline 上划线 line-through 删除线（价格的原价上会使用） - 应用： 给超链接去掉下划线
<style>
a {
text-decoration:none;
}
</style>
</head>
<body>
<a href="#">学习是俺最大的快乐</a>
</body>
4. 文本缩进 text-indent
- text-indent属性用来指定文本的第一行缩进，通常是将该段首行缩进
- text-indent：2em;(缩进2字符大小，em是相对于当前文字的font-size一个字符大小，所以em不是固定的，是随当前文字而变化)
5. 行间距 line-height
- 用来设置行与行的距离，指行高 line-height:26px; 可取像素值
- 行间距==上间距+文本高度+下间距，所以改变行高，指的是改变上下间距
五.CSS引入方式
1， 行内样式表（内联样式表） 控制一个标签
- 是在HTML元素标签的内部的style属性中来设定css样式，适合修改简单的样式 style="属性：属性值；属性：属性值； "，style后面是等号 后跟双引号
<a href="#" style="text-decoration:none;">学习是俺最大的快乐</a>
- 仅仅可以控制当前的标签设置样式
2，内部样式表（内嵌样式表）控制一个页面
- 是将所有的CSS代码抽取出来，放到在head标签内部的style标签内部，可以方便的控制当前整个页面中的元素设置
<style>
a {
text-decoration:none;
}
</style>
</head>
<body>
<a href="#">学习是俺最大的快乐</a>
</body>
3. 外部样式表 控制多个页面
- 将样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中
- 引入外部样式表分两步：
1. 新建一个后缀是.css的样式文件，把所有的css代码放到此文件中
2. 在HTML页面中，使用标签引入css文件
3. <link rel="stylesheet" href="css文件路径" - 在html文档外面新建的css样式文件，可以被多个html文档应用
4.外部样式表 实现了可以同时控制多个页面，实现了HTML和CSS的完全分离，即样式和结构的完全分离
外部css样式表：
@charset "utf-8";
/* CSS Document */
h1 {
font:italic 400 20px 微软雅黑;
color:red;
text-align:center;
}
HTML网页：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>学习css</title>
<link rel="stylesheet" href="a2.css">
</head>
<body>
<h1>学习不间断</h1>
</body>
</html>
六. 复合选择器
建立在基础选择器上，对基础选择器进行组合形成的，分为4种
1. 后代选择器 用空格隔开
- 可以选择父元素里面的子元素，写法是把外层标签写在前面，内层标签写在后面，中间用空格分隔
- 当标签发生嵌套时，内层标签就是外层标签的后代
- 语法：元素1 元素2
- 指的是选中元素1的所有元素2，并对元素2进行改样式
- 元素2 可以是儿子 ，也可以是孙子，只要是元素1的后代就行
- 元素1和元素2可以是任意的基础选择器
例如：当仅仅是修改ol里面的li的字体样式：
<style>
/*两个标签选择器组合*/
ol li {
color:red;
}
</style>
</head>
<body>
<ol>
<li>我是ol的后代</li>
<li>我是ol的后代</li>
<li>我是ol的后代</li>
</ol>
<ul>
<li>我是ul的后代</li>
<li>我是ul的后代</li>
<li>我是ul的后代</li>
</ul>
</body>
例如：当仅仅是修改第二个的ul里面的超链接的颜色：
使父类ul中添加class属性,就是用类选择器来区分第一个ul
<style>
/*类选择器和标签选择器的组合*/
.nav li a {
color: red;
}
ul li a{ 由外到内层层找到目标元素
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>我是ul的后代</li>
<li>我是ul的后代</li>
<li><a href="#">变化</a>
<li>
</ul>
<ul class="nav">
<li>我是ul的后代</li>
<li>我是ul的后代</li>
<li><a href="#">变化</a></li>
</ul>
2. 子选择器 用大于隔开
1.只能选择作为某元素的最近一级子元素，就是亲儿子元素
2. 元素1>元素2{ 样式声明 } 选择元素1里面的所有直接后代元素2
3. 注意：大于号 隔开，对元素2改样式
<style>
ul>a { 只修改变化3超链接的颜色和去掉下划线
color :red;
text-decoration:none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">变化1</a></li>
<li><a href="#">变化2</a></li>
<a href="#">变化3</a>
<li>
</ul>
</body>
3.并集选择器 用逗号隔开
- 并集选择器使各选择器通过逗号连接而成，任何形式的选择器都可以作为它的一部分
- 并集选择器就是可以同时选择多组标签，为他们定义相同的样式，常用于集体声明
- 元素1，元素2
<style>
span,p,ul {
color :red;
}
</style>
</head>
<body>
<span>学习</span>
<p>读书</p>
<ul class="one">
<li> 变化1 </li>
<li> 变化2 </li>
</ul>
</body>
4.链接伪类选择器
a:link 选择所有未被访问的超链接
a:visited 选择所有已被访问的超链接
a:hover 选择鼠标位于其上的超链接
a: active 选择鼠标已经点击但没有松开时的超链接
<style>
a:link{
color:red;
text-decoration:none;
}
a:visited{
color: green;
}
a:hover{
color:blue;
}
a:active{
color:pink;
}
</style>
</head>
<body>
<a href="#">学习yyds</a>
</body>
- 有顺序要求：a:link a:visited a:hover a: active 简记为 love hate
- 超链接有自己的默认格式：蓝色 还有下划线；，超链接 还是显示己的默认格式， 所以，要给a标签单独设置样式
- 实际开发中 常用两点：
1. 利用标签样式表 a{ 样式 }给a设置样式，去掉超链接的下划线
2. 设置a:hover，当鼠标停在链接上方时，改变链接的颜色，
5. :focus伪类选择器 针对表单
- 用于获取焦点的表单元素，焦点就是光标，一般input类的表单才可以获取，这个选择器主要针对表单元素来说的
/*当表单的文本框被鼠标点击时，可以设置文本框的背景颜色和框中的文本的颜色*/
input:focus{
background-color:#C6C;
color:pink;
}
</style>
</head>
<body>
<a href="#">学习yyds</a>
<input type="text">
<input type="text">
<input type="text">
</body>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现