HTMLタグのstyle属性の使い方を詳しく解説（具体例付き）-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLタグのstyle属性の使い方を詳しく解説（具体例付き）

寻∝梦

Aug 27, 2018 pm 02:10 PM

htmlstyle

この記事では、HTML タグの style 属性の定義と機能、HTML での style 属性の使用例、HTML タグの style 属性のさまざまなスタイル分析について説明します。この記事を一緒に見てみましょう

まず、HTML タグの style 属性の定義を紹介します:

style 属性は、要素のインラインスタイルを指定します

style 属性は、グローバルのスタイルをオーバーライドします

HTML スタイル属性の例

HTML ドキュメントでのスタイル属性の使用:

<h1 id="This-nbsp-is-nbsp-a-nbsp-header">This is a header</h1>
<p style="color:red">This is a paragraph.</p>

HTML タグのスタイル属性の構文:

<element style="value">

HTML タグのスタイル属性の属性値:

style_Heading : 1 つ以上の CSSプロパティと値はセミコロンで区切られます。

HTMLのstyle属性の各種スタイル解析

1. style属性はフォントスタイル(font-family:)、フォントサイズ(font-size:)、文字色(color:)、などの内容です。それぞれ別のタグに設定することも、CSSスタイルシートに設定することもできます。私の記事はすべて http://www.codecademy.com に従って書いているため、まだ CSS を導入していないため、ここでは CSS については触れません。以下は例です。コードと図:

<!DOCTYPE html>
<html>
<head>
<title>color the text</title>
</head>
<!-- now i will color the text-->
<body>
<h3 id="Hello-nbsp-World">Hello World!</h3>
<p style="color:red;font-size=10px">你好！！！！</p>
</body>
</html>

注:

a) 私が使用しているブラウザは Chrome で、編集して表示するときに、設定した 10px フォントが適用されていないことがわかりました。 Chromeでは最小フォントサイズが12pxに設定されているため、10pxのフォントサイズは役に立ちません。Chromeブラウザの最小フォントサイズを小さいサイズに変更するだけです。

b) スタイル属性の割り当て方法は、通常の等号 = ではなく、属性名: 値です。等号を使用すると、スタイル効果は実行されません。

2. style に背景色

を設定することもできます。style には、background-color 属性が含まれており、その色の値を設定すると、ラベル範囲全体の背景色を、background-color で指定された色に変更できます。以下はサンプルコードと図です:

<!DOCTYPE html>
<html>
<head>
<title>color the text</title>
</head>
<!-- now i will color the text-->
<body>
<h3 id="Hello-nbsp-World">Hello World!</h3>
<p style="color:red;font-size=10px ;background-color:green">你好！！！！</p>
</body>
</html>

3. テキストの配置

一部のラベル属性には、テキストの配置を設定できる align 属性があり、同様の属性をスタイルで設定することもできます。この属性の値は text-align です。その

値には、左、中央、右が含まれます。以下はサンプルコードと概略図です:

<!DOCTYPE html>
<html>
<head>
<title>color the text</title>
</head>
<!-- now i will color the text-->
<body>
<h3 id="Hello-nbsp-World">Hello World!</h3>
<p style="color:red;font-size=10px ;background-color:green;text-align:right">你好！！！！</p>
</body>
</html>

HTML の style 属性の 2 つの具体的な使用例:

<!DOCTYPE html>
<html>
     <head>
        <meta charset="utf-8">
        <title>练习使用HTML</title>
        <style>
            /*标签选择器*/
            h4 {
                color: blue;
                text-align: right;
            }
</style>
    </head>
     <body>
        <!--规定元素的行内样式-->
        <p style="color:red;text-align:center">测试html的style属性</p>
        <h4 id="h">h41</h4>
        <h4 id="h">h42</h4>
    </body>
 </html>

[編集者からの関連おすすめ]

html5 詳細タグの役割は何ですか? タグの使い方入門(使用例付き)

HTMLテーブルとは？

タグでの様々な属性の使い方

以上がHTMLタグのstyle属性の使い方を詳しく解説（具体例付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

element.style怎么修改Nov 24, 2023 am 11:15 AM

element.style修改元素的方法：1、修改元素的背景颜色；2、修改元素的字体大小；3、修改元素的边框样式；4、修改元素的字体样式；5、修改元素的水平对齐方式。详细介绍：1、修改元素的背景颜色，其语法为“document.getElementById("myElement").style.backgroundColor = "red";”；2、修改元素的字体大小等等。

react 怎么动态修改styleDec 28, 2022 am 10:44 AM

react动态修改style的方法：1、在需要修改样式的元素上添加ref，其语法如“<div className='scroll-title clear-fix' ref={ this.manage }>”；2、通过动态控制状态的变化修改元素的样式；3、通过在DOM中使用JS代码实现不同DOM的展示与隐藏转换。

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

Vue3 style中新增的特性有哪些及怎么用May 14, 2023 pm 10:52 PM

style新特性Vue3.2版本对单文件组件的style样式进行了很多升级，如局部样式、css变量以及样式暴露给模板使用等。（学习视频分享：vue视频教程）一、局部样式当标签带有scopedattribute的时候，它的CSS只会应用到当前组件的元素上：hi.example{color:red;}二、深度选择器处于scoped样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用:deep()这个伪类：.a:deep(.b){/*...*/}通过v-html创建的DOM内容不会被

Vue报错：无法正确使用v-bind绑定class和style，怎样解决？Aug 26, 2023 pm 10:58 PM

Vue报错：无法正确使用v-bind绑定class和style，怎样解决？在Vue开发中，我们经常会用到v-bind指令来动态绑定class和style，但是有时候我们可能会遇到一些问题，如无法正确使用v-bind绑定class和style。在本篇文章中，我将为你解释这个问题的原因，并提供解决方案。首先，让我们先了解一下v-bind指令。v-bind用于将V

总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式，希望对大家有所帮助！

html中document是什么Jun 17, 2022 pm 04:18 PM

在html中，document是文档对象的意思，代表浏览器窗口的文档；document对象是window对象的子对象，所以可通过“window.document”属性对其进行访问，每个载入浏览器的HTML文档都会成为Document对象。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。