css3文本样式

最新推荐文章于 2022-11-22 07:45:00 发布
最新推荐文章于 2022-11-22 07:45:00 发布
阅读量184 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42958527/article/details/107919791
版权

color指定字体颜色

可取值：
1.关键字。（如：red，blue，white）

2.RGB。由红色，绿色蓝色三原色组成，每个的取值都是0-255
（如：rgb(168, 27, 168)）

3.六位十六进制。（如：color: #e3e4e5；）color: #e3e4e5

4.RGBA。比RGB多了一个透明度的值得设置，A表示透明度
（如： color:rgba(0,0,0,0.1)；）
元素半透明,可以实现元素的显示与隐藏0隐藏，中间半透明，1是显示
opacity: 0.5;

5.HLS。由色调、饱和度、亮度组成，取值分别为
0-360 ，0.0%-100.0% ，0.0%-100.0%（如：color: hsla(0, 100%, 50%)😉

6.HLSA。比HLS多了一个透明度的值得设置，A表示透明度
（如：color: hsla(0, 100%, 50%, 0.5);）

font-size指定字体大小

如：font-size: 10px;

font-family指定字体样式

1.可以指定多种自带字体样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
    <style>
        div {
            /* 字体家族 */
            /* 有衬线字体，字体变得更加有一些棱角 */
            font-family: serif;
            /* 无衬线字体 */
            font-family: sans-serif;
            /* 梦幻字体 */
            font-family: fantasy;
            /* 草书 */
            font-family: cursive;
            /* 宋体 */
            font-family: 宋体;

        }

        p {
            font-family: 宋体;
        }
</head>

<body>
    <div>字体设置font系列，text系列</div>
    <p>字体设置font系列，text系列</p>
</body>

</html>

2.字体栈，由于我们不能保证我们的字体有效，可以一次性指定多个字体，如果第一个字体无效就用下一个，以此类推，通常把最后一个设成通用字体

font-family: 雅痞-简，华文行楷，cursive，宋体;

3.当给我们想设置更好看的字体的时候可以使用网络字体

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
    <style>
        div {
        /* 使用网络字体 */
            font-family: webfont;
        /* 声明字体  使用网络字体*/
        @font-face {
            /* 字体家族的名称 */
            font-family: webfont;
            src: url('./fonts/令东齐伋体.ttf');
        }
    </style>
</head>

<body>
    <div>字体设置font系列，text系列</div>
</body>

</html>

font-style用于打开和关闭斜体文本

可取属性值有：
normal，正常字体，关闭斜体
italic，斜体
oblique，模拟斜体

 font-style: italic;

font-weight设置字体粗细

可取属性值有：
normal，默认粗细（400）正常
bold，加粗字体700
lighter，设置当前元素字体比父元素更细
bolder，设置当前元素字体比父元素更粗
100-900，数值类型的粗细程度，越大越粗

/* 设置加粗 */
            font-weight: bold;
            font-weight: 700;

text-align文字排列方式

可取属性值有：
left左对齐
center居中对齐
right右对齐

text-transform字体改变，文本变形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
    <style>
        div {
            /* 文本变形 */
            /* 英文大写 */
            text-transform: uppercase;
            /* 英文小写 */
            text-transform: lowercase;
            /* 首字母大写 */
            text-transform: capitalize;
            /* 等宽 */
            text-transform: full-width;
            /* 不变形 */
            text-transform: none;
        }
    </style>
</head>

<body>
    <div>字体设置font系列，text系列</div>
    <p>字体设置font系列，text系列</p>
</body>

</html>

text-decoration-line设置线的种类

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            /* 中划线 删除线 */
            text-decoration-line: line-through;
            /* 上划线 */
            text-decoration-line: underline;
            /* 下划线 */
            text-decoration-line: overline;
        }

        a {
            /* 取消文本修饰 */
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div>你好 hello</div>
</body>

</html>

text-decoration-style线的样式

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            /* 实线 */
            text-decoration-style: solid;
            /* 点状线 */
            text-decoration-style: dotted;
            /* 虚线 */
            text-decoration-style: dashed;
            /* 双实线 */
            text-decoration-style: double;
            /* 波浪线 */
            text-decoration-style: wavy;
        }
    </style>
</head>

<body>
    <div>你好 hello</div>
</body>

</html>

text-decoration-color

 /* 颜色 */
text-decoration-color: red;

text-shadow设置或取消文本阴影

语法：text-shadow: h-shadow v-shadow blur color;
分别是水平阴影的位置、垂直阴影的位置、模糊的距离、阴影的颜色。
前两个是必写，后两个是选择写。

text-shadow: 1px 1px 1px red;

列表默认样式

margin-top 、margin-bottom、padding-left
ul、ol16px、16px、40px
li–
dl16px、16px、无内边距
ddmargin-left：40px
p16px、16px
body上下左右均为8px

list-style-type设置列表项标志类型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
    <style>
        li {
            list-style-type: decimal-leading-zero;
            list-style-type: armenian;
            list-style-type: circle;
            list-style-type: disc;
            list-style-type: square;
            list-style-type: georgian;
            list-style-type: lower-alpha;
            list-style-type: lower-greek;
            list-style-type: lower-latin;
            list-style-type: lower-roman;
            list-style-type: upper-alpha;
            list-style-type: upper-latin;
            list-style-type: upper-roman;
        }
    </style>
</head>

<body>
    <ul>
        <li>HTML-HyperText Markup Language</li>
        <li>CSS-Cascading Style Sheets</li>
        <li>JS</li>
    </ul>
</body>

</html>

list-style-position设置列表项标志出现的位置

outside：列表项标志出现在主块框的外部（默认）
inside：列表项标志出现在主块框的内部

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
    <style>
        li {
            /* 位置 */
            list-style-position: outside;
            list-style-position: inside
        }
    </style>
</head>

<body>
    <ul>
        <li>HTML-HyperText Markup Language</li>
        <li>CSS-Cascading Style Sheets</li>
        <li>JS</li>
    </ul>
</body>

</html>

cursor光标形状

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标样式</title>
    <style>
        div.pointer {
            /* 手型 */
            cursor: wait;
            cursor: help;
            cursor: crosshair;
            /* 行高  只能设置单行文本在容器内的垂直居中*/
            line-height: 100px;
            height: 100px;
            border: 1px solid red;
            /* 垂直方向对齐方式  无用*/
            /* vertical-align: middle; */
            /* 处理溢出（容器太小，内容太多） 如果div不设置高，高度由子元素撑起*/
            /* 超出内容隐藏 */
            /* overflow: hidden;; */
            /* 自动产生滚动条 */
            /* overflow: auto; */
            /* 强制产生滚动条 */
            overflow: scroll;
        }
    </style>
</head>

<body>
    <button class="pointer">按钮</button>
    <a href="" class="pointer">超链接</a>
    <div class="pointer">查看不同的光标
        <br>
        hello
    </div>

</body>

</html>

显示与隐藏

display显示方式
inline行内显示快高无效
block块级显示快高有效
inline-block行内显示快高有效
none不显示，不占据屏幕空间
visibility显示与影隐藏
hidden隐藏，占据屏幕空间
visible显示
overflow溢出处理
hidden超出内容隐藏
auto超出产生滚动条
scroll滚动条
橙小甜
关注
CSS中文本样式（详解网页文本样式）
百赢出品，必属精品
04-30 1563
CSS Text模块用于控制文本的外观和排版。它提供了一系列属性，允许开发者对文本进行格式化和布局，以实现各种视觉效果。文本样式属性：CSS提供了一系列属性来控制文本的外观，包括颜色、字体、大小、粗细等。这些属性包括colorfont-size等。文本对齐：通过text-align属性可以控制文本在其容器中的水平对齐方式，如左对齐、右对齐、居中对齐等。文本装饰：使用属性可以添加文本装饰效果，如下划线、删除线等。行高和间距属性用于设置行高，和属性分别控制字母和单词之间的间距。文本转换。
CSS 3之 文本样式（三）
程序员小白的博客
06-11 246
在网页显示信息时，若指定显示区域宽度，而显示的信息过长，其结果就是信息会撑破指定的信息区域，进而破坏整个网页布局； 若设定的显示区域过长，就会影响整体的网页显示； 使用 属性能解决上述问题； 属性用来定义文本溢出时显示省略标记，即定义省略文本的出来方式； 它不具备其他的样式属性定义，要实现溢出时产生省略号的效果还需要定义强制文本在一行内显示（）及溢出内容为隐藏（），只有这样才能实现溢出文本显示省略号的效果； 语法格式如下： 例子 1： 当在一个指定区域显示一整行文字时，若文字在一行显示不完时，就需要换行；
CSS3——文本样式
zhengyikuangge的博客
08-08 727
文字阴影与自动换行 text-shadow 文字阴影 多个阴影 word-break word-wrap 字体 服务器字体font-family可以自定义 默认字体 根据字体样式选择对应字体 本地字体自带字体 font-variant font-weight font-stretch font-size文字阴影与自动换行text-shadow文字阴影后面可以跟四个参数，意义分别是：文字前与阴影的距离
CSS3_文本样式
aof26372的博客
11-09 113
1. 文字阴影 text-shadow 使用： text-shadow: 水平方向偏移量 垂直方向偏移量 模糊程度 颜色; #box { text-shadow: 10px 10px 3px deeppink; // 1个阴影 } 多个阴影 加一个逗号 写第二个阴影的样式 #box { t...
CSS3的文本样式以及列表样式
huangduoduo929的博客
08-02 246
一.字体样式 1.color:为字体指定的颜色 2.font-style：用于打开和关闭斜体文本 取值： nomal：正常字体，关闭斜体。 italic：斜体。 oblique：模拟斜体。 3.font-family：为文字指定的特殊字体，浏览器只会使用浏览器可以访问的字体。 取值： serif：有衬线的字体。 sans-serif：无衬线的字体。 monospace：等宽字体，用于代码。 fantasy：用于装饰字体。 字体栈：由于我们不能保证我们的字体有效，可以一次性指定多个字体，如果第一个字体无效可以
CSS3-文本样式、字体样式
Wjiahui的博客
02-07 433
CSS3-文本样式、字体样式
CSS3折纸样式文本标题特效.rar
05-11
【CSS3折纸样式文本标题特效】 在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的样式和动画效果，极大地提升了网页的视觉吸引力。其中一个独特的设计手法就是折纸样式，这种效果可以将普通的文本标题...
CSS常用文本样式总结
12-11
CSS文本样式是相对于内容进行的样式修饰。由于在层叠关系中，内容要高于背景。所以文本样式相对而言更加重要。有些人对文本和字体样式之间的不同不太了解，简单地讲，文本是内容，而字体则用于显示这个内容。本文将...
css文字控制与css文本样式示例和属性
09-25
在CSS中，文字控制和文本样式是构建良好用户体验的基础，对网页内容的可读性和美观性具有重要影响。以下将详细介绍CSS中与文字控制及文本样式相关的属性和示例。 一、CSS控制文字属性： 1. font-size：该属性用于...
【CSS】CSS文本样式【CSS基础知识详解】
最新发布
@花无缺
11-22 4883
CSS文本样式最全指南，打造精品前端知识体系，详细解释每一个文本样式相关属性的使用，让CSS的知识清晰明了，每一个属性都有对应的完整代码实例，0基础入门前端！
CSS3-文本样式、背景样式
qq_52726736的博客
10-19 358
CSS3文本样式与背景样式
【CSS3学习笔记】6：CSS文本样式 下
LauZyHou的笔记
07-13 758
本节学习CSS中通过文本样式的设置，来更改样式以及文本的方位等。 文本样式 主要分为三种：文本装饰、英文大小写装换、文本阴影。text-decoration用来给文本加线条。 ①underline下划线。②overline上划线。③line-through删除线。④none取消划线。text-transform用来设置英文大小写。 ①uppercase全大写。②lowercase全小写。③c
9.CSS3文本样式属性
a1303490776的博客
04-20 387
CSS3文本样式属性
CSS3常用文本样式的使用
wutrg1502的博客
09-20 152
一、文本样式(部分，详见w3c文档) 个人理解，主要是为了以后用到的时候好找，斟酌使用 1.font-family:字体|字体簇 -- 定义文本的字体。字体簇是一类字体。 2.font-size:绝对单位|相对单位 --定义文本的大小。相对单位例如ps、em、%等，ps会受到分辨率的影响，建议用em。 3.color:颜色...
CSS3文字与字体相关样式
hualala_32的博客
02-14 723
给文字添加阴影 使用服务器端字体 修改文字种类而保持字体尺寸不变 给文字添加阴影text-shadow: length(阴影距离文字横向方向距离) length(阴影距离文字纵向方向距离) length(模糊度越大越模糊) color(背景模糊的颜色)第一个length正方向向右 第二个length正方向向下可添加多个阴影，直接加“，”<html> <head lang="en"> <met
css文本样式处理
马优晨
03-01 1489
这里通过一些实例来演示一下，CSS3 对于文本的属性样式~ 文本属性包括： 代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;文字样式&lt;/title&gt; &lt;style&gt; .newspaper { -moz-column-count:3...
颜色代码：网页颜色代码大全及色彩搭配教程
热门推荐
Hama White 的博客
07-17 3万+
非常quanmia转自：2008-07-28 http://huayi898.blog.163.com/blog/static/25813516200862874336792/  华艺时空注：        鉴于朋友们（包括我自己）在设计网页、取用颜色时到处东翻西找的不便，经过认真学习领悟，觉得有必要把比较全面的颜色代码表做到博客中来，同时更觉得网页颜色搭配常规性知
html常用标签
weixin_56469079的博客
01-03 287
<title>csdn</title> <!--设置浏览器标题为csdn--> <br/> <!-- 换行--> <hr/> <!--添加水平线--> <button>按钮</button> .
html ul背景颜色 和文字颜色,UL和浮动DIV：列表文本换行但背景颜色不换行(示例代码)...
weixin_28732953的博客
06-22 909
需要帮助浮动DIV和列表。 DIV浮动到页面的右侧，而列表条目围绕它流动。问题是，在将背景颜色应用于列表的LI元素时，颜色会拉伸全宽度，而文本会在到达DIV时进行包装。在保持LI的显示为块的同时，如何使LI的包裹像文本一样的背景颜色？这是示例代码：.mydiv {height: 200px;width: 200px;background-color: red;margin-right: 45px;...
CSS3选择器与文本样式总结
"这是一个关于CSS3基础知识的总结，涵盖了选择器、字体与文本样式等多个核心概念，旨在方便查阅和学习。" 在CSS3中，选择器是定位和应用样式的基石，它们包括： 1. **标签选择器**：通过元素名称来指定样式，如`p{...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值