💻前端学習日記02-CSS

11889 ワード
テキストリンク
今日はまだ少し時間が残っています.更新ベル…!最近遅くなったようですが、元気を出しませんか!?考えて...
カリキュラムの1つである企業サイトが更新中で、HTMLもHTMLなのですが、CSSも一番難しいのは、footerエリアになぜ次のような空白ができるのか….ううう
だから今日学院で勉強している間に書いたCSSの定義と使用例は?片付けて...!いつも何の見当もつかないブログに文章を書く…!

CSS(Cascading Style Sheet)


HTMLを使用してドキュメントのスケルトン構造を記述すると、CSSは構造に肉を加える過程と見なすことができます.

🎨作成方法

selector(선택자 : tag, id, class){
	 property(어떤 효과) : value(얼만큼);
}
※練習先生が言うtip-は不要な空白をできるだけ減らす.

スタイルの適用方法


HTMLに直接記述するか、「link」タグを使用して外部cssファイルにバインドする方法があります.ラベルが多くなる場合は、外部cssファイルをリンクにバインドしたほうがいいです.

HTMLのhead領域に直接内部スタイルを作成する方法

<style>
  selector(선택자 : tag, id, class){
	 property(어떤 효과) : value(얼만큼);
}
</style>

個別のcssファイルを作成し、リンクにリンクする外部合成方法

<link rel="stylesheet" href="./css/style.css" type="text/css">
一般的には上記の2つの方法が用いられるが,CSS応用方法にはそれ以外に2つの方法があり,合計4つの方法がある.

Inline Style

<div.main_title style="color: red;"><h1>안녕하세요!</h1></div>
ラベルに直接適用されるラインスタイルは、通常、スクリプト文に適用されます.ラインスタイルを使用してCSSを適用する場合は、絶対に変更できないスタイルの場合は、ラインスタイルを使用することが望ましいです.

inport style

<head>
<style>
@import "name.css"
</style>
Inport方式については、私が見逃したのか、それとも単独で説明していないのかわかりませんが...ㅠㅠ低スペックブラウザはサポートされていません...

選択CSSセレクタ


スタイルのタグ付け(再定義)
  • タグセレクタ
  • htmlタグ
    • に直接適用する.
  • タグの作成時に自動的に有効になる
    • スタイルのカスタマイズ
  • クラスセレクタ<ラベルclass="name">スタイルが必要な場合は、できるだけこちらの
    • を選択します.
  • .(クラスセレクタ)
  • は、
    • を繰り返すことができる.
  • .name{effect}
    • 3.アイデンティティ選択者<タグid="name">
  • #(IDセレクタ)
  • 繰り返し不可
  • #name{effect}
    • 4.複数選択者
  • a,b,c{effect}
    • 5.子孫選択者
  • ab{effect}
    • 6.サブエレメントセレクタ
  • a>b{effect}
    • でも「子どもの要素」でも「子孫選択者」のように使われていると思います...
    例:
     <body>
  <div class="box">
    <div class="title">
      <h1>안녕하세요 히카루 벨로그입니다.</h1>
      <p>코린이 of 킹코린이로써 아직 많이 부족합니다.
        잘 부탁드립니다!</p>
    </div>
    <div class="intro">
      <h2>자기소개</h2>
      <ul>
        <li>나이</li>
        <li>성별</li>
        <li>취미,특기</li>
        <li>보유스킬</li>
      </ul>
     </div>
   </div>
 </body>
    このようにHTMLタグを書くと….サブエレメントにスタイルをつけると...
      .box > .title > h1{color:blue;}
    このように書きます...そうですか.整理した内容に従えば?でも筆者の場合は….
      .box .title h1{color:blue;}
    このようにして、各ラベルのスタイリングを子孫選択者で行います...
    いいえ、しかし、これはスタイルが適用されないという意味ではありません.
    ★pseudo class>医師類
    div : hover{} 
    : nth-child{}
    サスペンション:サスペンションカーソルなどの操作を行うことで、色や画像などを変更できます.△そう覚えておきます.
    nh-schild{}:兄弟要素やliなどのリスト項目で任意の順序を指定できる擬似クラス
    現在の授業で記録されている内容に基づいて整理された投稿です...これが正しいかどうかはわかりませんが...なぜ途中で漏れた部分がこんなに多いのか
    必要な部分は引き続き補充しなければならない.実は补充する学习は1つか2つではありません...
    次はCSSで使うproperty(どんな効果):value(いくら);属性とタイプを整理する...!現在、カリキュラムの状況はウェブページの方案を制定しています!


    西安を味わう.jpg
    ちなみに、私は企業のホームページをリニューアルしていて、サムスン傘下のリオン美術館を採用しました!でも今日はデザイン案を作るためにサイトにログインしてみたら本当に更新したのかな….このような状況で大丈夫ですか?waybackマシンに21年08月のサイトがバックアップされており、こちらのパスチェックを通っています...
    実は更新がどうなるかわからないのでリオ側に電話して8日から開館する時に企画展が開催されると言っていましたが….メッセージを闻いた后に同じ内容を言いますか...今は話題を変えるべきだと思いますが、授業時間も長くなく、休館で働いている作品ばかりで、私も勝手に改編していない部分ではないので、元の内容に従って歩くことにしました.塾に出席するときは、どの方向に行けばいいか先生に相談すべきです.
    設計面では,PC終了後はモバイル試行案に進むべきであり,PC符号化終了後のページは中間段階でモバイル試行案に再調整すべきである.
    日から脚本のレッスンがあるそうで、本当に元気を出して….
    疲れて退屈になるけど、頑張りましょう…!頑張ってね~!
    [生活コードWEB 2]day 3
    8月3日Verlog