1 CSS字体及文本属性
样式调试工具
样式位置:
盒子模型:
1.1 字体：（font）
/*字体的颜色*/
color: gray;
/*字体的大小*/
font-size: 12px;
/*字体的加粗*/
/*font-weight: bold;*/
/*字体的风格*/
/*font-family: 宋体;*/
/*字体倾斜*/
/*font-style: italic;*
1.2 文本（text）
/*下划线展示*/
text-decoration: underline;
/*去除下划线*/
text-decoration: none;
/*文本居中*/
text-align: center;
1.3 border 属性有三个修饰属性
border-color
border-color:red;
border-top-color:blue;
border-width
border-width: 1px;
border-left-width: 3px;
border-style
border-style: solid
border-bottom-style: solid；
可以使用border统一设置
border: 1px solid red;
border-right: 5px dotted blue;
1.4 边框的风格
测试代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .top{ width: 100%; height: 100px; border: 1px solid red; } .top_a{ /*字体的颜色*/ color: gray; /*字体的大小*/ font-size: 12px; /* /*字体的加粗*/ /*font-weight: bold;*/ /*字体的风格*/ /*font-family: 宋体;*/ /*字体倾斜*/ /*font-style: italic;*/ /*去除下划线*/ text-decoration: none; } a:hover{ color: red; /*下划线展示*/ text-decoration: underline; } .tips{ width: 100%; height: 40px; border: 1px dotted indianred; /*背景颜色*/ background-color: pink; /*文本居中*/ text-align: center; /*行高 行高的高度和div外面的高度一致这时候里面的内容就会垂直居中*/ line-height: 40px; } .center{ width: 100%; height: 500px; border: 1px solid red; /*设置背景图片*/ background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg"); /*设置背景图片不重复*/ background-repeat: no-repeat; /*调整背景图片的位置 X Y*/ background-position: center; /*调整背景图片的大小 宽 高 */ /*background-size: 300px 500px;*/ /*背景颜色 red #f0000 rgb(255,0,0) rgba(255,0,0,.5){包含透明度} */ background-color: rgba(255,0,0,.5); } </style> </head> <body> <!--顶部的位置--> <div class="top"> <a href="" class="top_a">登录页面，调查问卷</a> </div> <!--中间的提示操作--> <div class="tips"> <span>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</span> </div> <div class="center"> </div> </body> </html>
效果：
2 CSS背景
2.1 行高
line-height: 40px;
2.2 背景
/*设置背景图片*/
background-image:
url("http://img30.360buyimg.com/da/jfs/t22399/154/7
65213112/96035/f94f9605/5b17512dN2de9d722.jpg");
/*设置背景图片不重复*/
background-repeat: no-repeat;
/*调整背景图片的位置
X Y*/
background-position: center;
/*调整背景图片的大小 宽 高 */
/*background-size: 300px 500px;*/
/*背景颜色 red
#f0000 rgb(255,0,0)
rgba(255,0,0,.5){包含透明度} */
background-color: rgba(255,0,0,.5);
3 CSS 行块儿元素
3.1 行元素和块元素
行内元素：（多个标签位于同一行）
span font 小标签 img a 等
块元素：（标签可以自动换行的元素是块元素）
div h1-h6 ul p等
4 其他样式
/*调整透明度的属性 0-1*/
opacity: 0.4;
/*超出隐藏 hidden*/
overflow: hidden;
/*行内元素转块级元素inline block none(隐藏)*/
display: block;
测试代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .div_1{ width: 200px; height: 200px; background-color: rgba(255,0,0); color: rgba(0,0,255); /*调整透明度的属性 0-1*/ opacity: 0.4; /*超出隐藏 hidden*/ overflow: hidden; } #span_1{ width: 100px; height: 100px; border: 1px solid red; /*行内元素转块级元素 inline block none(隐藏)*/ display: block; } ul{ float: right; } li{ /*列表的风格去除*/ list-style: none; float:left; /*内边距*/ padding-left: 15px; } </style> </head> <body> <ul> <li><a href="">新闻</a></li> <li><a href="">hao123</a></li> <li><a href="">地图</a></li> <li><a href="">视频</a></li> <li><a href="">贴吧</a></li> <li><a href="">学术</a></li> </ul> <!--<hr /> <div class="div_1"> 我们都是div我们都是div我们都是div我们都是div我们都是div 我们都是div我们都是div我们都是div我们都是div我们都是div 我们都是div我们都是div我们都是div我们都是div我们都是div 我们都是div我们都是div我们都是div我们都是div我们都是div 我们都是div我们都是div我们都是div我们都是div我们都是div </div> <hr /> <span id="span_1">1234</span> <hr /> --> </body> </html>
效果：
浮动效果就是right从右向左浮动最开头的向右去挤，left是从左向右浮动最开头的向左去挤！
