一.选择器的优先级
优先级
每种选择器都有一个权重值，权重值越大，优先级越高;权重值一样的时候谁后写，谁的优先级高
标签选择器：0001(1)
class选择器：0010(2)
id选择器：0100(4)
群组选择器：单独看每个选择器的权重
后代选择器：每个单独的选择器的权重和
内联样式表的优先级永远最高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div #a1{
color: yellow;
}
#a1{
color: red;
}
.ca1{
color: green;
}
a{
color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<a class="ca1" id="a1" href="" style="color: blueviolet;">百度一下</a>
</div>
</div>
</body>
</html>
二.标准流
css主要用来对网页中的内容进行布局和设置样式
- 标准流：网页中的内容在没有写样式的时候，默认的布局方式，我们就叫标准流
在标准流中不同类型的标签布局方式不一样：
a.如果是块级标签，一个标签占一行(无视宽度)，默认的宽度是父标签的宽度，默认高度是内容的高度，并且设置宽度和高度有效
b.如果是行内标签，一行可以显示多个，默认的宽度和高度都是内容的宽度和高度，设置宽度和高度无效
c.如果是行内块标签，一行可以显示多个，默认的宽度和高度都是内容的宽度和高度，设置宽度和高度有效- 标签的默认分组
块级标签:h1~h6,p,table,ol,dl,li,div...
行内标签:font,input,img,a,select,textarea,span...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1{
background-color: red;
width: 100px;
}
h2{
background-color: green;
}
</style>
</head>
<body>
<h1>1</h1>
<h2>2</h2>
<p style="background-color: darkgray;">我从崖边跌落</p>
<p style="background-color: aqua;">落入星空辽阔</p>
<font style="background-color: brown;">银河不清不浊</font>
<font style="background-color: yellowgreen;">不知何以摆脱</font>
</body>
</html>
三.display属性
display属性值代表的是标签的类型：
1.block ：块标签
2.inline ：行内标签
3.inline-block ：行内块标签
默认情况下，我们的标签只有行内和块的标签，没有行内块的标签。
可以通过修改display属性值来修改标签类型。
注意:使用行内块的时候，有一个没有办法修复的bug。行内块到其他标签之间有一个间隙，而且这个间隙不能消除。
所以不到万不得已不使用行内块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.块标签变成行内标签-->
<p style="background-color: lightpink;display: inline;width: 200px;">春天的风 能否吹来夏天的雨</p>
<p style="background-color: lightpink;display: inline;">秋天的月 能否照亮冬天的雪</p>
<!--2.块标签变成行内块标签-->
<p style="background-color: lightpink;display: inline-block;width: 400px;">夜空的星 能否落向晨曦的海</p>
<p style="background-color: lightpink;display: inline-block;width: 150px; height: 60px;">山间的泉 能否遇上南飞的雁</p>
<!--3.行内标签变成块标签-->
<font style="background-color: lightpink;display: block;width: 200px;">能否早一点 看透命运的伏线</font>
<font style="background-color: lightpink;display: block;width: 150px;height: 80px;">能否不轻易就深陷</font>
</body>
</html>
四.练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color: green;height: 150px;"></div>
<div style="background-color: orange;height: 300px;width: 50%;float: left;"></div>
<div style="background-color: orange;height: 600px;float: right;width: 25%;"></div>
<div style="background-color: pink;width: 25%;height: 600px;float: right"></div>
<div style="background-color: red;width: 50%;height: 300px;float: left;"></div>
</body>
</html>
五.浮动
left：左浮动 - 先上再左
right：右浮动 - 先上再右
- 浮动会脱标(脱离标准流) - 之前标准流中的布局方式无效；
脱离标准流布局方式：所有标签都可以一行显示多个，默认大小是内容的大小，设置宽高有效 - 浮动
布局原则，努力的向浏览器的左上角靠，先上再左
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
float: left;
}
a{
float: left;
}
</style>
</head>
<body>
<!--1.脱标-->
<!--<p style="background-color: chartreuse; width: 300px;">我是段落</p>
<p style="background-color: salmon; width: 300px;">我是段落2</p>
<a style="background-color: royalblue; width: 200px;">我是a标签</a>-->
<!--2.浮动-->
<!--<div style="background-color: seagreen; width: 200px; height: 100px; float: left;"></div>
<div style="background-color: red; width: 300px; height: 120px;">
</div>-->
<!--3.左浮动-->
<!--<div style="background-color: seagreen; width: 200px; height: 100px;"></div>
<div style="background-color: red; width: 300px; height: 120px; float: left;">
</div>-->
<!--<div style="width: 100px; height: 100px; background-color:red; float: left;">div1</div>
<div style="width: 200px; height: 100px; background-color:green; float: left;">div1</div>
<div style="width: 350px; height: 100px; background-color:blue;">div1</div>
<div style="width: 400px; height: 100px; background-color:yellow; float: left;">div1</div>-->
<!--4.右浮动-->
<!--<div style="width: 200px; height: 100px; background-color:green; float: left;">div1</div>
<div style="width: 350px; height: 100px; background-color:blue; float: right;">div1</div>-->
<!--5.布局-->
<div style="height: 150px; background-color: green;"></div>
<div style="height: 300px; width: 50%; background-color: orange; float: left;"></div>
<div style="width: 25%; height: 600px; background-color: deeppink; float: right;"></div>
<div style="width: 25%; height: 600px; background-color: yellowgreen; float: right;"></div>
<div style="width: 50%; height: 300px; background-color: slateblue; float: left;"></div>
</body>
</html>
六.文字环绕
被文字环绕的标签浮动；文字对应的标签不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 200px;height: 100px;float: left;background-color: seagreen;";>
被环绕
</div>
<p style="background-color: yellow;width: 400px;">
春天的风 能否吹来夏天的雨 秋天的月 能否照亮冬天的雪夜空的星 能否落向晨曦的海山间的泉 能否遇上南飞的雁
能否早一点 看透命运的伏线能否不轻易就深陷能否慢一点 挥霍有限的时间能否许我一个永远
可能我撞了南墙才会回头吧可能我见了黄河才会死心吧可能我偏要一条路走到黑吧可能我还没遇见 那个他吧
断掉的弦 能否扯破自缚的茧熄灭的火 能否烧光残留的念梦中的云 能否化作熟悉的脸前世的劫 能否换来今生的缘
能否早一点 相信年少的誓言能否不轻易说再见能否慢一点 感受岁月的缱绻能否许我一次成全可能我撞了南墙才会回头吧
可能我见了黄河才会死心吧可能我偏要一条路走到黑吧可能我还没遇见 那个他吧可能我撞了南墙才会回头吧
可能我见了黄河才会死心吧可能我偏要一条路走到黑吧可能我还没遇见 那个他吧可能我还没忘掉 哪个他吧
</p>
</body>
</html>
七.清除浮动
- 高度塌陷
指的是清除因为浮动而产生的高度塌陷问题 - 父标签不浮动，子标签浮动就会产生高度塌陷问题 - 清除浮动
a.添加空盒子 - 在高度会塌陷的父标签中的最后添加一个空的div，并且设置这个空的div的样式的clear为both
b.overflow - 选中高度塌陷的标签，设置样式的overflow的值为hidden
c.万能清除法 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*清除浮动2*/
/*#div1{
overflow: hidden;
}*/
/*万能清除法*/
#div1:after{
display: block;
content: "";
visibility: hidden;
clear: both;
height: 0;
}
#div1{
zoom: 1;
}
</style>
</head>
<body>
<div style="height: 120px; background-color: brown;"></div>
<div id="div1" style="background-color: seagreen;">
<div style="height: 100px; width: 300px;background-color: sandybrown; float: left;"></div>
<div style="height: 500px; width: 250px;background-color: skyblue; float: right;"></div>
<!--清除浮动1-->
<!--<div style="clear: both;"></div>-->
</div>
<div style="height: 120px; background-color: #9ACD32;"></div>
</body>
</html>
八.定位
1.定位属性
letf - 标签的左边到指定位置的距离（左间距）
right - 标签的右边到指定位置的距离（右间距）
top - 标签的顶部到指定位置的距离（上间距）
bottom - 标签的底部到指定位置的距离(下间距)
2.position属性 - 设置标签定位的时候的参考对象(相对谁去定位)
initial/static(默认值) - 不相对任何对象定位
absolute(绝对定位) - 相对于第一个非initial/static的父标签进行定位
relative(相对定位) - 相对当前标签在标准流中的位置进行定位
(注意：一般把一个标签的position设置为relative是为了让当前标签的子标签可以相对自己定位)
fixed - 相对浏览器进行定位
sticky - 当网页中的内容超过一屏(需要滚动),相对浏览器定位;
当网页中的内容没有超过一屏(不需要滚动)，相对标准流的位置进行定位;(注意：一般只针对最后一个标签)
注意：定位也会让标签脱标(脱流) - 不管怎么脱，标签都是按脱流的方式进行布局(一行显示多个，设置宽高有效，默认大小是内容大小)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*absolute*/
#div1{
position: absolute;
right: -30px;
}
#div2{
position: relative;
/*隐藏子标签超出的部分*/
overflow: hidden;
}
span{
position: absolute;
left: 10px;
}
</style>
</head>
<body>
<!--absolute-->
<div style="width: 500px; height: 400px; background-color: darkorchid;" id="div3">
<div style="width: 300px; height: 300px; background-color: yellowgreen;" id="div2">
<div id="div1" style="width: 100px; height: 100px; background-color: hotpink;">
</div>
<span style="height: 60px; background-color: chocolate;">
横说竖说横说竖说
</span>
</div>
</div>
<!--relative-->
<style type="text/css">
#div5{
position: relative;
left: 100px;
top: 100px;
}
</style>
<div id="div4" style="width: 100px; height: 100px; background-color: sienna">
</div>
<div id="div5" style="width: 100px; height: 100px; background-color: sandybrown">
</div>
<!--3.fixed-->
<style type="text/css">
#div6{
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
<div id="div6" style="width: 150px; height: 80px; background-color: skyblue">
<a href="">回到顶部</a>
</div>
<!--4.sticky-->
<style type="text/css">
#div7{
position: sticky;
bottom: 0px;
}
</style>
<div id="div7" style="width: 100%; height: 60px; background-color: darkkhaki">
</div>
</body>
</html>
九.盒子模块
html中所有在网页上可见的标签都是盒子模型，有固定的结构.
所有可见的标签都是由：content、padding、border和margin组成,其中内容、padding、border是可见的，margin不可见
1.content - a.设置width和height就是在设置content的大小;
b.标签中添加内容也是添加到content中的
c.设置背景颜色，会作用于content
2.padding - a.通过padding相关属性设置padding的大小(4个方向)
b.设置背景颜色，会作用于padding
3.border(边框) - a.通过border相关属性设置border的大小(4个方向)
b.边框的颜色需要单独设置
4.margin - a.通过margin相关属性设置margin的大小
b.不可见，但是占位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
div{
/*1.设置content的大小*/
width: 100px;
height: 100px;
background-color: sandybrown;
/*2.设置padding大小*/
/*a.同时给4个边添加padding*/
/*padding: 20px;*/
/*b.分别给不同的边添加padding*/
padding-left: 20px;
padding-top: 30px;
/*3.border*/
/*a.同时给4个边添加border
* border: 宽度 样式 颜色
* 样式 - solid(实线)/dashed(虚线)/dotted(点划线)/double(双线)
*/
/*border: 6px dashed slateblue;*/
/*b.单独设不同边的边框*/
border-left: 3px solid darkblue;
border-top: 3px dashed yellowgreen;
/*4.margin*/
/*margin: 100px;*/
margin-left: 50px;
}
</style>
<div id="">
<a href="">python</a>
</div>
姓名:<input type="text" name="" id="" value="" style="padding-left: 20px;"/>
</body>
</html>
十.css其他属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="position: sticky;">
<!--1.文字相关属性-->
<style type="text/css">
div{
/*1.字体大小*/
font-size: 30px;
/*2.文字颜色*/
color: violet;
/*3.字体名字*/
font-family: "楷体";
/*4.文字加粗
* bolder(更粗的)/bold(加粗)/normal(常规)/100-900
* 100-400：一般
* 500：常规
* 600-900：加粗
*/
font-weight: bolder;
/*5.文字样式
* italic/oblique - 倾斜
* normal
*/
font-style: italic;
/*6.水平对齐方式
*left(默认) - 左对齐
*right - 右对齐
* center - 居中
* 注意：这个属性是针对标签中的内容(内容可以是文字，也可以是其他的标签)
*/
text-align: left;
/*7.文字行高 - 设置一行文字的高度
*一个标签只有一行内容的时候可以通过设置行高和标签高度相同来让内容在垂直方向居中
* (子标签和父标签不能脱标，否则不能居中)
*/
line-height: 100px;
/*8.文字装饰器
* none - 去掉装饰器
* underline - 添加下划线
* overline - 添加上划线
* line-through - 删除线
*/
text-decoration: line-through;
/*9.首行缩进
*/
text-indent: 2em;
/*10.字间距
*/
letter-spacing: 1em;
}
</style>
<div id="" style="background-color: chartreuse;height: 100px;">
<!--<img src="img/222.ico"/>-->
<!--<span href="">a1<br /></span>
<span href="">a2</span>
<span href="">a3</span>
<span href="">a4</span>-->
水土草木禽兽昆虫麟凤之所止
</div>
<!--2.列表相关属性-->
<style type="text/css">
ul{
/*1.定义符号样式*
* disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)
*/
list-style-type: square;
/*2.定义符号图片*/
list-style-image: url(img/222.ico);
/*3.定义符号位置
* outside
* inside
*/
list-style-position: outside;
}
</style>
<ul>
<li>曼斯坦因</li>
<li>古德里安</li>
<li>隆美尔</li>
</ul>
<style type="text/css">
#bg{
/*1.设置背景图
*将指定的图片作为当前标签的背景
*/
background-image: url(img/6.png);
/*2.背景图是否平铺
* repeat(默认) - 当背景图比标签小的时候，背景图会重复渲染，直到将标签全部铺满
* no-repeat - 背景图只渲染一次
*/
background-repeat: no-repeat;
/*3.背景图的位置
* x坐标 - 数值/left/right/center
* y坐标 - 数值/top/bottom/center
*
*/
background-position-x: right;
background-position-y: top;
}
</style>
<div id="bg" style="width: 600px;height: 500px;background-color: silver;">
</div>
</body>
</html>
