快速带你入门css
1.1 文字样式
1 p{ 2 font-size: 30px;/*设置文字大小*/ 3 font-weight: bold;/*文字加粗*/ 4 font-style: italic;/*文字倾斜*/ 5 font-family: 幼圆;/*文字字体*/ 6 }
1.2 文本样式
color 设置颜色,取值可以是单词也可以是十六进制的颜色值
text-align 水平对齐,取值:left/center/right,前提条件:横向位置有多余的空间才可以
vertical-align 垂直对齐,取值:top/middle/bottom
text-decoration:underline,line-through,overline,none 文本修饰,设置下划线,删除线,取消下划线等
line-height 行高,单位px
text-indent 首行缩进,单位:em(字符)或px
1 p{ 2 font-size: 30px;/*设置文字大小*/ 3 font-weight: bold;/*文字加粗*/ 4 font-style: italic;/*文字倾斜*/ 5 font-family: 幼圆;/*文字字体*/ 6 color: #f00;/*十六进制值以#开头+6位数值,当相邻的两个数值相同时,可以省略其中一个 */ 7 text-align: center;/*设置文本的水平对齐方式,前提:有额外的移动空间*/ 8 text-decoration: underline;/*设置或取消下划线,取值:underline,line-through,overline,none*/ 9 line-height:60px;/*行高,设置完成后,文字默认垂直居中*/ 10 text-indent: 2em;/*首行缩进,单位:px,em(字符)*/ 11 } 12 img{ vertical-align: top;/*垂直对齐方式:top,middle,bottom*/ 13 }
1.3 列表项符号
1 li{ 2 list-style-type: none;/*取消列表项符号*/ 3 list-style-image: url("taobaolog.png");/*将列表项符号设置成图片*/ 4 }
1.4 鼠标样式
1 cursor:pointer/*pointer 小手样式,help 帮助的样式 wait 等待的样式*/ 2 span:hover{color: red; text-decoration: underline;cursor: pointer}
1.5 伪类
针对于鼠标的不同时间点,进行的css设置
分类:
:link 未点击之前
:hover 鼠标放上的时候
:active 鼠标点击时
:visited 鼠标访问后
语法:
选择器:伪类名{ css}
案例:
1 li:hover{css} 当鼠标放在li上面时。。。 2 3 li:hover{color: red;text-decoration: underline} 4 5 a:link{color: black;text-decoration: none} 6 a:hover{color: red; text-decoration: underline} 7 a:active{ color: green} 8 a:visited{color: gray}
1.6 DIV及背景属性
div 层标签,用来替代table,实现页面布局
div+css实现页面开发
1 div{ 2 width: 200px; 3 height: 200px; 4 5 background-image: url("taobaolog.png");/*背景图片*/ 6 background-repeat:no-repeat ;/*背景重复:repeat,no-repeat,repeat-x,repeat-y*/ 7 background-position:50px 100px;/*位置的值先水平后垂直*/ 8 }
2. 综合练习案例
复习:
html的基本结构
html的基本标签(标题,段落,换行,水平线,倾斜,加粗,超链接,图片,列表,表格,表单,css(位置,选择器,样式))
3.相关练习
练习1:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 p{ 8 font-size: 30px;/*设置文字大小*/ 9 font-weight: bold;/*文字加粗*/ 10 font-style: italic;/*文字倾斜*/ 11 font-family: 幼圆;/*文字字体*/ 12 color: #f00;/*十六进制值以#开头+6位数值,当相邻的两个数值相同时,可以省略其中一个 */ 13 text-align: center;/*设置文本的水平对齐方式,前提:有额外的移动空间*/ 14 text-decoration: underline;/*设置或取消下划线,取值:underline,line-through,overline,none*/ 15 line-height:60px;/*行高,设置完成后,文字默认垂直居中*/ 16 text-indent: 2em;/*首行缩进,单位:px,em(字符)*/ 17 } 18 img{ vertical-align: top;/*垂直对齐方式:top,middle,bottom*/ 19 } 20 td{ vertical-align:top;} 21 li{ 22 list-style-type: none;/*取消列表项符号*/ 23 list-style-image: url("taobaolog.png");/*将列表项符号设置成图片*/ 24 } 25 span{text-align: center; 26 } 27 /* tr{text-align: center}*/ 28 li:hover{color: red;text-decoration: underline} 29 a:link{color: black;text-decoration: none} 30 a:hover{color: red; text-decoration: underline} 31 a:active{ color: green} 32 a:visited{color: gray} 33 span:hover{color: red; text-decoration: underline;cursor: pointer} 34 </style> 35 </head> 36 <body> 37 <a href="https://www.jd.com">京东</a><br> 38 <a href="https://www.taobao.com">淘宝</a><br> 39 <span>拼夕夕</span> 40 <ul> 41 <li>列表内容</li> 42 <li>列表内容</li> 43 <li>列表内容</li> 44 <li>列表内容</li> 45 <li>列表内容</li> 46 </ul> 47 <span>这是span标签</span> 48 <p>这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容 49 这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容 50 这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容 51 这是p标签的内容这是p标签的内容这是p标签的内容</p> 52 <a href="https://www.baidu.com">百度</a> 53 <p> 54 我是文字内容<img src="a3.jpg"> 55 </p> 56 <table border="1" cellspacing="0" height="300px"> 57 <tr> 58 <td> 59 aaaa 60 </td> 61 </tr> 62 </table> 63 </body> 64 </html>
显示结果:
练习2:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 .title{ /*设置一级目录*/ 8 font-size: 18px; 9 font-weight: bold; 10 line-height: 35px; 11 background-color: #0f7cbf; 12 text-indent: 1em; 13 color: white; 14 } 15 .content{ /*设置二级目录*/ 16 font-size: 14px; 17 font-weight: bold; 18 line-height: 30px; 19 background-color: #e4f1fa; 20 color: #0f7cbf; 21 text-indent: 2em; 22 } 23 ul{ 24 font-size: 12px; 25 line-height: 20px; 26 color: #666; 27 list-style-type: none; 28 padding-left: 20px; 29 } 30 .content a:link{ 31 text-decoration: none; 32 color: #0f7cbf; 33 } 34 .content a:hover{ text-decoration: underline} 35 36 li a:link{text-decoration: none; color: #666} 37 li a:hover{color: #f60; text-decoration: underline} 38 .all{ width: 230px} 39 40 </style> 41 </head> 42 <body> 43 <div class="all"> 44 <div class="title">家用电器</div> 45 <div class="content"> 46 <a href="#">大家电</a> 47 </div> 48 <div> 49 <ul> 50 <li><a href="#">平板电视</a> 洗衣机 冰箱</li> 51 <li>空调 烟机/灶具 热水器</li> 52 <li>冷柜/酒柜 消毒柜 家庭影院</li> 53 </ul> 54 </div> 55 <div class="content">生活电器</div> 56 <div> 57 <ul> 58 <li>平板电视 洗衣机 冰箱</li> 59 <li>空调 烟机/灶具 热水器</li> 60 <li>冷柜/酒柜 消毒柜 家庭影院</li> 61 </ul> 62 </div> 63 <div class="content">厨房电器</div> 64 <div> 65 <ul> 66 <li>平板电视 洗衣机 冰箱</li> 67 <li>空调 烟机/灶具 热水器</li> 68 <li>冷柜/酒柜 消毒柜 家庭影院</li> 69 </ul> 70 </div> 71 <div class="content">五金家装</div> 72 <div> 73 <ul> 74 <li>平板电视 洗衣机 冰箱</li> 75 <li>空调 烟机/灶具 热水器</li> 76 <li>冷柜/酒柜 消毒柜 家庭影院</li> 77 </ul> 78 </div> 79 </div> 80 </body> 81 </html>
显示结果:
练习3:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 a { 8 text-decoration: none; 9 color: #666666; 10 font-size: 15px 11 } 12 13 a:hover { 14 text-decoration: none; 15 color: red 16 } 17 18 li { 19 background-image: url("dot_01.gif"); 20 background-repeat: no-repeat; 21 background-position: 20px 2px; 22 /* border-bottom:red 1px solid;*/ 23 } 24 25 li:hover { 26 background-image: url("dot_02.gif"); 27 background-repeat: no-repeat; 28 background-position: 20px 2px 29 } 30 31 span { 32 color: white 33 } 34 35 ul { 36 list-style-type: none; 37 text-indent: 30px; 38 } 39 40 #beauty { 41 background-color: white; 42 width: 400px 43 } 44 45 p { 46 background-color: green 47 } 48 49 body { 50 background-color: #e4f1fa 51 } 52 </style> 53 </head> 54 <body> 55 <div id="beauty"> 56 <p>大家都喜欢买的美容品</p> 57 <ul> 58 <li><a href="#"><span>1</span> 雅诗兰黛即时修护眼部精华霜15ml</a></li> 59 <li><a href="#"><span>2</span> 伊丽莎白雅顿显效复合活肤霜 75ml</a></li> 60 <li><a href="#"><span>3</span> OLAY玉兰油多效修护霜 50g</a></li> 61 <li><a href="#"><span>4</span> 巨型一号丝瓜水320ML</a></li> 62 <li><a href="#"><span>5</span> 倩碧保湿洁肤水2号 200ml</a></li> 63 <li><a href="#"><span>6</span> 比度克细肤淡印霜 30g</a></li> 64 <li><a href="#"><span>7</span> 兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a></li> 65 <li><a href="#"><span>8</span> SK-II护肤精华露 215ml</a></li> 66 <li><a href="#"><span>9</span> 欧莱雅青春密码活颜精华肌底液</a></li> 67 </ul> 68 </div> 69 70 71 </body> 72 </html>
显示结果:
本文来自博客园,作者:自律即自由-,转载请注明原文链接:https://www.cnblogs.com/deyo/p/17232043.html