块元素【p,h1-h6,form,hr,dir,dl,div,ol,ul,table,li...】无论内容多少独占一行，可以容纳其他内联元素或者其他块元素
行内元素【a，em,br,img,input,】凭借内容撑开宽度，行内元素只能容纳文本或者其他行内元素
嵌套后css无法识别不承认父子关系：
p标签无法嵌套块元素
h系列不能嵌套h系列
css导入方式
导入式：CSS2.1
<style>
@import url("css.css")
</style>内部样式：
<style>
/*内部样式*/
h1{
color:rgb(217, 102, 102);
}
</style>行内样式，分号结尾：
<h1 style="color:aqua">H1标签</h1> <!--行内样式-->连接式：
<link rel="stylesheet" href="css.css"><!--外部样式-->优先级：就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css.css"><!--外部样式-->
<style>
/*内部样式*/
h1{
color:rgb(217, 102, 102);
}
</style>
</head>
<body>
<h1 style="color:aqua">H1标签</h1> <!--行内样式-->
<h1 style="color:green">H1标签</h1> <!--行内样式-->
<h1>H1标签</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*内部样式*/
h1{
color:rgb(217, 102, 102);
}
</style>
<link rel="stylesheet" href="css.css"><!--外部样式-->
</head>
<body>
<h1 style="color:aqua">H1标签</h1> <!--行内样式-->
<h1 style="color:green">H1标签</h1> <!--行内样式-->
<h1>H1标签</h1>
</body>
</html>
选择器
标签选择器：会选择所有该标签元素
<style>
h1{
color: blue;
font-size: 66px;
line-height: 90px;
background: #dedefb;
border-radius: 11px;
}
p{
color: aqua;
font-size: 88px;
line-height: 120px;
background: #dedefb;
border-radius: 11px;
}
</style>
</head>
<body>
<h1>h1标签</h1>
<h1>h1标签</h1>
<p>p标签</p>
<p>p标签</p>
<p>p标签</p>
类选择器： .class名称{} 不同标签可以归为同一class实现复用 跨标签
.h-p01{
color: blue;
font-size: 66px;
line-height: 90px;
background: #dedefb;
border-radius: 11px;
}
.p01{
color: aqua;
font-size: 88px;
line-height: 120px;
background: #dedefb;
border-radius: 11px;
}
</style>
</head>
<body>
<h1>h1标签</h1>
<h1 class="h-p01">h1标签</h1>
<p class="h-p01">p标签</p>
<p>p标签</p>
<p class="p01">p标签</p>
id选择器： id保持唯一
#h1-001{
color: blue;
font-size: 66px;
line-height: 90px;
background: #dedefb;
border-radius: 11px;
}
</style>
</head>
<body>
<h1>h1标签</h1>
<h1 id="h1-001">h1标签</h1>
<h1>h1标签</h1>
<h1>h1标签</h1>
选择器优先级：
id选择器>class选择器>标签选择器
#h1-001{
color: blue;
font-size: 66px;
line-height: 90px;
background: #dedefb;
border-radius: 11px;
}
.h1-01{
color: aqua
}
h1{
}
</style>
</head>
<body>
<h1>h1标签</h1>
<h1 id="h1-001" class="h1-01">h1标签</h1>
<h1>h1标签</h1>
<h1 class="h1-01">h1标签</h1>
.h1-01{
color: aqua
}
h1{
}
</style>
</head>
<body>
<h1>h1标签</h1>
<h1 id="h1-001" class="h1-01">h1标签</h1>
<h1>h1标签</h1>
<h1 class="h1-01">h1标签</h1>
层次选择器
后代选择器：锁定某元素内所有该元素 某元素 空格 该元素 { }
li p{
background:aqua
}
</style>
</head>
<body>
<p>p标签1
<li>
01
<p>
p1-1
<h6>
h6 1-1
<p>p2-1</p>
</h6>
</p>
<h5>
h5 1-1
<p>p2-2</p>
</h5>
</li>
<li>
02
<p>p1-2</p>
</li>
<li>
03
<p>p1-3</p>
</li>
</p>
<p>p标签2</p>
<p>p标签3</p>
<p>p标签4</p>
子选择器：锁定某元素下一层内所有该元素 某元素 > 该元素 { }
li>p{
background:aqua
}
</style>
</head>
<body>
<p>p标签1
<li>
01
<p>
p1-1
<h6>
h6 1-1
<p>p2-1</p>
</h6>
</p>
<h5>
h5 1-1
<p>p2-2</p>
</h5>
</li>
<li>
02
<p>p1-2</p>
</li>
<li>
03
<p>p1-3</p>
</li>
</p>
<p>p标签2</p>
<p>p标签3</p>
<p>p标签4</p>
向下相邻选择器：锁定某元素该层内或外层或该层向下相邻的该元素 某元素 + 该元素 { }
.label+li{
background:aqua;
}
</style>
</head>
<body>
<p class="label">p标签1
<li>
01
<p>
p1-1
<h6>
h6 1-1
<p>p2-1</p>
</h6>
</p>
<h5>
h5 1-1
<p>p2-2</p>
</h5>
</li>
<li>
02
<p>p1-2</p>
</li>
<li>
03
<p>p1-3</p>
</li>
</p>
<p class="label">p标签2</p>
<li>000</li>
<p class="label">p标签3</p>
<p class="label">p标签4</p>
<p>p标签5</p>
通用选择器：锁定某元素该层内或外层所有或该层向下的所有该元素 某元素 ~ 该元素 { }
.label ~ li{
background:aqua;
}
</style>
</head>
<body>
<p class="label">p标签1
<p>p000<li>0li</li></p>
<li>
01
<p>
p1-1
</p>
<h5>
h5 1-1
<p>p2-2</p>
</h5>
</li>
<li>
02
<p>p1-2</p>
</li>
<li>
03
<p>p1-3</p>
</li>
</p>
<p class="label">p标签2</p>
<li>000</li>
<p>p标签3</p>
<p>p标签4</p>
<li>001</li>
<p>p标签5</p>
结构伪类选择器
x 空格 y : first-child { } x 空格 y : last-child { } x子类下的第一【最后】个y
ul li:first-child{
background:aqua;
}
ul li:last-child{
background:blue;
}
body p:first-child{
background:red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
x : nth-child ( num ) x父级元素下的第num个【并且是 x 类型才生效】
p:nth-child(2){
color:red;
}
</style>
</head>
<body>
<h3>h3</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
x : nth-of-type ( num ) x父级元素下同x类型的第num个
p:nth-child(2){
color:red;
}
p:nth-of-type(2){
background:aqua;
}
</style>
</head>
<body>
<h3>h3</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
hover 鼠标悬停后
a:hover{
color:aqua;
}
active 左键单击未释放
a:active{
color:red;
}link 未访问
a:link{
color:red;
}visited 已访问
a:visited{
color:red;
}属性选择器
包含空格分隔的属性值 【~=】
包含连字符分隔的属性值 【|=】
包含能 分割出来 该属性值【*=】
属性的前几个字母是该属性值【^=】
属性的后几个字母是该属性值【$=】
x [ 属性名称 / 属性名称=属性值【正则】 ] { } x标签有该属性或者【属性值匹配的】
a[id]{
background:red;
}
</style>
</head>
<body>
<p class="demo">
<a href="http:www.baidu.com" class="links item first" id="first">1</a>
<a href="dt" class="links item active" target="_blank" title="test">2</a>
<a href="rtd.img" class="links item">3</a>
<a href="yrytdrd.html" class="links item">4</a>
<a href="yftydc">5</a>
<a href="vtdeswa.png">6</a>
<a href="gyugsgfiudoc">7</a>
<a href="suhfiyu.pdf">8</a>
<a href="sgyureui.mp4">9</a>
<a href="shguihe.ppp" class="links item last">10</a>
</p>
a[id=first]{
background:gray;
}
a[class~=item]{
background:gray;
}
a[href^=http]{
background:gray;
}
a[href$=png]{
background:gray;
}
文字样式
font-family 字体
font-size 字体大小
color 字体颜色
font-weight 字体粗细
font 字体风格【斜体...】、字体粗细、字体大小、字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font-family:楷体;
}
h3{
font-size:30px;
color:aqua;
}
p:nth-of-type(3){
font-weight:900;
}
p:last-child{
font: oblique bolder 20px "宋体";
}
</style>
</head>
<body>
<h3>系统科学</h3>
<p>在控制论中，“控制”的定义是：为了“改善”某个或某些受控对象的功能或发展，需要获得并使用信息，以这种信息为基础而选出的、于该对象上的作用，就叫作控制。</p>
<p>由此可见，控制的基础是信息，一切信息传递都是为了控制，进而任何控制又都有赖于信息反馈来实现。</p>
<p>信息反馈是控制论的一个极其重要 的概念。</p>
<p>通俗他说，信息反馈就是指由控制系统把信息输送出去，又把其作用结果返送回来，并对信息的再输出发生影响，起到制约作用，以达到预定的目的。</p>
<p>信息是指无法预测的实验结果，与物质和能量并列为世界的三大要素，对应物质循环、能量流动和信息传递这三大过程。</p>
</body>
</html>
文本样式
color 【颜色】 1-单词描述【gray，red，aquq】 2-RGB【0-f】【#00FFFF,#FFFFFF】 3-RGBA【0-255；0-1】【rgba(255,255,0,0.3)】
h3{
color:rgba(255,127,127,0.13);
}
p{
color:rgba(255,127,127,0.9);
}
text-align 排版【center,lift,right,start,end】
h3{
text-align:center;
}
text-indent 缩进【2em】 em单位字体大小 一般为16px
p:nth-of-type(1){
text-indent:2em;
}
height 决定边界下限 line-height 决定边界上限【与上一行基线间的距离】
两者相等时上下居中
p:nth-of-type(4){
background:gray;
height:40px;
line-height:40px;
}
p:nth-of-type(4){
background:gray;
height:60px;
line-height:40px;
}
p:nth-of-type(4){
background:gray;
height:40px;
line-height:60px;
}
下划线、上划线、中划线，去划线
h3{
text-decoration:line-through;
}
h2{
text-decoration:overline;
}
h1{
text-decoration:underline;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<h3>系统科学</h3>
<h2>系统科学</h2>
<h1>系统科学</h1>
<a href="">11102</a> 
水平对齐 对象一，对象二 {
vertical-align:middle;
}
<p>
<img src="../../images/s.jpg" alt="" height="160px" weight="160px"><span>二向箔打击</span>
</p>
img,span{
vertical-align:middle;
}
text-shadow 【阴影】阴影颜色 水平偏移量 垂直偏移量 模糊半径
body{
text-shadow: aqua 10px 4px 2px ;
}
列表样式
list-style
li:nth-of-type(2){
list-style:none;
}
li:nth-of-type(3){
list-style:circle;
}
li:nth-of-type(4){
list-style:decimal;
}
</style>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
背景图像
background-image:url("xxxxxxx") 背景图片
background-repeat 平铺方式【repeat-x、repeat-y、no-repeat、spac、repeat】
div{
width:911px;
height:908px;
border:2px solid rgb(57, 140, 241);
background-image:url("../../images/k1.png");
}
body div:nth-of-type(1){
background-repeat:repeat-x;
}
body div:nth-of-type(2){
background-repeat:repeat-y;
}
body div:nth-of-type(3){
background-repeat:no-repeat;
}
body div:nth-of-type(4){
background-repeat:space;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
background【颜色、图片、图片位置（x，y）、平铺方式】
div{
width:911px;
height:908px;
border:2px solid rgb(57, 140, 241);
background: red url("../../images/k1.png") 450px 450px no-repeat;
}
</style>
</head>
<body>
<div></div>
渐变颜色背景 <<=点击此处可帮助实现以下效果
div{
width:911px;
height:908px;
background-color: #4158D0;
background-image: linear-gradient(180deg, #4158D0 11%, #FFCC70 72%, #e61818 90%);
}
</style>
</head>
<body>
<div></div>
盒子模型
margin 外边距
padding 内边距
border 边框 粗细 样式 颜色【1px solid aqua】
<div class="c1">
<h4>登录</h4>
<form action="#">
<div><span>邮箱</span>
<input type="email"></div>
<div><span>密码</span>
<input type="text"></div>
</form>
</div>margin 外边距 赋一个值表示上下左右同为这个值 赋两个值是【上下为第一个】【左右为第二个】 附四个值分别表示上下左右 【auto】居中
.c1{
margin:0 auto;
}
圆角边框与盒子阴影
border-radius 圆角边框半径
div:nth-of-type(1){
border-radius:30px;
}
div:nth-of-type(2){
border-radius:30px 80px;
}
box-shadow 同text-shadow
div:nth-of-type(2){
border-radius:0px 80px;
box-shadow:aqua 10px 13px 2px;
}
浮动
display 【block】块、【inline】行内元素、【inline-block】既可以有width，height属性，又可以不独占一行 【none】消失
行内元素 直接赋width，height属性无效
body,div,span{
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
border:1px solid skyblue;
}
span{
width:100px;
height:50px;
border:1px solid skyblue;
}
</style>
</head>
<body>
<div>div块</div>
<span> span</span>
span{
width:100px;
height:50px;
border:1px solid skyblue;
display:block;
}
div{
width:100px;
height:100px;
border:1px solid skyblue;
display:inline;
}
div{
width:100px;
height:100px;
border:1px solid skyblue;
display:inline-block;
}
span{
width:100px;
height:50px;
border:1px solid skyblue;
display:inline-block;
}
div{
width:100px;
height:100px;
border:1px solid skyblue;
display:none;
}
float
左右浮动时在外边缘或者另一个浮动盒子停止
span{
width:200px;
height:50px;
border:1px solid skyblue;
display:inline-block;
}
.n{
width:200px;
height:100px;
border:1px solid skyblue;
display:inline-block;
}
</style>
</head>
<body>
<div class="w">
<span> span1</span>
<div class="n">div块1</div>
<div class="n">div块2</div>
<span>span2</span>
</div>
div[class=n]:nth-of-type(1){
float:right;
}
div[class=n]:nth-of-type(1){
float:right;
}
span:nth-of-type(1){
float:right;
}
父级边框塌陷 与 clear
clear 【both】清除该标签之前的两侧浮动，自身另起一行 【left】左 【right】右 【none】
在不指定父级边框宽高时，父级边框内某一元素浮动时，父级边框会忽视该元素【可能造成父级边框塌陷】；当所有元素都浮动时，父级边框会完全塌陷。
<body>
<div class="w">
<span class="n1"> span1</span>
<div class="n2">div块1</div>
<div class="n3">div块2</div>
<span class="n4">span2</span>
</div> .n1{
width:50px;
height:50px;
border:2px solid;
}
.n2{
width:70px;
height:50px;
border:2px solid;
}
.n3{
width:60px;
height:80px;
border:2px solid;
}
.n4{
width:90px;
height:50px;
border:2px solid;
}
.w{
border:2px solid red;
}
.n1,.n2,.n3,.n4{
display:inline-block;
}
.n3{
float:right;
}
.n1,.n2,.n3,.n4{
float:right;
}
.n4 clear:both; 清除【n4】之前的浮动 忽略n4前的浮动在下一行开始操作
.w{
border:2px solid red;
}
.n1,.n2,.n3,.n4{
display:inline-block;
}
.n1,.n2,.n3,.n4{
float:right;
}
.n4{
clear:both;
}
n2清除了n1的浮动；n2在下一行浮动，n3,n4在n2后继续浮动
.n2{
clear:both;
}
每个元素都清除了自己前的浮动；自己在下一行开始自身的浮动
.n1,.n2,.n3,.n4{
clear:both;
}
解决父级边框塌陷
1-设置父级边框高度
.w{
height:100px;
}
2-在父级边框内部最后加上一行个空div标签，并对他clear：both
.w{
border:2px solid red;
}
.n1,.n2,.n3,.n4{
display:inline-block;
}
.n1,.n2,.n3,.n4{
float:right;
}
.end{
clear:both;
}
<body>
<div class="w">
<span class="n1"> span1</span>
<div class="n2">div块1</div>
<div class="n3">div块2</div>
<span class="n4">span2</span>
<div class="end"></div>
</div>
overflow
div{
width:160px;
height:100px;
border:2px solid red;
}
</style>
</head>
<body>
<div>
<p>至于为什么量变会导致质变，其实也很简单，其实这种变，并不是观察对象真的发生了改变，只是我们的一种错觉而已，当观察对象达到一定数量之后，它们之间会按照，我们已经研究透了的，个体的规律进行影响，但因为这种个体实在太多，这使得我们的思维速度再也跟不上他们之间的影响速度，这时再按照个体的规律去推演就会感觉混乱不堪，一团乱麻，这时我们不得不在宏观的角度总结出新的规律，而这种规律很可能和一个个体的规律大不相同，就好像发生了质变一样。</p>
</div>
overflow:hidden 隐藏超出范围的内容
div{
overflow:hidden;
}
overflow:scroll 在该范围显示，并加上滚动条
div{
overflow:scroll;
}
3-在父级元素上加overflow：hidden【与上面例子有区别；这里没有设置宽高】
.w{
border:2px solid red;
overflow:hidden;
}
4-父级元素添加after伪类，添加空内容，设为block，清除浮动【同2】
.w:after{
content:'';
display:block;
clear:both;
}
相对定位：position:relative
相对于自身位置做出偏移
.father,.n1,.n2,.n3,body{
margin:20px;
padding:1px;
position:relative;
}
.father{
background:skyblue;
}
.n1{
background:aqua;
top:-10px;
left:20px;
}
.n2{
background:yellow;
top:5px;
right:10px;
}
.n3{
background:gray;
bottom:-20px;
right:30px;
}
<body>
<div class="father">
<div class="n1">盒子1</div>
<div class="n2">盒子2</div>
<div class="n3">盒子3</div>
</div>
绝对定位：position:absolute
某标签加上position:absolute；若父级元素没有定位相对于浏览器定位，否则相对于父级元素定位；父级边框会因为该内部标签的绝对定位而收缩
<div class="father">
<div class="n1">盒子1</div>
<div class="n2">盒子2</div>
<div class="n3">盒子3</div>
</div>父级元素有定位 ，n3相对于父级元素定位
.father,.n1,.n2,.n3,body{
margin:20px;
padding:1px;
}
.father{
background:skyblue;
position:relative;
}
.n1{
background:aqua;
}
.n2{
background:yellow;
}
.n3{
background:gray;
position:absolute;
top:-30px;
}
父级元素没有定位 ；n3相对于浏览器定位
.father,.n1,.n2,.n3,body{
margin:20px;
padding:1px;
}
.father{
background:skyblue;
.n1{
background:aqua;
}
.n2{
background:yellow;
}
.n3{
background:gray;
position:absolute;
top:-30px;
}
固定定位：position：fixed
不随浏览器滚动条滚动
<body>
<div>div1</div>
<div>div2</div>
</body> body{
height:3000px;
}
div:nth-of-type(1){
width:90px;
height:90px;
background:aqua;
position:absolute;
bottom:0;
right:0px;
}
div:nth-of-type(2){
width:60px;
height:60px;
background:skyblue;
position:fixed;
bottom:0;
right:0px;
}
z-index 与 opacity ：x 与 【filter：opacity（x）】x在0-1
<body>
<div class="father">
<li><img src="../../images/s.jpg" alt=""></li>
<li></li>
<li>刘慈欣</li>
</div> .father{
position:relative;
}
li{
list-style:none;
display:inline-block;
}
li:nth-of-type(1){
border:2px solid
}
li:nth-of-type(2){
height:1em;
width:100px;
background:red;
position:absolute;
left:0;
bottom:0;
z-index:0; }
li:nth-of-type(3){
position:absolute;
bottom:0;
left:0;
color:aqua;
}
li:nth-of-type(2){
z-index:1;
} 
li:nth-of-type(2){
z-index:1;
}
li:nth-of-type(3){
z-index:10;
}
li:nth-of-type(2){
z-index:2;
opacity:0.5;
}
li:nth-of-type(1){
opacity:0.5;
}
li:nth-of-type(1){
filter:opacity(0.5);
}
74
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
