css文本样式

最新推荐文章于 2024-04-15 13:03:59 发布
最新推荐文章于 2024-04-15 13:03:59 发布
阅读量444 收藏
点赞数
分类专栏： html&css 文章标签： css 字体
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ncut_LJD/article/details/50843297
版权

1.css文本样式

字体颜色，文本间距，对齐方式

1.字体颜色

    color

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div>这是一个文本！</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
div
{
	color:#F00;
}


2.字体间距

   letter-spacing

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div>这是一个文本！</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
div
{
	color:#F00;
	letter-spacing:30px;
}


 

3.行间距

   line-height

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div>这是一个文本！</div>
<div>这也是一个文本！</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
div
{
	color:#F00;
	letter-spacing:30px;
	line-height:30px;
}


4.文本对齐方式

   text-align:left/right/center/justify

   justify表示两端对齐

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div>这是一个文本！</div>
<div>这也是一个文本！</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
div
{
	color:#F00;
	letter-spacing:30px;
	line-height:30px;
	text-align:center;
}


5.修饰文本

   text-decoration

   包括下划线、上划线、删除线等

   text-decoration:underline/line-through/overline

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div id="a">这是一个文本！</div>
<div id="b">这也是一个文本！</div>
<div id="c">好的！</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
div
{
	color:#F00;
	letter-spacing:30px;
	line-height:30px;
	text-align:center;
}
#a
{
	text-decoration:underline;
}
#b
{
	text-decoration:line-through;
}
#c
{
	text-decoration:overline;
}



6.转换大小写

 text-transform:capitalize/uppercase/lowercase
 其中capitalize表示第一个字母大写

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div>i love java!</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
div
{
	color:#F00;
	letter-spacing:30px;
	line-height:30px;
	text-align:center;
	text-transform:capitalize;
}



7.控制文本换行

 white-space：normal/pre/nowrap

normal：正常换行

pre：按写的形式 和<pre>效果一样

nowrap：不换行

8.文本缩进

  text-indent


9.字体大小

 font-size

10.选择字体

 font-family

 font-family:1,2,3;  // 可以是多个字体 但是如果你的计算机有1 就使用1字体 如果没有就看2是否存在 以此类推


文本缩进 字体大小我 选择字体就不写了


小李讲源码
关注
专栏目录
CSS中文本样式（详解网页文本样式）
百赢出品，必属精品
04-30 1504
CSS Text模块用于控制文本的外观和排版。它提供了一系列属性，允许开发者对文本进行格式化和布局，以实现各种视觉效果。文本样式属性：CSS提供了一系列属性来控制文本的外观，包括颜色、字体、大小、粗细等。这些属性包括colorfont-size等。文本对齐：通过text-align属性可以控制文本在其容器中的水平对齐方式，如左对齐、右对齐、居中对齐等。文本装饰：使用属性可以添加文本装饰效果，如下划线、删除线等。行高和间距属性用于设置行高，和属性分别控制字母和单词之间的间距。文本转换。
CSS文本样式（详解）
qq_74095822的博客
12-16 1437
🍒博主将持续更新学习记录收获，友友们有任何问题可以在评论区留言。
CSS文本样式详解
大河之犬的博客
09-29 2461
去除a元素的下划线，这个技巧我们在实际开发中会大量用到。主要是因为超链接默认样式不太美观，极少网站会使用它的默认样式。属性来定义文本的修饰效果（下划线、中划线、顶划线）属性来控制文本在水平方向上的对齐方式。属性来定义两个单词之间的距离。属性来定义p元素的首行缩进。属性来控制字与字之间的距离。在CSS中，我们可以使用。在CSS中，我们可以使用。在CSS中，我们可以使用。在CSS中，我们可以使用。在CSS中，我们可以使用。属性来控制一行文本的高度。在CSS中，我们可以使用。在CSS中，我们可以使用。
【CSS】CSS文本样式【CSS基础知识详解】
@花无缺
11-22 4847
CSS文本样式最全指南，打造精品前端知识体系，详细解释每一个文本样式相关属性的使用，让CSS的知识清晰明了，每一个属性都有对应的完整代码实例，0基础入门前端！
CSS文字样式
热门推荐
weixin_46376652的博客
01-30 1万+
CSS文字样式，color，font-size，cursor:pointer;a{text-decoration:line-through;}a{text-decoration:overline;}underlinecolor:red;font-size:30px;font-weight:bold;font-weight:bold;font-family:"楷体";font-style: normal;text-align:center;text-indent:2em;white-space: nowrap
CSS 字体文本样式
xiangxiongfly
05-17 1万+
W3C（Web标准制定者）对vertical-align属性的定义是极其复杂的，其中有一项是“vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式”。可以设置h1元素的长宽与LOGO图片的长宽一样，然后定义h1的背景图片（background-image）为LOGO图片。vertical-align属性对inline元素、inline-block元素、table-cell有效，对block元素无效。x-offset参数：阴影水平偏移距离，单位可以是px、em、百分比。
CSS文本样式（附详细代码）
qq_57162921的博客
10-10 794
可以用来设置文本的大小写。
CSS文字样式设置
weixin_58437923的博客
12-08 2395
一、文字的字体 字体具有两方面的作用：一是传递语义功能。二是美学效应。由于不同的字体给人带来不同的风格感受，所以对于网页设计人员来说，首先需要考虑的问题就是精准选择字体。 在HTML中，设置文字的字体需要通过标记的face属性；而在CSS中，则使用font-family属性。 语法：font-family：字体名称 参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包括空格，则应用引号括起。 说明：用font-family属性可控制显示字体。不同的操作系统，其字体名是不同的。对于Windows系统，其
CSS 文本样式 包括单个文字样式、段落样式
最新发布
ai_365的博客
04-15 892
CSS 文本样式 包括单个文字样式、段落样式
CSS之文字样式
weixin_45604020的博客
06-22 6918
CSS字体属性定义字体，颜色、大小，加粗，文字等的样式。
css文字控制与css文本样式示例和属性
09-25
简化的font属性写法可以在一行代码中设置多种文字样式属性，例如body {font: italic bold 18px/1.5 Arial, '汉仪行楷简';}。 二、CSS控制文本属性： 1. text-indent：该属性用于设置文本首行缩进。可以使用长度...
21.1 CSS 文字样式
08-17
在这个主题“21.1 CSS 文字样式”中，我们将深入探讨如何利用CSS来调整和美化网页中的文本元素。这包括字体选择、颜色设定、大小调整、行高、字母间距、对齐方式以及许多其他高级技术。 1. **字体家族**：CSS提供了...
html链接和框架标签
不是秃头的程序员小李
03-08 1507
1.html链接标签 1.链接 链接测试网页 qq 有target标签 这个标签可以让网页重新出现一个新的网页 _blank _self _parent _top framename 这个是其中的5个属性 我们以_blank为例 链接测试网页 qq 2.文字连接与图片链接 链接测试网页 qq
html格式化标签
不是秃头的程序员小李
03-07 1432
1.粗体或 格式化标签练习 曲项向天歌 锄禾日当午 举头望明月 2.文字变大变小(知道就行 不总用) 3.斜体字或 4.下标和上标字体 5.下划线 6.删除线或 7.预格式化文本 8.marquee可移动文字 9.img图像标签 10.HTML实体 显示结果    描述                实体名          实体号
css边框样式
不是秃头的程序员小李
03-10 1267
边框样式 1.边框类型  border-style:    (1)solid    实线边框  (2)double    双线边框，两条边框线的距离是：border-width  以下边框根据border-color颜色值画出  (3)groove    3D凹槽边框  (4)ridge    菱形边框  (5)inset    3D凹边  (6)outset 
html表格和列表标签
不是秃头的程序员小李
03-09 990
1.html表格标签 1.表格标签 r=row 行 d=data 信息 h=head 头 2.border属性 border这个是边框 如果没加这个就没有边框 在table中加上他 在后面输入一个大于0的正数 就能出现边框 并且根据数的不同 边框的大小不同 表格测试网页 序号姓名年龄性别地址 1李华17男北京市朝阳区 2小明37女重庆市
css后代选择器和属性选择器
不是秃头的程序员小李
03-11 905
1.后代选择器 举两个个例子吧 无标题文档 我是谁谁谁！！！ @charset "utf-8"; /* CSS Document */ p em { font-weight:bold; } 无标题文档 我是谁谁谁！！！ 你好！ @charset "utf-8"; /* CSS Document */ div .a { f
css内外边距样式
不是秃头的程序员小李
03-10 775
外边距样式 1.margin-top 无标题文档 @charset "utf-8"; /* CSS Document */ #div1 { width:300px; height:300px; border:solid 5px red; } #div2 { width:30px; height:30px; border:solid 5px blu
html表单标签
不是秃头的程序员小李
03-09 644
表单标签 关键字 我们用一个例子来说这个表单对象 个人信息 用户名，密码，性别，兴趣爱好，所在城市，备注，提示按钮，重置按钮，提示按钮 form：表单，一个表单包含的数据会一起被提交 input type="text" type= text/password/radio(取一样的name表示一组)/checkbox/button/submit/reset select
CSS文字样式定义与链接效果
本文主要介绍了CSS中用于定义文字样式的常用代码，包括链接的不同状态、自定义类别的链接样式以及页面背景和字体设置。 在网页设计中，CSS（层叠样式表）是一种强大的工具，用于控制网页元素的外观和布局。在【标题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值