CSS属性操作-文本
文本颜色
<head> <style> p{ /*color:#8B5742 ;色码表*/ color: RGBA(255,0,0,0.5); /*调色，红绿蓝透明度*/ /*color: blue;颜色名*/ } </style> </head> <body> <p>i am p</p> </body>
水平对齐方式：text-align 属性规定元素中的文本的水平对齐方式
<head> <style> div{ /*background-color: wheat;*/ /*width: 100%;*/ /*height: 300px;*/ /*line-height: 300px;*/ text-align: center; /*居中显示*/ /*text-align: left;居左显示*/ /*text-align: right;居右显示*/ /*text-align:justify;两端对齐*/ } </style> </head> <body> <div>Everyone has their own dreams, I am the same. But my dream is not a lawyer, not a doctor, not actors, not even an industry. Perhaps my dream big people will find it ridiculous, but this has been my pursuit! My dream is to want to have a folk life! I want it to become a beautiful painting, it is not only sharp colors, but also the colors are bleak, I do not rule out the painting is part of the black, but I will treasure these bleak colors! Not yet, how about, a colorful painting, if not bleak, add color, how can it more prominent American? Life is like painting, painting the bright red color represents life beautiful happy moments. Painting a bleak color represents life difficult, unpleasant time. You may find a flat with a beautiful road is not very good yet, but I do not think it will. If a person lives flat then what is the point? Life is only a short few decades, I want it to go Finally, Each memory is a solid.</div> </body>
文本其他属性
<!--font-size: 10px; 字体大小-->
<!--line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比，底线基线中线顶线概念-->
<!--vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效-->
<!--text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线-->
<!--font-family: 'Lucida Bright' 字体-->
<!--font-weight: lighter/bold/border/ 字体宽度-->
<!--font-style: oblique 字体样式斜体-->
<!--text-indent: 150px; 首行缩进150px-->
<!--letter-spacing: 10px; 字母间距-->
<!--word-spacing: 20px; 单词间距-->
<!--text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写-->
CSS属性操作-背景属性
<head> <style> .c1{ border: 1px solid red; /*边框：1像素、实线、红色*/ /*background-color: plum; 背景色*/ width: 100%; height: 600px; background-image: url("http://dig.chouti.com//images/logo.png"); /*背景图片*/ background-repeat: no-repeat; /*平铺方式，默认横向纵向同时铺*/ background-position:center center; /*对齐方式，居中。right top（20px20px）*/ /*background: url("http://dig.chouti.com//images/logo.png") no-repeat center center; 简写方式*/ } </style> </head> <body> <div class="c1"></div> </body>
CSS属性操作-边框属性
<head> <style> .c1{ width: 100px; height: 200px; /*border-style: dashed; 类型*/ /*border-color: red; 红色*/ /*border-width: 5px; 宽度*/ /*border:3px dashed red; 简写方式：宽度、类型、颜色*/ border-right: 3px dashed red; /*单独的方向*/
/*border-radius： 20% 圆润*/ /*border-top-style:dotted;*/ /*border-right-style:solid;*/ /*border-bottom-style:dotted;*/ /*border-left-style:none;*/ } </style> </head> <body> <div class="c1"></div> </body>
CSS属性操作-列表属性
<head> <style> ul{ /*list-style-type: square; 列表项标志类型*/ /*list-style-image: url("a.jpg"); 将图像设置为列表项标志*/ /*list-style-position：inside; !*默认outside，设置列表中列表项标志的位置。*!*/ list-style: none; /*简写属性，设置为空*/ } </style> </head> <body> <ul> <li>1111</li> <li>2222</li> <li>3333</li> </ul> </body>
补充：a标签锚：类似于目录的跳转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .chapter1{ width: 100%; height: 800px; background-color: wheat; } .chapter2{ width: 100%; height: 800px; background-color: green; } .chapter3{ width: 100%; height: 800px; background-color: goldenrod; } </style> </head> <body> <ul> <li><a href="#c1">第一章</a></li> <li><a href="#c2">第二章</a></li> <li><a href="#c3">第三章</a></li> </ul> <div class="chapter1" >第一章</div> <a href="#">返回</a> <div class="chapter2" >第二章</div> <div class="chapter3" >第三章</div> <a href="#">返回</a> </body> </html>
CSS属性操作-display属性
隐藏标签
p{display:none;}
注意与visibility:hidden的区别：
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
内联标签设置为块级标签
span{display:block;}
注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
块级标签设置为内联标签
li{display:inline;}
lnline-block布局
通过display:inline-block对一个对象指定inline-block属性，可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。
display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：
outer{ border: 3px dashed; word-spacing: -5px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .c1{ width: 100px; height: 200px; background-color: darkorange; display: inline-block; } .c2{ width: 200px; height: 200px; background-color: green; /*display: none;*/ display: inline-block; margin-left: -6px; } .c3{ width: 300px; height: 200px; background-color: rebeccapurple; display: inline-block; margin-left: -6px; } ul li{ list-style: none; } ul li a{ width: 20px; height: 20px; float: left; padding: 20px; margin-left: 5px; background-color: wheat; } </style> </head> <body> <a class="c1"></a> <div class="c2"></div> <div class="c3"></div> <ul> <li class="item"><a href="">1</a></li> <li class="item"><a href="">2</a></li> <li class="item"><a href="">3</a></li> <li class="item"><a href="">4</a></li> <li class="item"><a href="">5</a></li> <li class="item"><a href="">6</a></li> <li class="item"><a href="">7</a></li> <li class="item"><a href="">8</a></li> </ul> </body> </html>