css--字体和文本样式

原文链接： http://www.cnblogs.com/zouzou-busy/p/11028750.html

文字样式属性

字体：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>

View Code

然后我们将上面的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>

View Code

代码解释：

给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>

View Code

其他文本样式

转载于:https://www.cnblogs.com/zouzou-busy/p/11028750.html