一、高度宽度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 100px; width: 100px; background-color: pink; } span { height: 100px; width: 100px; background-color: green; } </style> </head> <body> <div> div1 </div> <span>span1</span> </body> </html>
""" 50%; 宽度高度可以设置百分比,会按照父级标签的高度宽度来计算 但是如果给高度设置百分比，那么必须要求父级标签有固定高度才行 """
二、文本属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ /*所有单词首字母大写*/ text-transform: capitalize; /*单词与单词的间距*/ word-spacing: 20px; /*字符间距*/ letter-spacing: 10px; /*首行缩进*/ text-indent: 150px; height: 100px; background-color: aquamarine; /*文本居中*/ text-align: center; /*行高 让文本占div这么多行*/ /*line-height: 100px;*/ } </style> </head> <body> <div>介绍文本属性介绍文本属性介绍文本属性介绍文本属性 介绍文本属性 <div>hello world hello world hello world hello world </div> <p>hello</p> </div> </body> </html>
a标签中文字装饰
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ /*text-decoration: line-through;*/ /*text-decoration: overline;*/ /*text-decoration: underline;*/ } /* 记住，去除a标签下划线的时候使用 */ a{ text-decoration: none; } </style> </head> <body> <span>闻哥日行一善</span> <a href="">闻哥</a> </body> </html>
三、字体相关
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span { font-size: 20px; /* 字体大小 */ color: blue; /* 字体颜色 */ font-family: '楷体', '宋体'; /* 字体 */ font-weight: 100; /* 字重 字体粗细 100-900，默认是400 */ } </style> </head> <body> <div> 窗前明月光,地上鞋三双! </div> </body> </html>
四、字体对齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { font-size: 20px; /* 字体大小 */ color: blue; /* 字体颜色 */ font-family: '楷体', '宋体'; /* 字体 */ font-weight: 100; /* 字重 字体粗细 100-900，默认是400 */ height: 200px; width: 200px; border: 1px solid red; text-align: center; /* left左对齐，center水平居中，right右对齐 */ /*line-height: 200px;*/ /* 和height相等，文本内容就能垂直居中对齐 */ /*如果既有字体 又有图片想要居中就不能用line-height了*/ /*弹性盒子做垂直居中效果*/ display: flex; aline-items: center; } </style> </head> <body> <div> 窗前明月光,地上鞋三双! </div> </body> </html>
五、背景颜色设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { /*三种方式:*/ /*background-color: red; 英文单词*/ /*background-color: #7969d2; 16进制数表示*/ background-color: rgb(92, 187, 138); /* rgb颜色表示方法 */ /*background-color: rgba(92, 187, 138,0.5); !* rgba加上了透明度，透明度的取值范围0-1 *!*/ height: 100px; width: 100px; color: red; opacity: 0.2; /* 整个标签设置透明度 */ } </style> </head> <body> <div> 窗前明月光,地上鞋三双! </div> </body> </html>
六、背景图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height: 600px; width: 600px; /*background-color: red;*/ /*background-image: url("图片路径");*/ /*background-image: url("nbhlw.jpg");*/ /*background-repeat: no-repeat; !* 是否平铺， 默认是铺满整个标签，no-repeat不平铺，repeat-y:纵向平铺，repeat-x：横向平铺*!*/ /*background-position: left center ;*/ /*background-position: 50px 100px; !* 距离左边的距离和距离上面的距离 *!*/ background: green url("111.png") no-repeat center center; /* 简写形式 */ border: 1px solid red; } </style> </head> <body> <div class="c1"> </div> </body> </html>
七、边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height: 600px; width: 600px; /*border: 1px dashed red; 下面三个简写形式*/ /*border- 10px;*/ /* 线宽 */ /*border-style: solid;*//* 线样式 */ /*border-color: blue;*//* 线颜色 */ /* 四个方向单独设置*/ border-left: 10px solid yellow; /* 单边框的简写形式 */ /*border-left- 10px;*/ /*border-left-style: solid;*/ /*border-left-color: yellow;*/ /*border-right- 10px;*/ /*border-right-style: solid;*/ /*border-right-color: green;*/ } </style> </head> <body> <div class="c1"> </div> </body> </html>
八、列表属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ol,ul{ /*项目符号是 01 02 03*/ /*list-style: decimal-leading-zero*/ /*项目符号是 空心圆*/ /*list-style: circle;*/ /*项目符号是 实心方块*/ /*list-style: square;*/ /*去掉项目符号*/ list-style: none; } </style> </head> <body> <ul> <li>111</li> <li>111</li> <li>111</li> </ul> <!--order list 有序列表 1 2 3--> <ol> <li>111</li> <li>111</li> <li>111</li> </ol> <dl> <dt>第一章</dt> <dd>第一节</dd> <dd>第二节</dd> <dd>第三节</dd> </dl> </body> </html>
九、盒子模型
""" margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制 元素周围空间的间隔， 从而视觉角度上达到相互隔开的目的 padding：用于控制内容与边框之间的距离 border（边框）：围绕在内边距和内容外的边框 content（内容）：盒子的内容，像是文本和图像 """
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { width: 100px; height: 100px; background-color: yellow; margin-bottom: 20px; } .c2 { width: 100px; height: 100px; /*padding: 4px 5px 2px 8px;*/ /* 上右下左 */ padding: 15px 10px; /* 上下、左右 */ /*padding-top: 10px;*/ border: 2px solid purple; margin-top: 40px; /*margin: 10px 15px 5px 8px; !* 上右下左 *!*/ /*margin: 10px 15px; !* 上下、左右 *!*/ } </style> </head> <body> <div class="c1"> </div> <div class="c2"> </div> </body> </html>
注意:如果两个相邻标签都设置了margin两者之间的距离，那么不会累加，而是选最大值为两者的距离
十、display属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { width: 100px; height: 100px; background-color: red; /*display: inline;!* 将块级标签改为内敛标签 *!*/ /*display: inline-block;!* 将标签改为具有内敛标签和块级标签属性效果的标签，可以设置高度宽度，而且不独占一行 *!*/ display: none; /* 隐藏标签,常用！ */ } span { width: 100px; height: 100px; background-color: blue; display: block; /* 将内敛标签改为块级标签 */ } </style> </head> <body> <div class="c1"> 八戒 </div> <span class="c2"> 悟空 </span> <a href="">xxx</a> </body> </html>
十一、伪元素选择器
# 可以用它来清除浮动，避免塌陷
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; border: 1px solid red; } /*div::after{*/ div:after{ content: '?'; } div:before{ content: '*'; } </style> </head> <body> <div> aaaaa </div> </body> </html>
十二、浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .main-left{ height: 100px; width: 100px; background-color: red; float: left; /* 浮动起来的元素，可以设置高度宽度，并且不独占一行 */ } .main-right{ height: 100px; width: 100px; background-color: green; float: right; } .content{ width: 100%; height: 200px; background-color: yellow; } /* 浮动的元素会脱离正常文档流，会造成父级标签塌陷问题，解决塌陷问题有以下几种方法 */ /* 方式1：给父级标签加高度，不常用 */ /*.main{*/ /* height: 100px;*/ /*}*/ /* 方式2，清除浮动 */ /*.content{*/ /* clear: both; !* 我这标签上面不能有浮动的元素盖着我 *!*/ /*}*/ /* 方式3：常用 */ .clearfix:after{ content: ''; display: block; clear: both; } /* 方式4：常用 */ .main{ overflow: hidden; } </style> </head> <body> <!--<div class="main clearfix"> <!– class类值可以写多个 –>--> <div class="main"> <!-- class类值可以写多个 --> aaaaaa <div class="main-left"></div> <div class="main-right"></div> </div> <div class="content"></div> </body> </html>
十三、伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* a标签未访问时设置样式 */ a:link{ color:gold; } /* 点击按下去之后，抬起之前显示样式 */ a:active{ color:red; } /* 网址被访问过之后，显示样式 */ a:visited{ color:green; } /* 鼠标悬浮时 设置样式 */ a:hover{ color:purple; } .c1{ width: 200px; height: 200px; background-color: aqua; } .c1:hover{ background-color: orange; cursor: pointer; /* 鼠标的小手效果 */ /*cursor: help;*/ } </style> </head> <body> <a href="http://www.4399.com">小游戏</a> <div class="c1"> </div> </body> </html>
十四、定位
""" static 静态定位,也就是标签默认 relative: 相对定位,按照自己原来的位置进行移动 absolute: 绝对定位,按照父级标签或者祖先辈儿标签设置了相对定位的标签位置进行移动,如果没有找到相对定位标签,会找到整个文档的位置进行移动 fixed: 固定定位, 按照浏览器窗口的位置进行移动 """
1、相对定位和绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; padding: 0; } .c1{ height: 100px; width: 100px; background-color: red; } .c2{ height: 100px; width: 100px; background-color: green; /*position:relative;*/ /* topleft ightottm四个方向的值来控制标签位置 */ /* 按照自己原来的位置进行移动 */ /* 标签还占据自己原来的空间 */ /* 脱离正常文档流，所以能够覆盖别的标签 */ /*left:50px; !* 距离自己原来的位置左边有100px距离 *!*/ /*top:-100px;*/ /* 绝对定位 */ /* 脱离正常文档流，并且不占自己原来的空间 */ /*如果父级或者祖先辈标签没有设置相对定位，那么绝对定位的元素会按照整个html文档的位置进行移动, 如果父级标签或者祖先辈标签设置了相对定位，那么按照父级标签或者祖先辈标签的位置进行移动 */ position: absolute; left:50px; top:20px; } .cc{ position: relative; margin-left: 100px; } .c3{ height: 100px; width: 100px; background-color: pink; } .c4{ height: 100px; width: 100px; background-color: blue; } </style> </head> <body> <div class="c4"></div> <div class="cc"> <div class="c1"></div> <div class="c2"></div> </div> <div class="c3"></div> </body> </html>
2、固定定位
# 回到顶部示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; height: 800px; } .c2{ background-color: blue; height: 800px; } .c3{ /* 相对于浏览器窗口来设置位置 */ position: fixed; left:40px; bottom: 60px; height: 40px; width: 80px; background-color: aqua; text-align: center; line-height: 40px; border-radius: 50%; } .c3 a{ text-decoration: none; color:black; } </style> </head> <body> <div id="top">顶部位置</div> <div class="c1"></div> <div class="c2"></div> <span class="c3"> <a href="#top">回到顶部</a> </span> </body> </html>
实例：小米商城导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="xx.js"></script>--> <script> </script> <style> body{ margin: 0; padding: 0; } .nav{ height: 40px; background-color: #333; line-height: 40px; } .clearfix:after{ content:''; display: block; clear: both; } .nav-content{ margin-left: 5%; width: 90%; /*overflow: hidden;*/ position: relative; } .nav-content .nav-left{ float: left; height: 40px; } .nav-content .nav-right{ float: right; height: 40px; } .nav-content a{ color: #B0B0B0; text-decoration: none; font-size: 12px; } .nav-content .shugang{ color: #424242; } .nav-content a:hover{ color:#fff; } .cart-part .cart{ display: inline-block; height: 40px; width: 120px; background-color: #424242; text-align: center; } .cart-part .cart:hover{ color: #ff6700; background-color: white; } .cart_list{ height: 100px; width: 320px; position: absolute; right: 0; top:40px; background-color: red; } .cart-part{ float: right; } .cart-part:hover .cart_list{ display: block; } .hide{ display: none; } </style> </head> <body> <div class="nav" id="nav"> <div class="nav-content clearfix"> <div class="nav-left"> <a href="" class="nav-link">小米商城</a> <span class="shugang">|</span> <a href="" class="nav-link">小米</a> <span class="shugang">|</span> <a href="" class="nav-link">小商城</a> <span class="shugang">|</span> <a href="" class="nav-link">小城</a> <span class="shugang">|</span> <a href="" class="nav-link">城</a> <span class="shugang">|</span> <a href="" class="nav-link">小商城</a> <span class="shugang">|</span> <a href="" class="nav-link">商城</a> <span class="shugang">|</span> <a href="" class="nav-link">米商城</a> <span class="shugang">|</span> <a href="" class="nav-link">小米</a> <span class="shugang">|</span> <a href="" class="nav-link">小商城</a> <span class="shugang">|</span> <a href="" class="nav-link">小米商城</a> <span class="shugang">|</span> <a href="" class="nav-link">小米商城</a> <span class="shugang">|</span> <a href="" class="nav-link">小米商城</a> </div> <div class="cart-part"> <a href="" class="nav-link cart">购物车 (0)</a> <div class="cart_list hide"> </div> </div> <div class="nav-right"> <a href="" class="nav-link">登录</a> <span class="shugang">|</span> <a href="" class="nav-link">注册</a> <span class="shugang">|</span> <a href="" class="nav-link">消息通知</a> </div> </div> </div> </body> <!--<script src="xx.js"></script>--> <script> (function(){alert('该吃饭了！')})(); </script> </html>
十五、选择器优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color:red; } /* css继承效果 -- 优先级0 */ /*元素选择器--优先级是1*/ /*优先级相同的，会优先显示后面的*/ span{ color:blue; } /*span{*/ /* color:purple;*/ /*}*/ /*类值选择器优先级为10*/ .c1{ color:yellow; } .c2{ color: pink; } /*id选择器优先级为100*/ #d1{ color: aqua!important; } /*内敛样式优先级为1000*/ /* !important优先级最高 */ /* 多级选择器，优先级累加，但是不进位，意思是11个类值选择器也大不过一个id选择器 */ /*.cc .c1{*/ /* */ /*}*/ </style> </head> <body> <div class="cc"> 低头思姑娘 <span class="c1 c2" id="d1" style="color:orange;"> 少年不知什么贵 </span> </div> </body> </html>