CSS（快速入门）
HTML + CSS + JavaScript
结构 + 表现 + 交互
如何学习：
- CSS 是什么
- CSS 怎么用
- CSS 选择器（重点+难点）
- 美化网页（文字，阴影，超链接，列表，渐变…）
- 盒子模型
- 浮动
- 定位
- 网页动画（特效）
1、什么是CSS
1.1 什么是CSS
CSS ：Cascading Style Sheet (层叠级联样式表)
CSS ：表现（美化网页）
1.2 发展史
CSS 1.0
CSS 2.0 DIV（块）+ CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO
CSS 2.1 浮动，定位
CSS 3.0 圆角，阴影，动画… 浏览器兼容性~
练习格式：
1.3 快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <style> 可以编写css的代码，每一个声明，使用分号结束
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>我是标签</h1>
</body>
</html>
建议使用
css优势：
-
内容和表现分离
-
网页结构表现统一，可以实现复用
-
样式十分丰富
-
建议使用独立于html的css文件
-
利用SEO，容易被搜索引擎收录！
1.4 CSS 的三种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="./css/style.css">
<body>
<!--优先级：就近原则-->
<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>
拓展：外部样式俩种写法
-
链接式
html
<!--外部样式--> <link rel="stylesheet" href="./css/style.css"> -
导入式
@import 是 CSS2.1 特有的
<!--导入式 CSS2.1 特有的--> <style> @import url("./css/style.css"); </style>
2、选择器
2.1 三种基本选择器：
-
标签选择器 ：选择一类标签 标签名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 标签选择器格式： 标签名{} 特点：会将所有同属于这个标签名的标签的全部选中（一类标签） --> <style> h1{ color: green; } </style> </head> <body> <h1>标题1</h1> <h1>标题2</h1> <h1>标题3</h1> <h1>标题4</h1> </body> </html> -
类选择器 ：选择所有的class属性一致的标签，跨标签 .类名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 类选择器格式： .class类名{} 好处：可以多个标签归类，是同一个class，可以复用 --> <style> .bq{ color: red; } .bq2{ color: green; } </style> </head> <body> <h1 class="bq">标签1</h1> <h1 class="bq">标签2</h1> <h1 class="bq2">标签3</h1> <h1>标签4</h1> </body> </html> -
id选择器 ：全局唯一！ #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- id选择器： 必须保证全局唯一 ！
格式： #id名{}
优先级：
不遵循就近原则，固定的
id选择器 > class选择器 > 标签选择器
-->
<style>
#bq{
color: yellow;
}
.style1{
color: red;
}
</style>
</head>
<body>
<h1 class="style1" id="bq">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
优先级：id > class > 标签选择器
2.2 层次选择器
-
后代选择器 全部后代
/* 后代选择器 */ body p{ background: green; } -
子选择器 一代
/* 子选择器 */ body>p{ background: #1a82c7; } -
相邻兄弟选择器 ：只有一个，相邻（向下）同辈的
/* 相邻兄弟选择器 只有一个，相邻（向下） */ .active + p{ background: #77179d; } -
通用选择器 ： 当前选中元素的向下所有兄弟 同辈的
/* 通用兄弟选择器 当前选中元素的向下所有兄弟 */ .active ~ p{ background: #00eee1; }
html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 层次选择器 -->
<style>
/* 后代选择器 */
body p{
background: green;
}
/* 子选择器 */
body>p{
background: #1a82c7;
}
/* 相邻兄弟选择器 只有一个，相邻（向下） */
.active + p{
background: #77179d;
}
/* 通用兄弟选择器 当前选中元素的向下所有兄弟 */
.active ~ p{
background: #00eee1;
}
</style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>
2.3 结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 避免使用 class，id 选择器-->
<!-- 结构伪类选择器-->
<style>
/* 选中li标签的第一个 */
li:first-child{
background: #ee0c00;
}
/* 选择li标签的最后一个 */
li:last-child{
background: #00ee17;
}
/* 选中p标签的第一个 选中父标签，然后定位到第一个元素，第一个元素必须是当前元素*/
p:nth-child(1){
background: #1d44ee;
}
/* 选中p标签的第二个 选中父标签，然后定位到类型为p的标签的第二个元素*/
p:nth-of-type(2){
background: #ee08ea;
}
/*a:hover{*/
/* background: black;*/
/*}*/
</style>
</head>
<body>
<!--<h1>h1</h1>-->
<!--<a href="">a</a>-->
<p>p1</p>
<p>p2</p>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</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; text-align: center; font: bold 20px/50px Arial; text-decoration: none; /*下划线*/ background: #00eee1; border-radius: 10px; margin-right: 7px; } /*存在id属性的元素 a[]{} */ a[id]{ background: yellow; } /*选中id为first的元素*/ a[id=first]{ background: #00ee17; } /*class中有links的元素*/ a[class*="links"]{ background: #1a82c7; } /*href以https开头的元素*/ a[href^="https"]{ background: #77179d; } /*href以pdf结尾的元素*/ a[href$="pdf"]{ background: #ee0c00; } </style> </head> <body> <p class="demo"> <a href="https://www.baidu.com" class="links item first" id="first">1</a> <a href="https://www.processon.com" class="links item active">2</a> <a href="" class="links item">3</a> <a href="" class="links item">4</a> <a href="/1.pdf" class="links item">5</a> <a href="/2.pdf" class="links item">6</a> <a href="" class="links item">7</a> <a href="" class="links item last" id="last">8</a> </p> </body> </html>
属性选择器小结
格式 标签[属性名=属性值]{} 属性值（正则）
= 绝对等于
*= 包含
^= 以...开头
$= 以...结尾
3、美化网页元素
3.1 为什么要美化网页
- 有效的传递页面信息
- 美化网页，页面漂亮，才能吸引用户
- 凸显页面的主题
- 提高用户的体验
span 标签：重点要突出的字使用span标签套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
font-family: bold;
font-size: 50px;
}
</style>
</head>
<body>
欢迎来到，<span>java世界</span>
</body>
</html>
3.2 字体样式
<!--
字体样式
font-family 字体样式
font-size 字体大小
font-weight 字体粗细
color 字体颜色
-->
<style>
body{
font-family: Bahnschrift,楷体;
color: burlywood;
}
h2{
font-size: 20px;
}
p{
font-weight: bolder;
}
</style>
3.3 文本样式
- 颜色 color rgb rgba
- 对齐方式 text-align
- 段落首行缩进 text-indent: 2em; （2个字）
- 行高 line-height 行高 = 高 当行文字上下居中
- 装饰 text-decoration
- 文本图片水平对齐 vertical-align: middle;
<style>
/*颜色：
单词
RGB 0~F
RGBA A：0~1
*/
a{
/*取消默认下划线*/
text-decoration: none;
background: #00ee17;
display: block;
height: 50px;
width: 50px;
/*行高 = 高 ，上下居中*/
line-height: 50px;
text-align: center;
}
.l1{
/*下划线*/
text-decoration: underline;
}
.l2{
/*中划线*/
text-decoration: line-through;
}
.l3{
/*上划线*/
text-decoration: overline;
}
p{
/*首行缩进2em 2个字*/
text-indent: 2em;
color: rgba(255,0,157,0.8);
}
h2{
text-align: center;
}
img,span:last-child{
vertical-align: middle;
}
3.4 阴影
水平偏移，垂直偏移是按照数轴的
/* text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径 */
#author{
text-shadow: #dc00ff 10px 0px 2px;
}
3.5 超链接伪类
正常情况下，只用到 a , a:hover
<style>
a{
text-decoration: none;
}
/*鼠标悬浮的状态*/
a:hover{
color: #dc00ff;
}
/*鼠标按住未释放的状态*/
a:active{
color: green;
}
</style>
3.6 列表
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<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>
<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>
css代码
#nav{
background: bisque;
width: 300px;
}
.title{
font-size: 18px;
text-indent: 1em;
line-height: 35px;
font-weight: bold;
display: block;
/* 颜色，图片，图片位置，平铺方式 */
background: red url("../images/三角形_下.png") 265px 7px no-repeat;
background-size: 25px 25px;
}
/*
ul li
list-style:
none:去掉圆点
circle:空心圆
decimal:数字
square:正方形
*/
ul li{
height: 40px;
list-style: none;
text-indent: 1em;
background-image: url("../images/哈密瓜.png");
background-size: 25px,25px;
background-repeat: no-repeat;
background-position: 224.5px 0px;
}
a{
font-size: 14px;
text-decoration: none;
}
a:hover{
color: #00ee17;
text-decoration: underline;
}
运行结果：
3.7 背景
背景颜色
背景图片
<style>
div{
width: 1000px;
height: 700px;
border: solid red 1px;
background-image: url("./images/OIP-C.jpg");
/*默认是平铺的 repeat*/
}
.div1{
background-repeat: no-repeat;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: repeat-x;
}
</style>
3.8 渐变
www.grabient.com
background-image: linear-gradient(62deg, #c200ff 0%, #00ee17 100%);
4、盒子模型
4.1 什么是盒子模型
margin：外边距
border：边框
padding：内边距
4.2 边框
- 边框的粗细
- 边框的样式
- 边框的颜色
<style>
*{
margin: 0;
padding: 0;
}
/* border: 粗细 样式 颜色 */
#box{
width: 300px;
border: 1px solid #00ff80;
}
input:hover{
border:1px solid #dc00ff;
}
form{
background: #1dd7dc;
}
#box div:nth-of-type(1) input{
border:3px #ee0c00 dashed;
}
form div:nth-child(2) input{
border: 3px yellow solid;
}
</style>
4.3 内外边距
margin 参数顺时针 上右下左
padding
margin: 0 auto; padding: 20px;
盒子的计算方式：
margin + border + padding + 内容宽度
4.4 圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 50px auto;
width: 50px;
height: 50px;
border: red solid 1px;
background: red;
border-radius: 50px;
}
.div1{
margin: 50px auto;
width: 100px;
height: 50px;
border: green solid 1px;
background: green;
border-radius: 50px 50px 0px 0px;
}
.div2{
margin: 50px auto;
width: 50px;
height: 50px;
border:yellow solid 1px;
background: yellow;
border-radius: 50px 0 0px 0px;
}
img{
width: 100px;
height: 100px;
border-radius: 100px;
}
</style>
</head>
<body>
<div class="div2"></div>
<div class="div1"></div>
<div></div>
<img src="./images/OIP-C.jpg" alt="图片">
</body>
</html>
运行结果：
4.5 盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* margin: 0 auto;
居中要求：块元素 块元素有固定的宽度
*/
img{
display: block;
border-radius: 50px;
box-shadow: 10px 10px 100px yellow;
margin: 0 auto;
}
</style>
</head>
<body>
<img src="./images/OIP-C.jpg" alt="">
</body>
</html>
运行结果：
推荐网站：
5、浮动
块级元素：独占一行
h1~h6 p div 列表…
行内元素：不独占一行
span a strong em img …
行内元素可以被包含在块级元素中，反之，不可以
标准文档流
文档标准流. 简单来说标准流就是浏**览器按照各种元素标签排版布局中默认的状态，**浏览器在渲染代码的时候是从左往右、从上到下开始渲染，元素也是从左往右、从上往下的流式排列。. 也就是没有被其他排版浮动和定位相关的CSS属性干扰的就叫标准流。.
5.2 display
<style>
/*
block 块级元素
inline 行内元素
inline-block 拥有行内元素和块级元素的特性
none
*/
div{
width: 100px;
height: 100px;
border: solid red 1px;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: solid green 1px;
display: inline-block;
}
</style>
5.3 导航栏案例
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="warp">
<!--头部-->
<header class="nav-header">
<div class="head-contain">
<a href="" class="top-logo"><img src="./images/logo.jpg" alt="" width="145px" height="90px"></a>
<nav class="top-nav">
<ul>
<li><a href="">功能特权</a></li>
<li><a href="">游戏特权</a></li>
<li><a href="">生活特权</a></li>
<li><a href="">会员活动</a></li>
<li><a href="">成长体系</a></li>
<li><a href="">年费专区</a></li>
<li><a href="">超级会员</a></li>
</ul>
</nav>
<div class="top-right">
<a href="">登录</a>
<a href="">开通超级会员</a>
</div>
</div>
</header>
</div>
</body>
</html>
css代码
*{
margin: 0;
padding: 0;
}
.nav-header{
background: url("../images/navbar_bg.jpg");
height: 90px;
width: 100%;
}
.top-logo,.top-nav,.top-nav li, .top-right{
height: 90px;
vertical-align: top;
display: inline-block;
}
.head-contain{
width: 1180px;
text-align: center;
margin: 0 auto;
height: 90px;
}
a{
list-style: none;
text-decoration: none;
}
.head-contain a:first-of-type img{
margin-right: 50px;
}
.top-nav ul li a{
line-height: 90px;
margin-left: 20px;
font-size: 17px;
color: white;
}
.top-nav ul li a:hover{
color: #1d44ee;
}
.top-right {
line-height: 90px;
margin-left: 50px;
font-size: 18px;
}
.top-right a:first-of-type{
display: inline-block;
width: 93px;
height: 35px;
line-height: 35px;
color: #f5d497;
border: solid 1px #f1dc5b;
border-radius: 45px;
}
.top-right a:first-of-type:hover{
color: yellow;
}
.top-right a:last-of-type{
display: inline-block;
width: 150px;
height: 40px;
line-height: 40px;
color: black;
border: 1px solid #ceba01;
background: #f6e42f;
border-radius: 45px;
}
.top-right a:last-of-type:hover{
background: yellow;
}
运行结果
5.4 float
<style>
*{
margin: 0;
padding: 0;
}
#father{
border: 1px #000 dashed;
}
#father div{
border: 1px #ee0c00 dashed;
}
#father div:first-child{
width: 400px;
float: left;
display: inline-block;
clear: both;
}
#father div:last-child{
width: 500px;
display: inline-block;
float: left;
/*由于缩放的时候会造成问题 clear: both 清除浮动 这样就会有了浮动的效果还不会造成问题*/
clear: both;
}
</style>
5.5 父级边框塌陷的问题
clear
clear: left; 左侧不允许有浮动元素 clear: right; 右侧不允许有浮动元素 clear: both; 俩侧不允许有浮动元素 clear: none;
原样式
加上 float 之后
造成了父级边框塌陷
解决方法
-
增加父级元素的高度
<style> #father{ border: 1px red solid; width: 120px; height: 100px; } img{ float: left; } </style> -
增加一个空的div标签，清除浮动
<style> #father{ border: 1px red solid; width: 120px; } img{ float: left; } #father div{ clear: both; } </style> -
overflow
在父级元素中增加一个 overflow:hidden; -
父级添加一个伪类 ：after （推荐）
<style> #father{ border: 1px red solid; width: 120px; } img{ float: left; } #father:after{ content: ''; display: block; clear: both; } </style>
小结：
-
设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
-
浮动元素后面加空div
简单，代码中尽量避免空div
-
overflow
简单，下拉的一些场景避免使用
-
父级添加伪类
写法稍微发杂一点，但是没有副作用，推荐使用！
5.6 对比
-
display
方向不可以控制
-
float
浮动起来的话脱离标准文档流，所以要解决父级边框塌陷问题
6、定位
6.1 相对定位
position: relative;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
border: 1px red solid;
margin: 0;
padding: 10px;
}
a{
width: 100px;
height: 100px;
background: pink;
display: block;
text-decoration: none;
text-align: center;
line-height: 100px;
position: relative;
}
a:nth-child(2),a:nth-child(4){
right: -200px;
top: -100px;
}
a:last-child{
right: -100px;
top: -300px;
}
a:hover{
background: blue;
}
</style>
</head>
<body>
<div>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
</div>
</body>
</html>
运行结果
相对定位：position：relative；
相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中
top：
left：
right：
bottom：
6.2 绝对定位
定位：基于xxx的定位，上下左右 position: absolute;
- 如果没有父级元素定位的前提下，相对于浏览器定位
- 假设父级元素存在定位，我们通常会相对于父级元素的偏移
- 在父级元素的范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
6.3 固定定位 fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height:1000px;
}
div:first-child{ /* 绝对定位，相对与浏览器 */
width: 100px;
height: 100px;
position: absolute;
background: #dc00ff;
right: 0;
bottom: 0;
}
div:nth-of-type(2){ /* 固定定位 fixed */
width: 50px;
height: 50px;
background: green;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
运行结果：
6.4 z-index
图层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000 solid;
}
/* 父级元素相对定位*/
div ul{
position: relative;
}
ul li{
list-style: none;
padding: 0;
margin: 0;
background: #000;
opacity: 0.5; /* 背景透明度 */
position: absolute;
color: wheat;
bottom: 10px;
/* z-index: -1; */ /* 图层 */
}
</style>
</head>
<body>
<div>
<ul>
<img src="images/A19DD598.jpg" alt="" width="200px" height="200px">
<li>加油加油</li>
<li>努力学习</li>
</ul>
</div>
</body>
</html>
运行结果：
div:nth-of-type(2){ /* 固定定位 fixed */
width: 50px;
height: 50px;
background: green;
position: fixed;
right: 0;
bottom: 0;
}
运行结果：
[外链图片转存中…(img-uWcYflvk-1650806230315)]
6.4 z-index
图层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000 solid;
}
/* 父级元素相对定位*/
div ul{
position: relative;
}
ul li{
list-style: none;
padding: 0;
margin: 0;
background: #000;
opacity: 0.5; /* 背景透明度 */
position: absolute;
color: wheat;
bottom: 10px;
/* z-index: -1; */ /* 图层 */
}
</style>
</head>
<body>
<div>
<ul>
<img src="images/A19DD598.jpg" alt="" width="200px" height="200px">
<li>加油加油</li>
<li>努力学习</li>
</ul>
</div>
</body>
</html>
运行结果：
[外链图片转存中…(img-ykutWahZ-1650806230315)]
扫一扫
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
