CSS（层叠样式表）是一种用于网页样式设计的语言，它通过为 HTML 标签添加样式来控制网页的外观和布局。CSS 可以设置元素的颜色、字体、间距、对齐方式等，还可以用于创建响应式设计，以适应不同设备的屏幕尺寸。CSS 是前端开发的核心技术之一，和 HTML 一起构建网页的内容和视觉效果。
a、什么是CSS
1、Casacding Style Sheet 层叠级联样式表
CSS：表现 美化网页
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动
2、发展史
CSS1.0
CSS2.0 DIV（块）+ CSS HTML与CSS结构分离的思想，使网页变得简单 SEO
CSS2.1 浮动 定位
CSS3.0 圆角 阴影 动画 浏览器兼容性
3、快速入门
第一种方式
<head><meta charset="UTF-8"><title>Title</title>
<!-- 规范 style 可以编写css的代码
语法：选择器{声明1：声明2：声明3}
--><style>h1{color: #000;}</style>
</head>
<body>
<h1> 我是标题 </h1>
</body>第二种方式
CSS优势：
内容和表现分离
网页结构表现统一，可以实现复用
样式十分的丰富
建议使用独立于html的css文件
利用SEO，容易被搜素引擎收录
4、CSS的3种导入方式
行内样式
<h1 style="color: green"> 我是标题 <h1/>内部样式
<style>h1{color：red}
</style>外部样式
属性写在 css文件中
然后导入
<link rel="stylesheet" href="css/style.css">b、选择器
作用：选择页面上的某一个或者某一类元素
1、基本选择器
标签 选择器：选择一类标签 语法——标签{}
类 选择器：选择所有class属性一致的标签，跨标签 语法——.类名{}
Id 选择器：全局唯一 语法——#id名称{}
id》class》标签
2、层次选择器
2.1、后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你
/* 后代选择器*/body p{background: green;}
2.2、子选择器：一代 儿子
/* 子选择器 */body>p{background: olive;}
2.3、相邻兄弟选择器：同辈，就是下面的一个换变化，不是本身
/* 相邻 弟弟选择器*/.qingjiang + p{background: blue;}2.4、通用选择器：就是本身，下面的所有标签
/* 通用选择器*/.qingjiang~p{background: blueviolet;}3、结构伪类选择器
伪类：条件
<style>/* ul的第一个子元素*/ul li:first-child{background: red;}ul li:last-child{background: olive;}/* 定位到本身的 父元素 ，选中父级元素的第一个元素*/p:nth-child(1){background: brown;}</style>4、属性选择器（常用）
语法：标签【属性名】{}
<style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: blue;text-align: center;color: gainsboro;text-decoration: none;margin-right: 5px;font:bold 20px/50px Arial;}/* 存在 id属性的元素 a[]{} 翻译：a标签带有id属性*//* = 代表绝对等于*= 包含这个元素^= 以什么开头$= 以什么结尾*//*a[id]{*//* background: yellow;*//*}*/a[id=first]{background: green;}/* class中 有link的元素*/a[class*="link"]{background: chartreuse;}/* 选中href中以http开头的元素*/a[href^=http]{background: crimson;}/* 选中以com结尾的href元素*/a[href$=com]{background: black;}</style>
</head>
<body>
<p class="demo"><a href="https://baidu.com" class="link item first" id="first" >1</a><a href="" class="linksitem active" target="_blank" title="text">2</a><a href="images">3</a><a href="">4</a><a href="">5</a><a href="">6</a><a href="">7</a><a href="">8</a><a href="">9</a><a href="abcd.doc" class="link item last">10</a>
</p>
</body>5、美化网页元素
5.1、为什么要美化网页
有效的传递页面信息、美化，页面漂亮，才能吸引用户，凸显页面的主题，提高用户的体验
5.2、字体样式
1、font-family：字体
2、font-size：字体大小
3、font-weight：字体粗细
4、color：字体颜色
5.3、文本样式
1、颜色：coor，rgb，rgba
2、文本对齐的方式：text-align = center
3、首航缩进：text-indent：2en
4、行高：line-height
5、装饰：text-decoration
6、文本图片水平对齐：vertical-align：middle
5.4、阴影
/* text-shadow：阴影颜色 水平偏移，垂直偏移，阴影半径*/
#price{text-shadow：#3cc7f5 10px -10px 2px；
}5.5、超链接伪类
正常情况下：a，hover（鼠标悬浮的颜色）
a{text-decoration:none;color:#000;
}
/* 鼠标悬浮的颜色 */
a:hover{color: orange;font-size: 50px;
}5.6、列表
/* ui li */
list -style：none 去掉原点circle 空心圆decimal 数字square 正方形5.7、背景
背景颜色
背景图片
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 1000px;height: 700px;border: 1px solid red;background-image: url("images/icon.png");/* 默认是全部平铺*/}.div1{background-repeat: repeat-x;}.div2{background-repeat: repeat-y;}.div3{background-repeat: no-repeat;}</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>第二种方式
/* 颜色 图片 图片位置 平铺方式*/
background: red url("images/icon.png") 270px 10px no-repeat;5.8、渐变
c、盒子模型
1、什么是盒子模型
外边距：margin
内边距：padding
边框：border
1.1、边框
边框的粗细
边框的样式
边框的颜色
border: 1px solid red;
/* 粗细 状态 颜色*/1.2、内外边距
/* 上 下 左 右*/
margin: 1px 2px 3px 4px
padding: 1px 2px 3px 4px
/* 上下 左右*/,居中
margin: 0px auto;盒子的计算方式：你这个元素到底多大
margin+border+padding+内容宽度1.3、圆角边框
4个角
<!-- 4个 = 左上 右上 右下 左下 顺时针
2个 = 左上+右下 右上+左下-->
div{width: 100px;height: 40px;margin: 30px;background: red;border-radius: 50px 50px 0px 0px;}1.4、阴影
可以发光
div{width: 100px;height: 100px;border: 10px solid red;box-shadow: 10px 10px 1px yellow;/*第三个数值越大，越模糊*/}
1.5、浮动
块级元素：独占一行
h1~h6 p div 列表...行内元素：不独占一行
span a img strong em br input行内元素 可以被包含在 块级元素中，反之，则不可以
display
/*display*/-
/* black：转化为 块元素
inline：转化为 行内元素
inline-black：可以是行内也可以是块元素，可以内联*/
.layer01{border: 1px #F00 dashed;display: inlin-black;
}
.layer02{border: 1px #00F dashed;display: inlin-black;
}
.layer03{border: 1px #060 dashed;display: inlin-black;
}
.layer04{border: 1px #666 dashed;font-size: 12px;line-height: 23px;
}
display也是一种实现行内元素排列的方式，但是很多情况下是使用float
float
浮动就是独立于原来的地方，浮起来。左右浮动
.layer01{border: 1px #F00 dashed;float: left;
}
.layer02{border: 1px #00F dashed;float: left;
}
.layer03{border: 1px #060 dashed;float: left;
}
.layer04{border: 1px #666 dashed;font-size: 12px;line-height: 23px;
}父级边框塌陷的问题
/*
clear：right 右侧不允许有浮动元素
clear：left 左侧不允许有浮动元素
clear： both 两侧不允许有浮动元素
*/浮动超出边框内容 解决方案：
1、增加父级元素的高度（不推荐）
弊端：元素设有了固定的高度，会被限制
2、增加一个空的div标签，清除浮动
<div class="clear"><div/>
.claer{clear:both;margin:0;padding:0;
}弊端：设置无用的div
3、overflow
在父级元素中增加一个 overflow： hidden弊端：简单，下拉的一些场景避免使用
4、父类添加一个伪类：after（推荐使用）
#father:after{content: '';display: block;clear: both;
}优势：写法稍微复杂，没有副作用
1.6、定位
1、相对定位
相对定位，相对于自己原来的位置进行偏移，先有position再有各个方向的数值。原来的位置会被保留
#first{background-color: #0000FF;border: 1px solid #666;position: relative; /* 相对定位 上下左右*/top: -20px;left: 20px;}2、绝对定位
定位：基于XXX定位，上下左右-
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
#second{background-color: orange;border: 1px solid #666;position: absolute;right: 30px;}相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来位置不会被保留
3、固定定位
fixed，定死
div:nth-of-type(2){ /* fixed 固定定位*/width: 50px;height: 50px;background: yellow;position: fixed;right: 0;bottom: 0;}4、z-index
z-index：默认是0，最高无限~999。一般用到定位，然后堆叠进行
opacity: 0.5;1.7、动画
CSS 动画通过过渡效果和关键帧动画为网页元素添加动态变化和交互性，提升用户体验和视觉吸引力。
