CSS属性のクリア

CSSは、WebスタイルとHTMLドキュメントスタイルの言語を指定するための積層スタイルシートです.
CSSの基本属性を整理しました.

1.CSSセレクタ

CSSセレクタは、スタイルを指定するHTML要素を「検索」または「選択」するために使用します.
CSSセレクタは5種類に分けられます.

Simple Selectors(名前、ID、クラス選択要素に基づく)

Combinationセレクタ(特定の関係に基づいて要素を選択)

Pseudo-classセレクタ(特定の状態に基づいて要素を選択)

Pseudo-elementsセレクタ(一部の要素を選択してスタイルを指定)

Attributeセレクタ(属性または属性値に基づいて要素を選択)

1. CSS Simple Selectors

Selector ExampleExampleDescription#id#firstnameid="firstname"の要素を選択します.class.introclass=「intro」要素**を選択すべての要素を選択します.Elementpは、すべての<p>要素を選択します.element,element,..div,pはすべての<p>와 <div>要素を選択する.

2. CSS Combination Selectors

selector ExampleExample記述要素div p<div>要素内のすべての<p>要素を選択します.element>elementdiv>p親要素が<div>要素のすべての<p>要素であることを選択します.element+elementdiv+p<div>要素に続く最初の<p>要素を選択します.element 1~element 2 p~ul<p>要素より前のすべての<ul>要素を選択します.

3.よく使うCSS擬似クラスセレクタ

Selector ExampleExampleDescription:activea:アクティブリンクの選択:hover a:hoverマウスが指すリンクを選択:visiteda:アクセスしたすべてのリンクを選択:first-childp:first-child親のすべての<p>要素を選択します.nh−child(n)p:nh−child(2)親の2番目の子のすべての<p>要素を選択する.

4. CSS Pseudo-element Selectors

Selector ExampleExampleDescription::afterp::すべての<p>要素の後ろに内容を挿入します.beforep::すべての<p>要素の前に内容を挿入します.first-lettp::first-letterすべての<p>要素の最初の文字を選択:first-inlinep::first-inlineのすべての<p>要素の最初の行を選択します.selectionp::ユーザーが選択した要素の一部を選択します.

2. CSS Colors

CSS背景色

<h1 style="background-color:DodgerBlue;">Hello World</h1>

CSSテキスト色

<p style="color:DodgerBlue;">Lorem ipsum...</p>

CSSボーダー色

<h1 style="border:2px solid Violet;">Hello World</h1>

CSS Color Values

CSSはまた、RGB値、HEX値、HSL値、RGBA値、HSLA値を用いて色を指定することもできる.

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%,0.5);">hsl(9, 100%, 64%,0.5)</h1>

3.CSS背景

CSSバックグラウンド属性は、要素にバックグラウンド効果を追加するために使用されます.

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

(簡略化された属性)

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

background-color-要素の背景色を指定します.

background-image-背景として使用する画像を指定します.

background-repeat-水平および垂直の重複画像

background-attachment-背景画像をスクロールするか固定するかを指定します

background-position-背景の位置を決定します.

background(簡略化された属性)-コード量を減らすために、単一の属性にすべてのバックグラウンド属性を指定することもできます

opacity-要素の不透明度/透明度を指定します.0.0～1.0の値を使用できます.値が低ければ低いほど透明になります.

4.CSSボーダー

CSSボーダースタイルは以下の通りです.

dotted-破線の枠線を定義

dashed-破線の枠線を定義

solid-純色の枠線を定義

double-二重境界定義

groove-3 Dホーム境界を定義します.効果は、枠線の色の値によって異なります.

ridge-3 D隆起境界を定義します.効果は、枠線の色の値によって異なります.

inset-3 D挿入枠を定義します.効果は、枠線の色の値によって異なります.

outset-3 D Outset枠線を定義します.効果は、枠線の色の値によって異なります.

none-境界を定義しない

hidden-非表示境界を定義します.

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

5.CSSマージンと充填

CSSマージン

余白は、定義された境界以外の要素の周囲にスペースを作成するために使用されます.

CSSには、要素の各側面の余白を指定する属性があります.

margin-top

margin-right

margin-bottom

margin-leftすべての余白属性には、次の値があります.

auto-ブラウザはマージンを計算します.

長さ-エッジピッチをpx、pt、cmなどに指定します.

%-余白を含む要素の幅の%として指定します.

継承-親要素からマージンを継承する必要があることを指定します.

CSS充填

ダウンジャケットは、定義された境界内の要素コンテンツの周囲にスペースを作成するために使用されます.

CSSには、要素の各面に塗りつぶしを指定する属性があります.

padding-top

padding-right

padding-bottom

padding-leftすべてのダウンジャケットのプロパティには、次の値があります.

長さ:px、pt、cmなどのダウンジャケットを指定します.

%-含まれる要素の幅の%として入力します.

継承-ダウンジャケットを親要素から継承する必要があることを指定します.

6.CSSテキスト

CSSにはテキストのフォーマットに多くの属性があります.

テキストの色

colorプロパティは、テキストの色を設定するために使用されます.

h1 {
  color: green;
}

テキストの整列

text-alignプロパティは、テキストの水平位置合わせを設定するために使用されます.

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}

文字の装飾

text-装飾プロパティは、テキストから設定を削除するために使用されます.

h1 {
  text-decoration: overline;
}
h2 {
  text-decoration: line-through;
}
h3 {
  text-decoration: underline;
}

テキスト変換

text-transformプロパティは、大文字とテキストに小文字を指定するために使用されます.

p.uppercase {
  text-transform: uppercase;
}
p.lowercase {
  text-transform: lowercase;
}
p.capitalize {
  text-transform: capitalize;
}

7.CSSリンク

CSSを使用すると、さまざまな方法でリンクのスタイルを指定できます.
リンクは、ステータスに応じて異なるスタイルを指定できます.
4つのリンクのステータスは次のとおりです.

a:link-アクセスされていない通常のリンク

a:visited-ユーザーアクセスのリンク

a:hover-ユーザーはマウスをリンク

に移動

a:active-クリック瞬間リンク

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

8.CSS出図

このfloatプロパティは、コンテンツの場所とフォーマットを指定します.
floatプロパティには、次のいずれかの値があります.

left-コンテナの左側に要素が表示されます.

right-コンテナの右側に要素が表示されます.

none-要素は浮動しません(テキストで発生した位置が表示されます).これがデフォルトです

inherit-要素は親のfloat値を継承します.

最も簡単な用途はfloatプロパティを使用して画像の周囲にテキストを改行することです.

div {
  float: left;
  padding: 15px; 
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}

CSSを参照したい場合は、次のリンクを参照してください.
CSSを参照