HTML+CSS文字修饰样式表

已于 2022-04-05 23:01:31 修改
阅读量652 收藏 2
点赞数 2
分类专栏： python+前端 文章标签： html5 css3
于 2022-04-03 09:48:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzbzxzzdf/article/details/123932690
版权

想要用css修饰网页，就需要HTML文档中引入CSS样式表，css提供了四种方式。

1、行内式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行内式</title>
</head>
<h1 style="font-size: 16 px; color: purple ;">使用css行内式修饰一级标题</h1>
<body>
</body>
</html>

2、内嵌式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内嵌式引入css样式表</title>
<style type="text/css">                /*规定在浏览器中如何呈现 HTML 文档*/
h2{text-align: center; }           /*居中*/
    p{                                    /*标签选择器*/
        font-size: 16 px;            /*字号*/
        font-family: "楷体"；
        color: purple ;                /*颜色*/
        text-decoration: underline;/*下划线*/
    }
</style>
</head>
<body>
    <h2>css样式</h2>
    <p>使用style可以定义css样式表</p>
</body>
</html> 

3、外链式

        1.先建立一个css文件

        @charset "utf-8";        
        /* CSS Document */
        h2{text-align: center; }           /*居中*/
            p{
                font-size: 16 px;            /*字号*/
                font-family: "楷体"；
                color：purple ;                /*颜色*/
                text-decoration: underline;/*下划线*/
            }

        2.建立html文件

        <!doctype html>
        <html>
        <head>
        <meta charset="utf-8">
        <title>外连接引用css样式表</title>
            <link href="1.css" type="text/css" rel="stylesheet" />  
        </head>
        <body>
            <h2>css样式</h2>
            <p>使用style可以定义css样式表</p>
        </body>
        </html>

 4、导入式

        1.先建立一个css文件

@charset "utf-8";        
        /* CSS Document */
        h2{text-align: center; }           /*居中*/
            p{
                font-size: 16 px;            /*字号*/
                font-family: "楷体"；
                color：purple ;                /*颜色*/
                text-decoration: underline;/*下划线*/
            }

  2.建立html文件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <style type="text/css">
    @import "1.css";                        /*@import url(1.css);
    </style>
</head>
<body>
    <h2>css样式</h2>
    <p>使用style可以定义css样式表</p>
</body>
</html>

竹院逢话
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML使用CSS的方法详解
cnds123的专栏
01-10 1万+
在尝试学习 CSS 之前，您应该了解 HTML 的基础知识，可以同时学习 HTML 和 CSS。 本文重点介绍HTML使用CSS的方法，即怎样将css引入到html文件。
超文本标记语言（html）之文字编辑
yysyyssmdsmd的博客
03-06 2062
前端基础知识
CSS字体，文本修饰属性，盒子
最新发布
Kevin7_35Durant的博客
04-30 723
font拥有font-style,font-weight,font-size,line-height,font-family。rgb有3个参数，红色，绿色，蓝色，每个参数的范围在0~255，也就是红蓝绿的颜色深度，由浅到深，所以rgb可以表示的颜色有。rgb的升级版，第四个参数是透明状态，可以用来表现颜色的透明状态。作用：改变文本的倾斜程度，默认文本是不倾斜的，属性值是关键字。作用：换字体格式，例如宋体，楷体，默认字体使微软雅黑。属性值：left（左对齐） 默认是左对齐。属性值：属性值可以写颜色的英文，
CSS样式分类
world_kun的博客
11-30 1585
1, 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下： <head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head> 语法中，style标签一般位于he...
样式表
weixin_30888027的博客
05-21 48
样式表主要有内联样式表、内嵌样式表、外部样式表。 内联样式表和HTML联合显示，控制精确，但是可重用性差，冗余较多。 例：<p style="font-size:14px;">内联样式表</p> 内嵌样式表 　　作为一个独立区域内嵌在网页里，必须写在head标签里面。 　　<style type="text/css">...
CSS 常用文本属性
m0_73403871的博客
06-30 861
备注： 由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。让line-height=（height✖️2）-font-size - x。问题：垂直方向上的底部对齐，更好的解决办法是什么？-- 后面我们用定位去做。开发中常用的是：rgb/rgba或HEX/HEXA（十六进制）问题：多行文字垂直居中怎么办？--后面我们用定位去做。特别注意：vertical-align 不能控制块元素。x是字体族，动态决定的一个值。
css文字控制与css文本样式示例和属性
12-13
在网页设计中，CSS（层叠样式表）是用于控制网页元素外观的关键工具。本文将深入探讨CSS如何控制文字及文本样式，通过一系列属性来实现多样化的文本效果。 首先，CSS提供了一系列属性来控制文字的基本样式。例如： ...
css样式表代码
04-09
文字修饰是 CSS 样式表中一个非常重要的属性，它可以确定文本的修饰方式。常见的文字修饰有： * none：不修饰 * underline：下划线 * overline：上划线 * line-through：删除线 CSS 样式表代码是 Web 开发中不可或...
html+css+script 简单表格
05-25
在提供的压缩包中，有多个名为"skinsX.css"的文件，它们可能是用于不同样式的CSS样式表。通过导入这些文件到HTML中，可以为表格应用不同的视觉效果。 3. JavaScript（简称JS）： JavaScript 是一种客户端脚本语言...
css实现内容逐个输出样式.html
07-30
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言...
HTML-CSS-详解资源
07-25
CSS:层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本...
CSS3的初级文本修饰我知道
chihuomiao的博客
03-26 642
文本修饰 text-decoration：none；（underline下划线；overline上划线；line-through中间线） 一般是默认，但如果是a标签就会去掉下划线 垂直对齐 vertical-align：middle;（top=text-top、bottom=text-bottom、super 让图片后面的文字垂直对齐方式居中，向上、向下（跟图片边缘对齐）再往下一点点（比图片底线还低一点） ---------------------------------------------
引入css样式表的三种方式（全）
FishC的博客
11-17 2967
引入css样式表的三种方式（详细）
引入CSS样式的五种方式
weixin_34195364的博客
11-27 359
  一、使用STYLE属性 将STYLE属性直接加在个别的元件标签里，&lt;元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如： &lt;TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%&gt;这种用法的优点 是可灵巧应用样式於各标签中，但是缺...
HTML引入CSS样式三种方法及优先级
王文松的博客
12-05 4万+
方法     css的样式引用由3种方式。分别为内联定义、链入内部CSS和链入外部CSS。有一点注意，样式表放在不同的地方，产生作用的范围不同（以下会说明）。 内联定义    内联定义，即在对象的标记内使用对象的style属性定义适用的样式表属性，格式定义为 :，如下示例 浏览器此时显示内容 链入内部CSS   CSS内链接是由标记对放在中，在中有一个类型属性type，
CSS文本修饰
hu20210623的博客
08-08 238
字体样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- font-family:字体 font-size：字体大小 font-weight 字体粗细 color 字体颜色 --> <style> body{ font-
引入CSS样式表的三种方式
qq_43473027的博客
04-18 1267
引入CSS样式表的三种方式 行内样式 通过标签的style属性来设置元素的样式，其基本语法格式如下： <h1 style="color:red;">style属性的应用</h1> <p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p> 语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签
css所有文本修饰样式
zxh的专栏
09-06 2829
color: red; /*文本的颜色*/ line-height: 20px; /*为文本设置行高*/ text-align: center; /*水平对齐是影响一个元素中的文本的水平对齐方式。　值: left | center
7款漂亮的纯css字体样式
热门推荐
开心大表哥
01-03 8万+
简单粗暴，直接上马：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1 class="vintage1">美丽的中国语</h1> <h1 class="vintage2">美丽的中国语</h

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值