前言
CSS（Cascading Style Sheets）是一种样式表语言，用于控制网页的外观和布局。与HTML相辅相成，CSS可改变文本样式、设置背景和定位元素。具有层叠、继承和优先级特性，支持多种选择器和样式规则。可用于创建响应式设计，确保网页在不同设备上良好显示。在网页设计和开发中扮演重要角色，提供丰富的样式和布局控制能力，帮助开发人员创建美观、可访问和响应式的网页。CSS是不可或缺的一部分，促进网页设计的进步和创新。
作者建议:学习知识在于深度理解，多动手、多动脑，总能更快地领悟。不要仅仅停留在阅读代码的层面，亲自动手敲打一遍，会带来更丰富的收获。通过实践，我们能够更深入地理解知识，掌握技能，并且在解决问题时更加得心应手。相信自己的能力，坚持不懈地实践，你将会取得更大的进步和成就。让学习成为一种习惯，让动手实践成为你提升的捷径，加油！你是最棒的!
目录
css概述
CSS是Cascading Style Sheets（级联样式表),CSS是一样式表语言,用于为HYML文档控制外观,定义布局.
例如:CSS可以修饰文本字体,颜色, 组件的边距,高度,背景颜色,背景图像,高级定位等
基本语法-行内样式表
行内样式表:又称行间样式. 也就是通过style标签来设置元素的样式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
<div style="width: 100px; font-size: 100px; ">内容</div>
基本语法-内嵌样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 */
p {
color: aquamarine;
}
/* id选择器 */
#title{
color: aliceblue;
}
</style>
</head>
<body>
<p>静夜思</p>
<p id="title">静夜思</p>
<p class="p1">静夜思</p>
<p class="p2">静夜思</p>
</body>
</html>基本语法-外部样式表
外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通 过link标签将外部样式表文件链接到HTML文档中.
使用情况
选择器
概述;要使用CSS对HTML页面的标签实现一对一,一对多的控制,这就需要用到CSS选择器
常用的选择器
标签选择器:通过标签选择器可以选择页面中的所有指定的标签
语法: 标签名{}
类选择器:通过标签的class属性值选中一组标签
语法: .class属性值
id选择器:通过标签的id属性选中唯一的标签
语法: #id属性值{}
通配选择器:可以用来选中页面中的所有的标签
语法: *{}
<style>
*{
/* 通配选择器 */
/* Css内容 */
}
#id1{
/* id选择器 */
}
.box3{
/* 类选择器 */
}
div{
/* 标签选择器*/
}
</style>
<div class="box3"></div>
<div id="id1"></div>
<div></div>选择器的优先级
id>类选择器>标签选择器>通配选择器
文本修饰
color ----- 设置颜色
font-size ---- 设置文本大小
font-family --- 设置文本的字体
font-weight---字体粗细
font-style: italic----斜体文本
text-align----文本对齐(居中 左对齐 右对齐)
text-decoration:line-through --- 删除线
text-decoration:underline --- 下划线
text-decoration:underline ---- 取消下划线 (超链接一般默认有下划线,可以通过这个取消)
line-height: 50px ----行高
letter-spacing---字间距(字符的间距,不适合用到英文)
word-spacing----单词的间距
text-indent: 2em ---首行的缩进(2em二个文字的大小)背景修饰
个人理解:这个背景不一定是网页,每个组件都占据不同的背景我们可以逐一修饰
background-color背景颜色
background-image背景图片 --- 如果背景太大,而照片太小,那个照片会默认填充背景也就会出现重复的现象
background-repeat背景重复 -- 和这个语句可以对上面的现象进行操作
background- position 背景位置 这个里面二个是参数
background-size背景尺寸
p {
background-color: lightpink;css
width: 800px;
height: 800px;
background-image: url("img/bg.jpg");
background-repeat: no-repeat; /* 让背景图片不重复 */
background-position: center center; /* xy轴都居中 */
}列表
color 设置颜色
list-style-type 设置列表项标志的类型 (css中有多种)
list-style-image 可以自己设置图标
list-style-position 设置列表中列表项标志的位置
list-style 简写属性 可以用这个把三个全部写入 不分先后
.u li{ /* .u li这也是一个选择器,意思为:u class中的li */
text-align: center;
color: lightpink;
list-style-type: decimal; /* 阿拉伯数字 */
list-style-image: url("img/img.jpg"); /* 图片标志 */
/* list-style-position: outside; */
list-style-position: inside;
list-style: decimal inside; /* 简写,不分先后 */
}inside 和 outside的区分
outside展示
inside展示
伪类
CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类
伪类的语法：
:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式
透明
定义透明效果的属性是 opacity。
opacity 属性设置标签的不透明级别 值为1。
规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）。
img{
opacity: 0.5;
}块级标签
块级标签：无论内容多少 都会独自占据一行的
可以设置宽高
主要用来进行网页的布局
例如:<p> <h1> <ul> <ol> <hr/>
行级标签
行级标签：只占自身大小的标签，不会占一行
设置宽高也无效
例如:<font> <b> <i> <a>
行级块标签
不占一行,可以设置宽高
例如 <input/> <img>等
Display
通过display样式可以修改标签的类型。
可选值： block ：设置标签为块标签
inline ：设置标签为行级标签
inline-block ：设置标签为行级块标签
none ：隐藏标签（标签将在页面中完全消失）
504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
