CSS文本属性

CSS文本属性

1.字体大小:font-size

例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        .p{
            font-size: 30px;
        }
    style>
head>
<body>
<p class="p">hello  worldp>
body>
html>

结果如下
在这里插入图片描述

2.字体颜色:color


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        .p{
          
            color: red;
        }
    style>
head>
<body>
<p class="p">hello  worldp>
body>
html>

结果如下
在这里插入图片描述

3.字体粗细:font-weight


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        .p{

           font-weight: bold;
        }
    style>
head>
<body>
<p class="p">hello  worldp>
body>
html>

结果如下
在这里插入图片描述

4.字体系列

例:楷体


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        .p{

          font-family: kaiti;
        }
    style>
head>
<body>
<p class="p">今天天气真好p>
body>
html>

结果如下
在这里插入图片描述

5.字体样式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        .p1{

        font-style: inherit;
        }
        .p2{

           font-style: italic;
        }
        .p3{

           font-style: normal;
        }
        .p4{

           font-style: oblique;
        }
    style>
head>
<body>
<p class="p1">床前明月光p>
<p class="p2">疑是地上霜p>
<p class="p3">举头望明月p>
<p class="p4">低头思故乡p>
body>
html>

结果如下
在这里插入图片描述

6.透明度opacity


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        .div{
            color: white;
            background-color: red;
            width: 200px;
            height: 200px;
            opacity: 0.6;
        }
        p{
            color: #027757;
            opacity: 0.3;
        }
    style>
head>
<body>
<div class="div">静夜思div>
<p>hello worldp>
body>
html>

结果如下:
CSS文本属性_第1张图片

7.行高与对齐

水平对齐方式:text-align(left/center/right);
行高:line-height 要想使文本垂直居中,只要让行高等于其容器大小就可以


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        .div{
            color: white;
            background-color: red;
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
        }

    style>
head>
<body>
<div class="div">静夜思div>

body>
html>

结果如下
CSS文本属性_第2张图片

8.字符间距 letter-spacing


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
       p{
           letter-spacing: 5px;
       }

    style>
head>
<body>
<p>abcdefghijklmnp>

body>
html>

结果如下
在这里插入图片描述

9.文本修饰:text-decoration

例:分别给五个p标签加上划线,中划线,下划线,双下划线,虚线下划线


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
      .p1{
          text-decoration: overline;
      }
      .p2{
            text-decoration: line-through;
        }
      .p3{
          text-decoration: underline;
      }
      .p4{
          text-decoration:double underline;

      }
      .p5{
          text-decoration: dashed underline;
      }
    style>
head>
<body>
<p class="p1">添加上划线p>
<p class="p2">添加中划线p>
<p class="p3">添加下划线p>
<p class="p4">添加双划线p>
<p class="p5">添加虚线p>


body>
html>

结果如下
在这里插入图片描述

10.文本缩进:text-indent

例 让文本缩进20像素


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
     .div{
         width: 200px;
         height: 30px;
         border: 1px solid red;
         text-indent: 20px;
     }
    style>
head>
<body>
<div class="div">文本缩进20pxdiv>

body>
html>

结果如下
在这里插入图片描述

虽然文本缩进了20像素,但文本距离右边框的宽度没有变,是div宽度增加了

11 overflow:hidden 容器里的内容超出容器部分隐藏

例 div宽度为50,里面的文本内容宽度超过了div,采用overflow
代码如下


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
     .div{
         width: 200px;
         height: 30px;
         border: 1px solid red;
         text-indent: 20px;
     }
    style>
head>
<body>
<div class="div">文本缩进20pxdiv>

body>
html>

没有用overflow时结果如下
在这里插入图片描述

加上overflow之后结果如下
在这里插入图片描述

12.文本阴影 text-shadow(参数1,参数2,参数3)

参数1:阴影距文字左右距离
参数2:阴影距文字上下距离
参数3:阴影的模糊程度


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
     p{
        font-size: 40px;
         text-shadow: 1px 1px 2px;
     }
    style>
head>
<body>
<p>hello worldp>

body>
html>

结果如下
在这里插入图片描述

你可能感兴趣的:(CSS)