HTMLのスタイルタグ
この記事では、HTMLでstyleタグを使用する方法を紹介します。これは、HTMLタグのCSSコードを記述したり、WebページのCSSファイルに情報を指定したりするために使用されるタグです。
スタイルタグに関しては、CSSについて考える必要があります。ただし、まだ学習していないため、記事の例を一時的に実行して結果を確認してください。後で、一連のCSSレッスンに移行すると、より慎重に学習できます。
Mục lục
HTMLのスタイルタグとは何ですか？
スタイルは通常のHTMLタグであり、ブラウザがコンパイルするCSSコードの範囲を定義するために使用されます。スタイルタグ内のすべてのコードがインターフェイスに表示されるのではなく、ブラウザのバックグラウンドでコンパイルおよび実行されるだけです。
例：styleタグを使用して、pタグとh1タグの表示テキストの色を指定します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>Học lập trình miễn phí tại web888.vn</h1> <p>this is a test.</p> </body> </html>ご覧のとおり、スタイルタグ内で2つのCSSプロパティを定義しました。
<style> h1 {color:red;} p {color:blue;} </style>スタイルタグを使用してインターフェイスをフォーマットします
理解を深めるために、非常に簡単な例を示します。これは、次の2つのケースに分けられます。
<!DOCTYPE html> <html> <head> <title>Tùy chỉnh giao diện HTML bằng CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <p> Chào mừng bạn đến với website học lập trình online web888.vn </p> </body> </html>結果
Chào mừng bạn đến với website học lập trình online web888.vn <!DOCTYPE html> <html> <head> <title>Tùy chỉnh giao diện HTML bằng CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> p{ background: white; color: black; text-align: center; font-size: 30px; } </style> </head> <body> <p> Chào mừng bạn đến với website học lập trình online web888.vn </p> </body> </html> Chào mừng bạn đến với website học lập trình online web888.vn上記の2つの例を実行すると、それらの違いがわかります。最初の例には白い背景と黒いテキストがあり、2番目の例には青い背景と白いテキストがあります。 HTML構造に関しては違いはありませんが、例2では、次のようにCSSコードを追加しました。
<style type="text/css"> p{ background: blue; color: white; text-align: center; font-size: 30px; } </style>したがって、CSSをHTMLタグに追加するには、CSSをstyleタグ内に配置します。 CSS構文については、CSS構文の記事を読んで理解を深めることができます。
HTMLスタイルタグの意味はもう理解できましたよね？後で、このスタイルタグ自体にCSSコードを書く練習をします。次の投稿でお会いしましょう。
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
