本文是一篇关于CSS3入门的学习笔记，涵盖了CSS3的基本概念、导入方式、选择器类型、美化网页技巧、盒子模型、定位以及浮动等内容，旨在帮助初学者快速掌握CSS3。
文章目录
什么是css
cascading style sheet 层叠级联样式表
css：w3c表现用于美化网页
css的优势：
- 内容和表现分离
- 网页结构变现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利于SEO，容易被搜索引擎收录
<!--规范 style里可以编写css代码，每一个声明最好使用分号结尾
语法：
选择器{
声明1；
声明2；
声明3；
}
-->
<style>
h1{
color: red;
}
</style>
<h1>标题1 </h1>
css的三种导入方式
样式遵循就近原则，谁离h1最近使用谁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h1{
color: green;;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级 :就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red"></h1>
</body>
</html>
/*外部样式*/
h1{
color: yellow;;
}
外部样式的两种写法：
- 链接式：
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
- 导入式
@import是css2.1新增的，css3中不常用
<!--导入式-->
<style>
@import url("css/style.css");
</style>
选择器
作用：选择页面上的某一个或者某一类元素
基本选择器
- 标签选择器
- 类选择器 class
- id选择器
标签选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--标签选择器会选择到页面上所有的这个标签-->
h1{
color: #6660ff;
background: aqua;
border-radius: 24px;
}
p{
font-size: 40px;
}
</style>
</head>
<body>
<h1>韩</h1>
<h1>明</h1>
<p>明</p>
</body>
类选择器
好处：多个标签可以归类同一个class下,可以复用
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 .class的名称{}*/
.han{
color: #6660ff;
}
.ming{
color: red;
}
</style>
</head>
<body>
<h1 class="han">标题1</h1>
<h1 class="ming">标题2</h1>
<h1 class="han">标题3</h1>
<p class="han">p标签</p>
</body>
id选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器 id必须保证全局唯一
使用#id名称{}
不遵循就近原则，固定的
id选择器》class》标签
*/
#han{
color: #6660ff;
}
.ming{
color: #000;
}
h1{
color: red;
}
</style>
</head>
<body>
<h1 id="han" class="ming">标题1</h1>
<h1 class="ming">标题2</h1>
<h1 class="ming">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
优先级 id>class>标签
层次选择器
- 后代选择器：在某个元素后面所有元素
/*后代选择器*/
body p{
background: aquamarine;
}
- 子选择器 元素后的第一代
/*子选择器*/
body>p{
background: #6660ff;
}
- 相邻兄弟选择器 同辈的下一个
/*相邻兄弟选择器*/
.active+p{
background: aquamarine;
}
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
.active+p{}
选择的是class为active的标签 的下一个p标签
- 通用选择器 同辈的下所有
.active ~ p{
background: aquamarine;
}
选中的是cative类 下面的所有p标签
结构伪类选择器
/*选中ul的第一个子元素*/
ul li:first-child{
background: red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background:#6660ff ;
}
/*选中p1：定位到p标签的父元素，选择当前的第二个元素(选中的元素需要是p标签,其他标签也同理)*/
p:nth-child(2){
background: blueviolet;
}
/*选中父元素下,p元素的第二个*/
p:nth-of-type(2){
background: yellow;
}
/*鼠标移到a标签上背景就会变*/
a:hover{
background:blueviolet ;
}
属性选择器
元素【】{}
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
<!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: #6660ff;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right:5px ;
font: bold 20px/50px Arial;
}
/*存在id属性的元素 a[]{} */
/* 标签[属性名=属性值（正则）] */
a[id]{
background: yellow;
}
/*选中class中带有active link的元素*/
a[class*="active link"]{
background: red;
}
/*选中href中以http开头的元素*/
a[href^=http]{
background: blueviolet;
}
/*选择href以jpg结尾*/
a[href$=jpg]{
background: aqua;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="first link "id="first">1</a>
<a href="" class="active link" target="_blank" title="test" >2</a>
<a href="abc/123.pdf" class="active link 2">3</a>
<a href="http://www.abc/123.html" class="links">4</a>
<a href="abc/123.jpg"class="links">5</a>
<a href="/a.pdf"class="links">6</a>
<a href="/b.pdf"class="links">7</a>
<a href="abc.doc" class="links">8</a>
<a href="abc" class="links">9</a>
<a href="abcd.doc" class="last links">10</a>
</p>
</body>
</html>
美化网页
span 标签
:重点要突出的字，用span套起来
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习 <span id="title1">java</span>
</body>
字体样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family：字体
font-size ： 字体大小
font-weight: 字体粗细
color: 字体颜色
-->
<style>
body{
font-family: 华文楷体;
color: aquamarine;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>文章</h1>
<p class="p1">
上世纪90年代以来，汽车行业逐步出现了电动化（新能源汽车）、智能化（自动驾驶和辅助驾驶）、 网联化（联网汽车）和共享化（分时租赁、网约车等新商业模式）的演变趋势，
</p>
<p>
尤其是电动车、自 动驾驶和车联网给传统内燃机汽车带来巨大的挑战，在新能源、ICT等新技术的挤压下,
</p>
<p>
传统内燃机“ 厚重”的技术壁垒越来越 “薄”，新一轮的技术变革从根本上动摇了传统汽车行业的游戏规则
</p>
</body>
文本样式
- 颜色 color rgb rgba
- 文本对齐的方式 text-align =center
- 首行缩进 text-indent: 2em
- 行高 line-height;
- 装饰 text-decoration
- 文本图片水平对齐 vertical-align: middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色：
单词
RGB #0-F
RGBA rbg（0-255.*，*,透明度）
text-algin 排版，居中，左右居中
text-indent 首行缩进
line-height 行高 ，如果行高和块高度一致就可以上下居中
-->
<style>
h1{
color: rgba(0,255,255,0.5);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p2{
background: aqua;
height: 200px;
line-height: 200px;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
</style>
</head>
<body>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>
<h1>文章</h1>
<p class="p1">
上世纪90年代以来，汽车行业逐步出现了电动化（新能源汽车）、智能化（自动驾驶和辅助驾驶）、 网联化（联网汽车）和共享化（分时租赁、网约车等新商业模式）的演变趋势，
</p>
<p>
尤其是电动车、自 动驾驶和车联网给传统内燃机汽车带来巨大的挑战，在新能源、ICT等新技术的挤压下,
</p>
<p class="p2">
传统内燃机“ 厚重”的技术壁垒越来越 “薄”，新一轮的技术变革从根本上动摇了传统汽车行业的游戏规则
</p>
</body>
</html>
<!--
水平对齐 a,b a为b的参照物 ，middle是上下对齐的中间
-->
<style>
img,span{
vertical-align: middle;
}
</style>
<p>
<img src="image/QQ图片20210202163338.jpg" alt="">
<span>asdasdfasfasf</span>
</p>
超链接伪类
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认的颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬停的状态 只需要记住hover*/
a:hover{
color: red;
font:50px "楷体";
}
/*鼠标按下时的状态*/
a:active{
color: yellow;
}
/*鼠标点完后的状态*/
a:visited{
color: #6660ff;
}
/*text-shadow： 阴影颜色，水平偏移，垂直偏移，阴影半径 */
#price{
text-shadow: blueviolet 10px 10px 2px;
}
</style>
</head>
<body>
<a href="#"><img src="image/QQ图片20210202163338.jpg" height="200" width="200" alt=""></a>
<p>
<a href="#">qq头像</a>
</p>
<p>
<a href="">qq名,天一</a>
</p>
<p id="price">
137***
</p>
</body>
列表样式
<div id="nav">
<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>
</ul>
</div>
#nav{
width:280px;
background: bisque;
}
.title{
font-size: 18px ;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: gray;
}
/*ul li
list-style:
none去掉圆点
circle空心圆
decimal数字
square 正方形
*/
ul{
background: bisque;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: red;
text-decoration: underline;
}
背景图像及渐变
background-image：url（图片地址）
background-repeat：平铺方式
background-position：位置
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
/*默认是全部平铺的*/
background-image: url("image/QQ图片20210202163338.jpg" ) ;
background-size: 100px 100px;
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
/*颜色 图片地址 位置 平铺*/
.div4{
background: red url("image/QQ图片20210202163338.jpg")200px 50px no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
渐变
渐变设计网站：https://www.grabient.com/
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
盒子模型
边距
margin：外边距
padding：内边距
broder：边距
边距
border: 粗细 ，样式，颜色**
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body总有一个默认的外边距margin*/
h1,ul,li,a,body{
margin: 0;
padding: 0;
text-decoration: none;
}
#box{
/*border: 粗细 ，样式，颜色*/
width: 300px;
border: 1px solid black;
padding
}
h2{
font-size: 16px;
background-color: antiquewhite;
line-height: 50px;
margin: 0;
text-align: center;
}
form{
background: powderblue;
}
div:nth-of-type(1) input{
border:3px solid black;
}
div:nth-of-type(2)>input{
border: 3px dashed black;
}
</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>
内外边距
#box{
/*border: 粗细 ，样式，颜色*/
width: 300px;
border: 1px solid black;
/* margin 上下左右 auto默认对齐 0 auto：上下为0 左右对齐*/
margin: 0 auto;
}
/* magin:0 上下左右为0
magin ： 0 1px 上下为0 左右为1
magin： 0 1px 2px 3px 顺时针选择
*/
外边距设置同内边距
padding: 10px 2px ;
盒子的计算方式
最终大小=margin + border +padding +内容宽度
圆角边框
<!--
border-radius： 左上 右上 右下 左下 ，顺时针方向
圆圈 ：圆角=半径 设置的width、height为100px，则圆角radius为50即为圆形
-->
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 30px;
}
</style>
<style>
div{
width: 100px;
height: 50px;
border: solid red;
border-radius: 50px 50px 0 0 ;
background: yellow;
}
/*image也可以进行圆角设置，从而达到改版图片形状的目的*/
</style>
盒子阴影
<style>
img{
border-radius: 30px;
/* 向右偏移 向下偏移 模糊度 颜色*/
box-shadow:10px 10px 50px black ;
}
</style>
内联元素居中问题
- 在外面套上块级元素，比如div 调整好盒子的width和height ，使用text-align:center对块内元素进行居中,例如
<div style="height: 1000px ;text-align: center" >
<div>
<img src="image/31.jpg" alt="" id="image" >
</div>
</div>
- 将该内联元素提升为块级元素，使用margin： 0 auto 对该块级元素进行居中，例如
<div style="height: 1000px " >
<div>
<img src="image/31.jpg" alt="" style="display: block ;margin: 0 auto ">
</div>
</div>
display和浮动
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
block 块元素
inline 行内元素
inline-block 是块元素但是可以内联，在一行
none 消失
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red ;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red ;
display: inline-block;
}
</style>
</head>
<body>
<div>div快元素</div>
<span >span行内元素</span>
</body>
这个也是一种实现行内元素排列的方式，但我们通常使用浮动来实现
浮动
float:right 向右浮动
float:left 向左浮动
- disply ：方向不可以控制
- float ： 浮动起来会脱离标准文档流，需要解决父级边框塌陷的问题
overflow及父级边框塌陷问题
clear： left 左侧不允许有浮动元素
clear ：right 右侧
clear ：both 两侧都不允许有浮动元素
clear ：none
父级边框塌陷：父级边框过小，浮动后不在父级边框内
解决方法：
- 增加父级元素的高度
- 增加一个空的div标签，清除浮动
<div class ="clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}
- overflow
/*overflow
hidden 超出的部分隐藏
scroll 超出的部分在滚动条里
*/
#content{
width: 200px;
height: 150px;
overflow: hidden;
}
怎么吧overflow应用到这个问题里呢
因为父级元素div没有设置长宽，它是靠内容撑起来的
所以只需要在父级元素中增加一个 overflow ：hidden；即可
4. 在父类添加一个伪类：after （推荐使用）
例如
<div id="father">
<div class ="lay1"><img src="" alt=""/></div>
</div>
#father:after{
content: "";
display: block;
clear:both;
}
上述代码意思为自动添加一个伪类，并将其clear both；跟方法二很像但是避免了在html中添加代码
定位
相对定位
position:relative;
相对于原来的位置进行指定的偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
相对定位：相对于自己原来的位置进行偏移
-->
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #000;
padding: 0;
}
#first{
border: 1px dashed red;
background: aqua;
position: relative;/*相对定位 相对于自己*/
top:-20px;
left: -20px; /*向左移动-20px就是在原来位置左边20px处*/
}
#second{
border: 1px dashed aquamarine;
background: aqua;
position: relative;
bottom: -10px;
right: -20px;
}
#third{
border: 1px dashed yellow;
background: aqua;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second"> 第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
相对于原来的位置，进行制定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
border: 1px solid red;
padding: 10px;
}
a{
width: 100px;
height: 100px;
background: pink;
line-height: 100px;
text-align: center;
color: white;
display: block;
position: relative;
}
.a2 ,.a4{
top: -100px;
right: -200px;
}
.a5{
right: -100px;
top: -300px;
}
a:hover{
background: #6660ff;
}
</style>
</head>
<body>
<div id="box">
<a class="a1" href="#">链接1</a>
<a class="a2" href="#">链接2</a>
<a class="a3" href="#">链接3</a>
<a class="a4" href="#">链接4</a>
<a class="a5" href="#">链接5</a>
</div>
</body>
</html>
绝对定位和固定定位
绝对定位：
- 父元素没有定位的情况下，会相对于浏览器定位
- 若父级元素存在定位，我们通常会相对于父级元素进行偏移
- 在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位后，它不在标准文档流中，原来的位置不会被保留
固定定位：
会定死在页面上，即使上下滑动也不会改变位置
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #000;
padding: 0;
position: relative;
}
#first{
border: 1px dashed red;
background: aqua;
position:absolute;
left: 10px;
top: 5px;
}
#second{
border: 1px dashed aquamarine;
background: aqua;
position: absolute;
right: 30px;
top: 5px;
}
#third{
border: 1px dashed yellow;
background: aqua;
position: fixed;
right: 0;
bottom: 0;
}
</style>
z-index及透明度
z-index：0~无限 设置图层的级别，级别越高该图层越在上面（只有浮起来才有层级概念）
opacity:0-1 设置背景透明度等级，越高越不透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="image/31.jpg" alt=""></li>
<li class="tiptext">1231231111</li>
<li class="bg"></li>
<li>时间：2077-7-7</li>
<li>地点：夜之城</li>
</ul>
</div>
</body>
</html>
#content{
margin: 0px;
padding:0px ;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid black;
width: 500px;
background: antiquewhite;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tiptext,.bg{
position: absolute;
width: 500px;
height: 25px;
top: 266px;
}
.bg{
background: black;
opacity: 0.2;
}
.tiptext{
z-index: 999;
color: white;
}
扫一扫
2950
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
