CSS引入方式与文本属性

最新推荐文章于 2025-05-04 09:06:04 发布
最新推荐文章于 2025-05-04 09:06:04 发布
阅读量120 收藏
点赞数 2
分类专栏： web 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_56787796/article/details/115555108
版权

CSS引入方式与文本属性

引入方式

内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部样式表</title>
    <style>
        div {
            color: red;
        }
        /* style 可以放到任何地方 但一般放在head标签中 */
    </style>
</head>
<body>
    <div>溯琳真帅</div>
</body>
</html>

行内样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内样式表</title>
</head>
<body>
    <div>溯琳真帅</div>
    <div style="color: red; font-size: 30px;">溯琳真帅</div>
    <!-- 注意行内样式的格式 -->
    <div>溯琳真帅</div>
</body>
</html>

外部样式表

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表</title>
    <link rel="stylesheet" href="style.css">
    <!-- 第二种方式
        <style>
         @import url(style.css);
         </style> 
        -->
</head>
<body>
    <div>溯琳真帅</div>
    <div id="div1">溯琳真帅</div>
    <div>溯琳真帅</div>
</body>
</html>

css

#div1 {
    color: red;
}

文本属性

文本对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对齐</title>
    <style>
         h1 { /*居中对齐*/
            text-align: center;
        }
        h2 { /*左对齐*/
            text-align: left;
        }
        h3 { /*右对齐*/
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>溯琳真帅</h1>
    <h2>溯琳真帅</h2>
    <h3>溯琳真帅</h3>
</body>
</html>

文本对齐

文本缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本缩进</title>
    <style>
        p {
            /* 文本第一行缩进多少距离 */
            /* text-indent: 20px; */
            /* em一个文字大小 */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>中国专业IT社区优快云 (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。</p>
    <p>旗下拥有：专业的中文IT技术社区： youkuaiyun.com；移动端开发者专属APP： 优快云 APP、优快云学院APP；新媒体矩阵微信公众号：优快云资讯、程序人生、GitChat、优快云学院、
        AI科技大本营、区块链大本营、优快云云计算、GitChat精品课、人工智能头条、优快云企业招聘；IT技术培训学习平台： 优快云学院；技术知识移动社区： GitChat；IT人力资源服务：科锐福克斯；
        高校IT技术学习成长平台：高校俱乐部。</p>
</body>
</html>

文本缩进

文本颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本颜色</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>
<body>
    <div>溯琳真帅</div>
        <!-- 
            色值有：预定义的色值，如red,greed,blue......
            十六进制的 #FF0000，#F6666,......
            RGB代码    rgb(255，255,255)或rgb(100%,0%,100%)
            开发中常用十六进制
         -->
</body>
</html>

文本颜色

行间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行间距</title>
    <style>
        .p1 {
            line-height: 50px;
        }
    </style>
</head>
<body>
    <p>溯琳真帅</p>
    <p class="p1">溯琳真帅</p>
    <p>溯琳真帅</p>
    <p>溯琳真帅</p>
    <p>溯琳真帅</p>
</body>
</html>

行间距

装饰文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>装饰文本</title>
    <style>
        /* 下划线 */
        #div1 {
            text-decoration: underline;
        }
        /* 删除线 */
        #div2 {
            text-decoration: line-through;
        }
        /* 上划线 */
        #div3 {
            text-decoration: overline;
        }
        /* 取消a标签的默认下划线 */
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="div1">溯琳真帅</div>
    <div id="div2">溯琳真帅</div>
    <div id="div3">溯琳真帅</div>
    <a href="#">溯琳真帅</a>
</body>
</html>

装饰文本

CSS中行距的表示方式
CodeByte的博客
10-06 475
CSS中，行距（line-height）用于控制文本行之间的间距。在上面的示例中，行高被设置为24像素，这意味着每一行的高度都是24像素。在这个示例中，行高被设置为当前字体尺寸的1.5倍。例如，如果字体大小为16像素，则行高将为24像素（16 * 1.5）。在这个示例中，行高被设置为当前字体尺寸的150%。如果字体大小为16像素，则行高将为24像素（16 * 1.5）。在这个示例中，行高被设置为当前字体尺寸的1.2倍。如果字体大小为16像素，则行高将为19.2像素（16 * 1.2）。
CSS基础知识（四）CSS引入方式 字体样式及文本样式
weixin_65548623的博客
04-15 1556
文章目录一、CSS引入方式（样式表）（一）内部样式表（嵌入式）（二）行内样式表（行内式）（三）外部样式表（链接式）二、CSS字体样式（一）字体系列（font-family）（二）字体大小（font-size）（三）字体粗细（font-weight）（四）字体样式（font-style）（五）字体复合属性（font） 一、CSS引入方式（样式表） （一）内部样式表（嵌入式） 内部样式表是写到HTML页面内部的，将所有的CSS代码抽离出来，单独放到一个<style>标签 <style>
css行间距怎么设置(CSS设置行间距)
u013194568的博客
12-02 5万+
如果用的是word文字处理软件，操作步骤如下1.打开WORD，选中需要调整的段落或者整篇文档，2.在选中变色的整体段落上，点击鼠标右键，3.选择段落－字间距，然后调整到你认为合适后，4.点击确定。方法一：在html中，可以使用letter-spacing属性设置文字间距，该属性可以增加或减少字符间的空白（字符间距），只需要给包含文字的元素添加“letter-spacing:间距值;在html中，可以使用padding属性设置内容左右边距，只需要给元素设置“padding:0 数值+单位|百分比数值”即可。
css设置行间距的三种方法
很酷的站长的博客
10-30 1万+
本文教程操作环境：windows7系统、css3版，DELL G3电脑。line-height属性指定了一个百分比，它将相对于字体来计算行高。以上就是css设置行间距的三种方法，希望对大家有所帮助。
CSS中设置行间距的方法
m0_51144154的博客
01-05 1万+
在CSS中并没有为我们提供直接设置行间距的方式 我们只能通过设置行高来间接设置行间距，行高越大行间距越大 使用line-height来设置行高 行间距 = 行高 - 字体大小 通过 light-height可以间接的设置行高 //line-height 可以简介设置的行高 //可以接收的值： // 1. 直接接收一个大小 // 2. 可以指定一个百分数，则会相对于字体去计算行高 // 3. 可以直接传一个数值，则行高会..
CSS行间距设置方法
高性价比服务器就选：蓝易云
05-13 1781
不过，除了使用与字体大小的比例（也被称为无单位行高），line-height属性还可以接受其他类型的数值，比如固定的像素值（px）、点数（pt）、百分比（%）等。那么，开始你的魔法绘画吧，用CSS的行间距，为你的网页添加那一分独特的韵味。与此同时，记住，作为一个优秀的网页设计师，要把握住细节的魅力，但更要拥有高级的视野，辩证地看待所有设计元素，既要注意细节，又要洞察整体，最终创造出满足用户需求、赏心悦目的作品。这就像是在问，怎么选最美的草地颜色？同样，选择什么样的行间距，也是要根据你的设计目的和内容去定。
css对于颜色和文本属性的控制
09-27
【CSS颜色和文本属性控制详解】 CSS（层叠样式表）是网页设计中用来控制页面样式和布局的重要工具。在CSS中，颜色和文本属性的控制是基础且至关重要的部分，它们决定了网页内容的视觉呈现。 ### CSS语法基础 CSS...
JavaEE学习日志(三十九): HTML表单，CSS引入方式
01-08
CSS有三种引入方式： 1. 行内样式：直接在HTML元素的`style`属性中编写CSS代码，如`;">文本</p>`。 2. 内部样式：在`<head>`标签内创建`<style>`标签，将CSS代码放在其中，影响当前页面的所有指定元素。 3. 外部...
纯css3制作Word文本编辑器效果
11-02
1. **选择器增强**：CSS3引入了更强大的选择器，如属性选择器、伪类和伪元素，这使得我们可以更精确地定位和风格化元素，比如模拟Word中的高亮文本或选中状态。 2. **边框与背景**：CSS3允许我们设置圆角边框、渐变...
CSS3文本阴影text-shadow属性详解
12-13
CSS3引入的`text-shadow`属性就是实现这一效果的关键。通过`text-shadow`，我们可以轻松地为文本添加各种阴影样式，包括但不限于右下角、左下角、左上角和右上角的阴影，甚至可以创建立体文字效果。 ### 1. 阴影的...
CSS设置字间距、行间距、首行缩进
热门推荐
空白_回忆的博客
03-05 13万+
**CSS设置字间距、行间距、首行缩进**字间距 1、text-indent设置抬头距离css缩进即对，对应div设置css样式text-indent : 20px; 缩进了20px 2、letter-spacing来设置字与字间距_字符间距离，字体间距css样式即对对应div设置css属性样式为letter-spacing:8px;，字间距为8px 行间距 在CSS中，可以设置行间距，格式
css 控制上下行距离
qq_33240556的博客
07-31 1663
要使用 CSS 控制文本的上下行距（即行间距），你可以使用属性。属性定义了行盒的高度，它决定了行内元素的基线之间的最小距离。这是一个非常常用的属性，用于调整文本的可读性和美观度。
CSS中的文本间距与行高调整
最新发布
weixin_42284380的博客
05-04 236
本文探讨了CSS中用于调整文本间距的两个属性：word-spacing和letter-spacing，以及如何通过line-height属性来调整文本行的高度。文章深入解释了这些属性的工作原理和适用情景，并通过示例展示了如何在实际开发中应用这些属性来改善页面布局。
【CSS】如何设置行距、段落间距、缩进格式
TomRen
12-04 5万+
CSS段落间距调整 P标签段落上下距离如何设置 https://blog.youkuaiyun.com/lin74love/article/details/62883243 CSS中margin和padding的上下左右 https://blog.youkuaiyun.com/s464036801/article/details/8085543 ...
CSS基线
鲸落
07-21 1276
什么是CSS基线，怎么使用基线布局？
CSS中区分行高，行间距
王春燕的博客
04-11 2452
行高（line height） —文字占有的实际高度 —使用line-height来设置行高 行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，控制文字行与行之间的距离， 网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示 — line-height可接收的值： 1.直接就写一个大小，eg：22px 2.可以指定一个百分数，则会相对于字体去计算行高，eg：30% 3.可以直接传一个数值，则行高会设置字体大小相应的倍数，eg：2 — 行高经常还用
css行间距 line-height
wujian_csdn_csdn的博客
11-01 760
行间距，由三部分组成，文本高度+上间距+下间距 举例： 行高设置26px，文字默认大小是16px，上下间距就平分5px，测量行间距方法一般测量上一行的下底部，到下一行的底部，也就可以通过测量工具按照这样的测量方法测试出来。 ...
css设置行间距
wangjingyi
05-30 1873
line-height 属性设置行间的距离（行高）。 *不允许使用负值。 [code="css"] p.small {line-height: 0.5} p.big {line-height: 2} [/code] [code="html"] 这是拥有标准行高的段落。 默认行高大约是 1。 这是拥有标准行高的段落。 这个段落拥有更小的行高。 这个段落拥有更小的...
CSS滚动条与文本样式属性详解
"这篇资源主要介绍了CSS中与HTML标签相关的常用样式属性，特别是关于滚动条的自定义颜色以及一些基础的HTML文本格式化标签。同时，还提到了CSS的外部导入和JavaScript的外部脚本加载方式。" 在网页设计中，CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值