HTMLのスタイルタグってどういう意味ですか？ styleタグの使い方を詳しく解説-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLのスタイルタグってどういう意味ですか？ styleタグの使い方を詳しく解説

寻∝梦

Aug 22, 2018 pm 01:58 PM

htmlstyle

この記事では主に HTML スタイルタグの定義と属性の紹介について説明します。まず、HTML におけるスタイルタグの用途と位置を理解してから、使用されているいくつかのメソッドと詳細なテクニックを紹介します。

html スタイルタグの使用法 タグ:

スタイルでは、HTML ドキュメントがブラウザーでどのようにレンダリングされるかを指定できます。

type 属性は必須であり、style 要素の内容を定義します。可能な値は「text/css」のみです。

style 要素は head セクションにあります。

HTML

<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1 id="Header-nbsp">Header 1</h1>
<p>A paragraph.</p>
</body>
</html>

必須属性:

type: text/css: スタイルシートの MIME タイプを指定します。

HTML スタイルタグの使用方法の詳細な説明:

タグペアにさまざまなタグのスタイルを記述します (body または h1 にすることができます)。つまり、すべてのインラインスタイルを記述します。一緒に

たとえば、10 個のタグがすべて同じクラスの場合、インラインスタイルに 10 個のタグを記述し、スタイルには 1 つだけ記述する必要があります。

これで、すべて構造 (html)、スタイル (css)、および動作 (js) が分離されたデザインパターンになりました

<p id="xxx">===><style>#xxx{}</style>
<p class="xxx">===><style>.xxx{}</style>
<body></body>===><style>body{}</style>

スタイルタグは、CSS スタイルシート内の位置に応じて 3 つのタイプに分類されます:

1 . インラインスタイルシート

3. 外部スタイルシート

を詳しく説明します

1. 埋め込みスタイルシート

は、例えば、、 < ;p> タグで使用される

の構文は次のとおりです:

<p style font-size:20pt>这段文字使用了内嵌样式表，更改了字体大小为20</p>

2. 内部スタイルシート

は、

タグの間に記述されます。 html Web ページなので、このページのすべてに有効です。なお、特定のタグ内に記述していないため、そのタグ内でこのスタイルシートを使用したい場合は、定義時にも明記しておかないと不具合が発生しますので注意が必要です。ページ全体が混乱します。例:

<html>
<head>
p.mylayout <style type="text/css">{font-size:22pt; color:blue; border-width:1px; border:double; text-align:center; }</style></head>
<body> 
<p class="mylayout">这段文字使用了样式表</p>
<p>这段文字没有使用样式表</p>
</body>
</html>

このスタイルシートをすべて使用したくない場合は、以前に

p.right {text-align:right}
p.center {text-align:center}

ここで、右と中央は 2 つのスタイルシートです。次に、これら 2 つのスタイルシートを参照できます。サンプルコードは次のとおりです。

<p class="center">这一段居中显示。</p>
<p class="right">这一段是居右显示。</p>

HTML タグを使用せずに、「.」とスタイルシート名を直接使用することもできます。サンプルコードは次のとおりです。

.center {text-align: center}

このユニバーサルスタイルシート名にはタグの制限がなく、さまざまなタグに使用できます。例:

<h1 id="这个标题居中显示">这个标题居中显示。</h1>
<p class = "center">这个段落居中显示。</p>

3. 外部スタイルシート

外部スタイルシートは、スタイルシートの内容をメモ帳に個別に書き込み、作成した Web ページに拡張子 .css が付いたファイルとして保存します。次のコードを追加します (もちろん

の間に): <link href="你css文件所在的文件夹" rel="stylesheet" type="text/css">
例:

最初にコードを記述し、p.css として保存します

p.mylayout {font-size:20pt; border-width:1px; color:blue; }

それから呼び出しますあなたが作成した Web ページにこのスタイルシートを追加します:

<HTML>
<head>
<link href="p.css所在的相对路径" rel="stylesheet" type="text/css">
</head>
<body>
<p class="mylayout"> 这个标题使用了Style 。</p>
<p>这个标题没有使用Style。</p>
</body>
</HTML>

したがって、外部スタイルシートは多くの Web ページから呼び出すことができます。これが外部スタイルシートの利点です。

スタイルシートは連結することもできます。つまり、Web ページで複数の CSS が使用されます。連結の順序は、埋め込み > 内部 > 外部 > ブラウザー独自です

つまり、Web ページに内部 CSS がある場合、外部 CSS への呼び出しは上書きされます (つまり、外部 CSS は機能しません)

CSS スタイルシートを定義するときのネストされた説明:

p b {color:blue;}

使用時:

<p>这段文字在b标签中的为<b>蓝色</b></p>

cursor:handこのプロパティはマウスを手の形に変えます。

【編集者の関連記事】

html emタグの機能とは？タグと タグの違い

html5 出力タグは何を意味しますか? html5出力タグの使い方

以上が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的展示与隐藏转换。

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内容不会被

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

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

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

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

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

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

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、