[CSS]2002年03月22日第2日開発ログ(1)
1.勉強の内容
css基本構文
<body>
<ol>
<font color="red">
<li>item</li>
</font>
<font color="yellow">
<li>item</li>
</font>
<li>item</li>
</ol>
fontタグは設計要素、情報Xを表す
ウェブサイトのレイアウトが表になり始めたとき、表が情報なのかレイアウトなのか分かりにくい.
これは聴覚化された情報を必要とする視覚障害者が直面する深刻な問題となり、設計が情報の役割を減らすと、HTMLは設計に情報を集中させ、区別するためのcss技術を誕生させた.
<body>
<ol>
<font color="red">
<li>item</li>
</font>
<font color="yellow">
<li>item</li>
</font>
<li>item</li>
</ol>
コマンドcss構文に従って解釈されるコード
色color:(色名);
下線テキスト-装飾:下線;
<head>
<style>
li{
color: red;
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</body>
(+) li:セレクタ(=selector)
主語の役割は、後の文法を誰に与えるかを選択します.
重要度選択者宣言
</head>
<body>
<h1>CSS Syntax</h1>
<ol>
<li>item</li>
<li>item</li>
</ol>
</body>
Q.h 1と最初のliを同じ色に変更するには?同じグループにし、グループに効果を与えます.
グループ=class
</head>
<body>
<h1 class="em">CSS Syntax</h1>
<ol>
<li class="em">item</li>
<li>item</li>
</ol>
</body>
強調する注意:
Emは任意の名前を入力できます.classは構文を入力できません.
Q.classがemだとフォント色が青になります.
<style>
li{
color: red;
text-decoration: underline;
}
.em{
color: blue;
}
</style>
.
.
.
</head>
<body>
<h1 class="em">CSS Syntax</h1>
<ol>
<li class="em">item</li>
<li>item</li>
</ol>
</body>
classはemがemの前にある“.色を変更できるのはemとして宣言されている場合のみです.
優先度ルール
Li-Webページのすべてのliラベル
.em-Webページのclassがemのタグ
.em具体的には、liは万象を網羅しています.
cssが具体的であればあるほど優先度が高くなります.
全面的なデザインで全体的なデザインをするので、具体的な修正部分でもっと効果的です.
Q.1つのitemの色だけを緑に変える?
id(識別子)プロパティの使用
<style>
li{
color: red;
text-decoration: underline;
}
.em{
color: blue;
}
#id{
color: green;
}
</style>
.
.
.
</head>
<body>
<h1 class="em">CSS Syntax</h1>
<ol>
<li class="em" id="vip">item</li>
<li>item</li>
</ol>
</body>
vip idは1回のみ使用(複数回使用不可)
class(グループ、例-クラス)、id(識別子、例-学号)
idより具体的
具体的には、id>class>li(ラベルセレクタ)
2.難しいところ
3.解決方法
4.勉強の心得
初日の学習では、下線タグを使用する場合はu(underline)タグを使用します.
cssを駆使した瞬間、同じ動きでもラベルの変化が見られます.
Reference
この問題について([CSS]2002年03月22日第2日開発ログ(1)), 我々は、より多くの情報をここで見つけました
https://velog.io/@lijiongji/CSS-2022-03-22-2일차-개발일지
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
4.勉強の心得
初日の学習では、下線タグを使用する場合はu(underline)タグを使用します.
cssを駆使した瞬間、同じ動きでもラベルの変化が見られます.
Reference
この問題について([CSS]2002年03月22日第2日開発ログ(1)), 我々は、より多くの情報をここで見つけました
https://velog.io/@lijiongji/CSS-2022-03-22-2일차-개발일지
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
Reference
この問題について([CSS]2002年03月22日第2日開発ログ(1)), 我々は、より多くの情報をここで見つけました https://velog.io/@lijiongji/CSS-2022-03-22-2일차-개발일지テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol