1. 概述
- CSS全称Cascading Style Sheets(层叠样式表单),是一种用来表现HTML或XML等文件样式的计算机语言。
- CSS主要用于美化网页。
- CSS的版本:CSS1.0–>CSS2.0–>CSS2.1–>CSS3.0
2. CSS引入
-
行内样式:直接编写标签内的style属性来使用CSS
-
内部样式:直接在html文件的style标签内写css样式
-
外部样式:通过链接css文件来使用css样式
-
优先级:行内样式 > 内部样式 > 外部样式
-
CSS的语法:
选择器 {
声明1;
声明2;
声明3;
…
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS引入</title>
<!-- 内部样式:直接在html文件的style标签内写css样式 -->
<style>
/*
css语法:
选择器 {
声明1;
声明2;
声明3;
...
}
*/
h1 {
color: green;
}
</style>
<!-- 外部样式:通过链接css文件来使用css样式 -->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<!-- 行内样式:直接编写标签内的style属性来使用CSS -->
<h1 style="color: red;">标题</h1>
</body>
</html>
3. CSS选择器
3.1 基本选择器
-
标签选择器:选择所有为目标标签名的标签
格式:目标标签名 {…} -
id选择器:选择标签中id为目标id的标签
格式:#目标id名 {…} -
class类选择器:选择标签中class为目标class名的标签
格式:.目标class名 {…}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选择器</title> <style> /*标签选择器*/ p { /*选择所有的p标签*/ } /*id选择器*/ #only { /*选择标签中id为only的标签*/ } /*class类选择器*/ .pp { /*选择标签中class为pp的p标签*/ } </style> </head> <body> <p class="pp" id="only">p1</p> <p class="pp">p2</p> <p class="pp">p3</p> <ul> <li>l1</li> <li>l2</li> <li>l3</li> <li> <p class="qq">p4</p> <p name="p5">p5</p> <p calss="pp p6">p6</p> </li> <li>l5</li> </ul> <a href="http://www.baidu.com">a1</a> <a href="1.jpg">a2</a> </body> </html>
3.2 层次选择器
-
后代选择器:选择列出的最后一个标签类型同级及其子级的所有的该类型标签
格式:标签1 标签2 … 标签n {…} -
子类选择器:选择列出的最后一个标签类型同级的所有该类型标签
格式:标签1>标签2>…>标签n {…} -
相邻兄弟选择器:选择目标标签之后的下一个同级目标类型标签
格式:目标标签 + 目标类型标签 {…} -
通用选择器:选择目标标签之后的所有同级目标类型标签
格式:目标标签 ~ 目标类型标签 {…}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> <style> /******层次选择器******/ /*后代选择器*/ body p { /*选择body之后所有的p标签,即p1~p6*/ } /*子类选择器*/ body>p { /*选择body之后一级的所有p标签(不包括li下的),即p1~p3*/ } /*相邻兄弟选择器*/ .qq + p { /*选择class为qq的标签之后的下一个同级p标签,即p5*/ } /*通用选择器*/ .qq~p { /*选择class为qq的标签之后的所有同级p标签,即p5、p6*/ } </style> </head> <body> <p class="pp" id="only">p1</p> <p class="pp">p2</p> <p class="pp">p3</p> <ul> <li>l1</li> <li>l2</li> <li>l3</li> <li> <p class="qq">p4</p> <p name="p5">p5</p> <p calss="pp p6">p6</p> </li> <li>l5</li> </ul> <a href="http://www.baidu.com">a1</a> <a href="1.jpg">a2</a> </body> </html>
3.3 结构伪类选择器
-
:first-child:选择目标标签的子目标类型的第一个标签
格式:目标标签 子目标类型:first-child {…} -
:last-child:选择目标标签的子目标类型的最后一个标签
格式:目标标签 子目标类型:last-child {…} -
:nth-child(n):择目标标签的父级标签下的第n个标签,且该标签要为目标标签的类型才生效
格式:目标标签:nth-child(n) {…} -
:nth-of-type(n):选择目标标签的父级标签下的第n个目标标签的类型的标签
格式:目标标签:nth-of-type(n) {…}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>结构伪类选择器</title> <style> /******结构伪类选择器******/ ul li:first-child { /*选择ul下的第一个li标签,即l1*/ } ul li:last-child { /*选择ul下的最后一个li标签,即l5*/ } p:nth-child(1) { /*选择p的父级标签下的第1个标签,且标签要为p才生效,即p1*/ } p:nth-of-type(2) { /*选择p的父级标签下的第2个p标签,即p2*/ } </style> </head> <body> <p class="pp" id="only">p1</p> <p class="pp">p2</p> <p class="pp">p3</p> <ul> <li>l1</li> <li>l2</li> <li>l3</li> <li> <p class="qq">p4</p> <p name="p5">p5</p> <p calss="pp p6">p6</p> </li> <li>l5</li> </ul> <a href="http://www.baidu.com">a1</a> <a href="1.jpg">a2</a> </body> </html>
3.4 属性选择器
-
属性选择器:选择目标类型标签且标签内的目标属性的值为目标值的标签
格式:目标类型标签[目标属性=“目标值”] {…}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> /******属性选择器******/ p[name="p5"] { /*选择p标签的name属性值为p5的p标签,即p5*/ } p[class*="p6"] { /*选择p标签的class属性值包含p6的p标签,即p6*/ } a[href^="http"] { /*选择a标签的href属性值开头为‘http’的a标签,即a1*/ } a[href$="jpg"] { /*选择a标签的href属性值结尾为‘jpg’的a标签,即a2*/ } </style> </head> <body> <p class="pp" id="only">p1</p> <p class="pp">p2</p> <p class="pp">p3</p> <ul> <li>l1</li> <li>l2</li> <li>l3</li> <li> <p class="qq">p4</p> <p name="p5">p5</p> <p calss="pp p6">p6</p> </li> <li>l5</li> </ul> <a href="http://www.baidu.com">a1</a> <a href="1.jpg">a2</a> </body> </html>
4. 网页样式
-
字体样式
- font-family:字体风格
- font-size:字体大小
- font-weight:字体粗细
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体样式</title> <style> /*字体样式 font-family:字体风格 font-size:字体大小 font-weight:字体粗细 */ p { font-family: 楷体; font-size: 14px; font-weight: bold; } </style> </head> <body> <p>这是一段文字</p> </body> </html>
-
文本样式
- color:文本颜色
- text-align:文本对齐方式(left左对齐 center居中 right右对齐)
- text-indent:段落首行缩进
- background:背景(颜色或图片)
- height:高度
- line-height:文本高度(设置line-height的值与height的值一样为水平居中)
- text-decoration:文本装饰(underline下划线 line-through中划线 overline上划线 none无)
- text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径
-
超链接伪类:
- a:hover:鼠标悬停生效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本样式</title> <style> /*文本样式 color:文本颜色 text-align:文本对齐方式(左对齐 居中 右对齐) text-indent:段落首行缩进 background:背景(颜色或图片) height:高度 line-height:文本高度(设置line-height的值与height的值一样为水平居中) text-decoration:文本装饰(underline下划线 line-through中划线 overline上划线 none无) */ p { color: red; /*或#FF0000或rgb(255,0,0)*/ /*带透明度:color: #FF000088; 或rgba(255,0,0,0.5)*/ text-align: center; text-indent: 2em; /*2em为两个字的距离*/ background: aliceblue; /*颜色*/ /*图片背景:background: url(图片路径);*/ height: 300px; line-height: 300px; text-decoration: underline; } /* vertical-align: middle;实现img和span中的文本水平对齐 */ img,span { vertical-align: middle; } a { color: red; font-size: 14px; } /* 超链接伪类 */ a:hover { /*鼠标悬停生效*/ color: blue; font-size: 20px; } /*阴影 text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径 */ .tt { text-shadow: #098977 10px -10px 2px; } </style> </head> <body> <p> <img src="images/baidu.png" alt="百度"> <span>这是一段文字</span> </p> <a href="http://www.baidu.com">百度</a> <p class="tt">阴影</p> </body> </html>
-
背景样式
- 图片背景样式
- background-image背景图片
- url(图片路径)
- background-repeat背景图片填充样式
- repeat:平铺(默认)
- no-repeat:不平铺
- repeat-x:横向平铺
- repeat-y:纵向平铺
- background-position背景图片位置
- 第一个值:以父级左边缘为基准,水平右移多少
- 第二个值:以父级上边缘为基准,垂直下移多少
- background-image背景图片
- 渐变背景样式
- background背景
- linear-gradient
- 第一个值:渐变角度
- 第二个值:开始颜色
- 第三个值:结束颜色
- linear-gradient
- background背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景样式</title> <style> /********图片背景样式********/ /*background-image url():图片路径 */ /*background-repeat背景图片填充样式 repeat:平铺(默认) no-repeat:不平铺 repeat-x:横向平铺 repeat-y:纵向平铺 */ /*background-position背景图片位置 第一个值:以父级左边缘为基准,水平右移多少 第二个值:以父级上边缘为基准,垂直下移多少 */ .div1 { width: 540px; height: 500px; border: 1px solid blue; background-repeat: no-repeat; background-image: url("images/baidu.png"); background-position: 0px 60px; } /********渐变背景样式********/ /*background linear-gradient: 第一个值:渐变角度 第二个值:开始颜色 第三个值:结束颜色 */ .div2 { width: 540px; height: 500px; border: 1px solid black; background: linear-gradient(19deg, rgba(33, 253, 95, 0.99), #21e5ff); } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>
- 图片背景样式
-
列表样式
- list-style
- none:去掉圆点
- circle:空心圆
- decimal:数字
- square:正方形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表样式</title> <style> /*list-style none:去掉圆点 circle:空心圆 decimal:数字 square:正方形 */ ul li { height: 30px; list-style: none; } </style> </head> <body> <div> <h4>商品</h4> <ul> <li>图书</li> <li>电子设备</li> <li>美食</li> </ul> </div> </body> </html>
- list-style
5. 盒子模型
-
在HTML中,所有的元素都可以看作一个盒子,而CSS盒子模型就是就是用把元素看作”盒子“来操作
-
CSS盒子模型有四个部分:
- margin(外边距):盒子边框与父级内边缘的距离
- padding(内边距):边框与盒子内部内容之间的距离
- border(边框):盒子的边框,处于外边距和内边距之间
- content(内容):盒子的内容,显示文本和图像
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> /*padding 内边距:边框与盒子内部内容之间的距离 */ .d1 { width: 500px; height: 300px; margin: 0 auto; /*margin: 0 auto;可以将盒子居中*/ padding: 30px; border: 2px solid red; background: #ece448; } /*border 边框:盒子的边框 第一个值:边框的粗细 第二个值:边框的样式(solid实线与dashed虚线) 第三个值:边框的颜色 */ .d2 { width: 496px; height: 296px; margin: 0; padding: 0; border: 2px solid blue; background: #6df684; } /*margin 外边距:盒子边框与父级内边缘的距离 */ .d3 { width: 450px; height: 250px; margin: 21px; padding: 0; border: 2px solid #427ef8; background: #ec3ef3; } </style> </head> <body> <div class="d1"> <div class="d2"> <div class="d3"></div> </div> </div> </body> </html>
-
盒子阴影:box-shadow
- 第一个值:阴影横向偏移量
- 第二个值:阴影纵向偏移量
- 第三个值:阴影模糊半径
- 第四个值:阴影颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子阴影</title> <style> /*box-shadow盒子阴影 第一个值:阴影横向偏移量 第二个值:阴影纵向偏移量 第三个值:阴影模糊半径 第四个值:阴影颜色 */ div { width: 200px; height: 200px; border: 10px solid blue; box-shadow: 10px 10px 100px #55f3e6; } </style> </head> <body> <div></div> </body> </html>
-
圆角边框:border-radius
- 第一个值:左上角的弯曲半径
- 第二个值:右上角的弯曲半径
- 第三个值:右下角的弯曲半径
- 第四个值:左下角的弯曲半径
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆角边框</title> <style> /*border-radius圆角边框 第一个值:左上角的弯曲半径 第二个值:右上角的弯曲半径 第三个值:右下角的弯曲半径 第四个值:左下角的弯曲半径 */ div { width: 500px; height: 500px; margin: 0 auto; background: #427ef8; border-radius: 250px 250px 250px 250px; } </style> </head> <body> <div></div> </body> </html>
6. 浮动
6.1 浮动
-
浮动可以让元素”浮“起来,
-
浮动的元素不在标准文档流(HTML默认的排版)中
-
浮动的元素可以向左或向右移动,直到它的外边缘碰到父级元素边缘或另一个浮动元素的边框为止
-
文字会环绕在浮动的元素周围
-
浮动的声明:float
- left:向左浮动
- right:向右浮动
-
浮动的清除属性:clear
- left:左边不允许有浮动元素
- right:右边不允许有浮动元素
- both:左右都不允许有浮动元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动父级边框塌陷处理1</title> <style> /*直接设置父级边框高度*/ .box { border: 2px solid blue; height: 850px; } .d1 { float: left; border: 2px dashed #d9e756; } .d2 { float: right; border: 2px dashed #bf5375; } .d3 { float: left; color: red; border: 2px dashed #56e75d; clear: both; } </style> </head> <body> <div class="box"> <div class="d1"><img src="images/1.jpg" alt="1"></div> <div class="d2"><img src="images/2.jpg" alt="2"></div> <div class="d3">这是一个div</div> 这是一段文字 </div> </body> </html>
6.2 display属性
-
display
- inline:行内元素
- block:块元素
- inline-block:既是行元素,又是块元素
- none:隐藏,包括元素占位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display属性</title> <style> /*display inline:行内元素 block:块元素 inline-block:既是行元素,又是块元素 none:隐藏,包括元素占位 */ .d1 { width: 100px; height: 100px; border: 2px solid blue; display: inline; } .d2 { width: 100px; height: 100px; border: 2px solid red; display: inline; } .d3 { display: none; } .s1 { display: block; } .s2 { display: block; } </style> </head> <body> <div class="d1">div1</div> <div class="d2">div2</div> <div class="d3">div3</div> <span class="s1">span1</span> <span class="s2">span2</span> </body> </html>
6.3 浮动父级边框塌陷处理
-
浮动父级边框塌陷处理1:直接设置父级边框高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动父级边框塌陷处理1</title> <style> /*直接设置父级边框高度*/ .box { border: 2px solid blue; height: 850px; } .d1 { float: left; border: 2px dashed #d9e756; } .d2 { float: right; border: 2px dashed #bf5375; } .d3 { float: left; color: red; border: 2px dashed #56e75d; clear: both; } </style> </head> <body> <div class="box"> <div class="d1"><img src="images/1.jpg" alt="1"></div> <div class="d2"><img src="images/2.jpg" alt="2"></div> <div class="d3">这是一个div</div> 这是一段文字 </div> </body> </html>
-
浮动父级边框塌陷处理2:设置空的div元素在父级最下面,并设置clear: both;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动父级边框塌陷处理2</title> <style> /*设置空的div元素在父级最下面,并设置clear: both;*/ .box { border: 2px solid blue; } .d1 { float: left; border: 2px dashed #d9e756; } .d2 { float: right; border: 2px dashed #bf5375; } .d3 { float: left; color: red; border: 2px dashed #56e75d; clear: both; } .d4 { clear: both; } </style> </head> <body> <div class="box"> <div class="d1"><img src="images/1.jpg" alt="1"></div> <div class="d2"><img src="images/2.jpg" alt="2"></div> <div class="d3">这是一个div</div> 这是一段文字 <div class="d4"></div> <!--设置空的div--> </div> </body> </html>
-
浮动父级边框塌陷处理3:设置父级元素自动溢出overflow: hidden;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动父级边框塌陷处理3</title> <style> /*设置父级元素自动溢出overflow: hidden;*/ .box { border: 2px solid blue; overflow: hidden; } .d1 { float: left; border: 2px dashed #d9e756; } .d2 { float: right; border: 2px dashed #bf5375; } .d3 { float: left; color: red; border: 2px dashed #56e75d; clear: both; } </style> </head> <body> <div class="box"> <div class="d1"><img src="images/1.jpg" alt="1"></div> <div class="d2"><img src="images/2.jpg" alt="2"></div> <div class="d3">这是一个div</div> 这是一段文字 </div> </body> </html>
-
浮动父级边框塌陷处理4:增加一个父级伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动父级边框塌陷处理4</title> <style> /*增加一个父级伪类*/ .box:after { content: ''; display: block; clear: both; } .box { border: 2px solid blue; height: 850px; } .d1 { float: left; border: 2px dashed #d9e756; } .d2 { float: right; border: 2px dashed #bf5375; } .d3 { float: left; color: red; border: 2px dashed #56e75d; clear: both; } </style> </head> <body> <div class="box"> <div class="d1"><img src="images/1.jpg" alt="1"></div> <div class="d2"><img src="images/2.jpg" alt="2"></div> <div class="d3">这是一个div</div> 这是一段文字 </div> </body> </html>
7. 定位
7.1 相对定位
-
position: relative;相对定位:相对元素本身原来的位置进行定位
-
top:与原位置的上边缘的距离
-
bottom:与原位置的下边缘的距离
-
left:与原位置的左边缘的距离
-
right:与原位置的右边缘的距离
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相对定位</title> <style> .box { width: 200px; height: 200px; margin: 0; padding: 0; border: 2px solid blue; } .d1 { width: 50px; height: 50px; border: 2px dashed red; } .d2 { width: 50px; height: 50px; border: 2px dashed green; position: relative; /*relative相对定位*/ top: 54px; /*距离原位置的上边缘为54px*/ left: 54px; /*距离原位置的左边缘为54px*/ } .d3 { width: 50px; height: 50px; border: 2px dashed orange; position: relative; /*relative相对定位*/ bottom: 54px; /*距离原位置的下边缘为54px*/ right: -54px; /*距离原位置的右边缘为-54px*/ } </style> </head> <body> <div class="box"> <div class="d1">div1</div> <div class="d2">div2</div> <div class="d3">div3</div> </div> </body> </html>
7.2 绝对定位
-
position: absolute;绝对定位:相对浏览器的位置进行定位
-
top:与浏览器的上边缘的距离
-
bottom:与浏览器的下边缘的距离
-
left:与浏览器的左边缘的距离
-
right:与浏览器的右边缘的距离
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位</title> <style> .box { width: 200px; height: 200px; margin: 0; padding: 0; border: 2px solid blue; } .d1 { width: 50px; height: 50px; border: 2px dashed red; } .d2 { width: 50px; height: 50px; border: 2px dashed green; position: absolute; /*absolute绝对定位*/ top: 100px; /*距离浏览器的上边缘为100px*/ left: 10px; /*距离浏览器的左边缘为10px*/ } .d3 { width: 50px; height: 50px; border: 2px dashed orange; position: absolute; /*absolute相对定位*/ bottom: 200px; /*距离浏览器的下边缘为200px*/ right: 200px; /*距离原浏览器的右边缘为200px*/ } </style> </head> <body> <div class="box"> <div class="d1">div1</div> <div class="d2">div2</div> <div class="d3">div3</div> </div> </body> </html>
7.3 固定定位
-
position: fixed;固定定位:相对浏览器的位置进行定位并不随浏览器页面的滑动而移动
-
top:与浏览器的上边缘的距离
-
bottom:与浏览器的下边缘的距离
-
left:与浏览器的左边缘的距离
-
right:与浏览器的右边缘的距离
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定定位</title> <style> .d1 { width: 200px; height: 1000px; border: 2px solid blue; position: absolute; top:200px; left: 500px; } .up { width: 50px; height: 50px; text-align: center; background: #55f3e6; position: fixed; /*fixed固定定位*/ right: 10px; /*距离浏览器的右边缘为10px*/ bottom: 10px; /*距离浏览器的下边缘为10px*/ } a[href="#top"] { height: 50px; line-height: 50px; text-decoration: none; font-size: 10px; color: red; } </style> </head> <body> <a name="top">顶部</a> <div class="d1"></div> <div class="up"> <a href="#top">返回顶部</a> </div> </body> </html>
7.4 z-index
-
z-index为图的层级。当两个图层重合时,层级越高的显示得越在前面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index</title> <style> .d1 { width: 50px; height: 50px; background: red; position: absolute; top: 100px; left: 50px; z-index: 999; /*z-index为图的层级,层级越高,显示得越在前面*/ } .d2 { width: 100px; height: 100px; background: blue; position: absolute; top: 75px; left: 25px; /*opacity: 0.5;*/ /*可以使用opacity透明显示div1*/ } </style> </head> <body> <div class="d1">div1</div> <div class="d2">div2</div> </body> </html>