CSS 相当于html东西稍微多些。但要记得东西也不多。就一个选择器比较重要，js也会用到。其他标签属性，记住常用的。学到UI框架就会发现，框架美化有自己的标签。如果自己要写，网上也有相关组件参考代码。不会有人真一行行写吧。
B站教学视频：【狂神说Java】CSS3最新教程快速入门通俗易懂
1.什么是CSS
1.1 、什么是CSS
Cascading Style sheet 层叠级联样式表
CSS：表现(美化网页)
字体，颜色，字体，边距，高度，宽度，背景图片，网页定位，网页浮动…
1.2 、发展史
CSS1.0
CSS2.0 HTML与CSS分离
CSS2.1 浮动，定位
CSS3.0 圆角边框，阴影，动画…浏览器兼容器
1.3、快速入门
文件规范：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O525U3c6-1628524962911)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210725135755684.png)]
快速入门:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范,<style>可以编写css的代码 每个
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: darkcyan;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
HTML和CSS分离
<link rel="stylesheet" href="css/style.css">
css优势
- 内容表现分离
- 网页结果表现统一，可复用
- 样式丰富
- 利于SEO，容易被搜索引擎收录
1.4 、css 3 种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式-->
<style>
h1{
color: chartreuse;
}
</style>
<!-- 外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级 覆盖原则-->
<!--行内样式-->
<h1 style="color: beige">我是标题</h1>
</body>
</html>
外部样式两种写法：
链接式
html
<link rel="stylesheet" href="css/style.css">
导入式
css2.1
<style>
@import "css/style.css";
</style>
2.选择器
作用：选择页面某一个元素
2.1、基本选择器
标签选择器
<!--标签选择器 选择整个页面的标签-->
<style>
h1{
color: cadetblue;
background: aliceblue;
}
p{
font-size: 20px;
}
</style>
类选择器 .类名{}
<!-- 类选择器格式.class{}
优点:可以多个标签归类
-->
<style>
.tile1{
color: chartreuse;
}
.tile2{
color: cadetblue;
}
.tile3{
color: aqua;
}
</style>
<h1 class="tile1">标题1</h1>
<h1 class="tile2">标题2</h1>
<h1 class="tile3">标题3</h1>
ID选择器 #id名{}
<!-- id选择器格式 #id{}
id保持全局唯一-->
<style>
#sss{
color: aqua;
}
</style>
<h1 id="sss">标题1</h1>
选择器优先级：id > class >标签
2.2、层次选择器
-
后代选择器：在某个元素的后面所以元素
body p{ background: aqua; } -
子选择器 body 的后一层
body>p{ background: beige; } -
兄弟选择器 同层的下一个标签
.active+p{ background: deeppink; } -
通用选择器 同层的向后所以标签
.active~p{ background: darkblue; }
2.3、结构伪类选择器
伪类：加了一些条件，带：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul第一个子元素*/
ul li:first-child{
background: darkblue;
}
/*ul最后一个子元素*/
ul li:last-child{
background: deeppink;
}
/*选中p1，定位到父元素，然后找到第一个孩子*/
p:nth-child(1){
color: aquamarine;
}
/*选中父标签，下p元素的第二个*/
p:nth-of-type(2){
color: aqua;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p1</p>
<p>p1</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</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: beige;
text-align: center;
color: deeppink;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/* 属性名=属性值*/
/*存在id属性的元素选中
属性选择器格式：a[]{}
=是只等于
*=是包含等于
^=以xxx开头
$=以xxx结尾
/**!a[id=first]{*/
/* background: darkblue;*/
/* }*/
/*含义link属性*/
/* a[class*="links"]{*/
/* background: cornflowerblue;*/
/* }*/
/*选中 herf中以http开头的*/
a[herf^=http]{
background: brown;
}
a[href$=pdf]{
background: coral;
}
</style>
</head>
<body>
<p class="demo">
<a href=http://www.baidu.com class=links item first id=first>1</a>
<a href=http://blog.kuangstudy.com class=links item active target=_blank title=test2>2</a>
<a href=images/123.html class=links item>3</a>
<a href=images/123.png class=links item>4</a>
<a href=images/123.jpg 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=abc.doc class=links item>9</a>
<a href=abcd.doc class=links item last>10</a>
</p>
</body>
</html>
正则表达式通配符
=是只等于
*=是包含等于
^=以xxx开头
$=以xxx结尾
3.美化网页元素
3.1、为什么要美化网页
3.2、字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<!-- font-family: 宋体;字体
font-size: medium;大小
color 颜色
ont-weight: bolder;粗细
-->
<style>
body{
font-family: 宋体;
font-size: medium;
}
h1{
font-size: 50px;
color: darkgreen;
}
.p1{
font-weight: bolder;
}
</style>
</head>
<body>
<h1>主场馆</h1>
<p class="p1">
2020年东京奥运会主场馆是新国立竞技场，正式名称为“国立竞技场”，位于日本东京都霞丘，由1964年东京奥运会主场馆国立霞丘陆上竞技场重建而来 [45] 。
场馆于2016年12月11日起动工建设 [46] ，2019年11月30日全面竣工 [47] ，同年12月21日举办设施启动仪式后正式启用 [48] 。
场馆由大成建设・梓设计・隈研吾建筑都市设计事务所共同设计，采用木材结合钢筋结构的屋顶设计，总建设费用约1569亿日元 [49] 。
场馆可容纳观众人数约68000人次，除承办本届奥运会开幕式和闭幕式外，还将举办赛事田径、足球项目比赛 [50] 。
</p>
<p>
2021年7月1日，东京奥运会主新闻中心（MPC）1日在东京都江东区的东京国际展览中心（东京BIG SIGHT）开始试运营。
主新闻中心位于比赛场馆众多的临海地区，在奥运会期间将成为国内外媒体据点，预计单日最多可以允许2500人使用。 [107]
</p>
</body>
</html>
3.3、文本样式
1.颜色 color: 单词 rgb
2.对齐方式 text-align center居中
3.首行缩进 text-indent: 2em; 首行缩进
4.行高 line-height: 30px; 行高
5.装饰 text-decoration:划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<!--
颜色：
单词
RGB 0-F
RGBA 函数rgb() A:0-1
排版：
text-align center居中
text-indent: 2em; 首行缩进
line-height: 30px; 行高
height: 块高
-->
<style>
body{
font-family: 宋体;
font-size: medium;
}
h1{
color: rgb(0,255,255);
text-align: center;
}
.p1{
text-indent: 2em;
font-weight: bolder;
}
.p3{
text-indent: 2em;
background: beige;
line-height: 30px;
}
/*下划线*/
.c1{
text-decoration: underline;
}
/*中划线*/
.c2{
text-decoration: line-through;
}
/*上划线*/
.c3{
text-decoration: overline;
}
/*img span水平对齐*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<h1>主场馆</h1>
<p class="p1">
2020年东京奥运会主场馆是新国立竞技场，正式名称为“国立竞技场”，位于日本东京都霞丘，由1964年东京奥运会主场馆国立霞丘陆上竞技场重建而来 [45] 。
场馆于2016年12月11日起动工建设 [46] ，2019年11月30日全面竣工 [47] ，同年12月21日举办设施启动仪式后正式启用 [48] 。
场馆由大成建设・梓设计・隈研吾建筑都市设计事务所共同设计，采用木材结合钢筋结构的屋顶设计，总建设费用约1569亿日元 [49] 。
场馆可容纳观众人数约68000人次，除承办本届奥运会开幕式和闭幕式外，还将举办赛事田径、足球项目比赛 [50] 。
</p>
<p>
2021年7月1日，东京奥运会主新闻中心（MPC）1日在东京都江东区的东京国际展览中心（东京BIG SIGHT）开始试运营。
主新闻中心位于比赛场馆众多的临海地区，在奥运会期间将成为国内外媒体据点，预计单日最多可以允许2500人使用。 [107]
</p>
<p class="p3">
2020年东京奥运会吉祥物采用蓝白色日本传统“市松模样”（方格图案），用色呼应了东京奥运会会徽的设计，同时向传统日本文化和创新的现代日本文化致敬。
Miraitowa的设计理念受成语“温故知新”启发。Miraitowa性格活泼，运动能力惊人，同时正直无私。拥有超能力的他可以瞬间移动到自己想要去的地方。
Miraitowa这个名字源自日语单词“mirai”和“towa”，“mirai”意为“未来”；“towa”意为“永恒”。
寓意着在世界各地的人心中，2020年东京奥运会将会开引领向一个充满永恒希望的未来。
</p>
<p>
<img src="image/吉祥物.jpg"alt="">
<apan>吉祥物</apan>
</p>
<p class="c1">2017年2月16日，日本东京政府正式宣布从开始启动“奥运电子垃圾”回收计划。目标是从日本民众手中回收超过200万台废旧电子设备，并从中提取金银铜来铸造奥运奖牌。 </p>
<p class="c2">2019年7月24日，国际奥委会在其官方微博公布2020东京奥运会奖牌设计 [68] 。</p>
<p class="c3">2021年7月14日，国际奥委会主席巴赫接受美联社等海外媒体采访时表示，为防控新冠肺炎疫情，东京奥运会的颁奖仪式上将由获奖运动员自己从托盘中拿起奖牌（自助式颁奖），自己佩戴在脖子上。 [112]
</p>
</body>
</html>
3.4、阴影
/*阴影颜色 水平偏移，垂直偏移*/
#price{
text-shadow: chartreuse 5px 5px;
}
3.5、超链接伪类
/*鼠标4悬浮的颜色*/
a:hover{
color: darkgreen;
font-size: 20px;
}
/*鼠标按下*/
a:active{
color: deeppink;
}
/*点击之后*/
a:visited{
color: darkslateblue;
}
3.6、列表
<div>
<h2 class = "title1">全部商品分类</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> </li>
</ul>
</div>
/*
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
*/
ul{
background: bisque;
}
ul li{
height: 30px;
list-style: none;
text-indent: 3em;
}
a{
color: black;
text-decoration: none;
font-size: 15px;
}
a:hover{
color: blue;
text-decoration: underline;
}
3.7、背景
背景颜色
背景图片
background:red url() 270px 10px no-repeat
/*背景 颜色 图片 图片位置 平铺方式*/
3.8、渐变
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
4.盒子模型
4.1、什么是盒子
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j5oWIav9-1628524962915)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210726134700803.png)]
margin:外边距
padding: 内边距
border: 边框
4.2、边框
1.边框颜色
<style>
/*body默认 有外边距*/
body{
margin: 0;
}
h2{
font-size: 16px;
background-color: #F4D03F;
line-height: 30px;
color: black;
}
#box{
width: 300px;
border: 1px solid red;
}
form{
background: #16A085;
}
div:nth-of-type(1) input{
border: black;
}
</style>
4.2、内外边距
/*margin 外边距
一个参数代表上下左右
两个代表上下，左右
四个代表：顺时针上右下左
padding 相同
*/
#box{
width: 300px;
border: 1px solid red;
/*盒子居中*/
margin: 0 auto;
}
form{
background: #16A085;
}
div:nth-of-type(1){
padding: 10px;
}
盒子大小计算：
margin+border+padding+内容宽度
4.4、圆角边框
<style>
/*border-radius:
参数顺序，顺时针：左上，右上，右下，左下
*/
div{
width: 100px;
height: 100px;
border: 10px solid rebeccapurple;
border-radius: 20px;
}
</style>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MGTDnbMH-1628524962917)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210726141941148.png)]
4.5、阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角边框</title>
<style>
/*box-shadow:
参数：左偏，下偏，阴影范围，颜色
*/
div{
margin: 0 auto;
}
.fig{
width: 100px;
height: 100px;
border: 10px solid rebeccapurple;
border-radius: 20px;
box-shadow: 10px 10px 2px yellowgreen;
}
</style>
</head>
<body>
<div>
<div class="fig"></div>
</div>
</body>
</html>
5.浮动
5.1、标准文档流
块级元素：独占一行
h1-h6, p div 列表
行内元素:不独占一行
span img a strong…
5.2、display
行内元素排列方式，但是一般使用float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dispaly</title>
<!-- block 块元素
inline 行内元素
inline-block 是块元素但是有行元素性质
-->
<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>
<span>行元素</span>
</body>
</html>
5.3、float
左右浮动
float:left；
float:clear；
5.4、父级边框塌陷
clear:right；右侧不允许有浮动元素
clear:left；左侧不允许有浮动元素
clear:both；两侧
解决方案:
1.增加父级元素高度
2.增加空的div清除浮动
<div class="clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}
3.在父级元素里增加 overflow：auto；或hidden
4.在父类中添加一个伪类 和方法1一样
#father：after{
content:'';
display:block;
clear:both;
}
小结：
1.浮动元素增加div
2.设置父元素高度
3.overflow
4.在父类中加伪类
5.5、对比
都是块元素行元素转换方法
display 方向不可控
float：产生父级塌陷问题
6、定位
6.1、相对定位
相对于原来的位置进行指定的偏移，仍然在标准文档流中，原来的位置会保留
position: relative;
top:-20px;
left: 20px;
6.2、绝对定位
1.没有父级元素相对定位，就相对浏览器定位
2.如果父级元素有定位就相对父级元素定位
3.在父级范围内移动
相对于父级或浏览器位置进行指定的偏移，仍然不在标准文档流中，原来的位置不会保留
position: absolute;
6.3、固定定位
<!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: #F4D03F;
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-index
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-euuMU5Z9-1628524962922)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210726181134505.png)]
图层
z-index:默认是0，最高无限
#content{
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid black;
width: 300px;
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.Tipbg{
position: absolute;
width: 300px;
height:25px;
top: 550px;
color: #F4D03F;
}
.tipText{
z-index: 9999;
}
.Tipbg{
background: black;
opacity: 0.5;
/*透明度*/
}
透明度:opacity: 0.5;
<!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="images/bg.jpg" width="300"height="600"></li>
<li class="tipText">壁纸</li>
<li class="Tipbg"></li>
<li>时间:2021-7-25</li>
</ul>
</div>
</body>
</html>
#content{
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid black;
width: 300px;
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.Tipbg{
position: absolute;
width: 300px;
height:25px;
top: 550px;
color: #F4D03F;
}
.tipText{
z-index: 9999;
}
.Tipbg{
background: black;
opacity: 0.5;
/*透明度*/
}
7.动画
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ro1KNVw-1628524962924)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210726184010710.png)]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
