CSS基础 1、什么是CSS
如何学习
1：CSS是什么2：CSS怎么用（快速入门）3：CSS选择器（重点+难点）4：美化页面（文字，阴影，超链接，列表，渐变…）5：盒子模型6：浮动7：定位8：页面动画（特效效果） 1.1、什么是CSSCascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
1.2、发展史CSS1.0
CSS2.0 DIV（块）+ CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画… 浏览器兼容性
1.3、快速入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 规范<style> 可以编写css的代码，每一个声明最好用分号结尾 语法： 选择器{ 声明1； 声明2； 声明3； } --> <!-- <style>--> <!-- h1{--> <!-- color: red;--> <!-- }--> <!-- </style>--> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>我是标题</h1> </body> </html>CSS的优势：
1：内容和表现分离
2：网页结构表现统一，可以实现复用
3：样式十分的丰富
4：建议使用独立于html的css文件
5：利用SEO，容易被搜索引擎收录！
1.4、CSS的三种导入方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: chocolate; } </style> <link rel="stylesheet" href="css/style.css"> </head> <body> <!--优先级：就近原则（外部样式的就近是看html页面的行数）--> <!--行内样式：在标签元素中，编写一个style属性，编写样式即可--> <h1 style="color: red">我是标题</h1> </body> </html>拓展：外部样式的两种写法
链接式：
html
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可--> <h1 style="color: red">我是标题</h1>导入式：
@import是CSS2.1特有的
<!-- 导入式（CSS2.1特有，不过还是推荐使用链接式link） --> <style> @import url("css/style.css"); </style> 2、选择器作用：选择页面上的某一个或者某一类元素
2.1、基本选择器1、标签选择器：选择一类标签 标签{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器：会选择到页面上所有的这个标签的元素*/ h1{ color: #81eeff; background: #ffac7c; border-radius: 24px; } p{ font-size: 80px; } </style> </head> <body> <h1>学Java</h1> <h1>学Java</h1> <p>看路飞</p> </body> </html>2、类选择器 class：选择所有class属性一致的标签，跨标签 .类名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 类选择器的格式 .class的名称{} 好处，可多个标签归类，是同一个class，可以复用 */ .style1{ color: #ffac7c; } .style2{ color: #81eeff; } </style> </head> <body> <h1 class="style1">标题1</h1> <h1 class="style2">标题2</h1> <h1>标题3</h1> <p class="style1">标题4</p> </body> </html>3、ID选择器：全局唯一 #id名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* id选择器:id必须保证全局唯一 #id名称{} 优先级：不遵循就近原则，固定的 id选择器 > class选择器 > 标签选择权 */ .style1{ color: red; } #lufei{ color: yellow; } h1{ color: blue; } </style> </head> <body> <h1 class="style1" id="lufei">标题1</h1> <h1 class="style1">标题2</h1> <h1>标题3</h1> </body> </html> 2.2、层次选择器1、后代选择器：在某个元素的后面 祖爷爷，爷爷，爸爸，你
后代选择器 body p{ background:red; }2、子选择器：一代 儿子
子选择器 body > p{ background:yellow; }3、相邻兄弟选择器：同辈
相邻兄弟选择器：只有一个，相邻（向下） .active + p { background:blue; }4、通用选择器
.active ~ p{ background:red; } 2.3、结构伪类选择器伪类：条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- 避免使用class和id选择器 --> <style> /*ul的第一个子元素*/ ul li:first-child{ background: #02ff00; } /*ul的最后一个子元素*/ ul li:last-child{ background: #023154; } /*选择p1：定位到父元素，选择当前的第一个元素 选择当前p元素的父级元素，选中父级元素的第一个子元素，并且是当前元素才生效 */ p:nth-child(1){ background:#2700ff; } /*选中父元素，下的p元素的第二个，类型*/ p:nth-of-type(1){ background:red; } /*伪类：鼠标移动到元素会显示效果*/ a:hover{ background: yellow; } </style></head><body><a href="index.html">1234564</a><h1>h1</h1><p>p1</p><p>p2</p><p>p3</p><ul> <li>li1</li> <li>li2</li> <li>li3</li></ul></body></html> 2.4、属性选择器（常用）id+class结合~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .demo a{ float: left;/*向左浮动*/ display: block;/*显示为块级元素*/ height: 50px; width: 50px; border-radius: 10px; background: #2700ff; text-align:center;/*文本居中对齐*/ color: gainsboro; text-decoration: none;/*取消A标签下划线*/ margin-right: 5px;/*外边距靠右5px*/ front:bold 20px/50px Arial;/*加粗 字体大小 字体宽高*/ } /*属性名 属性名 = 属性值（可以正则表达式） = 绝对等于 += 包含这个元素 ^= 以这个开头 $= 以这个结尾 */ /*A标签存在id元素的*/ a[id]{ background: yellow; } /*id为first的*/ a[id = first]{ background: yellow; } /*class中有links的元素*/ a[class *= links]{ background: blue; } /*选中href中以http开头的元素*/ a[href^=http]{ background: #81eeff; } </style> </head> <body> <p class="demo"> <a href="http://·" class="links item first" id="first">1</a> <a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a> <a href="images/123.html" class="links item">3</a> <a href="images/123.png" class="links item">4</a> <a href="images/123.jpg" class="links item">5</a> <a href="abc" class="links item">6</a> <a href="/a.pdf" class="links item">7</a> <a href="/abc.pdf" class="links item">8</a> <a href="abc.doc" class="links item">9</a> <a href="abcd.doc" class="links item last">10</a> </p> </body> </html> 3、美化网页元素 3.1、为什么要美化网页1、有效的传递页面信息
2、美化网页，页面漂亮，才能吸引用户
3、凸显页面的主题
4、提高用户的体验
span标签：重点要突出的字，使用span套起来
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #title{ font-size: 50px; } </style></head><body><!--这里把span换成别的名字也可以，但是约定俗成是用span-->欢迎学习<span id="title">Java</span></body></html> 3.2、字体样式 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- front-family：字体 front-size：字体大小 front-weight：字体粗细 color：字体颜色 --> <style> body{ font-family: "Agency FB",楷体; color: #a13546; } h1{ font-size:50px; } .p1{ font-weight:bolder; } </style></head><body><h1>故事介绍</h1><p class="p1">海贼王一般指航海王。 《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品</p><p>TalkOP海道-海贼王论坛-海贼王中文网-航海王论坛-中国最大的海贼王论坛致力于为广大One Piece海贼王(航海王)爱好者提供一个最有爱的交流平台。</p><p>how do i say i love you? how do i tell you i care? how do i tell you i've missed you, and let you know i'm here?</p></body></html> 3.3、文本样式1、颜色 color rgb rgba
2、文本对齐的方式 text-align = center
3、首行缩进 text-indent：2em
4、行高 line-height
5、装饰 text-decoration
6、文本图片水平对齐：vertical-align：middle
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- 颜色： 单词 RGB 0-F RGBA A：0-1（透明度） text-align：排版，居中 text-indent：2em 段落首行缩进（通常用em表示） 行高和块的高度一致，就可以上下居中 --> <style> h1{ color: rgba(0,255,255,0.2); } .p1{ text-indent: 2em; } .p3{ background: blue; height: 300px; line-height: 200px;/*一行的行高200px*/ } /*下划线*/ .l1{ text-decoration: underline; } /*中划线*/ .l2{ text-decoration: line-through; } /*上划线*/ .l3{ text-decoration: overline; } </style></head><body><p class="l1">1234564</p><p class="l2">1234564</p><p class="l3">1234564</p><h1>故事介绍</h1><p class="p1">海贼王一般指航海王。 《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品</p><p>TalkOP海道-海贼王论坛-海贼王中文网-航海王论坛-中国最大的海贼王论坛致力于为广大One Piece海贼王(航海王)爱好者提供一个最有爱的交流平台。</p><p class="p3">how do i say i love you? how do i tell you i care? how do i tell you i've missed you, and let you know i'm here?</p></body></html> <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- 水平对齐 参照物 a，b --> <style> image,span{ vertical-align: middle; } </style></head><body><p> <img src="images/1.jpg" alt="" width="50px" height="50px"> <span>13487sadhui9878</span></p></body></html> 3.4、阴影 /*text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径*/ #price{ text-shadow: #81eeff 5px 5px 2px; } 3.5、超链接伪类正常情况下就用：a，a.hover
/*默认的颜色*/ a{ text-decoration: none; color: black; } /*鼠标悬浮的状态*/ a:hover{ font-size: 20px; color: #02ff00; } /*鼠标按住未释放的状态*/ a:active{ color: yellow; } 3.6、列表 #nav{ background: #fff198; width: 400px; } .title{ background: red; } /* list-style: none：去掉原点 circle：空心圆 decimal：数字 square：正方形 */ ul li{ height: 30px; list-style: none; text-indent: 1em;/*首行缩进*/ } a{ font-size: 14px; text-decoration: none; color: black; } a:hover{ color: orange; text-decoration: underline; } 3.7、背景背景颜色
背景图片
#nav{ background: #fff198; width: 400px; } .title{ background: red; /*背景导入一个方向键图片指定位置 颜色，图片，图片位置，平铺方式 */ background:red url("../images/d.gif") 270px 10px no-repeat; } /* list-style: none：去掉原点 circle：空心圆 decimal：数字 square：正方形 */ ul li{ height: 30px; list-style: none; text-indent: 1em;/*首行缩进*/ /*背景图片定位平铺的第二种写法，三行*/ background-image: url("../images/d.gif"); background-repeat: no-repeat; background-position: 200px 2px; } a{ font-size: 14px; text-decoration: none; color: black; } a:hover{ color: orange; text-decoration: underline; } 3.8、渐变 background-color : #FFFFFFbackground-image:linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%) 4、盒子模型 4.1、什么是盒子模型margin：外边距
padding：内边距
border：边框
4.2、边框1：边框的粗细
2：边框的样式
3：边框的颜色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*body总有一个默认的外边距margin：0*/ /*h1,ul,li,momentabout,body{*/ /* margin: 0;*/ /* padding: 0;*/ /* text-decoration: none;*/ /*}*/ form{ color: #ffac7c; } #app{ /*border: 粗细，样式，颜色;*/ border: red solid 1px; width: 300px; } h2{ font-size: 16px; background-color: #3cbda6; line-height: 30px; margin: 0; } div:nth-of-type(1) > input{ border: deeppink solid 1px; } div:nth-of-type(2) > input{ border: darkcyan dashed 1px;/*dashed：虚线*/ } div:nth-of-type(3) > input{ border: saddlebrown solid 1px; } </style></head><body><div id="app"> <h2>会员登录</h2> <form action="#"> <div> <span>用户名：</span> <input type="text"> </div> <div> <span>密码：</span> <input type="password"> </div> <div> <span>邮箱：</span> <input type="email"> </div> </form></div></body></html> 4.3、内外边距盒子的计算方式：你这个元素到底多大？
margin+border+padding+内容大小
给了一个50*50px的大小，是需要上面这四个全部加起来全部一起，而不是一个内容的大小
<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> form{ color: #ffac7c; } #app{ /*border: 粗细，样式，颜色;*/ border: red solid 1px; width: 300px; margin: 0 auto; } h2{ font-size: 16px; background-color: #3cbda6; line-height: 30px; margin-top: 10px; } input{ border: black solid 1px; } div:nth-of-type(2){ /*这里设置各种方向的宽度时给值的个数分别为不同的效果 上下左右 上下 左右 上 左右 下 上 右 下 左 */ padding: 10px; /*padding: 10px 10px;*/ /*padding: 10px 10px 10px;*/ /*padding: 10px 10px 10px 10px;*/ } </style></head><body><div id="app"> <h2>会员登录</h2> <form action="#"> <div> <span>用户名：</span> <input type="text"> </div> <div> <span>密码：</span> <input type="password"> </div> <div> <span>邮箱：</span> <input type="email"> </div> </form></div></body></html> 4.4、圆角边框边框圆角
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- 左上 右上 右下 左下 --> <style> div{ width: 100px; height: 100px; border:10px solid red; border-radius: 100px; } </style></head><body><div></div></body></html>圆形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 50px; height: 100px; margin: 30px; background: red; border-radius: 50px 0 0 50px; } #div2{ width: 50px; height: 50px; margin: 120px; background: yellow; border-radius: 50px 0 0 0; } </style> </head> <body> <div></div> <div id="div2"></div> </body> </html> 4.5、阴影 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- margin：0 auto 居中 前提：是块元素，有固定的宽度 --> <style> img{ /*display:block 将元素设置为块级元素*/ display: block; margin: 0 auto; width: 300px; height: 300px; border-radius: 100px; /*box-shadow：方向x，方向y，模糊程度，颜色*/ box-shadow: 10px 10px 40px yellow; } </style> </head> <body> <!--alt：图片不能正常输出而输出的数据--> <img src="images/1.jpg" alt=""> </body> </html> 5、浮动 5.1、标准文档流行内元素可以被包含在块级元素中，反之，则不可以
块级元素：独占一行
h1~h6 p div 列表...行内元素：不独占一行
span a img strong... 5.2、display <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- block 块元素 inline 行内元素 inline-block 是块元素，但是可以内联，在一行！ --> <style> div{ width: 300px; height: 200px; border: 1px solid red; display: inline-block; } span{ width: 300px; height: 200px; border: 1px solid red; display: inline-block; } </style> </head> <body> <div> div块 </div> <span> span行 </span> </body> </html>1、这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
5.3、float1、左右浮动 float
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 300px; height: 200px; border: 1px solid red; float: right; } span{ width: 300px; height: 200px; border: 1px solid red; float: right; clear: both; } </style> </head> <body> <div> div块 </div> <div> div2块 </div> <span> span行 </span> </body> </html> 5.4、父级边框塌陷的问题clear
clear:right; 右侧不允许有浮动元素 clear:left; 左侧不允许有浮动元素 clear:both; 两侧不允许有浮动元素 clear:none;解决方案：
1、增加父级元素的高度~
#father{ border:1px #000 solid; height:800px; }2、增加一个空的div标签，清除浮动
<div class="clear"></div> .clear{ clear:both; margin:0; padding:0; }3、overflow
3.1：超出部分隐藏，一般情况下，在页面中，一般溢出后会显示省略号，比如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。
3.2：清除浮动，一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。
3.3：解决外边距塌陷：父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷。
在父级元素中增加一个 overflow:hidden;4、父级添加一个伪类：after
#father:after{ cotent:''; display:block; clear:both; }小结：
1.浮动元素后面增加空div
? 简单，代码中尽量避免空div
2：设置父元素的高度
? 简单，元素假设有了固定的高度，就会被限制
3：overflow
? 简单，下拉的一些场景避免使用
4：父类添加一个伪类：after（推荐）
? 写法稍微复杂一点，但没有副作用，推荐使用！
5.5、对比display
方向不可以控制
float
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
6、定位 6.1、相对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 相对定位 相对于自己原来的位置进行偏移~ --> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0; } #first{ background-color: #a13d30; border: 1px dashed #b27530; position: relative;/*相对定位 上下左右*/ top:-20px; left: 20px; } #second{ background-color: #255099; border: 1px dashed #255066; } #third{ background-color: #1c6699; border: 1px dashed #1c6615; position: relative; bottom: -30px; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>相对定位：position：relative
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留
position: relative;/*相对定位 上下左右*/ top:-20px; left: 20px; 6.2、绝对定位定位：基于xxx定位，上下左右~
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，为我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
? 相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 绝对定位 1、没有父级元素定位的前提下，相对于浏览器定位 2、假设父级元素存在定位，为我们通常会相对于父级元素进行偏移 3、在父级元素范围内移动 相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留 --> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0; position: relative; } #first{ background-color: #a13d30; border: 1px dashed #b27530; position: relative;/*相对定位 上下左右*/ top:-20px; left: 20px; } #second{ background-color: #255099; border: 1px dashed #255066; position: absolute; right: 20px; } #third{ background-color: #1c6699; border: 1px dashed #1c6615; position: relative; bottom: -30px; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html> 6.3、固定定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 1000px; } div:nth-of-type(1){/*绝对定位*/ width: 100px; height: 100px; background: red; position: absolute; right: 0; bottom: 0; } div:nth-of-type(2){/*固定定位*/ width: 50px; height: 50px; background: yellow; position: fixed; right: 0; bottom: 0; } </style> </head> <body> <div>div1</div> <div>div2</div> </body> </html> 6.4、z-index图层~（优先级显示）
z-index：默认是0，最高无限~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="content"> <ul> <li><img src="images/1.jpg" alt=""></li> <li class="tipText">我是路飞海贼王</li> <li class="tipBg"></li> <li>作者：尾田</li> <li>作品：海贼王</li> </ul> </div> </body> </html>opacity:0.5;/背景透明度/
body{ padding: 0; margin: 0; } img{ width: 200px; height: 200px; } #content{ /*当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏。*/ overflow: hidden; margin: 0; padding: 0; height: 250px; width: 250px; border: 1px solid red; } #content ul{ position: relative; } .tipText,.tipBg{ position: absolute; height: 25px; width: 125px; top: 175px; } .tipText{ color: white; z-index: 999;/*图层优先级显示属性*/ } .tipBg{ background: #000; /*opacity: 0.5;*/ /*filter:alpha(opacity=50);版本兼容问题*/ } ul,li{ list-style: none; padding: 0; margin: 0; } 7、动画 8、完结
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
