------------恢复内容开始------------
CSS
一.CSS的优势
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式丰富
- 建议使用独立于html的css文件
- 利用SEO，容易被搜索引擎收录
1 <!--导入CSS文件--> 2 <link rel="stylesheet" href="style.css">
二.三种导入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--2.内部样式--> <style> h1{ color:green; } </style> <!--3.外部样式--> <link rel="stylesheet" href="style.css"> </head> <!--优先级：就近原则,那种样式离元素近就用那种--> <body> <!--1.行内样式:在标签元素中编写style属性，编写样式即可--> <h1 style="color:red">我是标题</h1> </body> </html>
三.选择器
作用：选择页面上的某一个或某一类元素
一.基本选择器：
- 标签选择器
- 类选择器
- id选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器会选择到页面上的所有该标签的元素；格式：标签{}*/ h1{ color:green; } /*类选择器，可以复用；格式：.类名{}*/ .stduy{ color:yellow; } /*id选择器，id必须唯一，不可复用；格式：#id名{}*/ #hh{ color:red; } </style> </head> <!--优先级:不遵循就近原则，id选择器>类选择器>标签选择器--> <body> <h1 class="stduy">学习</h1> <h1 id="hh">学习</h1> <h1>学习</h1> </body> </html>
二.层次选择器
- 后代选择器：当前选中元素下层及下下层等的所有元素
- 子选择器：当前选中元素下层的元素
- 相邻兄弟选择器：当前选中元素相邻的元素（只有一个，下一个）
- 通用兄弟选择器：当先选中元素的所有相邻元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ body p{ background:green; } /*子选择器*/ body>p{ background:red; } /*相邻兄弟选择器*/ .active+p{ background:yellow; } /*通用选择器*/ .active~p{ background:black; } </style> </head> <body> <p class="active">p1</p> <p>p2</p> <p>p3</p> <ul> <li><p>p4</p></li> <li><p>p5</p></li> <li><p>p6</p></li> </ul> </body> </html>
三.结构伪类选择器
<style> /*伪类选择器*/ /*ul的第一个子元素*/ ul li:first-child{ background:green; } /*ul的最后一个子元素*/ ul li:last-child{ background:red; } </style>
四.属性选择器
格式：标签[属性名]{}；标签[属性名=属性值]{}；属性值可用正则匹配；=表示绝对等于；*=表示包含；^=以什么开头；%￥=以什么结尾
四.美化网页元素
一.字体样式
<!--font-family：字体 font-size:字体大小 font-weight：字体粗细 color:字体颜色 --> <style> body{ font-family:楷体; font-size:50px; font-weight:bold; color:green; } </style>
二.文本样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--color:颜色，可用单词，rgb，rgba； text-align:排版 text-indent:首行缩进 line-height:行高 --> <style> h1{ color:rgba(0,255,255,0.9); text-align:center } p{ text-indent:2em; line-height:40px; } /*下划线*/ .l1{ text-decoration:underline; } /*中划线*/ .l2{ text-decoration:line-through; } /*上划线*/ .l3{ text-decoration:overline; } /*超链接去下划线*/ a{ text-decoration:none; } </style> </head> <body> <p class="l1">213</p> <p class="l2">213</p> <p class="l3">213</p> <h1>南山南</h1> <p>你在南方的艳阳里 大雪纷飞 我在北方的寒夜里 四季如春 如果天黑之前来得及 我要忘了你的眼睛 穷极一生 做不完一场梦 他不再和谁谈论相逢的孤岛 因为心里早已荒无人烟 他的心里再装不下一个家 </p> <p> 做一个只对自己说谎的哑巴 他说你任何为人称道的美丽 不及他第一次遇见你 时光苟延残喘 无可奈何 如果所有土地连在一起 走上一生 只为拥抱你 喝醉了他的梦 晚安 你在南方的艳阳里大雪纷飞 我在北方的寒夜里四季如春 如果天黑之前来得及 我要忘了你的眼睛 穷极一生做不完一场梦 大梦初醒 荒唐了一生 </p> </body> </html>
三.文本阴影和超链接伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ text-decoration:none; color:black; } /*鼠标悬停状态*/ a:hover{ color:green; font-size:100px; } /*鼠标按住未释放的状态*/ a:active{ color:yellow; } /*text-shadow:水平偏移，垂直偏移，阴影半径，阴影颜色*/ #name{ text-shadow:5px 5px 5px red; } </style> </head> <body> <a href="#"><img src="../images/ycy.jpg"></a> <p id="name"><a href="#">杨超越</a></p> <p><a href="#"> 超越妹妹</a></p> </body> </html>
四.列表
<!--list-style:none;去掉圆点 list-style:circle； 空心圆 --> <style> ul li{ list-style:circle; } </style>
五.背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width:1000px; height:1000px; border:1px solid red; background-image:url("../images/ycy.jpg"); background-repeat:repeat-x;/*水平平铺*/ background-repeat:repeat-y;/*垂直平铺*/ background-repeat:no-repeat;/*不平铺*/ background-position:100px 100px;/*定位*/ } </style> </head> <body> <div class="div1"></div> </body> </html>
渐变
background-image:linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%);
五.盒子模型
margin：外边距
border：边框
padding：内边距
一.边框
<!--border:粗细，样式：(solid实线，dashed虚线)，颜色--> <style> #box{ width:200px; border:1px dashed red; } </style>
二.内外边距
外边距居中：margin:0 auto;
三.圆角边框
<!--画圆：圆角=宽度的一半--> <style> div{ width:100px; height:100px; border:10px solid red; border-radius:50px; } </style>
阴影
box-shadow:10px 10px 10px yellow;
四.display和浮动
<!--display:block块元素 display:inline行内元素 display:inline-block是块元素但是可以内联在一行 --> <style> div{ width:100px; height:100px; border:10px solid red; display:inline-block; } span{ width:100px; height:100px; border:10px solid red; display:inline-block; } </style>
float：left左浮动；float：right右浮动
父级元素塌陷解决
- 增加父级元素的高度
- 增加一个空的div，清除浮动
<div class="clear"></div> .clear{ clear:both; margin:0; padding:0; }
- overflow:给父级元素增加overflow属性：overflow:hidden;
- 给父类添加一个伪类
#father:after{
content:'';
dispplay:block;
clear:both;
}
display vs float
- display：方向不可控制
- float：父级元素会塌陷
六.定位
1).相对定位
相对原来的位置进行指定的偏移，相对定位始终处在标准文档流中，原来的位置会被保留；
position:relative;
top:-20px;
left:20px;
right:20px;
bottom:-10px;
2).绝对定位
基于XXX定位
- 在没有父级元素定位的前提下，相对于浏览器定位
- 若父级元素存在定位，则相对于父级元素定位
绝对定位不在标准文档流中，原来的位置不会被保留
#father{ position:relative; } #second{ border:1px solid green; background:red; position:absolute; right:30px; }
3)固定定位
position:fixed
4)z-index和透明度
z-index：1；层级，默认是0，最高无限
opacitya：0.5；透明度
------------恢复内容结束------------