ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS における継承とは何ですか? CSSの使い方は？
CSS における継承とは何ですか? CSSの使い方は？
- 青灯夜游転載
- 2018-10-20 16:43:262695ブラウズ
この記事の内容は、CSS継承とは何なのかを紹介することです。 CSSの使い方は？困っている友人は参考にしていただければ幸いです。
CSS の継承
CSS の継承とは、タグにネストされた関係がある場合、内部タグが競合することなく自動的に外部タグを所有することを意味します。自然のスタイル。
CSS の一部のプロパティは継承が許可されていません。たとえば、border プロパティには継承がありません。パディング、マージン、背景など、マルチボーダー クラスのプロパティは継承されません。
例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="GB2312">
<title>css使用实例</title>
<style type="text/css" >
div{
color: red;
font-size: 10pt;
font-weight: bold;
font-family: 黑体;
border: 1px solid #000;
}
p{
color: blue;
font-size: 12pt;
font-style: italic;
}
em{
color: green;
}
</style>
</head>
<body>
<p>这是蓝色，12pt，斜体，默认宋体</p>
<div>
<p>这是蓝色，12pt，斜体加粗，黑体</p>
</div>
<br>
<div>这是红色，10pt，加粗，黑体，有边框</div><br>
<div>
这是红色，10pt，黑体<br>
<em>我是em元素的文字，绿色文字周边无边框</em>
</div>
</body>
</html>
CSS の使用方法
HTML ページで CSS を使用するには、主に 3 つの方法があります。モード、内部スタイル シート、外部スタイル シートにリンクするには タグを使用します。
1. 埋め込みメソッド (CSS コードは HTML タグ内に記述されます。)
例:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>内嵌方式</title> </head> <body> <p align="center" style="color: red;">内嵌方式</p> </body></html>2. 内部スタイル シートと同様です。インライン スタイル シートとは異なり、CSS コードは HTML ドキュメント内に記述されます。違いは、内部スタイル シートがタグ内に記述されず、特定の形式を持つことです。 例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表示例</title>
<style type="text/css">
p{
width: 100px;
height: 40px;
color: yellow;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<p>内部样式表</p>
</body>
</html>3. 外部スタイル シートをリンクするには、 タグを使用します。 特定の形式があることは、内部スタイル シートと同じです。これは、CSS コードが HTML ドキュメントの外部の .css ファイルに記述されており、使用するときに引用符で囲む必要があるためです。
例:
html1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>外部样式表示例</title> <link rel="stylesheet" href="css/css1.css" /> </head> <body> <p>外部样式表</p> </body> </html>CSS1.css
p {
width: 100px;
height: 40px;
color: yellow;
background-color: red;
text-align: center;
}概要：以上がこの記事の全内容ですので、皆様の学習のお役に立てれば幸いです。関連チュートリアルの詳細については、CSS 基本ビデオ チュートリアル 、 CSS3 ビデオ チュートリアル 、bootstrap ビデオ チュートリアル をご覧ください。
以上がCSS における継承とは何ですか? CSSの使い方は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。