css
CSS:页面美化和布局控制
1 概念：Cascading Style Sheets 层叠样式表
2 好处：
1 功能强大
2 将内容的展示和样式控制分离
* 降低耦合度。解耦
* 让分工协作更容易
* 提高开发的效率
3 CSS的使用：CSS与html结合方式
1 内联样式
在标签内使用style属性指定css代码
<div style="color:red;">hello css</div>
2 内部样式
在head标签内，定义style标签，style标签的标签体内容就是css代码
<head>
<style>
div{
color:blue;
}
</style>
</head>
<body>
<div>hello css</div>
</body>
3 外部样式
1 定义css资源文件
2 在head标签内，定义link标签，引入外部的资源文件
* 注意 三种方式作用范围越来越大
4 CSS语法
* 格式：
选择器{
属性名1:属性值1;
属性名2:属性值2;
}
* 选择器：筛选具有相似特征的元素
* 注意：
每一对属性需要使用;隔开
5 选择器
* 分类：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#div1{
color:red;
}
.cls1{
color: blue;
}
</style>
</head>
<body>
<!--
1 基础选择器
1 id选择器:选择器具体的id属性值的元素,id值唯一
#id属性值{}
2 元素选择器：选择具有相同标签名称的元素
标签名称{}
* 注意 id选择器优先级高于元素选择器
3 类选择器：选择具有相同的class属性值的元素
.class属性值{}
*注意 类选择器优先级高于元素选择器
-->
<div id="div1">haha</div>
<div>heihei</div>
<p class="cls1">xixi</p>
</body>
</html>
2 扩展选择器
1 选择所有元素：
* 语法：*{}
2 并集选择器：
* 选择器1，选择器2{}
3 子选择器：筛选选择器1元素下的选择器2元素
* 语法：选择器1 选择器2{}
4 父选择器：筛选选择器2的父元素选择器1
*语法：选择器1>选择器2{}
5 属性选择器：选择元素名称，属性名=属性值的元素
*语法：元素名称[属性名=“属性值”]{}
6 伪类选择器：选择一些元素具有的状态
*语法：元素：状态{}
*如：<a>
* 状态：
*link：初始化的状态
*visited：被访问过的状态
*active：正在访问状态
*hover：鼠标悬浮状态
6 属性
1 字体、文本
font-size：字体大小
color：文本颜色
text-align：对齐方式
line-align：行高
2 背景
background：
3 边框
border：设置边框，符合属性
4 尺寸
width：宽度
height：高度
5 盒子模型：控制布局
1 margin：外边距
2 padding：内边距
默认情况下内边距会影响整个盒子的大小
box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
3 float：浮动
left
right
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？