6/30 CSSセレクタ、プロパティ

💡 学習の内容

github

오늘은 HTML을 디자인 해주는 요소인 CSS에 대해 배웠다.
HTML 문서에 CSS가 함께 작성이 되면 가독성이 떨어지게 되므로 HTML과 CSS파일을 따로 작성한다. 

<link rel="stylesheet"  type="text/css" href="style.css">

-<link>を使用してcssファイルをインポートstylesheet linkリンク先のファイルタイプをマークtype言語href移動するファイルの名前
-cssコメント設定:/* */-両親.くそ野郎.css colorを親ラベルなどの見出しに設定すると、すべての内容が兄弟に設定されます.
子兄弟ラベルに異なる色が設定されている場合は、このセクションのみが設定されます.
しかしながら、例外として、例えば<a>は、青色遺伝子を有する標識が色を保持し、すなわち影響を受けない
css:h 1 pラベルなどの前半に親ラベルを書くと、その部分だけが色に適用されます.

header h1,
 footer h1 {
    color: blue;}

を選択します.

選択者

タイプ選択者:htmlタグに基づいてアクセス

id選択者:ラベルに名前を付けて設計を適用します.→cssファイルの「#」

クラスセレクタ:タグに別名を付ける→cssファイルに」.

attrubuteセレクタ:

上の枠線を装飾する場合は、タイプ(Type)のアトリビュート値を使用します.
⇓

input[type="text"] {
    border: solid 10px red;
}
> 
input[type="password"] {
    border: solid 10px blue;
}

✔idセレクタとclassセレクタの違い

idは名前なので属性値は1つしか設定できませんが、クラス別名なので複数追加できます.

同じidの属性値

は1つしかない必要があります.

class同じ別名が複数ある

画面に表示される色の優先順位
styleプロパティ>id>class>前回入力したタグ
タグが詳細であるほど優先度が高くなります
アクティブコードですが、上書きしたい場合は優先順位で入力できます.

󛞭cssプロパティ

div {
    width: 300px; 
    height: 300px;
    background-color: yellow;
}

エクスプローラのサイズによってスペースを自然に調整する時間:使用%
ex) width: 300%͞%使用時に親として表示される相対値min-width: 600px;を減らさない状態にした場合max-width: 800px;最大値
3つの属性値borderを同時に入力できますborder-radiusエッジにラウンドを適用

✔️ font

font-style:フォントスタイルの変更font-family:フォントの指定font-family: Arial, Times, sans-serif;:サポートされていないブラウザでは、以下のフォントで置換された順序/、入力/ハッシュ-シリーズは、すべてのブラウザで使用されるフォントであるため、常に最後に指定する必要があります.
下線をtext-decoration文字に適用した場合/下線または直線通過/
-フォントを変更する場合
フォントの<link>～headを入力し、font-familyのフォント名を入力します.<a>ラベルの参照ベースコードを消去する場合は、div a { text-decoration: none; }を選択します.
-テキスト位置の変更:text-align/left or center or right/
↳写真の●を外したい場合:ul { list-style: none; }-opacity:透明度の設定

重複写真を削除する場合は、background-repeat: no-repeatを選択します.background-repeat: repeat-x(x축만 반복) background-position:画像の左揃え/左揃え.right. bottom. center/right bottom. right topは両方とも入力可能
htmlとcss画像の違い
同じ画像を出力する場合:cssで出力する場合、背景サイズが画像より小さい場合、サイズは遮断されます.
情報を含む画像はimgを使用します.altを記入する必要があります(Webの近接性のため)

を用いた画像の性質によって決定される.

学習内容の難点

今日cssについての講座を聞きました.cssは初めて使うので、慣れないのは難しいようです.cssで文字や画像を飾るときに使う言語を覚えることが大切らしい.

¥2,000の解決策

私が理解していない部分や混同している部分は、すべて開発学習内容に記入して教育しました.一人でコードを試みた場合に詰まる箇所があれば,作成した開発により確認した.

🙋‍♀️ 学習の心得.

作るたびにどんなページが作れるか楽しみですこれを行うには、まずhtml cssを使うことに慣れなければなりません.たゆまぬ努力さえすれば、必ず進歩できると信じています...!