TIL CSS#

6773 ワード
エンコーディング CSS TIL テキストリンク
CSS学は本当に簡単で、整理も簡単…!
cssやjsがないと大変なことになる本当につまらない画面はどうしよう...

CSSとは?


.CSS:ラミネートスタイルシートは、Web開発者がデフォルト形式のHTMLコードに視覚効果を与える場合に使用する言語です.cssコードはセレクタ本体に「property:value;」を含む構成.

各コードの用途と用途


.style:CSSコードを使用する場合と同じ効果をHTMLコードで使用します.1つ以上のstyle効果を得るには、セミコロン(;)追加に分けることができます.(繰り返し追加できます.)
<p style="color: red; font-size: 20px;">I'm learning to code!</p>
.link:cssファイルとhtmlファイルをバインドします.html headプロパティで、href(cssファイルの場所を定義)、type(ファイルのプロパティを定義する:css/text)、rel(htmlファイルとの関係を定義する:スタイルシート)のプロパティが必要です.フォントをロードし、ガイドバーからスタイルをインポートするときに追加した内容はすべてここにあります.
<head>
  <link href="./style.css" type="text/css" rel="stylesheet">
  <title>Vacation World</title>
</head>

Selector


.*universal:html内のすべてのコードを選択し、cssフォームを適用します.
.tag:html内の特定のtagを選択し、cssフォームを適用します.
.class:htmlでcssフォームをバッチ処理するターゲットをグループ化し、cssで修飾するために「「class name」形式を使用する必要があります.classに2つ以上の名前がある場合、cssは各単語にコードを適用することができます.(idより全面的)
.id:htmlドキュメントでcssスタイルを適用するために単独で使用する独自の区切り記号で、cssで修飾するには「#id名」形式を使用する必要があります.(classよりも高度なコードです.)
(*具体/ランキング←.:state:html画面でステータスが検出された場合、cssフォームを適用する場合に使用します.(例:button:hover)

Visual rules


.font-family:Webページのフォントを変更するには、フォントが正常に見えるように、ユーザーのパソコンにフォントを内蔵する必要があります.フォントを選択しない場合は、デフォルトではTimes New Romanに設定されていますが、Webページをすばやく実行するためには2~3種類のフォントしか使用しないことが望ましいです.また、使用するフォントが2つ以上の単語の場合は、引用符で囲んだほうがいいです.
h1 {
  font-family: Garamond;
}
h1 {
  font-family: "Courier New";
}
.font-size:Web記事のサイズを変更します.単位はpx(pixel)を使用します.
p {
  font-size: 18px;
}
.font-weight:Web記事の厚さを変更します.(bold/normal/thin)デジタル形式(100~900)でも厚さを表すことができます.有効値は200～500の間の100単位です.(300:light, 400:normal, 700:bold)
p {
  font-weight: bold;
}
header {
  font-weight: 800;
}
.font-style:Webページのテキストを斜体に変更します.デフォルトはnormalです.
h3 {
  font-style: italic;
}
.text-align:Web記事の位置合わせを変更します.(left/center/right)
h1 {
  text-align: right;
}
.color:フロントcolorで、Webページの本文のフォント色を変更します.
.background-color:Webページの本文の背景色を変更します.
h1 {
  color: red;
  background-color: blue;
}
.不透明:Webページの本文のフォントと背景色の透明度を変更します.(0～1の範囲の数字を使用します.1は100%の色、0は透明です.)
.overlay {
  opacity: 0.5;
}
.background-image:Webページの背景を特定の画像として使用します.
.background-size:Webページのサイズに合わせて画像を自動的に調整します.
.main-banner {
  background-image: url("https://www.example.com/image.jpg");
  background-size: cover;
}

box model


.height/width:Webページのスペースを定義します.特定の数値でスペースを定義し、Webページに表示します.
  height: 80px;
  width: 240px;
.border:画像を保存するフォトフレームなど、Webページの文字の輪郭を指定します.デフォルトはmedium none colorです.(width,style,color)
. width: thin, medium, thick
. style: https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#Values
. color: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value 
p {
  border: 3px solid coral;
}
.border-radius:Webページでborderを指定すると、4つの周辺エッジが丸くなります.(borderを完全に丸くするには、border-radius:100%に設定します.)
div.container {
  border: 3px solid rgb(22, 77, 100);
  border-radius: 5px;
}
.padding:(ここでは、後のmarginが混同されやすいため)content boxとborder boxの間の余白を指定するために使用します.ページの本文の内容とそれと囲まれたborderとの間隔だけでいいです.各位置で異なる充填効果を提供するにはpadding-top/right/bottom/left形式を使用します.4つのエッジに異なる塗りつぶし効果を適用する場合は、各px情報を塗りつぶしコードに入力します.(右上、右下、左下の順に適用)上/下、左/右に塗りつぶし効果を適用します.(上/下/右の順に適用)
p.content-header {
  border: 3px solid coral;
  padding: 10px;
}
p.content-header {
  border: 3px solid grey;
  padding: 6px 11px 4px 9px;
}
p.content-header {
  padding: 5px 10px;
}
.margin:コンテンツを囲む外部とborder boxの間の余白を指定します.使い方はpaddingと同じです.左右の余白をWebブラウザ環境と一致させるにはautoを使用します.(widthを設定して要素の幅を設定すると、左右の余白で中央に揃えることができます.)
div.headline {
  width: 400px;
  margin: 0 auto;
}
今日のCSTIL终わり!!!
明日は授業があるのでJSに早めに着きます...焦らないで、明日JSかPYTHONの授業を受けるなら、順番に進んでください.
誰にでも優しいバックエンド開発者になりましょう😎
ドロップダウン機能を有効にするため、Railsのapplication.jsファイルを通して、Bootstrapに同梱されているJavaScriptライブラリとjQueryを読み込むようアセットパイプラインに指示
プログラマ別キーボード(Java、Java)