HTML5 4 日目のメモ

セレクター:

1、関係セレクター

1) グループセレクター h2,p,.text,#box{style}

カンマ区切り

2) 子要素セレクター親要素>子要素{style}

大なり記号で区切られています >

3) 子孫セレクター祖先子孫 {style}

はスペースで区切られています



色は継承可能

2、動的擬似クラスセレクター(一般的にタグで使用されます)

:リンク時のリンク状態

:訪問後の訪問状態

:マウスを置いたときのホバー状態

:アクティブマウスの状態クリックされたとき

原則: 愛憎原則 LoVeHAte はこれを順番に書きます

通常は a:hover{}

3, :n 番目のセレクターを書きます

:first-child: 最初の子要素 ​​

:last-child : 最後の子要素

:nth-child(n): n 番目の子要素 ​​n:0,1,2...n 2n 2n+1...0 から開始して 1 ごとに累積します

色違い奇数行と偶数行の場合: nth-child(2n+1) nth-child(2n)

CSS プロパティ

1、テキスト プロパティ (テキスト スタイル、フォント プロパティ、フォント スタイル)

font-size:12px /14px;フォント サイズ (ブラウザーのデフォルトのテキスト サイズ 16px)

font-family:Microsoft Yahei;

font-weight:100-900/bold/太字/通常のフォント太字

color:#000000;

font-style:italic( italic)/normal;

2, 段落属性

text-align:left/center/right テキスト水平配置

vertical-align:top/middle/bottom テキスト垂直配置

text -indent:20px/2em テキストインデント

line-height:20-24px/150%/1.5 line spacing

text-decoration:underline/overline/line-through /none テキスト修正

特別な用途:

テキスト1行、高さ、垂直中央の設定メソッド:

line-height:height; (行の高さ = 高さ)

letter-spacing:10px; 単語間の距離

word-spacing:1px; 単語間の距離 (主に英語の Web サイトで使用されます)
text-transform:capitalize (各単語の最初の文字が大文字になります) uppercase (すべて大文字) lowercase (すべて小文字) (主に英語の Web サイトで使用されます)

white-space:normal/nowrap (改行なし)

3,背景属性 (背景)

background-color: #000000/rgba()/red

background-image:url (画像へのパス) )

background-repeat:repeat/repeat-x/repeat-y/no -repeat; (背景画像の表示方法を設定します)

background-position: 水平方向 垂直方向

水平方向: +300px -300px 20% 左中右

垂直方向: +300px -300px 20% 上中下

background は複合属性です。後ろの - は省略できます。

例：background:#ff0000 url(../img/1.jpg) no-repeat 20px 30px;

4、リスト属性(list-style)複合属性(主にul ol liに使用)

list- style-image:url();リスト項目の前に画像を追加します

list-style-type:none (リストの前のドット)

list-style-position: inside/outside

list-style :none;最も一般的に使用されます

上記は HTML5 の 4 日目のメモの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。