CSS文本属性

最新推荐文章于 2024-05-24 12:14:48 发布
最新推荐文章于 2024-05-24 12:14:48 发布
阅读量3.5k 收藏 19
点赞数 3
分类专栏： CSS 文章标签： CSS  文本属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43885459/article/details/84673274
版权

CSS文本属性

1.字体大小：font-size

例：

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

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

2.字体颜色：color

例

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

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

3.字体粗细：font-weight

例

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

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

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

4.字体系列

例：楷体

<!DOCTYPE html>
<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.字体样式

例

<!DOCTYPE html>
<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

例

<!DOCTYPE html>
<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 world</p>
</body>
</html>

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

7.行高与对齐

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

<!DOCTYPE html>
<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>

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

8.字符间距 letter-spacing

例

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

    </style>
</head>
<body>
<p>abcdefghijklmn</p>

</body>
</html>

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

9.文本修饰：text-decoration

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

<!DOCTYPE html>
<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像素

<!DOCTYPE html>
<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">文本缩进20px</div>

</body>
</html>

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

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

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

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

<!DOCTYPE html>
<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">文本缩进20px</div>

</body>
</html>

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

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

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

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

<!DOCTYPE html>
<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 world</p>

</body>
</html>

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

小栗子的普
关注
  • 3
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS文本属性的使用方法
09-25
在CSS（层叠样式表）中，...了解并熟练运用这些CSS文本属性，可以让你在设计网页时更好地控制文本样式，提升用户体验。同时，要注意不同的浏览器可能对某些属性的支持程度不同，因此在实际应用时需要考虑兼容性问题。
CSS字体属性全解析
12-13
通过这五个属性，可以设定文本在web页面的显示效果或文本的打印效果。 1.字体系列font-family 支持按照优先级顺序列出各种要指派使用的字体，当用户系统没有安装首选字体时候，向后搜索，选用下一个指派的字体解析...
CSS文字文本属性
qq_62755767的博客
04-21 2561
CSS Fonts(字体)属性用于定义字体系列，大小，粗细，和文字样式(如斜体) 1.字体：css使用font-family属性来定义文本的字体类型 标签名 { font-family：字体样式 ； } 如果使用多个字体，每个字体间要用英文状态下的逗号隔开 一般情况下，如果字体名为多个英文单词及空格组成，一般放在单引号中 尽量使用系统默认自带字体，保证用户在任何浏览器中打开都可以显示正确 使用多个字体时，显示的规则为从前到后，如果浏览器可以识别前面的字体，就优先显示为前面的字体 2.
CSS中关于文本的属性主要包括以下几个：
最新发布
2303_79135296的博客
05-24 553
可选值有none（默认，没有装饰）、underline（下划线）、overline（上划线）、line-through（删除线）。1.color（颜色）：用于定义文本的颜色，可以使用预定义的颜色值（如red、blue），十六进制值（如#FF0000、#FF6600），RGB代码（如rgb(255,0,0)或rgb(100%,0,0)）。2.text-align（对齐）：用于设置元素内文本的对齐方式，可选值有left（左对齐）、center（居中对齐）、right（右对齐）。
CSS基础之CSS文本属性
m0_61794291的博客
03-03 2086
文章目录前言1.color2.text-align3.font-size4.text-decoration5.text-indent6.line-height7.文本属性总结 前言 CSS 文本属性可以设置文本的 外观，比如文本颜色、对齐文本、装饰文本、文本缩进、行间距的等 1.color color属性用于定义文本的颜色 <style> div { color: blue; } </style>
【CSS系列】第五章 · CSS文本属性
麟-小白的博客
05-09 818
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！！！如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多呀！❤❤❤爱你们！！！目录【往期回顾】1.CSS文本属性1.1文本颜色属性名：color作用：控制文字的颜色。可选值：1.颜色名2.rgb或rgba3.HEX或HEXA（十六进制）4.HSL。
css文本属性及选择器
qq_56290939的博客
06-08 2149
一些基础
CSS文本属性（笔记）
qq_66198247的博客
02-12 560
CSS文本属性可以定义于文本的外观，比如文本的颜色、对齐方式、装饰文本、文本缩进、行间距等。 1.文本颜色 color用于定义文本颜色 开发中最常用的是十六进制 2.文本对齐 text-align属性用于设置元素内文本内容的水平对齐方式 3.装饰文本 text-decoration属性规定添加到文本的修饰，可给文本添加下划线、删除线、上划线等。 4.文本缩进 text-indent属性用来指定文本第一行的缩进，通常是将段落的首行缩进 5.行间距 line-height.
CSS 常用文本属性
m0_73403871的博客
06-30 866
备注： 由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。让line-height=（height✖️2）-font-size - x。问题：垂直方向上的底部对齐，更好的解决办法是什么？-- 后面我们用定位去做。开发中常用的是：rgb/rgba或HEX/HEXA（十六进制）问题：多行文字垂直居中怎么办？--后面我们用定位去做。特别注意：vertical-align 不能控制块元素。x是字体族，动态决定的一个值。
CSS基础选择器,CSS字体属性,CSS文本属性
weixin_68773927的博客
11-12 882
属性表示注意点font-size字号单位px像素字体按工作中团队要求而定义字体粗细加粗 700/bold 不加粗 400/normal 数字后面不加单位font-style字体样式倾斜italic 不倾斜 normalfont字体连写1.字体连写是有顺序的，不能随意换位置2.其中字号和字体必须同时出现属性表示注意点color文本颜色通常用十六进制 例如：#ffftext-align文本对齐设置水平对齐方式文本缩写。
css文本属性 首行缩进
MELANCHOLY ❤ ◁ ❚❚ ▷
12-10 1338
css文本属性
CSS字体属性和文本属性
2302_79340128的博客
01-27 1621
CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。1.字体系列 CSS 使用 font-family 属性定义文本的字体系列。 2.字体粗细CSS 使用 font-weight 属性设置文本字体的粗细。 3.字体大小CSS 使用 font-size 属性定义字体大小。 4.文字样式CSS 使用 font-style 属性设置文本的风格。 注意： 平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。 5.字体复合属性字体属性可以把以上文字
CSS文字属性.rar
07-09
本压缩包"CSS文字属性.rar"聚焦于CSS中关于文字的属性，旨在帮助初学者和专业开发者更好地理解和运用这些属性来美化和控制网页文本的呈现效果。 CSS文字属性主要涵盖以下几个方面： 1. **字体家族（font-family）*...
css文字控制与css文本样式示例和属性
09-25
主要介绍了css文字控制与css文本样式示例和属性,需要的朋友可以参考下
css常用属性
11-19
在此，三岁收集了css的许多常用属性，包括文字属性、边框空白、符号属性、背景样式、指定背景位置、连接属性、边框一览表、表单运用、边界样式等，非常适合新手学生等。
CSS中的文本属性学习指南
09-24
主要介绍了CSS中的文本属性学习指南,是CSS入门学习中的基础知识,需要的朋友可以参考下
常用css属性查询表
09-25
CSS文本属性（text） * color：设置文本的颜色 * direction：规定文本的方向/书写方向 * letter-spacing：设置字符间距 * line-height：设置行高 * text-align：规定文本的水平对齐方式 * text-decoration：规定...
前端教程：20 CSS文本属性
08-30
千锋Web前端教程_20_CSS文本属性
CSS文本属性详解：缩进、对齐与装饰
CSS文本属性是Web开发中至关重要的部分，它控制着网页内容的呈现方式。本文将详细介绍四个主要的文本属性以及它们在网页布局中的应用。 1. **文本缩进 (text-indent)**: 通过`text-indent`属性，开发者可以设置段落...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值