HTML <style>中一些常用的定义格式

最新推荐文章于 2025-03-10 14:29:29 发布
最新推荐文章于 2025-03-10 14:29:29 发布
阅读量2.1k 收藏 2
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/whchensir/article/details/8863605
版权

 HTML <style>中一些常用的定义格式

CSS 参考手册

CSS 实例

 

<STYLE>

p            { line-height: 180%; font-family:微软雅黑; TEXT-INDENT: 2em }

.s1 { font-family:微软雅黑;}

.s2 {color:silver}

.s3 {font-size:24px}  size3(12pt磅), size4(14pt磅)

.s4 {font-size:150%}

.s5 {background-color: black;  color=white}

h2 {font-size:2.5em;}  /* 40px/16(em)=2.5em */

</STYLE>

<body bgcolor="#000000" >

<p>The font-family value of the text is the browser default font.</p>

<p class = "s1">The fon-family value of the text is "Arial"。</p>

<p class = "s2">The fon-family value  of the text is "Tahoma"。</</p>

<p class = "s3">The fon-family value  of the text is "Courer"。</</p>

<p class = "s4">The fon-family value  of the text is "Verdana"。</</p>

<p class = "s5">The fon-family value  of the text is "Book Antiqua"。</</p>

</body>

 

样式一： body

{ margin: 0px;

padding: 0px;

margin-top:12px;

margin-left:1px;

width:auto;

width:94px;

height:36px;

 

float:left;

 

line-height: 18px;

line-height: 1.5em;

font-family: "Times New Roman", Times, serif;

font-family:"微软雅黑","黑体","宋体";

font-size: 14px;

font-size:100%;

color:#4e4e4e;

background: #f2e7ca

background-color:#E7EAEB;

 display:block;

text-decoration:none; }

 

css规定字体样式大全

字号：<font style="text-decoration:line-through">刪除線</font>刪除線

<font style="background-color:#ffddff">加上背景色</font>加上背景色

<font style="filter:fliph;height:10pt;">左右翻转效果</font>左右翻转效果

<font style="filter:flipv height:10pt;">上下翻转效果</font>上下翻转效果

<font style="font-size:9pt; filter:glow(color=#4a7ac9,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果

<font style="font-size:9pt; filter:glow(color=#ff0000,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果

<font style="font-size:9pt; filter:glow(color=#ff0080,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果

<font style="font-size:9pt; filter:glow(color=#ff8000,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果

<font style="font-size:9pt; filter:glow(color=#008080,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果

<font style="font-size:9pt; filter:glow(color=#0000ff,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果

<font style="font-size:9pt; filter:glow(color=#8000ff,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果

<font style="font-size:9pt; filter:glow(color=#000000,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果

<font style="font-size:12pt; filter:shadow(color=#4a7ac9,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果

<font style="font-size:12pt; filter:shadow(color=#ff0000,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果

<font style="font-size:12pt; filter:shadow(color=#ff0080,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果

<font style="font-size:12pt; filter:shadow(color=#ff8000,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果

<font style="font-size:12pt; filter:shadow(color=#008080,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果

<font style="font-size:12pt; filter:shadow(color=#0000ff,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果

<font style="font-size:12pt; filter:shadow(color=#8000ff,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果

<font style="font-size:12pt; filter:shadow(color=#000000,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果

<font style="filter:dropshadow(color=#cccccc,offx=3,offy=3); height=1px">阴影文字效果</font>阴影文字效果

<div style="width:80px; height:19px; background-color:#cccccc">

<font style="filter:dropshadow(color=#ffffff,offx=1,offy=1); height:15pt" color=#000000>&nbsp;雕刻文字效果</font></div>雕刻文字效果

<div style="font-size:14pt; filter:wave(freq=17,strength=3,lightstrength=1,phase=0); width:125px; line-height:15pt; font-family:verdana; height:20px" align=left> <font color=#ff8000><strong><b>扭曲文字效果</b></strong></font></div>扭曲文字效果

 

 

HTML炫酷烟花④（完整代码）
Python、C++、HTML、Java
05-21 9万+
HTML语言实现炫酷烟花的完整代码。
HTML ＜em＞ ＜strong＞ ＜dfn＞ ＜code＞ ＜samp＞ ＜kbd＞＜var＞ ＜cite＞ 标签
玄链教育
05-27 971
以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那么做会达到更加丰富的效果。把文本定义为强调的内容。把文本定义为语气更强的强调的内容。定义一个定义项目。定义计算机代码文本。定义样本文本。定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。定义变量。
HTML格式C语言函数库
10-14
集中了C语言编程中的常用函数库，能够帮助你更好的运用C来编程。
html自定义函数格式化,格式化html代码的函数有哪些
weixin_35710893的博客
06-07 253
htmlspecialchars ()htmlspecialchars() 函数把一些预定义的字符转换为 HTML 实体。语法为：htmlspecialchars(string,quotestyle,character-set).PHP 从 5.4.0 版本开始把htmlspecialchars() 函数的第三个参数字符串编码的默认值改成了 UTF-8,为了使 PHP 5.4 之前环境中编写的代码...
css style样式{}写法注意
qq_42760090的博客
01-13 1029
我人傻了 最基本的书写都不记得了 控制台也不报错 当你样式不生效的时候，并且选择器确实没出现问题的时候 https://segmentfault.com/q/1010000038962325
html样式 css一些常用属性与style内部样式表
m0_53404077的博客
07-23 1633
html样式 css一些常用属性
HTML一些常用的表单元素
probelover的博客
08-02 4099
HTML一些常用的表单元素<input type="test"> 普通文本框 <input type="password"> 密码输入框 <input type="checkbox"> 复选框 <input type="radio"> 单选框，属性name设置相同 <input type="image">
HTML 简介
unber的博客
02-07 1371
HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言:HyperTextMarkupLanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签HTML 使用标记标签来描述网页HTML 文档包含了HTML标签及文本内容HTML文档也叫做web 页面。
HTML 表格详解（简单易懂较详细）
m0_74107848的博客
03-10 1092
HTML 表格是网页中展示数据的重要工具。通过<table><tr><th><td>等标签，可以创建结构清晰、样式美观的表格。标签名描述示例<table>定义表格<table><tr>定义表格中的一行<tr><th>定义表格的表头单元格<th><td>定义表格中的数据单元格<td><thead>定义表格的头部<thead><tbody>定义表格的主体<tbody><tfoot>定义表格的脚部<tfoot>属性名描述示例border设置表格的边框设置单元格内容与边框之间的距离。
HTML基础
qq_27009517的博客
12-03 1563
HTML 标题标签 HTML 标题是通过<h1> - <h6>标签进行定义的，分别对应文档结构中的每一级标题。 下面的实例定义了所有标题。 <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6...
Html中style标签是做什么的
热门推荐
Zirui0503的博客
05-22 2万+
一、style标签的定义及用法 在html中，style标签是使用来定义html文档的样式信息，在该标签中你可以规定浏览器怎样显示html文档内容。 除了使用style标签来为元素添加样式外，我们还可以使用link标签来引入外部样式文件 scoped属性是html5中新增的属性，如果没有设置"scoped" 属性，那么style标签必须位于head标签中。 二、style标签语法格式 语法格式说明： type属性是style标签必须属性，用来规定样式表的MIME类型，唯一的值为：text/css； 一个h
style 里面的格式
weixin_45939821的博客
07-25 82
* 类 元素 分类 id */
html style属性的用法
Child_heart的博客
03-09 1万+
style属性提供了一种改变所有HTML元素的样式的通用方法。在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。应该避免使用下面这些标签和属性：标签描述&lt;center&gt;定义居中的内容。&lt;font&gt; 和 &lt;basefont&gt;定义 HTML 字体。&lt;s&g...
Android中的空间的style格式的设置方法
玄都太乙
08-01 1406
#Android studio中的style ##定义style 首先我们应该知道，style是xml文件，也就是说，这种标签语言是非常好定义的，以TextView的使用简单示例， <style name="TextView"> <item name="android:layout_width">1dp</item> <item name="android:gravity">center</item>
html页面中DIV高度100%设置问题
03-28 4240
初学HTML5，需要实现网页DIV左右居中，高度自动填充到100。发现对页面中DIV设置100%高度属性时无效。后来查资料发现HTML网页中div高度继承自父元素——》body——》html 因此解决方案是先对html和body设置100%高度： html,body { height: 100%;margin: 0; padding: 0;} 然后对应的div设置高度—height:100% 则可以生效。测试例子(DIV左右居中，高度自动填充到100)如下： <!DOCTYPE html>
style样式的使用方法
ae187931的博客
01-25 1218
export default class App extends Component<{}> { render() { return ( <View> <Text style={styles.bigblue}> 测试一下</Text> <...
HTML 样式style
pxl20171799的博客
03-14 8442
一、HTML中的style属性：提供了一种改变所有HTML的元素样式的一种通用方法 设置了网页的背景颜色，一行文字的背景颜色，一个段落的背景颜色 &lt;html&gt; &lt;body style="background-color:yellow"&gt; &lt;h2 style="background-color:red"&gt;This is a heading&lt;/h2&gt...
Style样式的定义
u011188915的专栏
08-01 1025
1、main.xml     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     tools:conte
pandas style格式化数据
weixin_45144170的博客
11-02 5551
对数据的格式化是pandas经常遇到的，使用style属性也可以进行。 python如何对数字和字符格式化可以参考以下文章：python格式化 下面对使用style格式化做出相应说明： import pandas as pd import numpy as np np.random.seed(24) df = pd.DataFrame({'A': np.linspace(1, 10, 10)}) df = pd.concat([df, pd.DataFrame(np.random.randn(10, 4),
<!DOCTYPE html> <html> <head> <title>我的本地网页</title> <style> body { background: #ffe4e1; } h1 { color: red; text-align: center; } </style> </head> <body> <h1>🎉 成功啦！</h1> <p>双击这个文件就能用浏览器打开</p> </body> </html>解释一下
最新发布
03-31
<think>好的，我现在需要解释用户提供的HTML代码。首先，我应该逐行分析代码的结构和各个部分的作用。用户可能刚接触HTML，所以需要简明扼要地解释每个标签和属性的用途。 首先，看到<!DOCTYPE html>，这是文档类型声明，告诉浏览器这是HTML5文档。接下来是<html>标签，作为整个页面的根元素。然后是<head>部分，里面包含<meta charset="UTF-8">，设置字符编码为UTF-8，确保中文字符正确显示。不过用户提供的代码中没有这个，可能需要指出最佳实践。 <title>标签定义了网页标题，显示在浏览器标签页上。用户代码中的标题是“我的本地网页”。接下来是<style>标签，包含CSS样式，设置页面背景颜色为#ffe4e1，h1标题为红色并居中。这部分需要解释CSS的作用，比如body选择器设置整个页面的背景，h1选择器控制标题样式。 然后进入<body>部分，包含一个<h1>标题和一个<p>段落。用户使用了一个emoji🎉，可能需要说明这在HTML中的使用方式。段落中的文字提示用户双击文件用浏览器打开，这部分需要强调HTML文件作为本地文件运行的机制。 用户可能想知道代码的结构和每个部分的功能，比如DOCTYPE、html、head、body等标签的作用。还要注意用户提供的代码缺少<meta charset>，可能需要建议添加以避免编码问题。此外，解释内联CSS的用法，以及如何通过浏览器打开本地HTML文件。 最后，总结整个HTML文件的作用，即创建一个简单的本地网页，展示成功信息，并说明其结构和样式如何实现。需要保持回答清晰，结构分明，符合用户之前提到的格式要求，比如使用中文，分步骤解释，正确使用LaTeX格式（虽然这里可能不需要数学公式，但需确保其他格式正确）。</think>以下是您提供的HTML代码的详细解释，分步骤说明其结构和功能： --- ### 📌 **HTML基础结构解析** ```html <!DOCTYPE html> <html> <head> <title>我的本地网页</title> <style> body { background: #ffe4e1; } h1 { color: red; text-align: center; } </style> </head> <body> <h1>🎉 成功啦！</h1> <p>双击这个文件就能用浏览器打开</p> </body> </html> ``` --- ### 步骤1：文档类型声明 ```html <!DOCTYPE html> ``` - **作用**：声明当前文档为HTML5格式，确保浏览器以标准模式渲染页面。 - **注意**：必须放在文件第一行。 --- ### 步骤2：根元素 `<html>` ```html <html> ... </html> ``` - **作用**：包裹整个HTML内容，表示文档的根节点。 - **属性**：通常包含`lang`属性（如`lang="zh"`）定义语言，但此处未添加。 --- ### 步骤3：头部 `<head>` ```html <head> <title>我的本地网页</title> <style> ... </style> </head> ``` 1. **`<title>` 标签** - 定义浏览器标签页显示的标题（示例中为“我的本地网页”）。 2. **`<style>` 标签** - 内嵌CSS代码，控制页面样式： ```css body { background: #ffe4e1; } /* 设置页面背景为浅粉色 */ h1 { color: red; text-align: center; } /* 标题文字红色且居中 */ ``` --- ### 步骤4：主体 `<body>` ```html <body> <h1>🎉 成功啦！</h1> <p>双击这个文件就能用浏览器打开</p> </body> ``` 1. **`<h1>` 标题** - 显示“🎉 成功啦！”，使用Emoji和红色居中样式（由`<style>`定义）。 2. **`<p>` 段落** - 提示用户通过双击文件在浏览器中打开页面。 --- ### 🔍 **关键功能总结** 1. **本地运行** - 文件保存为`.html`格式后，双击可直接在浏览器中打开，无需服务器。 2. **样式设计** - 背景色`#ffe4e1`（浅粉色）和标题样式通过内联CSS实现。 3. **兼容性** - 省略`<meta charset="UTF-8">`可能导致某些字符显示异常，建议添加。 --- ### 🛠️ **代码改进建议** ```html <!-- 添加字符编码声明 --> <meta charset="UTF-8"> <!-- 补充完整的HTML结构 --> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>我的本地网页</title> <style> body { background: #ffe4e1; } h1 { color: red; text-align: center; } </style> </head> <body> <h1>🎉 成功啦！</h1> <p>双击这个文件就能用浏览器打开</p> </body> </html> ``` 通过此代码，您已创建了一个简单但完整的本地HTML网页！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值