一.字体的样式
1.字体大小：font-size：40px；
2.字体粗细：font-weight：bold；(加粗）
font-weight：900px；
3.字体倾斜：font-style：italic或者normal；
font-family：“微软雅黑”；
4.复合：（不建议使用）
font： italic 900 700px “微软雅黑” -------顺序不可变
注意：italic和font-weight是可以省略不写的，但是字体大小和font-family必须存在；
二.文本外观
1.段落缩进
p { font-size: 20px; <!-- 文本缩进 --> text-indent: 32px; <!-- 2为当前缩进字体个数，em为当前字体大小 --> text-indent: 2em; }2.有序列表和无序列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 有序列表 --> 你喜欢的水果? <ol type="A"> <li>榴莲</li> <li>香蕉</li> <li>苹果</li> </ol> <!-- 无序列表 :ul>li--> 你喜欢的水果？ <ul type="circle"> <li>榴莲</li> <li>香蕉</li> <li>苹果</li> </ul> <!-- 自定义列表 --> <dl> <dt> 你喜欢的人？ <dd> xiaolajiao </dd> </dt> </dl> </body> </html>结果：
三.iframe框架
1.与超链接的target属性结合
2.与表单的属性进行合并
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> 这是我的页面 <iframe src="http://www.taobao.com" width=" " height=""></iframe> <!-- 与超链接结合 --> <a href="http://www.taobao.com" target="tt"></a> <iframe name ="tt" trameborder="0 width="900" height="300"></iframe> <!-- 与表单的target属性进行合并 --> <form action="https:www.taobao.com/search" target="container"> <input type="text" name="keyword"> <input type="submit" value="搜索"> </form> </body> </html>
四.特殊字符
 ； 空格 < <； 小于 > >； 大于 & &；求和
￥ ¥； 人民币 ©； 版权 ®； 注册商标 °； 摄氏度 ±； 正负号 ×； 乘 ÷； 除 ²； 平方 ³； 立方注意：只要超过一个空格，就需要用特殊字符来代替空格！
因为在浏览器里面，他只默认一个空格，即使你打了很多空格；
五.文本对齐方式
1.text-align：center，left，right
2.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ height: 200px; background-color: pink; /* 文本对齐方式 */ text-align: center; /* 文本溢出 */ /* 行高 单行文本垂直居中:行高=元素高度*/ overflow:auto; } a { color: pink; text-decoration: none; /* 下划线 */ text-decoration: line-through; /* overline是一种文本装饰线的样式,用于在文本的上方添加一条线。 */ text-decoration: overline; } </style> </head> <body> <div>我是一段文字的世界杯</div> <a href="https://www.baidu.com">去百度</a> </body> </html>注意：行内元素无法设置宽高，需要用display转换为行内块元素；
六.list----css具有层叠性；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* css具有层叠行，后面的会覆盖前面的 */ ul li { height: 30px; list-style: none; list-style: circle; } </style> </head> <body> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> <li>我是第4个li</li> <li>我是第5个li</li> <li>我是第6个li</li> <li>我是第7个li</li> </ul> </body> </html>结果：
注意：此时结果显示是以circle的形式出现的，说明将none那个覆盖了；
所以说css具有层叠性，后面的会覆盖前面的，但是是在优先级相同的情况下！
七. 背景.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { /* width: 4000px; */ height: 4000px; /* background-color: aqua; */ /* 插入背景图片 */ background-image: url(../米莱迪.jpg); /* 设置背景图片的重复样式为不重复,也就是说背景图片不平铺,只显示一张 */ background-repeat: no-repeat; /* 背景图片不动,字体内容可移动 */ background-attachment: fixed; /* 定位:一般为center center */ background-position: top left; /* 存在复合属性 */ background: fixed url(../images/code.jpg) no-repeat; } </style> </head> <body> </body> </html>
八. 元素显示模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { /* 行内元素无法设置宽、高 转换为行内块元素 */ /* display: none;隐藏元素，脱离文档流 */ display: none; /* display: inline-block; 将元素转换为行内块元素 */ /* display: inline; 行内元素 */ width: 300px; height: 300px; background-color: pink; } span { display: inline-block; /* display: block; 块元素 */ width: 300px; height: 300px; background-color: rgb(15, 105, 66); } a { display: inline-block; width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <a href="#">彻底</a> <a href="#">彻底</a> <a href="#">彻底</a> <a href="#">彻底</a> <div class="box">11111</div> <div class="box">22222</div> <span>xjsasak</span> </body> </html>结果：
九 .1.边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 300px; height: 300px; background-color: pink; /* 边框角的弧度 */ border-radius: 10px; /* 边框宽度 */ border-width : 20px; /* 边框线性类型:实线性 */ border-style: solid; /* 颜色 */ border-color: rgb(35, 223, 18); /* 复合属性 */ border: 4px solid black; /* border-radius: 50%; 边框弧度*/ /* 左上角 */ border-top-left-radius: 0%; /* 右上角 ,以此类推*/ border-top-right-radius: 0% } </style> </head> <body> <div> 我是一个盒子 </div> </body> </html>2.单元格空隙： cellspacing=“0”-----单元格空隙为0；例如：<table cellspacing="0">
3.合并相邻边框：border-collapse：collapse；例如：
table { /* 合并相邻边框 */ border-collapse: collapse; }4.阴影：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 300px; height: 300px; background-color: pink; /* 阴影 */ /* box-shadow: 20px 20px 10px 10px black; */ } p { /* 阴影 */ text-shadow: red 5px 5px; } </style> </head> <body> <div> bvdjvdjc </div> <p>woshi wenzi</p> </body> </html>5.文本阴影：text-shadow：red 0 5px；------分别为：颜色，x轴偏移量，y轴偏移量；
6.轮廓线：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input[type="text"] { /* 去除轮廓线 */ outline: none; /* Groove是一种边框样式。它给元素一个带有3D立体效果的凹槽边框 */ outline-style: groove; } </style> </head> <body> <input type="text" name="aaaa" id=""> <input type="password" name="aaaa" id=""> </body> </html>7.防止文本拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> textarea { /* 防止文本拖拽 */ resize: none; /* vertical-align改变与文字的对齐方式:以下三种 */ vertical-align: top; vertical-align: middle; vertical-align: bottom; } </style> </head> <body> <span>请输入个人介绍：</span> <textarea name="xsnsmx" id="" cols="30" rows="10"></textarea> </body> </html>8.隐藏元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 300px; height: 300px; } .box1 { /* 脱离文档流，原来的位置不再保留 */ display: none; /* 元素隐藏，位置保留 */ visibility: hidden; /* opacity: 0;透明度 */ background-color: pink; } .box2 { background-color: aquamarine; } </style> </head> <body> <div class="box1">111</div> <div class="box2">111</div> </body> </html>
十.定位
1.绝对定位/相对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .grandfather { position: relative; width: 1200px; height: 1200px; background-color: aquamarine; } .father { /* position: relative; */ width: 600px; height: 600px; background-color: pink; margin: 400px; } .son { /* position: absolute; 绝对定位： 不保留原来位置 子绝父相 父亲没有相对定位，继续向上找， 谁有相对定位，以谁作为参考移动如果都没找到，则相对于浏览器进行定位 */ position: absolute; /* top: -100px; */ bottom: -100px; left: 500px; width: 100px; height: 100px; background-color: aqua; } .son2 { width: 100px; height: 100px; background-color: rgb(40, 65, 65); } </style> </head> <body> <div class="grandfather"> <div class="father"> <div class="son">1</div> <div class="son2">2</div> </div> </div> </body> </html>注意：子绝父相
2.固定定位：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { height: 4000px; } div { /* 固定定位:相对于可视区域进行定位 */ /* fixed可以使元素固定,而被固定的元素不会随着滚动条的拖动而改变位置 */ position:fixed; right: 40px; top: 50%; width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div> 小妲己 </div> </body> </html>3.粘性定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { height: 4000px; } .one { position: sticky; top: 0; background-color: pink; } </style> </head> <body> <p> 认识自己，降伏自己，改变自己，成就自己。 一直没有取得成功，说明我们的思想，行为，认知是不正确的。或者是我们的品德修为不够，不足以承载太多的东西。 这时候的人就要通过自省，重新认识自己。砸烂自己思想里不正确的观念，纠正不正确的行为、习惯。只有彻底改变自己，才能最终取得成功。 一次偶然的机会，在网络上看到巴菲特的合作伙伴芒格说了走向成功的四句话。 感觉非常的接地，自己按照这四句话彻底改变了自己，确实一天比一天进步了。 今天把它推荐给大家，一起进步。 </p> <p>1、不要过度消费 历览前贤国与家，成由勤俭破由奢。何须琥珀方为枕，岂得真珠始是车。 从古至今的国家与家庭，但凡成功兴旺的，都养成了勤俭节约的好习惯；而那些灭亡的国家，落败的家庭，都是因为铺张浪费导致的。 千万不要相信钱不是省出来的这句话，这句话害了无数的人。 在没有积累到人生第一桶金的时候，一定要有计划的消费，勤俭、节约才是根本。 合抱之木，生于毫末。九层之台，起于累土。千里之行，始于足下。 此语出自老子的《道德经》，意思是：合抱的大树，是从小小的嫩芽长起来的；九层高的高台，是一筐一筐的土垒起来的；身在千里之外，是一步一步走过来的。 再多的钱也是一分一分叠加起来的，你今天节约了没必要消费的一百元钱，就等于你又赚了一百元。 由俭入奢易，由奢返俭难。</p> <p class="one">2、养成终生学习的习惯 此刻打盹，你将做梦;此刻学习，你将圆梦。 当你开始认为自己啥也不是的时候，说明你觉醒了；当你以空杯的心态开始读书、学习的时候，说明你要转运了。 毛泽东说：“饭可以一日不吃，觉可以一日不睡，书不可以一日不读。” </p> <p class="one">3、远离有毒的人和有毒的活动 跟着蜜蜂，找到花朵；跟着苍蝇，找到厕所。 想成为什么样的人，就要和什么样的人在一起，人生最重要的就是要远离有毒的人和有毒的活动。 和酒鬼在一起，他只会劝你干杯；和吸毒的人在一起，他只会劝你吸毒；与赌徒在一起，他只会拉你赌博。 与凤凰同飞，必是俊鸟；与虎狼同行，必是猛兽；与智者同行，不同凡响；与高人为伍，登上巅峰。 想成为什么样的人，就要和什么样的人在一起。人生最重要的就是要远离有毒的人和有毒的活动。 到了一定的年龄，一定要有取舍的智慧，给自己做做减法。 和能量高、人品好的成功人士一起，他会为你答疑解惑、会给你引路、能提升你的认知、能给你带来动力。 远离有毒的人和事，多接触正能量的人，你就能遇见更好的自己。 </p> <p> 4、多做延迟满足的事情 人生都是先苦后甜，要控制及时享乐的欲望，克服唾手可得的的快乐，才能获得非凡的人生。 延迟满足指的是人们一种甘愿为更有价值的长远结果而放弃即时满足的选择取向，还包括在等待的时候展示的自我控制能力。 美国的教授做了一个延迟满足的实验：把十几个孩子放在一个单独的房间里，每个人的桌子上都放了一块糖。 </p> </body> </html>
扫一扫
2910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
