css 文本属性-第五章_color 属性-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36260963/article/details/146046691

一、文本属性

1.1 文本颜色 color

属性名：color
作用：控制文字颜色
可选值
1. 颜色名
2. rgb 或 rgba
3. HEX 或 HEXA （十六进制）
4. HSL 或 HSLA

示例

 <style>
     .atguigu1 {
        color: #ff0000;
     }
     .atguigu2 {
        color: rgb(255, 0, 0);
     }
     .atguigu3 {
        color: hsl(0, 100%, 50%)
     }
     .atguigu4 {
        color:red;
     }
  </style>
</head>
<body>
  <div class="atguigu1">尚硅谷1</div>
  <div class="atguigu2">尚硅谷2</div>
  <div class="atguigu3">尚硅谷3</div>
  <div class="atguigu4">尚硅谷4</div>
</body>

效果

1.2 文本间距 letter-spacing

字母间距： letter-spacing
单词间距： word-spacing （通过空格识别词）
属性值为像素（ px ），正值让间距增大，负值让间距缩小。

示例

  <style>
     div {
       font-size: 30px;
     }
     /* 字母间距 */
     .at2 {
       letter-spacing: 10px;
     }
     /* 单词间距 */
     .at3 {
       word-spacing: 10px;
     }
  </style>
</head>
<body>
   <div class="at1">You got a dream,you gotta protect it. 尚硅谷1 </div>
   <div class="at2">You got a dream,you gotta protect it. 尚硅谷2 </div>
   <div class="at3">You got a dream,you gotta protect it. 尚硅谷3 </div>
</body>

效果

1.3 文本修饰 text-decoration

上划线下划线中划线

属性名：text-decoration
作用：控制文本的各种装饰线。
可选值
1. none ：无装饰线（常用）
2. underline ：下划线（常用）
3. overline ：上划线
4. line-through ：删除线
- 可搭配值使用
  1. dotted: 虚线
  2. wavy ：波浪线
  3. 也可以指定颜色

示例

  <style>
     div {
       font-size: 30px;
     }
     /* 无装饰线 */
     .at1 {
        text-decoration: none;
     }
     /* 下划线 */
     .at2 {
       text-decoration: underline;
     }
     /* 上划线 */
     .at3 {
       text-decoration: overline;
     }

     /* 删除线 */
     .at4 {
       text-decoration: line-through;
     }

     /* 搭配使用 */
     .at5 {
       text-decoration: underline wavy green;
     }

  </style>
</head>
<body>
    <div class="at1">尚硅谷1</div>
    <div class="at2">尚硅谷2</div>
    <div class="at3">尚硅谷3</div>
    <div class="at4">尚硅谷4</div>
    <div class="at5">尚硅谷5</div>
</body>

效果

1.4 文本缩进 text-indent

内容里面的缩进长度,只能缩短自己指定的宽度，没法固定多少个字

属性：text-indent
属性值：css 中的长度单位，如 px

举例

  <style>
     div {
       font-size: 40px;
       text-indent: 80px;
     }
  </style>
</head>
<body>
   <div>
      学习前端，来到尚硅谷1，
      来到尚硅谷1来到尚硅谷1来到尚硅谷1来到尚硅谷1来到尚硅谷1，来到尚硅谷1
      来到尚硅谷1来到尚硅谷1来到尚硅谷1来到尚硅谷1来到尚硅谷1，来到尚硅谷1
      来到尚硅谷1来到尚硅谷1来到尚硅谷1来到尚硅谷1来到尚硅谷1，来到尚硅谷1
   </div>

1.5 文本对齐_水平对齐 text-align

属性名：text-align
属性值
- left 左对齐
- right 右对齐
- center 居中对齐

示例

 <style>
     div {
       font-size: 40px;
       background-color: aqua;
       /* 默认靠左对齐  left   center right  */
       text-align: left;
     }
  </style>
</head>
<body>
    <div>尚硅谷</div>
</body>

1.6 行高 line-height

属性名： line-height
可选值
1. normal 由浏览器根据文字大小决定一个默认的值
2. 像素 px
3. 数字：参考自身 font-size的倍数
4. 百分比：参考自身 font-size 的百分比，跟数字类似

示例

 <style>
     #d1 {
       font-size: 40px;
       background-color: skyblue;
       
       /*line-height 不能和font-size 一致 ，第一种写法，像素 */
       /* line-height: 100px; */
       
       /* 第二种写法，值为normal */
       /* line-height: normal; */
       
       /* 第三种写法   用该数值 * font-size的值 font-size的1.5倍左右最好  */
       /* line-height: 1.5; */


       /* 第四种写法，值为百分比 */
       line-height: 150%;
     }
  </style>
</head>
<body>
   <div id="d1">atguigux尚硅谷测试测试测试atguigu尚硅谷测试测试测试atguigu尚硅谷测试测试测试atguigu尚硅谷测试测试测试atguigu尚硅谷测试测试测试atguigu尚硅谷测试测试测试atguigu尚硅谷测试测试测试atguigu尚硅谷测试测试测试atguigu尚硅谷测试测试测试atguigu尚硅谷测试测试测试</div>
</body>

结论总结
1. 由于字体设置原因，文字最终呈现大小，并不一定与 font-size的值一致，可能大，也可以能小。
2. 通常情况下，文字相对字体设计框，并不是垂直居中的，通常要靠下一些。
行高注意事项
1. line-height 过小会怎样？—— 文字产生重叠，且最小值是 0 ，不能为负数。
2. line-height 是可以继承的，且为了能更好的呈现文字，最好写数值。
3. line-height 和 height 是什么关系？设置了 height ，那么高度就是 height 的值。不设置 height 的时候，会根据 line-height 计算高度。

应用场景

对于多行文字：控制行与行之间的距离。
对于单行文字：让 height 等于 line-height ，可以实现文字垂直居中。

 <style>
    /* 应用场景1 单行文字 */
     #d1 {
       font-size: 40px;
       background-color: skyblue;
       /* 单行文字，如果行高跟 line-hight 一样那么久垂直居中了 */
       height: 300px;
       line-height: 300px;
     }
      /* 应用场景2 多行文字   调整多行文字间距 */
      #d2 {
       font-size: 40px;
       background-color: skyblue;
       line-height: 100px;
     }
  </style>
</head>
<body>
    <!-- <div id="d1">atguigu尚硅谷</div> -->
    <div id="d2">atguigu尚硅谷 我们atguigu尚硅谷atguigu尚硅谷atguigu尚硅谷atguigu尚硅谷atguigu尚硅谷atguigu尚硅谷atguigu尚硅谷atguigu尚硅谷atguigu尚硅谷atguigu尚硅谷</div>
</body>

1.7 文本对齐_垂直对齐

顶部： 无需任何属性，在垂直方向上，默认就是顶部对齐
居中： 对于当行文字让 height=linehieght 即可，多行不适用
底部： 对于当行文字，临时方式

line-height = (height *2) - font-size -x

示例

<style>
      div {
         font-size: 40px;
         background-color: skyblue;
         height: 300px;

         /* 默认是上对齐 */
        
         /* 居中对齐效果 
         line-height: 300px;*/

         /* 下边对齐  行高的两倍 - font-size - x */
         line-height: 550px;
      }
  </style>
</head>
<body>
   <div>
       尚硅谷
   </div>

1.8 vertical-align

属性名：vertical-align
作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。
常用值
1. baseline （默认值）：使元素的基线与父元素的基线对齐。
2. top ：使元素的顶部与其所在行的顶部对齐。
3. middle ：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。
4. bottom ：使元素的底部与其所在行的底部对齐。
注意：vertical-align 不能控制块元素。

示例

 <style>
      div {
         font-size: 100px;
         height: 300px;
         background-color: skyblue;
      }
      span {
         font-size: 40px;
         background-color: yellow;
         /* 一行的顶部对齐 
         vertical-align: top;*/
         /* 默认基线对齐  
         vertical-align: baseline;*/
         /* 底部对齐 
         vertical-align: bottom;*/
         /* x使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。  */
         vertical-align: middle;
      }
  </style>
</head>
<body>
   <div>
    atguigu 尚硅谷X
    <span>x前端</span>
   </div>
   <hr>

   
</body>