七、文本属性
1. 文本水平对齐
text-align: left / center / right
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo19</title> <style> .aaa { text-align: center; } .bbb { text-align: left; } .ccc { text-align: right; } </style> </head> <body> <div class="aaa">卡布达</div> <div class="bbb">呱呱蛙</div> <div class="ccc">车轮滚滚</div> </body> </html>
展示结果：
2. 文本装饰
text-decoration: none / overline / underline / line-through
展示1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo20</title> <style> .aaa { text-decoration: overline; } .bbb { text-decoration: underline; } .ccc { text-decoration: none; } .ddd { text-decoration: line-through; } </style> </head> <body> <div class="aaa">卡布达</div> <div class="bbb">卡布达</div> <div class="ccc">卡布达</div> <div class="ddd">卡布达</div> </body> </html>
展示结果：
展示2
在上一篇博客中，我提到关于 a 标签的一些用法。而当 a 标签写出来并展示之后，我们可以看到，它是刻板的形式 ( 带下划线，和固定颜色 )，这其实是由于 html 的语法和 不同浏览器显示所造成的结果。而我们就可以通过将 text-decoration 置成 none，并设置一些其他属性即可。
将下划线删除，在当今的网页设计很常见，例如一些带标签跳转的视频主页，就是这么做的。因为既然你避免不了使用链接，又要为了美观，这就是一个办法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo23</title> <style> a { text-decoration: none; font-size: 20px; color: black; } </style> </head> <body> <a href="#">点击链接</a> </body> </html>
展示结果：
3. 文本缩进
text-indent:
① 缩进可以根据单位需求设置，单位可以使用 px 或 em.
② 1个 em 代表当前文字的尺寸大小，2个em 就是当前文字尺寸的两倍。
③ 缩进可以是负的，但会导致文字就冒出左边页面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo21</title> </head> <style> div { text-indent: 2em; } </style> <body> <div> 其实当时在互联网界已经有过一些统一样式表语言的建议了, 但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中, 一个文件的样式可以从其他的样式表中继承。 读者在有些地方可以使用他自己更喜欢的样式， 在其他地方则继承或“层叠”作者的样式。 这种层叠的方式使作者和读者都可以灵活地加入自己的设计， 混合每个人的爱好。 </div> </body> </html>
展示结果：
我故意通过滚轮将字体放大了，就是为了展示清楚缩进 2个字符。
( 下面的第一句话来自于百度 )
4. 文本行高
line-height:
设置文本行高其实和我们平时使用的 word 中的设置行间距的意思是一样的，在 CSS 中，我们可以使用百分比、像素值、数值…来设置行间距。
展示1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo1</title> <style> .aaa { line-height: 2; } .bbb { line-height: 150%; } </style> </head> <body> <p class="aaa"> 其实当时在互联网界已经有过一些统一样式表语言的建议了, 但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中, 一个文件的样式可以从其他的样式表中继承。 </p> <p class="bbb"> 其实当时在互联网界已经有过一些统一样式表语言的建议了, 但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中, 一个文件的样式可以从其他的样式表中继承。 </p> </body> </html>
展示结果：
展示2
将行高与当前元素的高度设置相等，可以使得文字垂直对齐。
下面的展示结果中，第二行文本就已垂直对齐。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo2</title> <style> .aaa { background-color: gray; height: 50px; line-height: 20px; } .bbb { background-color: gray; height: 50px; line-height: 50px; } </style> </head> <body> <p class="aaa">卡布达 车轮滚滚 呱呱蛙</p> <p class="bbb">卡布达 车轮滚滚 呱呱蛙</p> </body> </html>
展示结果：
八、背景属性
1. 背景颜色
background-color:
background-color 所能设置的值，和前文中提到的 color 是一样的，所以我就不再赘述此属性的用法了，下面展示常见的写法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo3</title> <style> div { background-color: green; } .aaa { background-color: red; } .bbb { background-color: rgb(0, 200, 250); } .ccc { background-color: transparent; } p { background-color: transparent; } </style> </head> <body> <div> <div class="aaa">卡布达</div> <div class="bbb">车轮滚滚</div> <div class="ccc">呱呱蛙</div> </div> <p>飞翔机器人</p> </body> </html>
值得注意的是：我们将 background-color 设置为 transparent，即表示透明的意思。但当【ccc】属性的父类 div 已经被设置成绿色的时候，就会让【ccc】属性也变成绿色了。
当然，如果【ccc】属性的父类没有被实现背景颜色，就还会变成透明。
展示结果：
2. 背景图片
background-image: url();
上面的 url 中，需要填写路径。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo4</title> <style> p { color: red; font-size: 300px; background-image: url(123.png); height: 1500px; } </style> </head> <body> <p>卡布达</p> </body> </html>
注意
因为我们是对标签p 进行修饰的，所以如果我们想要文字和图片在一起的效果，就需要在 p 选择器设置样式的时候，加点设置，比方说：整个高度需设置更大一些。然而最终我们看到，展示的背景图片却是多张图片组合在一起的，这其实是因为默认平铺的效果，因为当前浏览器可能觉得，需要将整个 p 标签填满，在后面我们会提到如何取消平铺。
展示结果：
3. 背景图片平铺
background-repeat: no-repeat (不平铺) repeat (平铺) repeat-x (水平平铺) repeat-y (垂直平铺)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo5</title> <style> p { color: red; font-size: 300px; height: 1500px; background-image: url(123.png); background-repeat: no-repeat; background-color: aquamarine; } </style> </head> <body> <p>卡布达</p> </body> </html>
下图展示了背景图片不平铺的效果；此外，如果背景图片与背景颜色共存的情况下，背景图片会将背景颜色进行覆盖。
展示结果：
4. 背景图片尺寸
background-size:
background-size 属性可以设置的值有很多，如：像素值、百分比、cover、contain…
展示1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo6</title> <style> p { color: red; font-size: 100px; height: 1500px; background-image: url(123.png); background-repeat: no-repeat; background-color: aquamarine; background-size: 1300px, 1300px; } </style> </head> <body> <p>卡布达</p> </body> </html>
通过像素值可以直接对背景图片进行设置，但我们必须明确，背景图片是用来修饰 p 标签的，所以我们必须以当前的 p标签高度为基准。
展示2
但我们将 background-size 属性分别设置为 cover 和 contain 的时候
background-size: cover; background-size: contain;
展示结果：
5. 背景图片位置
background-position: x, y;
x 和 y 都可以填写以下的三种参数：
① 方位名词：( top, left, right, bottom )
② 精确单位：坐标或百分比 ( 以左上角为原点 )
③ 混合单位：同时包含方位名词和精确单位
注意：上面的 x 和 y 是以 x轴往右为正方向，y轴往下为正方向的。
而不是像高等数学中的 y轴往上为正方向。
展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo6</title> <style> p { color: red; font-size: 300px; height: 1500px; background-image: url(123.png); background-repeat: no-repeat; background-color: aquamarine; background-position: center,center; } </style> </head> <body> <p>卡布达</p> </body> </html>
这里就不为大家演示了，这里的图片放置方法较为多变，小伙伴可以自己试一下。
展示结果：
九、圆角矩形
border-radius: length;
其中，length 是内切圆的半径，其数值越大，弧线越弯曲。
展示1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo8</title> <style> p { background-color: rgb(0, 250, 150); height: 300px; width: 300px; border-radius: 250px; } </style> </head> <body> <p></p> </body> </html>
我们将正方形的背景转换成圆形的背景，只需要将 border-radius 设置为宽度的一半即可。
展示结果：
展示2
设计一个点击按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo8</title> <style> p { background-color: gray; font-size: 30px; height: 60px; width: 200px; border-radius: 30px; text-align: center; line-height: 60px; } p:hover { background-color: yellowgreen; } </style> </head> <body> <p>请点击按钮</p> </body> </html>
解析代码
① 通过 height 和 width 属性设置了当前 p标签 的最大高度和宽度。
② 通过 border-radius 属性设置了高度一半的圆角。
③ 通过 text-align 属性设置了水平对齐，line-height 属性设置了垂直对齐。
④ 通过 p:hover 这个伪类选择器设置了鼠标放置时换色。
展示结果：
展示3
border-radius: 50px 20px 50px 0px;
上面是按照顺时针划分圆角的，所以与下面四行是等价的。
border-top-left-radius:50px; border-top-right-radius:20px; border-bottom-right-radius:50px; border-bottom-left-radius:0px;
展示结果：
