3.2-1 常用文本样式属性

最新推荐文章于 2024-06-12 11:13:48 发布

洋芋不姓杨

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量125

点赞数

分类专栏： css 文章标签：前端 html css css3

本文链接：https://blog.csdn.net/youaigusheng/article/details/125540266

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

常用文本样式属性

1、用法

1、color属性可设置文本内容的前景色；
2、color属性可以用英语单词、十六进制、rgb()、rgba()等表示法；
3、英语单词表示法，比如color:red;仅仅用于学习设置一下颜色，工作时基本不用这样的形式，因为追求精确；
4、十六进制表示法是所有设计软件中都通用的颜色表示法，设计师给我们的设计图上标注的颜色，通常用十六进制表示；
5、比如十六进制ff就是十进制的255，每种颜色分量都是0~255的数字；

2、rgb表示法

color:rgb(255,0,0);

3、rgba表示法

rgba()表示法，最后一个参数表示透明度，介于0到1之间，0表示纯透明，1表示纯实心；
color:rgba(255,0,0,.65);
//从IE9开始兼容；

4、font-size属性

1、font-size属性用来设置字号，单位通常为px(em,rem);
2、网页文字正文字号通常是16px,浏览器最少支持10px字号；

5、font-weight属性

font-weight属性设置字体的粗细程度，通常就用normal和bold两个值；

6、font-weight属性实例

font-weight:normal;正常粗细，与400等值；
font-weight:bold;加粗，与700同值；
font-weight:lighter;更细，大多数中文字体不支持；
font-weight:bolder;更粗，大多数中文字头不支持；

7、font-style属性

font-style:normal;取消倾斜，比如可以把天生倾斜的i、em等标签设置为不倾斜；
font-style:italic;设置为倾斜字体；
font-style：oblique;设置为倾斜字体（不常用）；

8、text-decoration属性

text-decoration属性用于设置文本的修饰线外观的（下划线、删除线）；
text-decoration:none;没有修饰线；
text-decoration:underline;下划线；
text-decoration:ouverline;上划线；
text-decoration：line-through;删除线；（一般用于商品折扣价）

9、综合实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
      
      .para1{
          color:red;
      }
      .para2{
         color: rgb(255,234,2);
      }
      .para3{
         color:rgba(255,255,0,.9)
      }
      .para4{
          text-decoration:underline;
      }
      .para5{
        font-style:italic;
      }
      .para6{
        font-weight:400(normal);
      }
      .para7{
        font-size:40px;
      }
  </style> 
</head>
<body>
    <p class="para1" class="spec">我是你</p>
    <p class="para2" class="spec">我是你</p>
    <p class="para3" class="spec">我是你</p>
    <p class="para4" class="spec">我是你</p>
    <p class="para5" class="spec">我是你</p>
    <p class="para6" class="spec">我是你</p>
    <p class="para7" class="spec">你还是你</p>
   </div>
   </div>
   </div>
</body>
</html>