css--字体和文本样式
文字样式属性
字体：font-family
文字大小：font-size
文字颜色：font-color
文字粗细：font-weight
文字样式：font-style
font-family字体属性
定义元素内文字以什么字体来显示
语法：
font-family:”字体一“，”字体二“，”字体三“...
说明
包含空格字体名和中文，用英文引号""括起
多个字体，用英文逗号隔开
引号嵌套，外使用双引号，内使用单引号
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{font-family: "幼圆","黑体","微软雅黑"} </style> </head> <body> <div >必应</div> <p id="i2">类选择器</p> <div>百度</div> </body> </html>
上面的代码表示浏览器使用幼圆字体，如果没有使用黑体字体，如果没有，使用微软雅黑字体，如果还是没有，则使用操作系统默认的字体
font-size文字大小
定义元素内文字大小
语法：
font-size:绝对单位|相对单位
绝对单位不常用，相对单位使用px或者百分比的形式
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{font-size: 40px} span{font-size: 50%} </style> </head> <body> <div >必应</div> <p id="i2">类选择器</p> <div > <span>百度</span> </div> </body> </html>
上面代码表示给div标签设置了40px的字体大小，span标签的字体大小为50%，这个50%的意思是占用父级标签字体大小的50%，span的父级标签是div标签，而div标签的字体大小是40px，所以50%是20px
color文字颜色
文字颜色我们已经不陌生了，在之前也使用过好多次了
语法
color:颜色名|十六进制|RGB
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> p{color: red}/*颜色名*/ div{color:#FFC125}/*十六进制*/ span{color:rgb(0,0,255)}/*rgb*/ </style> </head> <body> <div >必应</div> <p id="i2">类选择器</p> <div >你好</div> <span>百度</span> </body> </html>
font-weight文字粗细
为元素内文字设置粗细
语法：
font-weight:normal | bold | bolder | lighter |100-900
说明：
normal默认值，bold加粗，bolder更粗，lighter更细
400等同于normal，700等同于bold
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> p{font-weight: bold} div{font-weight: lighter} span{font-weight: 600} </style> </head> <body> <div >必应</div> <p id="i2">类选择器</p> <div >你好</div> <span>百度</span> </body> </html>
CSS文本样式
text-align
设置元素内文本的水平对齐方式
语法：
text-align:left | right | center | justify
前面三个看意思就懂了，justify是两端对齐
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> .p1{text-align: left} .p2{text-align: right} .p3{text-align: center} .p4{text-align: justify} </style> </head> <body> <p class="p1">RGB转16进制工具具用于将RGB颜色值与十六进制字符串相互转换，工具使用简单，你只需要在以下三个输入框：红(R)、绿(G)、蓝(B)中输入RGB的颜色值及会自动回转换十六进制的字符串，反之你只想要在右侧十六进制输入框输入16进制字符即可转换为 RGB 数值RGB转16进制工具具用于将RGB颜色值与十六进制字符串相互转换，工具使用简单，你只需要在以下三个输入框：红(R)、绿(G)、蓝(B)中输入RGB的颜色值及会自动回转换十六进制的字符串，反之你只想要在右侧十六进制输入框输入16进制字符即可转换为 RGB 数值</p> <p class="p2">RGB转16进制工具具用于将RGB颜色值与十六进制字符串相互转换，工具使用简单，你只需要在以下三个输入框：红(R)、绿(G)、蓝(B)中输入RGB的颜色值及会自动回转换十六进制的字符串，反之你只想要在右侧十六进制输入框输入16进制字符即可转换为 RGB 数值RGB转16进制工具具用于将RGB颜色值与十六进制字符串相互转换，工具使用简单，你只需要在以下三个输入框：红(R)、绿(G)、蓝(B)中输入RGB的颜色值及会自动回转换十六进制的字符串，反之你只想要在右侧十六进制输入框输入16进制字符即可转换为 RGB 数值</p> <p class="p3">RGB转16进制工具具用于将RGB颜色值与十六进制字符串相互转换，工具使用简单，你只需要在以下三个输入框：红(R)、绿(G)、蓝(B)中输入RGB的颜色值及会自动回转换十六进制的字符串，反之你只想要在右侧十六进制输入框输入16进制字符即可转换为 RGB 数值RGB转16进制工具具用于将RGB颜色值与十六进制字符串相互转换，工具使用简单，你只需要在以下三个输入框：红(R)、绿(G)、蓝(B)中输入RGB的颜色值及会自动回转换十六进制的字符串，反之你只想要在右侧十六进制输入框输入16进制字符即可转换为 RGB 数值</p> <p class="p4">RGB转16进制工具具用于将RGB颜色值与十六进制字符串相互转换，工具使用简单，你只需要在以下三个输入框：红(R)、绿(G)、蓝(B)中输入RGB的颜色值及会自动回转换十六进制的字符串，反之你只想要在右侧十六进制输入框输入16进制字符即可转换为 RGB 数值RGB转16进制工具具用于将RGB颜色值与十六进制字符串相互转换，工具使用简单，你只需要在以下三个输入框：红(R)、绿(G)、蓝(B)中输入RGB的颜色值及会自动回转换十六进制的字符串，反之你只想要在右侧十六进制输入框输入16进制字符即可转换为 RGB 数值</p> </body> </html>
然后我们将上面的p标签换成span标签，发现没有效果，这是因为该属性对块级标签设置有效
块级标签就是不管你内容多少都是占一整行，比如你有两个p标签，里面都只有两个字，它也是占两行，而span标签会显示在一行，是行内元素
line- height
设置元素中文本行高，当行高等于高度时，则垂直居中
这样文字“啦啦啦”就会显示在红色框的正中央了
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> .d2{height: 100px;width: 200px;background: red;line-height: 100px;text-align: center} </style> </head> <body> <div class="d2">啦啦啦</div> <div class="d1"></div> </body> </html>
语法：
line-height:长度值 | 百分比
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{height: 400px;border: 1px solid} span{line-height: 400px} </style> </head> <body> <div> <span class="p1">RGB转16进制</span> </div> </body> </html>
代码解释：
给div标签设置了400px的高度，如果要想div下面的span标签垂直居中，高度也要为400px
vertical-align
设置元素内容的垂直方式
值都有以下这些
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{height: 400px;border: 1px solid} .c1{vertical-align: 50%} </style> </head> <body> <div> <span class="p1">RGB转<span class="c1">16进制</span></span> </div> </body> </html>
其他文本样式
