HTML CSS
HTML スタイル - CSS
CSS (カスケード スタイル シート) HTML 要素タグのレンダリングに使用されるスタイル
スタイルと色
試してみる - 例
この例は、<head> セクションに追加されたスタイル情報を使用して HTML をフォーマットする方法を示します。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>例の実行 »
オンライン例を表示するには、「例の実行」ボタンをクリックしてください
この例では、スタイル属性を使用して下線のないリンクを作成する方法を示します。
style属性を使用して下線なしのリンクを作成する方法。
例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <a href="http://www.php.cn/" style="text-decoration:none;">访问 php.cn!</a> </body> </html>
サンプルの実行 »
オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください
外部スタイルシートへのリンク
この例は、タグを外部スタイルシートにリンクする方法を示しています。 。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>我使用了外部样式文件来格式化文本 </h1> <p>我也是!</p> </body> </html>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
CSSの使用方法
CSSはHTML 4で始まり、HTML要素のレンダリングを改善するために導入されました。
CSSは次の方法でHTMLに追加できます:
インラインスタイル - HTMLで「スタイル」を使用します。 " 要素
- の
属性 内部スタイル シート - CSS を含めるには、HTML ドキュメントの <head> 領域で <style> 要素 を使用します
外部参照 - 外部を使用しますCSS ファイル
最良の方法は、CSS ファイルを外部から参照することです
このサイトの HTML チュートリアルでは、例を簡素化し、簡単に理解できるようにするためにインライン CSS スタイルを使用します。オンラインで読んでコードを編集し、インスタンスをオンラインで実行します。
このサイトの CSS チュートリアル CSS チュートリアルを通じて、CSS の知識をさらに学ぶことができます。
インライン スタイル
特別なスタイルを個々の要素に適用する必要がある場合は、インライン スタイルを使用できます。 インライン スタイルを使用する方法は、関連するタグで style 属性を使用することです。スタイル プロパティには、任意の CSS プロパティを含めることができます。次の例は、段落の色と左余白を変更する方法を示しています。
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
その他のスタイルについては、 CSS チュートリアルをご覧ください。
HTML スタイルの例 - 背景色
background-color 属性 (background-color) は、要素の背景色を定義します。
例<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
</html>
インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します 初期の背景色属性 (background-color) は、bgcolor 属性を使用して定義されます。
font-family (フォント)、color (色)、および font-size (フォント サイズ) 属性を使用して、フォント スタイルを定義できます:
例<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
</body>
</html>
インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します現在では、font-family (フォント)、color (色)、および font-size を使用するのが一般的です<font> タグを使用する代わりに、(フォント サイズ) 属性を使用してテキスト スタイルを定義します。
text-align (テキスト配置) 属性を使用して、テキストの水平方向と垂直方向の配置を指定します:
Example<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
</body>
</html>
サンプルを実行»「サンプルを実行」をクリック「オンラインの例を表示するボタン
」
テキスト配置プロパティ text-align は、古いタグ <center> を置き換えます。
内部スタイル シート
1 つのファイルに特別なスタイルが必要な場合は、内部スタイル シートを使用できます。 <head> セクションの <style> タグを使用して内部スタイル シートを定義できます:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>外部スタイル シートは、多くのページにスタイルを適用する必要がある場合に最適です。選ぶ。外部スタイル シートを使用すると、1 つのファイルを変更するだけでサイト全体の外観を変更できます。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
| 説明 | |
|---|---|
| テキストスタイルを定義 | |
| リソース参照を定義アドレス |
非推奨のタグと属性
HTML 4 では、元々 HTML 要素のスタイルの定義をサポートしていたタグと属性は非推奨になりました。これらのタグは、新しいバージョンの HTML タグをサポートしません。
推奨されないタグは次のとおりです: <font>、<center>、<strike>
推奨されない属性は次のとおりです: カラーと背景色。
