快速带你入门css
Posted Refeng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了快速带你入门css相关的知识，希望对你有一定的参考价值。
css复习笔记
1. css样式值
1.1 文字样式
p font-size: 30px;/*设置文字大小*/ font-weight: bold;/*文字加粗*/ font-style: italic;/*文字倾斜*/ font-family: 幼圆;/*文字字体*/
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
p font-size: 30px;/*设置文字大小*/ font-weight: bold;/*文字加粗*/ font-style: italic;/*文字倾斜*/ font-family: 幼圆;/*文字字体*/ color: #f00;/*十六进制值以#开头+6位数值,当相邻的两个数值相同时，可以省略其中一个 */ text-align: center;/*设置文本的水平对齐方式,前提:有额外的移动空间*/ text-decoration: underline;/*设置或取消下划线,取值:underline,line-through,overline,none*/ line-height:60px;/*行高，设置完成后，文字默认垂直居中*/ text-indent: 2em;/*首行缩进，单位：px，em(字符)*/ img vertical-align: top;/*垂直对齐方式:top,middle,bottom*/
1.3 列表项符号
li list-style-type: none;/*取消列表项符号*/ list-style-image: url("taobaolog.png");/*将列表项符号设置成图片*/
1.4 鼠标样式
cursor:pointer/*pointer 小手样式，help 帮助的样式 wait 等待的样式*/
span:hovercolor: red; text-decoration: underline;cursor: pointer
1.5 伪类
针对于鼠标的不同时间点，进行的css设置
分类:
:link 未点击之前
:hover 鼠标放上的时候
:active 鼠标点击时
:visited 鼠标访问后
语法：
选择器:伪类名 css
案例:
li:hovercss 当鼠标放在li上面时。。。 li:hovercolor: red;text-decoration: underline a:linkcolor: black;text-decoration: none a:hovercolor: red; text-decoration: underline a:active color: green a:visitedcolor: gray
1.6 DIV及背景属性
div 层标签，用来替代table,实现页面布局
div+css实现页面开发
div width: 200px; height: 200px; background-image: url("taobaolog.png");/*背景图片*/ background-repeat:no-repeat ;/*背景重复:repeat,no-repeat,repeat-x,repeat-y*/ background-position:50px 100px;/*位置的值先水平后垂直*/
2. 综合练习案例
复习：
html的基本结构
html的基本标签(标题,段落,换行，水平线，倾斜，加粗，超链接，图片，列表，表格，表单，css(位置，选择器，样式))
3.相关练习
练习1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p font-size: 30px;/*设置文字大小*/ font-weight: bold;/*文字加粗*/ font-style: italic;/*文字倾斜*/ font-family: 幼圆;/*文字字体*/ color: #f00;/*十六进制值以#开头+6位数值,当相邻的两个数值相同时，可以省略其中一个 */ text-align: center;/*设置文本的水平对齐方式,前提:有额外的移动空间*/ text-decoration: underline;/*设置或取消下划线,取值:underline,line-through,overline,none*/ line-height:60px;/*行高，设置完成后，文字默认垂直居中*/ text-indent: 2em;/*首行缩进，单位：px，em(字符)*/ img vertical-align: top;/*垂直对齐方式:top,middle,bottom*/ td vertical-align:top; li list-style-type: none;/*取消列表项符号*/ list-style-image: url("taobaolog.png");/*将列表项符号设置成图片*/ spantext-align: center; /* trtext-align: center*/ li:hovercolor: red;text-decoration: underline a:linkcolor: black;text-decoration: none a:hovercolor: red; text-decoration: underline a:active color: green a:visitedcolor: gray span:hovercolor: red; text-decoration: underline;cursor: pointer </style> </head> <body> <a href="https://www.jd.com">京东</a><br> <a href="https://www.taobao.com">淘宝</a><br> <span>拼夕夕</span> <ul> <li>列表内容</li> <li>列表内容</li> <li>列表内容</li> <li>列表内容</li> <li>列表内容</li> </ul> <span>这是span标签</span> <p>这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容 这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容 这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容这是p标签的内容 这是p标签的内容这是p标签的内容这是p标签的内容</p> <a href="https://www.baidu.com">百度</a> <p> 我是文字内容<img src="a3.jpg"> </p> <table border="1" cellspacing="0" height="300px"> <tr> <td> aaaa </td> </tr> </table> </body> </html>
显示结果：
练习2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .title /*设置一级目录*/ font-size: 18px; font-weight: bold; line-height: 35px; background-color: #0f7cbf; text-indent: 1em; color: white; .content /*设置二级目录*/ font-size: 14px; font-weight: bold; line-height: 30px; background-color: #e4f1fa; color: #0f7cbf; text-indent: 2em; ul font-size: 12px; line-height: 20px; color: #666; list-style-type: none; padding-left: 20px; .content a:link text-decoration: none; color: #0f7cbf; .content a:hover text-decoration: underline li a:linktext-decoration: none; color: #666 li a:hovercolor: #f60; text-decoration: underline .all width: 230px </style> </head> <body> <div class="all"> <div class="title">家用电器</div> <div class="content"> <a href="#">大家电</a> </div> <div> <ul> <li><a href="#">平板电视</a> 洗衣机 冰箱</li> <li>空调 烟机/灶具 热水器</li> <li>冷柜/酒柜 消毒柜 家庭影院</li> </ul> </div> <div class="content">生活电器</div> <div> <ul> <li>平板电视 洗衣机 冰箱</li> <li>空调 烟机/灶具 热水器</li> <li>冷柜/酒柜 消毒柜 家庭影院</li> </ul> </div> <div class="content">厨房电器</div> <div> <ul> <li>平板电视 洗衣机 冰箱</li> <li>空调 烟机/灶具 热水器</li> <li>冷柜/酒柜 消毒柜 家庭影院</li> </ul> </div> <div class="content">五金家装</div> <div> <ul> <li>平板电视 洗衣机 冰箱</li> <li>空调 烟机/灶具 热水器</li> <li>冷柜/酒柜 消毒柜 家庭影院</li> </ul> </div> </div> </body> </html>
显示结果：
练习3：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> a text-decoration: none; color: #666666; font-size: 15px a:hover text-decoration: none; color: red li background-image: url("dot_01.gif"); background-repeat: no-repeat; background-position: 20px 2px; /* border-bottom:red 1px solid;*/ li:hover background-image: url("dot_02.gif"); background-repeat: no-repeat; background-position: 20px 2px span color: white ul list-style-type: none; text-indent: 30px; #beauty background-color: white; width: 400px p background-color: green body background-color: #e4f1fa </style> </head> <body> <div id="beauty"> <p>大家都喜欢买的美容品</p> <ul> <li><a href="#"><span>1</span> 雅诗兰黛即时修护眼部精华霜15ml</a></li> <li><a href="#"><span>2</span> 伊丽莎白雅顿显效复合活肤霜 75ml</a></li> <li><a href="#"><span>3</span> OLAY玉兰油多效修护霜 50g</a></li> <li><a href="#"><span>4</span> 巨型一号丝瓜水320ML</a></li> <li><a href="#"><span>5</span> 倩碧保湿洁肤水2号 200ml</a></li> <li><a href="#"><span>6</span> 比度克细肤淡印霜 30g</a></li> <li><a href="#"><span>7</span> 兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a></li> <li><a href="#"><span>8</span> SK-II护肤精华露 215ml</a></li> <li><a href="#"><span>9</span> 欧莱雅青春密码活颜精华肌底液</a></li> </ul> </div> </body> </html>
显示结果：
以上是关于快速带你入门css的主要内容，如果未能解决你的问题，请参考以下文章