CSS学习小结
一、CSS简介
1.CSS:cascading style sheet,层叠级联样式表。涉及字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动等设计。样式通常保存在外部的 .css 文件中,只需编辑简单的 CSS 文档即可改变所有页面的布局和外观。
2.发展史
css1.0
css2.0:div css,html与css结构分离,SEO
css2.1:浮动、定位
css3.0:圆角、边框、阴影、动画…… 浏览器兼容性
3.css导入方式
行内样式
内部样式
外部样式
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--内部样式--> <style> h1{ color: aqua; } </style> <link rel="stylesheet" href="css/style.css"> </head> <body> <!--行内样式:在标签中,编写style属性--> <h1 style="color: red">标题</h1> </body> </html>
style.css
/*外部样式*/ h1{ color: chartreuse; } /*优先级:采取就近原则,行内样式 \ 内部样式 \ 外部样式*/
二、CSS选择器
1.作用:选择页面上的某一个或者某一类元素
2.基本选择器
标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器会选择所有的该标签*/ h1{ color: #aa1133; } p{ font-size: 80px; } </style> </head> <body> <h1>二月</h1> <h1>二月</h1> <p>四日</p> </body> </html>
类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器的格式 .class的名称{}*/ .june{ color: blueviolet; } .bw{ color: chartreuse; } </style> </head> <body> <h1 class="june">one</h1> <h1 class="bw">two</h1> <h1 class="june">three</h1> </body> </html>
id选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器的格式 #id名称{} id保证全局唯一*/ #bw{ color: blueviolet; } #june{ color: chartreuse; } h1{ color: darksalmon; } </style> </head> <body> <h1 id="june">one</h1> <h1 id="bw">two</h1> <h1>three</h1> <h1>four</h1> </body> </html>
3.高级选择器
层次选择器:后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器:某个元素之后*/ ul p{ background: #aa1133; } /*子选择器:只有后面一代*/ body>p{ background: chartreuse; } /*相邻兄弟选择器:相邻向下的一个元素*/ .active p{ background: coral; } /*通用兄弟选择器:当前元素向下的所有元素*/ .active~p{ background: blueviolet; } </style> </head> <body> <p>p1</p> <p class="active">p2</p> <p>p3</p> <ul> <li> <p>p4</p> </li> <li> <p>p5</p> </li> <li> <p>p6</p> </li> </ul> <p>p7</p> <p>p8</p> </body> </html>
结构伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--避免使用id、class选择器--> <style> /*ul的第一个子元素*/ ul li:first-child{ background: blueviolet; } /*ul的第一个子元素*/ ul li:last-child{ background: chartreuse; } /*选中P3:定位到父元素,选择当前第n个元素*/ p:nth-of-type(3){ 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> </body> </html>
属性选择器
<!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: blue; text-align: center; color: grey; text-decoration: none; margin-right: 5px; font: bold 20px/50px Arial; } /*存在id属性的元素 a[]{}*/ a[id]{ background: coral; } /* =绝对等于 *=通配,包含该元素 ^=以该元素开头,$=以该元素结尾 */ a[class*="links"]{ background: aqua; } </style> </head> <body> <p class="demo"> <a href="http://www.baidu.com" class="links item first" id="first">1</a> <a href="" class="links item active" target="_blank" title="text">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>
三、字体样式
1.span
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #title1{ font-size: 50px; } </style> </head> <body> <!--span:重点要突出的字,用span包裹起来--> 欢迎学习 <span id="title1">Java</span> </body> </html>
2.字体样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> /* font-family:字体 font-size:大小 font-weight:粗细 color:颜色 */ <style> body{ font-family: 微软雅黑; } h1{ font-size: 50px; } .p1{ font-weight: bold; color: #678000; } </style> </head> <body> <h1>内容简介</h1> <p class="p1">故事写的是东京一位名叫岛村的舞蹈艺术研究家,三次前往雪国的温泉旅馆,与当地一位名叫驹子的艺妓、一位萍水相逢的少女叶子之间发生的感情纠葛:岛村是一个有着妻室儿女的中年男子,坐食遗产,无所事事,偶尔通过照片和文字资料研究、评论西洋舞蹈。他来到雪国的温泉旅馆,邂逅了艺妓驹子,并被她的清丽和单纯所吸引,甚至觉得她的“每个脚趾弯处都是很干净的”,后来又两度到雪国和驹子相会。</p> <p>小说就是从岛村第二次来雪国开始的。驹子的三弦琴师傅的儿子行男患了肺结核,叶子陪同他从东京乘火车返回汤泽,正好坐在第二次去会驹子的岛村对面。岛村透过车窗欣赏黄昏的雪景,却看到映现在车窗上的美丽的叶子,不禁喜欢上了这个美少女。因而在他和驹子、叶子之间,构成了一种微妙的情感关系。小说最终以叶子的意外去世而告终。</p> </body> </html>
3.文本样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- text-align:排版,一般选居中 text-indent:段落首行缩进 height:块高 line-height:行高 当行高和块高一致,就能上下居中 --> <style> h1{ color: #aa1133; text-align: center; } .p1{ text-indent: 2em; } .p2{ background: #00ff45; height: 300px; line-height: 50px; } .l1{ text-decoration: underline; } .l2{ text-decoration: line-through; } .l3{ text-decoration: overline; } /*a标签去除下划线*/ a{ text-decoration: none; } </style> </head> <body> <p class="l1">123456789</p> <p class="l2">123456789</p> <p class="l3">123456789</p> <h1>内容简介</h1> <p class="p1">故事写的是东京一位名叫岛村的舞蹈艺术研究家,三次前往雪国的温泉旅馆,与当地一位名叫驹子的艺妓、一位萍水相逢的少女叶子之间发生的感情纠葛:岛村是一个有着妻室儿女的中年男子,坐食遗产,无所事事,偶尔通过照片和文字资料研究、评论西洋舞蹈。他来到雪国的温泉旅馆,邂逅了艺妓驹子,并被她的清丽和单纯所吸引,甚至觉得她的“每个脚趾弯处都是很干净的”,后来又两度到雪国和驹子相会。</p> <p class="p2">小说就是从岛村第二次来雪国开始的。驹子的三弦琴师傅的儿子行男患了肺结核,叶子陪同他从东京乘火车返回汤泽,正好坐在第二次去会驹子的岛村对面。岛村透过车窗欣赏黄昏的雪景,却看到映现在车窗上的美丽的叶子,不禁喜欢上了这个美少女。因而在他和驹子、叶子之间,构成了一种微妙的情感关系。小说最终以叶子的意外去世而告终。</p> <a href="http://www.baidu.com"></a> </body> </html>
四、列表样式
无序列表 ul - 列表项标记用特殊图形(如小黑点、小方框等)
有序列表 ol - 列表项的标记有数字或字母
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表样式</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="nav"> <h1 class="title">全部商品分类</h1> <ul> <li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li> <li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li> <li><a href="#">电脑</a> <a href="#">办公</a></li> <li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li> <li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li> <li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li> <li><a href="#">食品饮料</a> <a href="#">保健食品</a></li> <li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li> </ul> </div> </body> </html>
style.css
#nav{ width: 300px; background: #a0a0a0; } .title{ font-size: 18px; font-weight: bold; text-indent: 1em; line-height: 35px; background: #ff0000; } ul{ background: #a0a0a0; } /* list-style: none:去掉圆点 circle:空心圆 decimal:数字 square:正方形 */ ul li{ height: 30px; list-style: none; text-indent: 1em; } a{ text-decoration: none; font-size: 14px; color:#000000; } a.hover{ color: orange; text-decoration: underline; }
五、定位
默认情况
<!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 #666666; padding: 0; } #first{ background-color: #ff0055; border: 1px solid #ff0000; } #second{ background-color: #ff9955; border: 1px solid #ff990e; } #third{ background-color: #f4fc55; border: 1px solid #f4fc36; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>
相对定位
<!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 #666666; padding: 0; } #first{ background-color: #ff0055; border: 1px solid #ff0000; position: relative;/*相对定位*/ top: -20px; left: 20px; } #second{ background-color: #ff9955; border: 1px solid #ff990e; } #third{ background-color: #f4fc55; border: 1px solid #f4fc36; position: relative;/*相对定位*/ right: 20px; bottom: -20px; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>
绝对定位
<!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 #666666; padding: 0; } #first{ background-color: #ff0055; border: 1px solid #ff0000; } #second{ background-color: #ff9955; border: 1px solid #ff990e; position: absolute; } #third{ background-color: #f4fc55; border: 1px solid #f4fc36; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>
固定定位
<!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-color: red; position: absolute; right: 0; bottom: 0; } div:nth-of-type(2){ /*固定定位*/ width: 50px; height: 50px; background-color: yellow; position: fixed; right: 0; bottom: 0; } </style> </head> <body> <div>div1</div> <div>div2</div> </body> </html>
赞 (0)