文章目录
一、什么是CSS
- CSS(Cascading Style Sheets)指层叠样式表;
- CSS是用来布局和美化网页的;
- CSS定义如何显示HTML元素;
二、CSS的三种样式及其优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的三种写法样式</title>
<!-- -----------内嵌式---------------- -->
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<!-- -----------外链式---------------- -->
<link rel="stylesheet" type="text/css" href="./css/1.css">
</head>
<body>
<!-- -----------行内式---------------- -->
<div style="width: 100px;height: 100px;background-color: green"></div>
</body>
</html>
1.css
div{
width: 500px;
height: 300px;
background: yellow;
}
注意优先级：对于三种样式的css，我们采用就近原则，相同属性使用离标签最近的css，不同属性的也使用最近的css
三、CSS基本选择器及其优先级
①css三种基本选择器：标签选择器、ID选择器、类选择器
| 选择器 | 举例 | 备注 |
|---|---|---|
| 标签选择器 | 标签名 | 通过标签名来查找元素，影响范围最大，很少单独使用 |
| ID选择器 | # ID | 通过元素标签的id属性值来获取元素,id属性值不能重复，一个id值在一个html文件只出现一次，因此影响范围较小 |
| 类选择器 | .类名 | 一个标签的class值属性可以有多个值，一个class属性的值可以被多个标签使用，影响范围在标签选择器和id选择器之间 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css基本的三种选择器</title>
<style type="text/css">
/*标签选择器*/
div{
width: 200px;
height: 200px;
background: pink;
}
/*id选择器*/
#item1{
width: 400px;
height: 100px;
background: blue;
}
/*类选择器*/
.box{
width: 333px;
height: 333px;
background: yellow;
}
.box1{
border: 3px solid red;
}
</style>
</head>
<body>
<div>标签选择器</div>
<div id="item1">id选择器</div>
<div class="box box1">类选择器</div>
</body>
</html>
②三种选择器的优先级
- 标签选择器<类选择器<id选择器
- 谁的影响范围大谁的优先级小
- 相同属性按照优先级使用，不同属性也按照优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器优先级</title>
<style type="text/css">
.box{
width: 200px;
background-color: blue;
}
#item{
background-color: yellow;
}
div{
width: 100px;
height: 200px;
background-color: red;
}
</styl
</style>
</head>
<body>
<div id="item" class="box"></div>
</body>
</html>
四、其他常见的选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关系选择器</title>
<style type="text/css">
/*------后代选择器 设置.wrap内的所有p标签的样式*/
.wrap p{
color: red;
}
/*----子选择器 设置.wrap的子元素的p的标签-----*/
.wrap>p{
color: blue;
}
/*--------并集选择器-----*/
.wrap>span,span{
color:pink;
}
/*------------伪元素选择器 hover-------*/
.box{
width: 100px;
height: 100px;
background-color: red
}
.box:hover{
width: 300px;
height: 300px;
background-color: green
}
/*-------------伪元素选择器----------*/
/*在box内部的前边插入一个字符*/
.box:before{
content: '你';
}
/*在box内部的后边插入一个字符*/
.box:after{
content: '呀';
}
</style>
</head>
<body>
<!--
1.后代选择器：
选择符 空格
选择指定标签内的所以后代，忽略层级关系
2.子选择器：
选择符>
只选择标签内的儿子后代
3.并集选择器：
选择符,
一次性给多个元素设置相同的样式
4.伪类选择器
.类名：hover
属性可以冬天改变
5.伪元素选择器
.类名：before{content：改变}
.类名：after{content：改变}
-->
<div class="wrap">
<div class="inner">
<p>我是inner里的p</p>
</div>
<p>我是wrap里的p</p>
<span>我是wrap内部的span</span>
</div>
<p>我是最外层的p</p>
<span>我是最外边的span</span>
<div class="box">鼠标上来试试</div>
</body>
</html>
伪类选择器鼠标移上后：
五、选择器优先进阶
实际上，每个选择器对应的权值都不相同：
- 行间式 ：权值1000
- id选择器 ：权值100
- 类选择器 ：权值10
- 标签选择器：权值1
对于多个选择器并存，我们将每个样式对应的权值相加，谁的权值大，使用谁的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器优先级进阶</title>
<style type="text/css">
#idd p{
/*权值100+1*/
color: red
}
.cla p{
/*权值10+1*/
color: green
}
</style>
</head>
<body>
<div id='idd' class="cla">
<p>哈啊哈</p>
</div>
</body>
</html>
六、css的常见属性(颜色、背景、字体、边框）
1.颜色属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS的常用属性</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
/*十六进制颜色*/
/*background-color:#ff0000;红色*/
/*简写*/
/*background-color: #00f;*/
/*十进制颜色*/
/*background-color: rgb(255,0,0);*/
/*带透明度的颜色*/
background-color: rgba(100,100,100,0.1);
}
</style>
</head>
<body>
<!--
1.css的颜色表示方式：
①英语单词
②十六进制的颜色(两个为一组：红绿蓝，每组相同的可以简写)
③十进制的颜色（由三个进制数字来表示最终显示颜色）
rgb(红，绿，蓝)
其中每个的取值范围为0-255或者0%-100%
④带透明度的颜色
rgba(红色，绿色，蓝色，透明度)
其他不变，另外一个为0-1之间
-->
<div class="box"></div>
</body>
</html>
2.背景属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景属性</title>
<style type="text/css">
/*----------背景图片------------*/
.box{
width: 400px;
height: 400px;
border: 1px solid red;
background-image: url(./img/徐坤篮球图.jpg);
/*图片不会重复*/
background-repeat: no-repeat;
/*图片坐标*/
background-position: 5px 5px;
/*百分百在框里*/
background-size: 100% 100%
}
/*简写*/
.box1{
width: 400px;
height: 400px;
border: 1px solid red;
/*最后是向右，向下偏移的量,注意是图片移动，不是框移动*/
background: url(./img/徐坤篮球图.jpg) no-repeat 10px 10px;
}
/*注意：简写不可和分开写混用，但是background-size是单独设置*/
/* 练习 */
.item{
width: 50px;
height: 50px;
border: 1px solid red;
background: url(./img/0.jpg) no-repeat -4px -104px;
}
.item:hover{
background: url(./img/0.jpg) no-repeat -345px -270px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="item"></div>
</body>
</html>
3.字体属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style type="text/css">
/*默认字体大小 16px*/
.box{
/*大小*/
font-size: 50px;
/*加粗*/
font-weight: bold;
/*字体
①所使用的电脑如果没此字体，则使用默认字体②如果第一个没有，则使用第二个字体③如果字体由多个单词组成，需要加引号*/
font-family: 楷体,宋体;
/*颜色*/
color: blue;
/*字体样式 italic倾斜，normal不倾斜*/
font-style: italic;
}
</style>
</head>
<body>
<div class="box">
蔡徐坤，打篮球真棒！
</div>
</body>
</html>
4.边框属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框属性</title>
<style type="text/css">
.item{
width: 200px;
height: 200px;
/*简写，设置四个边框粗细，样式，颜色*/
/*border: 1px solid red;*/
/*单独设置*/
/*solid 实线 dotted 点状线 dashed虚线*/
border-top: 1px solid red;
border-bottom: 2px dotted black;
border-left: 3px groove green;
border-right: 4px dashed yellow;
}
</style>
</head>
<body>
<div class="item"></div>
</body>
</html>
七、内间距和外间距
1.内间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内间距</title>
<style type="text/css">
/*设置元素*/
.box{
width: 200px;
height: 200px;
background: #e91e7a;
/*非简写*/
/*padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;*/
/*简写,四个值-遵循上右下左*/
/*padding:20px 10px 30px 40px;*/
/*简写，三个值-遵循上，(左右），下*/
/*padding: 20px 30px 40px*/
/*简写，两个值-遵循（上下），（左右）*/
padding:20px 30px;
/*简写，一个值-四个值一样*/
/*padding: 30px;*/
}
</style>
</head>
<body>
<!-- 注意，写了内边距属性，属性值得大小会改变 -->
<div class="box">1</div>
</body>
</html>
2.外间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外间距</title>
<style type="text/css">
.box{
width:200px;
height: 300px;
background: red;
}
/*
.item{
width:200px;
height: 300px;
background: blue;
border: 1px solid red;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 20px;
margin-left: 30px;*/
/*水平自适应居中*/
/*margin: 20px auto;*/
/*margin为负值，可以应用于边框的合并*/
.item1,.item2{
width: 200px;
height: 200px;
border: 10px solid red;
}
.item2{
margin-top: -10px;
}
}
</style>
</head>
<body>
<!--
border是外边框距离外部元素距离
简写和内间距写法一样
-->
<!-- <div class="box">1</div>
<div class="item">2</div> -->
<div class="item1"></div>
<div class="item2"></div>
</body>
</html>
八、盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
.box1{
width: 100px;
height: 100px;
background: yellow;
}
/*但是会改变原来定义的大小*/
.box2{
width: 100px;
height: 100px;
background: yellow;
border: 20px solid green;
/*自动按原来的大小计算*/
box-sizing: border-box;
}
/*但是会改变原来定义的大小*/
.box3{
width: 100px;
height: 100px;
background: yellow;
border: 20px solid green;
padding: 20px;
/*自动按原来的大小计算*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
九、文本属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本属性</title>
<style type="text/css">
.item{
width: 200px;
height: 200px;
border: 1px solid red;
/*设置首行缩进*/
text-indent: 32px;
/*文本水平对齐方式，一般用于单行文本*/
text-align: center;
/*添加下划线*/
text-decoration: underline;
/*添加上划线*/
text-decoration: overline;
/*添加删除线*/
text-decoration: line-through;
/*去除文本的划线*/
text-decoration: none;
/*设置行高，设置于行与行之间的间距*/
line-height: 30px;
}
/*练习题*/
.item2{
width: 400px;
height: 54px;
border-top:1px solid red;
border-bottom: 3px solid #666;
font-size: 20px;
font-weight: bold;
font-family: 雅黑;
line-height: 50px;
text-indent: 30px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="item">
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</div>
<br><br>
<div class="item2">新闻列表</div>
</body>
</html>
十、布局属性
1.display
<!DOCTYPE html>
<html>
<head>
<title>布局属性</title>
</head>
<body>
<!--
------------布局属性-------------
display：(规定元素以哪种元素类型展示)
none---------隐藏
block--------块元素：会自动换下一行
inline-------行元素：不会自动换行，无高宽属性
inline-block-行内块：不会自动换行，还具有高宽属性
一般情况下不会将块元素转换为行内元素
-->
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
/* ul{
width:400px;
border:1px solid red;
}*/
ul li{
margin-top: 10px;
width:100px;
height:50px;
border:1px solid pink;
text-align:center;
line-height: 50px;
display:inline-block;
box-sizing: border-box;
background:#c4c4c4;
}
.item{
/*margin-left:-6px;*/
}
ul li:hover{
background-color:pink;
}
.inner{
height:300px;
background-color:green;
display:none;
}
a{
text-decoration: none;
}
/*
注意： inner 必须是li直接子元素
*/
ul li:hover .inner{
display:block;
}
</style>
</body>
<!-- 练习商城导航栏 -->
<ul>
<li><a href="">国产</a>
<div class="inner">
</div>
</li>
<li class="item"><a href="">欧美</a>
<div class="inner">
</div>
</li>
<li class="item"><a href="">日韩</a>
<div class="inner"></div>
</li>
<li class="item"><a href="">动漫</a>
<div class="inner"></div>
</li>
</ul>
</html>
2.visibility和display区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width: 200px;height: 200px;}
.item1{
background: yellow;
/*隐藏后不再占据位置*/
/*display: none;*/
/*隐藏后还会占据位置*/
visibility: hidden;
}
.item2{background: red}
</style>
</head>
<body>
<div class="item1">1</div>
<div class="item2">2</div>
</body>
</html>
十一、overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow</title>
<style type="text/css">
/*
overflow:超出部分
visable：不隐藏
auto：多出的部分自动加滚动条
hidden：超出部分隐藏
scroll：加个滚动条，无论元素有没有
*/
div{
height: 200px;
width: 200px;
overflow: auto;
}
</style>
</head>
<body>
<div>
<img src="../day02_css/课堂回顾练习/摩洛哥.png">
</div>
</body>
</html>
十二、相对定位、绝对定位、固定定位及其层级关系
1.相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.wrap{
width: 600px;
height: 600px;
border: 3px solid green;
}
.item1{
width: 200px;
height: 200px;
background: #f33;
/*相对定位*/
position: relative;
top: 200px;
left: 400px;
}
.item2{
width: 200px;
height: 200px;
background: #00f;
}
</style>
</head>
<body>
<!--
相对定位
不会脱离的文档流
参考点是原来位置的（0,0）点
相对于原来的元素进行便宜
-->
<div class="wrap">
<div class="item1"></div>
<div class="item2"></div>
</div>
</body>
</html>
2.绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
*{margin:0;padding:0;}
.wrap{
width: 400px;
height: 400px;
border: 1px solid red;
margin-left: 100px;
/*position: relative;*/
}
.item1,.item2{
width: 100px;
height: 100px;
}
.item1{
background: yellow;
/*绝对定位*/
position: absolute;
top: 200px;
left: 200px;
}
.item2{
background: blue;
}
</style>
</head>
<body>
<!--
--------绝对定位--------
1.会脱离文档流
2.默认以body的(0,0)进行参考偏移
3.如果父元素有定位属性，那么绝对定位会以父元素的(0,0)进行偏移
4.如果父元素无定位属性，那么就依次找祖先元素，直到某个最小有定位元素就按
此元素的(0,0),否则会找到body的(0,0)
-->
<div class="wrap">
<div class="item1">1</div>
<div class="item2">2</div>
</div>
</body>
</html>
3.固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
body{
height: 2000px;
}
.item1{
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: green;
/*固定定位/绑定定位*/
position: fixed;
left: : 20px;
top: 200px;
}
</style>
</head>
<body>
<!--
固定定位
会以浏览器内部的左上角为基点，无论浏览器变大缩小
-->
<div class="item1">回到顶部</div>
</body>
</html>
4.层级关系
多种定位，越往后层级越高
如果想改变，在该层级元素加z-index：1
谁想在谁上边，谁的z-index:2值越大即可
十三、简单的百度界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 600px;
height: 50px;
/*padding: 1px;*/
border: 1px solid blue;
display: inline-block;
}
a{
color: green;
}
.but,.opt,.tex{
height: 50px;
box-sizing: border-box;
border: 0px;
}
.but{
height: 50px;
width: 100px;
margin-left: -5px;
color: white;
}
.opt{
width: 60px;
}
.tex{
height: 48px;
margin-left: -5px;
width: 440px;
font-size: 18px;
}
.pic{
width: 148px;
height: 48px;
display: inline-block;
}
.div0{
width: 1350px;height: 800px; background: rgba(100,100,100,0.1);margin-top: -8px;
}
.div1{
background: white;
margin-left: 300px;
margin-right: 250px;
width: 800px;
height: 50px;
border: 1px solid rgba(100,150,100,0.2);
}
</style>
</head>
<body>
<div style="margin-left: 70px;margin-top: 20px">
<input type="image" style="margin-left: 200px" name="photo" src="baidu.png" class="pic">
<div class="box" >
<select class="opt" name="info">
<option>网页</option>
<option>音乐</option>
<option>视频</option>
<option>图片</option>
<option>小说</option>
<option>贴吧</option>
</select>
<input type="text" class="tex" name="sel" placeholder="请输入搜索信息">
<button class="but"style="background: blue">百度一下</button>
</div>
<div style="margin-left: 350px;">
<a href="">老干妈失火</a>
<a href="">人民币破7</a>
<a href="">母猪护理</a>
<a href="">乔萝莉全网被禁</a>
<a href="">七彩祥云</a>
<a href="">人类为文字献血</a>
<a href="">2020末日</a>
</div>
</div>
<hr>
<div class="div0">
<div class="div1" style="margin-bottom: 13px;">
<p> hao123新闻 人民网 搜狐网 新浪网 网易 中国日报 人民日报 影视快报 人人网 百度网</p>
</div>
<div class="div1" style="height:190px;margin-bottom: 13px;">
<p> 国产经典 新浪微博 欧美快播 腾讯游戏 凤凰资讯 产后护理 人民日报 澳门赌场 人人</p>
<p> 草船借箭 三顾茅庐 三气周瑜 人人自危 辕门射戟 三英吕布 一个顶两 北伐十年 黄盖挨打</p>
<hr style="color: rgba(100,150,100,0.2)">
<p> 百度贴吧 新浪微博 搜狐热点 腾讯游戏 凤凰资讯 产后护理 人民日报 澳门赌场 人人</p>
<p> 草船借箭 三顾茅庐 三气周瑜 人人自危 辕门射戟 三英吕布 一个顶两 北伐十年 黄盖挨打</p>
</div>
<div class="div1" style="height:390px;">
<p> <a href="">视频</a> 新浪微博 搜狐热点 腾讯·游戏 凤凰资讯 产后护理 人民日报 澳门赌场 人人</p>
<p> <a href="">新闻</a> 三顾茅庐 三气周瑜 人人自危 辕门射戟 三英吕布 一个顶两 北伐十年 黄盖挨打</p>
<p> <a href="">小说</a> 新浪微博 搜狐热点 腾讯游戏 凤凰资讯 产后·护理 人民日报 澳门赌场 人人</p>
<p>  <a href="">音乐</a> 三顾茅庐 三气周瑜 人人自危 辕门射戟 三英吕布 一个顶两 北伐十年 黄盖挨打</p>
<p> <a href="">旅游</a> 新浪·微博 搜狐热点 腾讯游戏 凤凰资讯 产后护理 人民日报 澳门·赌场 人人</p>
<p> <a href="">购物</a> 三顾茅庐 三气周瑜 人人自危 辕门射戟 三英吕布 一个顶两 北伐十年 黄盖挨打</p>
<p> <a href="">体育</a> 新浪·微博 搜狐热点 腾讯游戏 凤凰资讯 产后护理 人民日报 澳门赌场 人人</p>
<p> <a href="">医药</a> 三顾茅庐 三气周瑜 人人自危 辕门射戟 三英吕布 一个顶两 北伐十年 黄盖挨打</p>
</div>
</div>
</body>
</html>
十四、小米商城
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<style type="text/css">
*{margin:0;padding: 0;list-style: none;}
/*侧边导航栏*/
.box2{
margin-top: 10px;
margin-left: 30px;
width: 200px;
background: rgba(0,0,0,0.3);
position: relative;
}
.ul2 .li2{
width: 200px;
height: 30px;
color: white;
font-weight: 600px;
padding-top: 20px;
padding-bottom: 20px;
}
.ul2 .li2:hover{
background: #ff5722;
}
.inner2{
width: 990px;
height: 350px;
background: rgba(100,200,200,1);
font-size: 60px;
text-align: center;
position: absolute;
top:0;
left: 200px;
display: none;
}
.ul2 .li2:hover .inner2{
display:block;
position: absolute;
z-index: 1;
}
.im{
position: absolute;
top: 0px;
left: 200px;
}
/*上部导航栏*/
.box1{
width: 800px;
margin-top: 120px;
margin-left: 100px;
margin-bottom: 10px;
}
.ul1 .li1{
width:100px;
height:55px;
border:1px solid pink;
text-align:center;
line-height: 50px;
display:inline-block;
box-sizing: border-box;
background:#c4c4c4;
}
.li1{
margin-left:-6px;
}
.ul1 .li1:hover{
background-color:pink;
}
.inner1{
width: 99px;
height:300px;
background-color:green;
display:none;
position: absolute;
z-index: 1;
}
/*
注意： inner 必须是li直接子元素
*/
.ul1 .li1:hover .inner1{
display:block;
float: left;
}
.imge{
float: left;
}
.ul1{
float: right;
}
.item1{
width: 203px;
height: 53px;
}
</style>
</head>
<body>
<div class="box1">
<img src="小米.png" class="imga">
<ul class="ul1">
<li class="li1">小米手机
<div class="inner1">小米5<br>小米6<br>小米7</div>
</li>
<li class="li1">红米手机
<div class="inner1">小米5<br>小米6<br>小米7</div></li>
<li class="li1">电视
<div class="inner1">小米5<br>小米6<br>小米7</div></li>
<li class="li1">笔记本
<div class="inner1">小米5<br>小米6<br>小米7</div></li>
<li class="li1">家电
<div class="inner1">小米5<br>小米6<br>小米7</div></li>
<li class="li1">路由器
<div class="inner1">小米5<br>小米6<br>小米7</div></li>
</ul>
</div>
<hr style="color: black;font-weight: bold;">
<div class="box2">
<ul class="ul2">
<li class="li2"> 手机 电话卡 >
<div class="inner2">这是手机和电话卡</div>
</li>
<li class="li2"> 电视 大盒子 ><div class="inner2">这是电视和大盒子</div></li>
<li class="li2">  平板 笔记本 ><div class="inner2">这是平板和笔记本</div></li>
<li class="li2">  出行 穿和戴 ><div class="inner2">这里是出行和穿戴</div></li>
<li class="li2">  智能 路由器 ><div class="inner2">这里是智能和路由器</div></li>
</ul>
<img src="电视.png" class="im">
</div>
</body>
</html>
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
