CSS （Cascading Style Sheet）层叠级联样式表
CSS：表现（美化网页）
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动……
建议HTML和CSS分开写
CSS的优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立HTML的CSS文件
- 利用SEO，容易被搜索引擎收录！
CSS的导入方式
行内样式、内部样式、外部样式
优先级：就近原则
选择器
作用：选择页面中某一类元素或者某一个
基本选择器
优先级：id > class > 标签
标签选择器：选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<style>
/* 标签选择器：会选择到页面上所有的这个标签的元素 */
h1{
color: aqua;
background: green;
border-radius: 5px;
}
p{
color: blue;
font-size: 40px;
}
</style>
</head>
<body>
<h1>Java</h1>
<h1>CSS</h1>
<p>Hello</p>
</body>
</html>类 选择器 class：选择所有class属性一致的标签，跨标签 .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
/* 类选择器的格式 .class{}
好处：可以多个标签归类，是同一个class，可以复用
*/
.one{
color:yellow;
}
.two{
color: rgb(245, 35, 245);
}
</style>
</head>
<body>
<h1 class="one">标题1</h1>
<h1 class="two">标题2</h1>
<h1 class="one">标题3</h1>
<p class="one">p标签</p>
</body>
</html>id 选择器：全局唯一 #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style>
/* id选择器：id必须保证全局唯一！
#id名称{}
不遵循就近原则，固定的
ID选择器 > class选择器 > 标签选择器
*/
#one{
color: aqua;
}
.c_one{
color: yellow;
}
h1{
color: red;
}
</style>
</head>
<body>
<h1 id="one" class="c_one">标题1</h1>
<h1 id="two">标题2</h1>
<h1 class="c_one">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
<h1>标题6</h1>
</body>
</html>高级选择器
层次选择器
后代选择器：在某个元素的后面 例：祖爷爷 爷爷 爸爸 自己
/* 后代选择器 */
body p{
background: green;
}子代选择器
/* 子选择器 */
body>p{
background: yellow;
}相邻兄弟选择器 只有一个，相邻（向下）
/* 相邻兄弟选择器：只有一个，相邻（向下） */
.active + p{
background: red;
}通用选择器：当前选中元素的向下的所有兄弟元素
/* 通用选择器，当前选中元素的向下的所有兄弟元素 */
.active~p{
background:violet;
}结构 伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/* ul的第一个子元素 */
ul li:first-child{
background: yellow;
}
/* ul的最后一个子元素 */
ul li:last-child{
background: red;
}
/* 选中p1：定位到父元素，选择当前的第一个元素
选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
*/
p:nth-child(1){
background: rgb(97, 0, 253);
}
/* 选中父元素，下的p元素的第二个，类型 */
p:nth-of-type(1){
background: blue;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
</ul>
</body>
</html>属性选择器（常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: blue;
text-align: center;
color: white;
text-decoration: none;
margin-right: 5px;
font: bold 20px/40px;
}
/* 属性名，属性名 = 属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/* 存在id属性的元素 a[]{} */
a[id]{
background: yellow;
}
/* id=first的元素 */
a[id=first]{
background: violet;
}
/* class中有links的元素 */
a[class*=first]{
background: rgb(1, 255, 149);
}
/* 以https开头的元素 */
a[href^=https]{
background: yellowgreen;
}
/* 以pdf结尾的元素 */
a[href$=pdf]{
background: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="/image/123.png" class="links item">3</a>
<a href="/image/123.jpg" class="links item">4</a>
<a href="/image/123.html" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="adcb.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>美化网页元素
美化网页的优势：
- 有效的传递页面的信息
- 美化网页，页面漂亮，才能吸引用户
- 凸显页面的主体
- 提高用户的体验
span 标签：重点要突出的字，使用 span 标签套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#one{
color: yellowgreen;
font-size: 40px;
}
</style>
</head>
<body>
Hello <span id="one">World</span>
</body>
</html>字体样式
font-family：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色
文本样式
颜色
<style>
#one{
color: #4409f8; <!--RGB-->
color: red; <!--单词-->
color: rgba(red, green, blue, 0.2); <!--RGBA A 0~1（透明度）-->
}
</style>文本对齐方式
<style>
#one{
/* center 居中对齐
left 左对齐
right 右对齐
*/
text-align: center;
}
</style>首行缩进
<style>
#one{
/* em 表示字符
2em表示缩进两个字符
*/
text-indent: 2em;
}
</style>行高
<style>
#one{
/*
行高 与 块 的高度一直 内容就可上下居中
*/
height：300px
line-height：300px;
}
</style>装饰
<style>
#one{
/* underline：下划线 */
text-decoration: underline;
/* line-through：删除线 */
text-decoration: line-through;
/* overline：上划线 */
text-decoration: overline;
}
</style>文本图片水平对齐
<style>
img,span{
vertical-align: middle;
}
</style>超链接伪类 a、a:hover（常用）
<style>
/* 默认的状态 */
a{
/* 去除下划线 */
text-decoration: none;
color: #000;
}
/* 鼠标悬浮的状态 */
a:hover{
color: #ff0000;
font-size: 24px;
}
/* 鼠标按住未释放的状态 */
a:active{
color: green;
}
a:visited{
color: #ff008a;
}
/* text-shadow：阴影颜色 水平偏移 垂直偏移 阴影半径 */
#price{
text-shadow: blue 10px 10px 2px;
}
</style>列表
#nav{
width: 300px;
background: #a0a0a0;
}
.title{
font-size: 24px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
/* 颜色 图片 图片位置 不平铺 */
background: red url("../img/r.jpg") 270px 10px no-repeat;
}
/* ul li */
/* list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方向
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../img/l.jpg");
background-repeat: no-repeat;
background-position: 236px 3px;
}
a{
text-decoration: none;
color: #000;
font-size: 18px;
}
a:hover{
color: greenyellow;
text-decoration: underline;
}背景
<style>
div{
width: 500px;
height: 500px;
border: 1px solid red;
/* 默认是全部平铺的 repeat */
background-image: url("img/a.jpg");
}
.div1{
/* x轴平铺（水平） */
background-repeat: repeat-x;
}
.div2{
/* y轴平铺（垂直） */
background-repeat: repeat-y;
}
.dvi3{
/* 不平铺（图片原本的样子） */
background-repeat: no-repeat;
}
</style>渐变
样式可以在此网址上自行查找：Grabient
盒子模型
计算方式：margin + border + padding + 内容宽度
margin：外边距
- magrin：0（上下左右边距为0）
- margin：0 auto（上下为0 左右auto） 外边距的妙用：居中元素 （要求：块元素，块元素要有固定的宽度）
- margin: 0 0 0 0（上 右 下 左）
padding：内边距
- padding：0（上下左右边距为0）
- padding：0 auto（上下为0 左右auto）
- padding: 0 0 0 0（上 右 下 左）
border： 1px solid red（粗细 样式 颜色）边框
边框
边框的粗细、边框的样式、边框的颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #app{ width: 300px; /* border 粗细 样式 颜色 */ border: 1px solid red; } h2{ text-align: center; background-color: wheat; } form{ background-color: aqua; } div:nth-of-type(1) input{ border: 2px solid greenyellow; } div:nth-of-type(2) input{ border: 1px dashed green; } div:nth-of-type(3) input{ border: 1px dashed red; } </style> </head> <body> <div id="app"> <h2>会员登录</h2> <form action="#"> <div> <span>用户名</span> <input type="text"> </div> <div> <span>密码：</span> <input type="text"> </div> <div> <span>邮箱：</span> <input type="text"> </div> </form> </div> </body> </html>
圆角边框
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
/* 左上 右上 右下 左下 顺时针方向 */
border-radius: 100px;
}
</style>盒子阴影
<style>
div{
width: 100px;
height: 100px;
border: 5px solid red;
box-shadow: 10px 10px 100px greenyellow;
}
</style>浮动
display
这个也是一种实现行内元素排列的方式，但是很多情况都是使用float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
display:
block：块元素
inline：行内元素
inline-block：行内块元素（是块元素，但是能内嵌，占一行）
none：无
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
span{
width: 100px;
height: 100px;
border: 1px solid greenyellow;
display: inline-block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>float
<style>
/*
float: 浮动
left：左浮
right：右浮
*/
div{
float: left;
}
</style>父级边框塌陷的问题
clear
clear：right；右侧不允许有浮动元素
clear：left；左侧不允许有浮动元素
clear：both；两侧不允许有浮动元素
clear：none；
解决方案
- 增加父级元素的高度（简单，元素假设有了固定的高度，就会被限制，所以也不建议使用）
- 增加一个空的div标签，清除浮动（简单，代码中尽量避免空div）
<div class="clear"></div> .clear{ clear: both; margin: 0; } - 在父级元素中增加一个overflow属性 overflow：hidden（简单，下拉的一些场景避免使用）
#father{ overflow: hidden; }
display 与 float 的对比
-
display：方向不可控制
-
float：浮动起来会脱离标准文档流，要解决父级边框塌陷的问题
定位
相对定位：position：relative
相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 24px;
line-height: 25px;
}
#father{
border:1px solid #666;
padding: 0;
}
#first{
background-color: yellowgreen;
border:1px solid #f06b6b;
/* 相对定位 上 下 左 右 */
position: relative;
top: -20px;
left: 20px;
}
#second{
background-color: red;
border:1px solid #03ee2e;
}
#third{
background-color: aqua;
border:1px solid #3875f8;
position: relative;
bottom: 10px;
right: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>绝对定位：position：absolute
定位：基于xxx定位，上下左右
- 没有父级元素定位的前提下，相对于浏览器定位
- 假设父级元素存在定位，通常会相对于父元素进行偏移
- 在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
固定定位：fixed
div:nth-of-type(1){
width: 100px;
height: 100px;
background: red;
/* 绝对定位：相对于浏览器 */
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background: yellowgreen;
/* 固定定位：fixed */
position: fixed;
right: 0;
bottom: 0;
}z-index
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../CSS/demo6.css">
</head>
<body>
<div id="content">
<ul>
<li></li>
<li class="tipText">z-index</li>
<li class="tipBg"></li>
<li>时间：2024年8月17日21:53:08</li>
<li>地点：北京</li>
</ul>
</div>
</body>
</html>CSS
#content{
width: 300px;
height: 400px;
margin: 0;
padding: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid red;
}
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
li:nth-child(1){
width: 300px;
height: 200px;
background: yellowgreen;
}
/* 父级元素相对定位 */
#conten ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
top: 180px;
width: 300px;
height: 25px;
}
.tipText{
color: white;
/* 层级
z-index: 999;*/
}
.tipBg{
background-color: #000;
/* 网页背景的透明度0~1 */
opacity: 0.5;
}