WebデフォルトHTML/CSS:CSSを起動する

21533 ワード
CSS 11月 html テキストリンク
今日の勉强内容!
✔ Inline Style Sheet
✔ Internal Style Sheet
✔ Linking Style Sheet

📢 CSSとは?


cssは「カスケードスタイルシート」の略で、Webドキュメントのスタイルシートです.
htmlでwebに関するコンテンツを構成すると、cssはデザインの役割を果たします.
すべてのデザインがcssに含まれていると思えば便利です.(フォント、フォントサイズ、色、グラフィック、スプライトなど)

1. Inline Style Sheet


htmlタグのプロパティにcssコードを入れます.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Style Sheet</title>
</head>
<body>
    <h1 style="color: red; background-color: yellow;">원숭이 엉덩이는 빨개</h1>
</body>
</html>
<h1>というラベルに属性値を作成し、文字に赤、背景に黄色を適用します.
各ラベルには設計要素を指定する必要があります.そのため、限界と再利用不可の欠点があります.

2. Internal Style Sheet

<html>に<style>のcssコードを含める方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal Style Sheet</title>
    <style>
        h1{
            color: red;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>원숭이 엉덩이는 빨개</h1>
</body>
</html>
htmlドキュメントで<style>タグを使用して設計を適用
(<style>ラベルは通常<head>と</head>の間に置かれていますが、どこに置いても構いません!)
htmlドキュメントの複数の要素を一度に修飾できるという利点があります.
しかし、他のhtmlドキュメントには適用できないという欠点があります!

3.リンクスタイルシート(重要!!)


個別のcssファイルを作成しhtmlドキュメントに関連付けます.
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linking Style Sheet</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <h1>원숭이 엉덩이는 빨개</h1>
</body>
</html>
css
h1 {
  color: red;
  background-color: yellow;
}
hrefは接続するリンクです!!
style.cssの前の「./」はファイルの場所を表します.
複数のhtmlドキュメントに使用できる利点!
style.<link>ラベルをcssを適用したいドキュメントに接続するだけでいいです.
相対パスとは?
ファイルとフォルダの場所に対するパス
✔現在位置
✔ '../' : 現在位置の上部フォルダ

⭐Mission⭐



css
div {
  color: aqua;
  background-color: blue;
}

span {
  color: white;
  background-color: blue;
}
html
<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/mission.css">
</head>
<body>
    <div>
        <h1>Youtube 전스트</h1>
    </div>
    
    <a href="https://www.youtube.com/channel/UCD8r5Jgns2V64-NcUmXclpg" target="_blank"><img src="../img/1634819315.gif"></a>
    <br>
    <span>CLICK IMAGE↗</span>
    <p>롤토체스를 가장 재밌게하는 유튜버 전스트!!</p>
    <p>예능덱 고수 전스트</p>
</body>
</html>
文字列処理の一般的な関数
ワークコードクリップ-boost::asio