CSS
2.3结构伪类选择器
伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li:first-child{
background: brown;
}
ul li:last-child{
background: gold;
}
/*选中p1:定位到父元素,选择当前的第一个元素,选择当前p 顺序
元素的父级元素,选中分级元素的第一个
情况:在提供的HTML代码中,p4, p5, p6, p7 分别位于无序列表 <ul> 的列表项 <li> 中,
并且每个列表项都包含一个段落元素 <p>。因此,这些段落元素 <p> 都是它们所在列表项的第一个子元素。
*/
/*p:nth-child(1){*/
/* background:blue;*/
/* }*/
/*选中父元素,下的p元素的第一个,类型*/
p:nth-of-type(2){
background: aqua;
}
</style>
</head>
<body>
<p>p0</p>
<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>
<li><p>p7</p></li>
</ul>
</body>
</html>
2.4 属性选择器
id+class结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: chartreuse;
text-align: center;
color: blue;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*存在id属性的元素 属性名 = 属性值<正则>
= 绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾
a[]{}
*/
/*a[id=first]{*/
/* background: gold;*/
/*}*/
/* a[class*="link"]{*/
/* background: brown;*/
/* }*/
/* a[href^=https]{*/
/* background: blanchedalmond;*/
/* }*/
a[href$=pdf]{
background: brown;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com"class="link item first"id="first">1</a>
<a href=""class="link item active"target="_blank"title="test">2</a>
<a href="image/123.html"class="link item">3</a>
<a href="image/123.png"class="link item">4</a>
<a href="image/123.jpg"class="link item">5</a>
<a href="abc"class="link item">6</a>
<a href="/a.pdf"class="link item">7</a>
<a href="/abc.pdf"class="link item">8</a>
<a href="abc.doc"class="link item">9</a>
<a href="abcd.doc"class="link item">10</a>
</p>
</body>
</html>
3美化网站
3.1 为什么要美化网站
- 有效的转递页面信息
- 美化网页,页面漂亮
- 突出页面订单主题
- 提高用户的体验
span标签:重点要突出的字,使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习<span id="title1">java</span>>
</body>
</html>
3.2字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family 字体
font-size 字体大小
font-weight 字体粗细
color:字体颜色
-->
<style>
body{
font-family: 微軟正黑體;
color: blanchedalmond;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>故事简介</h1>
<p class="p1">这里是七种元素交汇的幻想世界“提瓦特”。</p>
<p>在遥远的过去,人们藉由对神灵的信仰,获赐了驱动元素的力量,得以在荒野中筑起家园。</p>
</body>
</html>
3.3 文本样式
- 颜色 color rgb rgba
- 文本对齐 text-align = center
- 首行缩进 text-inder:2em
- 行高 line-height:单行文字上下居中,;line-height = height
- 装饰 text-decoration
- 文本图片水平线对齐:vertical-align:middle
3.4 阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--默认的颜色-->
a{
text-decoration:none;
color: black;
}
/*鼠标悬浮的颜色只需要记住这个*/
a:hover{
color: brown;
font-size: 50px;
}
/*鼠标按住未释放的颜色*/
a:active{
color: blue;
}
a:visited{
color: chartreuse;
}
/* text-shadow: 阴影颜色,水平偏移,垂直偏移,阴影半径*/
#price{
text-shadow: blue 10px 10px;
}
</style>
</head>
<body>
<a href="#">
<img src="image/QQ图片20240310093052.png" alt="">
</a>
<p>
<a href="#">码出高效:java开发手册</a>
</p>
<p>
<a href="">作者:孤尽老师</a>
</p>
<p id="price">
99¥
</p>
</body>
</html>
3.5 超链接伪类
正常情况下a:hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--默认的颜色-->
a{
text-decoration:none;
color: black;
}
/*鼠标悬浮的颜色只需要记住这个*/
a:hover{
color: brown;
font-size: 50px;
}
/*鼠标按住未释放的颜色*/
a:active{
color: blue;
}
a:visited{
color: chartreuse;
}
/* text-shadow: 阴影颜色,水平偏移,垂直偏移,阴影半径*/
#price{
text-shadow: blue 10px 10px;
}
</style>
</head>
<body>
<a href="#">
<img src="image/QQ图片20240310093052.png" alt="">
</a>
<p>
<a href="#">码出高效:java开发手册</a>
</p>
<p>
<a href="">作者:孤尽老师</a>
</p>
<p id="price">
99¥
</p>
</body>
</html>
3.6 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css"type="text/css">
</head>
<body>
<div id="div">
<h2 class="title">全部商品分类</h2>
<ul>
<li>
<a href="#">图书</a>
<a href="#">音像</a>
<a href="#">数字商品</a>
</li>
<li>
<a href="#">家用电器</a>
<a href="#">手机</a>
<a href="#">数码</a>
</li>
<li>
<a href="#">电脑</a>
<a href="#">办公</a>
</li>
<li>
<a href="#">家居</a>
<a href="#">家装</a>
<a href="#">厨具</a>
</li>
<li>
<a href="#">服饰鞋帽</a>
<a href="#">个性化妆</a>
</li>
<li>
<a href="#">礼品箱包</a>
<a href="#">钟表</a>
<a href="#">珠宝</a>
</li>
<li>
<a href="#">食品饮料</a>
<a href="#">保健食品</a>
</li>
<li>
<a href="#">彩票</a>
<a href="#">旅行</a>
<a href="#">充值</a>
<a href="#">票务</a>
</li>
</ul>
</div>
</body>
</html>
#div{
width: 300px;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: red;
}
/*ul li*/
ul li{
/*行高*/
height: 30px;
/* list-style:none 取掉原点
circle空心圆
decimol数字
squre空心圆*/
list-style: none;
}
ul{
background:#a0a0a0;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: gold;
text-decoration: underline;
}
3.7 背景颜色
背景颜色
背景照片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("ph4550-p00004.jpg");
/*默认全部平铺*/
}
.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>
</body>
</html>
#div{
width: 300px;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
/*颜色 图片 图片位置,平铺方式*/
background: red url("image/780.jpg") 250px 10px no-repeat;
}
/*ul li*/
ul li{
/*行高*/
height: 30px;
/* list-style:none 取掉原点
circle空心圆
decimol数字
squre空心圆*/
list-style: none;
background: url("image/OIP-C.jpg")130px 10px no-repeat;
}
ul{
background:#a0a0a0;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: gold;
text-decoration: underline;
}
3.8 渐变
4 盒子模型
4.1 什么是盒子
margin:外边距
padding:内边框
border:边框
4.2 边框
- 边框的粗细
- 边框的样式
- 边框颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body总有一个默认的外边距margin:0
常见规范: margin: 0;
padding: 0;
text-decoration: none;
*/
h1,ul,li,a,body{
margin: 0;
padding: 0;
text-decoration: none;
}
#box{
width: 300px;
/*border :粗细 样式,颜色*/
border: 1px solid red;
}
h2{
font-size: 16px;
background-color: aqua;
line-height: 30px;
color: wheat;
}
/*form{}标签选择器*/
form{
background: aqua;
}
div:nth-of-type(1) input{
border: 2px solid black;
}
div:nth-of-type(2) input{
border: 2px dashed yellow;
}
div:nth-of-type(3) input{
border: 2px dashed wheat;
}
</style>
</head>
<body>
<div id="box">
<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>
4.3 外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1,ul,li,a,body{
margin: 0;
padding: 0;
text-decoration: none;
}
/*
顺时针选择
margin:0
margin:0 1px
margin:0 1px 2px 3px
*/
#box{
width: 300px;
/*border :粗细 样式,颜色*/
border: 1px solid red;
margin: 0 auto;
}
h2{
font-size: 16px;
background-color: aqua;
line-height: 30px;
color: wheat;
margin: 0 1px 2px 3px;
}
/*form{}标签选择器*/
form{
background: aqua;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
padding: 10px 2px;
}
</style>
</head>
<body>
<div id="box">
<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>
盒子的计算方式:你这个元素到底多大?
margin+border+padding+内容宽度
50*50px是所有加在一起的要仔细规划
4.4 圆角边框
4个角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:100px;
height: 40px;
border: 10px solid red;
/*左上,右下,右上,左下
border-radius:xxpx
4个角都是
border-radius:xxpx xxpx
左上,右下相同
右上,左下相同
border-radius:xxpx xxpx xxpx
左上,右下,右上和左下相同
border-radius:xxpx xxpx xxpx xxpx
左上,右上,右下,左下
*/
border-radius: 50px 50px 0 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.5 阴影
门户网站,模板之间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.app {
/*margin:0 auto居中
前提:块元素,块元素有固定的宽度
*/
width: 1500px;
box-shadow: 10px 10px 100px yellow;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="app">
<img src="../image/f159a24f7a0672f7.jpg" alt="">
</div>
</body>
</html>
5 浮动
5.1介绍
块内元素:独占一行
h1~h6 p div 列表
行内元素:不独占一行
span a img strong
行内元素可以被包含在块级元素中,反之不行
5.2 display
导航栏:line-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
block,块元素
inline-block;行块元素 是块元素但是可以在一行
inline行
none消失
-->
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
display: inline;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
这也是实现一种行内元素排列的反射光hi,但我们很多情况下都是用float
5.3 float
左右浮动用float
/*clear:right; 右侧不允许有浮动
clear:left; 左侧不允许有浮动
clear:both 两侧不允许有浮动
clear:none
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css"type="text/css">
</head>
<body>
<div id="father">
<div class="layer01"> <img src="image/img.png" alt=""><div>
<div class="layer02"> <img src="image/img_1.png" alt=""></div>
<div class="layer03"> <img src="image/img_2.png" alt=""></div>
</div>
</body>
</html>
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px red solid;
}
.layer01{
border: 1px red solid;
display: inline-block;
float: left;
}.layer02{
border: 1px red solid;
display: inline-block;
font-size: 50px;
float: left;
}.layer03{
border: 1px red solid;
display: inline-block;
float: left;
}
5.4 父级边框塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#app{
width: 200px;
height: 200px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="app">
<img src="image/img.png" alt="">
<p>关于《原神》 《原神》是由米哈游自研的一款全新开放世界冒险RPG。 你将在游戏中探索一个被称作「提瓦特」的幻想世界。 在这广阔的世界中,你可以踏遍七国,邂逅性格各异、能力独特的同伴,与他们一同对抗强敌,踏上寻回血亲之路;
也可以不带目的地漫游,沉浸在充满生机的世界里,让好奇心驱使自己发掘各个角落的奥秘……直到你与分离的血亲重聚,在终点见证一切事物的沉淀。 《原神》现已登录PS平台、iOS、Android、PC平台,并支持移动端与PC端数据互通,旅行者可自由选择平台和设备开启冒险。</p>
</div>
</body>
</html>
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px red solid;
}
#father:after{
content: '';
display: block;
clear: both;
}
.layer01{
border: 1px red solid;
display: inline-block;
float: left;
}
.layer02{
border: 1px red solid;
display: inline-block;
font-size: 50px;
float: left;
}
/*clear:right; 右侧不允许有浮动
clear:left; 左侧不允许有浮动
clear:both 两侧不允许有浮动
clear:none
*/
.layer03{
border: 1px red solid;
display: inline-block;
float: left;
}
/*.clear{*/
/* clear: both;*/
/* margin: 0;*/
/* padding: 0;*/
/*}*/
解决方案
- 增加父级元素的高度
#father{
border: 1px red solid;
height: 800px;
}
-
增加一个空的div标签,清除浮动
/*.clear{*/ /* clear: both;*/ /* margin: 0;*/ /* padding: 0;*/ /*}*/
-
overflow
在父级元素中增加一个overflow:hidden
#father{
border: 1px red solid;
overflow: hidden;
}
-
父类添加一个伪类:after
#father:after{ content: ''; display: block; clear: both; }这段代码是一个 CSS 伪元素选择器规则,用于在 #father 元素的内容之后插入一个额外的块级元素,并且清除浮动。 让我解释一下每一行代码的含义: #father:after:选择器指定了一个 #father 元素的伪元素,在其内容之后添加样式。 content: '':设置伪元素的内容为空字符串。在 CSS 中,如果要在伪元素中显示内容,需要设置 content 属性。这里将内容设置为空,所以实际上是一个空白的块级元素。 display: block:设置伪元素为块级元素,确保它占据一行空间。 clear: both:这是清除浮动的 CSS 属性。当父元素包含浮动元素时,如果不清除浮动,可能会导致父元素的高度无法自适应浮动元素的高度。这里设置为 both,表示在伪元素之后不允许出现任何浮动元素。 综合起来,这段代码的作用是在 #father 元素的内容之后插入一个空白的块级元素,并且清除其内部浮动元素可能造成的影响。
小结:
- 浮动元素后面增加空div 简单,代码中尽量避免空div
- 设置父元素的高度 简单,元素假设有了固定的高度,就会被限制
- overflow 简单,下拉的一些场景避免使用
- 父类添加一个伪类:after 写法复杂一点,但是没有副作用推荐使用
5.5 对比
display
方向不可控
float
可控,浮动起来的话对脱离标准文档流,所以要解决父级边框塌陷的问题
6 定位
6.1相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 20px;
line-height: 50px;
}
#father{
width: 500px;
height: 500px;
border: 1px solid #666;
padding: 0;
}
#first{
background-color: red;
border: 1px dashed powderblue;
position: relative;
top:-20px;
left: 30px;
/*相对定位*/
}
#second{
background-color: yellow;
border: 1px dashed blueviolet;
}
#third{
background-color: lawngreen;
border: 1px dashed blue;
}
</style>
</head>
<body>
<div id="father"></div>
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</body>
</html>
相对定位:position:relative
相对于原来的位置进行偏移,相对定位,它仍然在标准文档中,原来的位置将被保留。
top:-20px;
left: 30px;
bottom:-10px;
right:20px;
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
width: 100px;
height: 100px;
text-decoration: none;
line-height: 100px;
text-align: center;
display: block;
}
div{
margin: 0px;
padding: 0px;
font-size: 20px;
line-height: 50px;
}
#father{
width: 300px;
height: 300px;
border: 1px solid #666;
padding: 0;
}
#one{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: lawngreen;
}
#two{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: lawngreen;
position: relative;
left: 200px;
top:-100px;
}
#thire{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: lawngreen;
}
#four{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: lawngreen;
position: relative;
left: 200px;
top:-100px;
}
#five{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: lawngreen;
position: relative;
left: 100px;
top:-300px;
}
a:hover{
background-color: blue;
}
</style>
</head>
<body>
<div id="father">
<div id="one"><a href="" >链接1</a></div>
<div id="two"><a href="">链接2</a></div>
<div id="thire"><a href="">链接3</a></div>
<div id="four"><a href="">链接4</a></div>
<div id="five"><a href="">链接5</a></div>
</div>
</body>
</html>
设计时难点display:block;使他成为块元素
6.2绝对定位
定位:基于XXX来定位
- 没有父级元素定位的前提下,相对于浏览器定位
- 假设父级元素存在定位,我们通常会相对于父级元素进行偏移
- 在父级元素范围内移动
相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,它仍然在标准文档流中,原来的位置不会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 20px;
line-height: 50px;
}
#father{
border: 1px solid #666;
padding: 0;
}
#first{
background-color: red;
border: 1px dashed powderblue;
}
#second{
background-color: yellow;
border: 1px dashed blueviolet;
position: absolute;
left: 100px;
}
#third{
background-color: lawngreen;
border: 1px dashed blue;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
6.3 固定定位fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
/*固定定位*/
div:nth-of-type(2){
width: 50px;
height: 50px;
background-color: blue;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
6.4 z-inder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<ul>
<li>
<img src="image/img.png" alt="">
<li class="tipText">玩游戏,玩原神</li>
<li class="tipBg"></li>
<li>时间:2099-1-10</li>
<li>地点:火星</li>
</li>
</ul>
</div>
</body>
</html>
#content{
padding: 0;
margin: 0;
font-size: 12px;
line-height: 25px;
width: 600px;
border: 1px black solid;
}
ui,li{
padding: 0;
margin: 0;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 300px;
height: 25px;
top:569px;
}
.tipText{
z-index: 99;
}
.tipBg{
background: red;
opacity: 0.5;
}
默认是从0层开始