CSS基础---文本类型

最新推荐文章于 2024-08-21 14:25:06 发布

原创最新推荐文章于 2024-08-21 14:25:06 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#文本样式 #文本区块

HTML+CSS 专栏收录该内容

17 篇文章

订阅专栏

CSS文本样式

css文本样式包含以下内容

属性	名称	值
font-family	字体	中文字体需要嵌套在引号中，多字体使用英文逗号
font-size	字号	number，单位为px
font-weight	字体粗细	normal-不加粗，bold-加粗，100-900（100-500属于细字体，600-900属于粗字体
line-height	行高	number，单位为px，也可以设置倍数，单位为em(前提是需要设置font-size)，一般情况下是用em
text-transform	大小写转换	lowercase-转小写，capitalize-首字母大写其余不变，uppercase-转大写
text-decoration	文本修饰	none-清除文本样式，underline-文本添加下划线，overline-文本添加上划线，line-through-删除线
font-variant	小型大写字母	normal-无变化，small-caps-将小写字母转化为大写字母，但是字体大小按照小写字母显示

1、font-family：font-family设置字体，若字体是中文，需要用引号括起，可以设置多种字体，浏览器根据font-family规定的字体顺序来匹配字体，直到匹配成功，后续设置的字体就无效了，多个字体设置以逗号隔开。同时font-family具有继承性，可以利用设定body的css属性来控制所有body文本

h1{font-family: "微软雅黑","宋体","黑体";}

body{font-family: "微软雅黑","宋体","黑体";}

2、font-size：font-size可以精确设置字体大小，单位为px

span{font-size: 10px;}

3、font-weight：font-weight可以控制字体的粗细，normal-不加粗，bold-加粗，100-900(以数字控制粗细)，100-900,数值越大越粗，100-500都是细体，600-900是粗体

span{font-weight: normal;}
p{font-weight: bold;}
h1{font-weight: 100;}

4、line-height：行高，在文本控制时经常使用的，在设定行高时，可以使用px设定精确值，也可以设置倍数，单位为em(前提是需要设置font-size)，一般情况下是用em

.data{font-size: 20px; line-height: 1.5em}

5、text-transform：控制英文字体大小写，lowercase-全转小写，capitalize-首字母大写，uppercase-全转大写

.hh{text-transform: lowercase;}
.pp{text-transform: capitalize;}
.ll{text-transform: uppercase;}

6、text-decoration：文本修饰，none-清除文本样式，underline-文本下添加下划线，overline-文本上添加上划线，line-through-删除线

.right{text-decoration: none;}
.left{text-decoration: underline;}
.rank{text-decoration: overline;}
.chu{font-size: 20px; text-decoration:line-through;}

7、font-variant：小型大写字母，会将小写字母转为大写但是大小依旧保持为小写字母大小

.class{font-variant: small-caps;}

文本区块

属性	名称	值
text-align	水平对齐	left-左对齐，center-居中对齐，right-右对齐
vertical-align	垂直对齐	baseline-基线对齐，sub-下标，super-上标，top-顶部对齐，middle-中线对齐，bottom-底部对齐
display	显示类型	none-不显示，block-转换为块级元素，inline-转换为行级元素，inline-block-转换为行块级元素
text-indent	文本的缩进	number，单位为px，
letter-spacing	字母间距	number，字母间距，调整中文或英文之间的间距,精确调整单位为px

1、text-align:水平对齐，包含left左对齐，center居中对齐，right右对齐

h1{text-align: left;}
h2{text-align: center;}
h3{text-align: right;}

2、vertical-align:垂直对齐方式，包含baseline-基线对齐，top-顶端对齐，middle-居中对齐，bottom-底部对齐

/*基线对齐*/
.text1{ vertical-align: baseline;}
/*顶部对齐*/
text2{vertical-align: top;}
/*居中对齐*/
text3{vertical-align: middle;}
/*底部对齐*/
text4{vertical-align: bottom;}

3、display显示类型，控制标签显示，包含none-不显示，block-转换块级元素，inline-转换行级元素，inline-block-行级块元素

display：none；        此元素不会被显示
display：block；       此元素将会显示为块级元素，此元素前后会有换行符
display：inline；      默认此元素被显示为行级元素，元素前后没有换行符
display：inline-block；将元素转换为行级块元素

示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>转换元素</title>
    <style>
        input {
            display: block;                /*转换为块级元素*/
        }

        div {
            display: inline-block;   
        }                                  /*转换为行内块级元素*/

        p {
            display: inline;              /*转换为行内元素*/
        }
    </style>
</head>
<body>
        <div>aaaa</div>
        <div>bbbb</div>
        <input type="text" placeholder="用户名">
        <input type="password" placeholder="密码">
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=791192373,4291321899&fm=26&gp=0.jpg" width="100px">
        <p>段落标签</p>
</body>

结果

4、text-indent：文本缩进，常用与文本首行缩进2字符,设定p标签文本的字体大小后，执行设置text-indent为2em(2倍)即可

p{text-indent: 2em; font-size: 12px;}

5、letter-spacing：字母间距，调整中文或英文之间的间距,精确调整单位为px

/*调整中英文*/
.text{letter-spacing: 3px;}
/*鼠标移入时增大间距*/
.text:hover{letter-spacing: 10px;}

常见显示类型的区别

（1）块级元素

常见标签：h1-h6、p、div、ui、ol、li、dl、dt、dd等。
特性：能够独立显示在一行，在没有设置宽度的情况下，默认宽度等于父级宽度，并且可以自定义块元素的宽高。每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。
转换：任何元素都可以通过display:block转换为块级元素，转换完成之后，将具备块级元素的所有特性。

示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>块级标签</title>
</head>
<body>
        <div>aaa</div>
        <p>bbb</p>
        <h1>ccc</h1>>
</body>
</html>

结果

（2）行级元素

常见标签：a、span、strong、b、em、i、del、s、font等。
特性：行级元素可以显示在一行，在没有设置宽度的情况下，默认的宽度等于内部元素的宽度，行级元素不能自定义宽高。
转换：任何元素都可以通过display:inline转换为行级元素，转换之后同样具备以上行级元素的特性。

示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>行内元素</title>
</head>
<body>
        <span>hello</span>
        <a href="#">超链接</a>
</body>
</html>

结果

（3）行级块元素

常见标签：img、input等。
特性：行级元素能够在一行显示，并且可以自定义元素的宽高。
转换：任何元素都可以通过display:inline-block转换为行级块元素，转换完成之后具备行级块元素的所有特性。

示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>行内块元素</title>
</head>
<body>
        <input type="text " placeholder="用户名">
        <input type="password" placeholder="密码" >
        <img src="http://p1.so.qhimgs1.com/bdr/200_200_/t01ed6c489ac295869d.jpg" width="100px" />

</body>
</html>

结果