HTML5 および CSS3 基本チュートリアル 第 8 版 学習ノート 第 7 章~10_html/css_WEB-ITnose

第 7 章、CSS の構成要素

CSS には、基本的な形式 (フォント サイズ、色) を制御するプロパティ、レイアウト (位置、浮動小数点) を制御するプロパティ、および印刷時に訪問者がページを変更する場所を決定するプロパティがあります。要素。 CSS には、項目の表示または非表示を制御する多くの動的プロパティもあり、ドロップダウン リストやその他の対話型コンポーネントの作成に使用できます。

スタイル ルールの構築

スタイル シート内のすべてのルールには、セレクターと宣言ブロックの 2 つの部分があります。

セレクターはどのブロックが影響を受けるかを決定し、宣言ブロックは何をすべきかを指定する 1 つ以上の属性と値のペアで構成されます。

スタイル ルールにコメントを追加します

/* Comment */。複数行のコメントにすることができ、スタイル シート内のどこにでも配置できます。ペアで表示する必要があり、ネストすることはできません。

継承について理解する

継承は CSS において非常に重要な概念です。ブラウザは HTML をドキュメント ツリーとして認識します。CSS 属性が要素に適用されると、その要素だけでなく、その下のブランチ要素にも影響します。

ほとんどのプロパティでは、継承値を使用して継承を強制できます

継承される CSS プロパティ

text:

color: color (要素を除く)

direct: 方向

font : font

font-family: フォント ファミリー

font-size: フォント サイズ

font-style: 斜体の設定に使用されます

font-variant: スモールキャップの設定に使用されます

font-weight: 太字の設定に使用されます

Letter-spacing: 文字間隔

line-height: 行の高さ

text-align: 配置方法の設定に使用

text-indent: 1 行目のインデントの設定に使用

text-transform: use 変更に使用case

Visibility: 可視性

White-space: スペースの処理方法を指定するために使用

word-spacing: 単語の間隔

list:

list-style: リストのスタイル

list-style-image : リストのカスタマイズされたタグを指定するために使用されます

list-style-position: リストのタグの位置を決定するために使用されます

list-style-type: リストのタグを設定するために使用されます

Table:

border-collapse: テーブル内の隣接するセルの境界線を 1 つの境界線に結合するかどうかを制御するために使用されます

border-spacing: テーブルの境界線間のギャップ サイズを指定するために使用されます

caption-side: テーブルの境界線を設定するために使用されますテーブルのタイトルの位置

空のセル: テーブルに空のセルを表示するかどうかを設定するために使用されます

ページ設定:

孤立したセル: テーブルに保持する必要がある最小行数を設定するために使用されます要素内でページングが発生するときのページの下部

page -break-inside: 要素内のページング方法を設定するために使用されます

widows: ページの上部に保持する必要がある最小行数を設定するために使用されます要素内でページングが発生したとき

その他:

カーソル: マウスポインタ

引用符: 引用スタイルの指定に使用

カスケード: ルールが競合する場合

定義されたルールが競合しない場合、複数のルールが結合され、要素に一緒に適用されます。

1. 書かれたルールがブラウザのデフォルトのルールと矛盾する場合、書かれたルールが優先されます

2. 書かれたルール間に矛盾がある場合、CSS はカスケードの原則を使用して、具体性、順序、重要性を考慮します。競合するルールのうちどれを有効にするかを決定します。

(1) こだわり

特異性ルールは、セレクターがどの程度具体的であるかを指定します。セレクターが具体的であればあるほど、ルールは強力になります。競合が発生した場合は、より具体的なルールが最初に適用されます。 ID セレクターは最も特殊です。

推奨事項: スタイル シートでより多くのクラス セレクターを使用し、ID セレクターの使用を避けてください。柔軟性が低下します

(2) 順序

後から表示されるものは優先されます。 HTML 要素に直接適用されるルールは、外部スタイル シートに含まれる、または HTML ドキュメントの先頭に挿入される同じ特異性のルールよりも後に出現すると見なされます。

(3) 重要性

システム全体のルールをカバーする特別なルールを宣言できます。このルールは他のすべてのルールよりも重要です。特定のステートメントの最後に ! important を追加することもできます。例: p{color:red ! important;} これはお勧めできません

属性の値

1. 継承: 属性値を表示し、属性の対応する親要素の設定値は同じです。 p{border:inherit} (IE8 より前のほとんどの属性は値の継承をサポートしていません)

2. 事前定義された値。ほとんどの CSS プロパティには、使用できる事前定義された値がいくつかあります。例: float は left、right、none に設定できます。

3. 長さとパーセンテージ。 em、px、pt、パーセンテージ。 em の長さは、対応する要素のフォント サイズとほぼ同じです。 (em を使用して font-size 属性を設定すると、その値は対応する親要素のフォント サイズから継承されます)

4. 純粋な数値。単位のない数値を受け取るのは少数の CSS プロパティのみで、最も一般的なものは次のとおりです。 -高さ、z-index、不透明度

5. URL

6. CSS カラー

7. RGB

8. 16 進数

9. CSS3 によって提供されるその他の色指定方法: RGBA、HSLA、HSL

RGBA : アルファ透明度を表す A が RGB に追加されます。最新のブラウザはすべてサポートされていますが、IE9 より前のブラウザはサポートしていません。形式: color:rgb(89,0,127)、color:rgba(89,0,127,0.75)

HSL および HSLA

HSL: 色相、彩度、明度。色相値: 0 ～ 360、彩度および明るさは両方ともパーセンテージ: 0 ～ 100%

形式: property:hsl(hue,saturation,lightness);

HSLA 形式: property:hsla(hue,saturation,lightness, alpha透明度) )

第 8 章、スタイル シートの操作

CSS ファイルを必ず .css 拡張子と UTF-8 エンコーディングを持つファイルとして保存してください

外部スタイル シートは、リンクを通じて参照することも、(インポート経由で) インポートすることもできます。インポートは推奨されません。パフォーマンスが低下します

外部スタイルシートへのリンク

構文:

rrree

ページ内で複数のリンク要素を使用して複数のスタイルシートをロードできます。競合が発生した場合、次のファイルのルールが許可されます。 。

埋め込みスタイル シートを作成します

を head セクションに配置します

style 要素が link 要素の後にある場合にのみ、埋め込みスタイル シートのスタイルが適用されます。スタイルシートの外側のスタイル。

インラインスタイルシートを適用する

HTML要素にstyle属性を定義します。他の場所で競合するスタイルが !重要 とマークされていない限り、インライン スタイルは他のすべてのスタイルよりも優先されます。

スタイルのカスケードと順序

埋め込みスタイル シートとリンクされた外部スタイル シートとの関係は、HTML 内の相対的な位置関係によって異なります。競合が発生した場合は、発生した順序が優先されます。

インライン スタイルが最も優先されます。適用すると、競合するスタイルがオーバーライドされます。

競合するスタイルの順序は優先順位に影響します。例外として、!重要とマークされたスタイルが常に最高の優先順位を持ちます。絶対に必要な場合を除き、 important は使用しないようにしてください

メディア関連のスタイル シートを使用します

特定の出力にのみ使用されるスタイル シートを指定できます。たとえば、印刷バージョンと画面バージョンの両方に共通の機能を持つ共通のスタイル シートを作成し、印刷専用プロパティと画面専用プロパティに個別のプロパティを作成できます。 link または style 要素で media 属性を使用します。たとえば、media="output"、出力は print、screen、all (これらが最も一般的) などになります。

第 9 章、セレクターの定義

提案 : ID セレクターを使用しないようにしてください

编写CSS的一个重要目标就是让选择器尽可能简单，仅保持必要的特殊性

按名称选择元素

类型选择器

按类或ID选择元素

1、按类选择要格式化的元素

使用.（点号）开头，不加空格，输入className

2、按ID选择要格式化的元素

使用#（井号）开头，不加空格，输入idName

除非必须特别针对目标元素，最好不要再id或class选择器中添加元素名称，降低灵活性

类选择器与ID选择器的比较

建议尽量使用class选择器。

id选择器会引入如下问题：

1、不可复用

2、特殊性强，要覆盖需要编写特殊性更强的规则，较难管理

按上下文选择元素

1、子选择器：>

.architect > p{     color:red;}

这个选择器仅选择architect类元素的子元素（而非子子元素、子子子元素）的p元素。

2、CSS相邻同胞结合符：+

<body>     <h1></h1>     <p></p>     <h2></h2></body>

h1与p是相邻同胞，h1与h2不是相邻同胞，p与h2是相邻同胞

.architect p+p{     color:red;}

3、普通同胞结合符：~

h1~h2{     color:red;}

选择第一个或最后一个子元素

:first-child，:last-child。均为伪类。

<ul>     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li></ul>

li:first-child{     color:red;}

选中的是

1

，并不是li的子元素，:last-child类似

选择元素的第一个字母或者第一行

:first-letter，:first-line

伪元素：::first-letter,::first-line,::before,::after

伪类：:first-child,:link,:hover

按状态选择链接元素

a:link：从未被激活或指向，当前也没有被激活或指向的链接的外观

a:visited：访问者已激活过的链接的外观

a:focus：前提是链接是通过键盘选择并已准备好激活的

a:hover：光标指向链接时链接外观

a:active：激活过的链接的外观

按属性选择元素

选择器	属性值
[attribute]	匹配指定属性，不论值是什么
[attribute="value"]	完全匹配指定属性值
[attribute~="value"]	属性值是以空格分隔的多个单词，其中一个完全匹配指定值
[attribute|="value"]	属性值以 value- 打头
[attribute^="value"]	属性值以value开头，value为完整单词或单词一部分
[attribute$="value"]	属性值以value结尾，value为完整单词或单词一部分
[attribute*="value"]	属性值为指定值的子字符串

指定元素组

h1,h2{     color:red;}

组合使用选择器

em{     color:red;}.project em{     color:red;}.architect .project em{     color:red;}/* 以上实现相同效果，特殊性由低到高 */

第十章，为文本添加样式

选择字体系列

font-family:name

对于包含多个单词的字体名称，应该用引号（单引号或双引号）包围起来。

虽然font-family属性是继承的，但有几个元素不会继承父元素的字体设置，其中有表单的select、textarea、input元素。不过可以强制它们继承。

指定替代字体

可以在font-family属性中列举一种以上的字体，备用。font-family:name,name2,name3..

创建斜体

font-style:italic

取消斜体

font-style:normal

应用粗体格式

font-weight:bold（粗体）、font-weight:bolder（更粗）、font-weight:light（更细）、或者输入100~900之间100的倍数，400代表正常粗细，700代表粗体

设置字体大小

为网页的文本设置字体大小有两种方法：直接使用像素指定要使用的特定字号，或使用百分数、em或者rem指定相对于父元素文本的大小

建议使用em为单位

1em总是等于默认字号大小，这是em的工作原理

rem总是以根元素作为参照系

font-size:xx-small、font-size:x-small、font-size:small、font-size:medium、font-size:large、font-size:x-large、font-size:xx-large、或者使用数字加单位，或者百分比

设置行高

行高指的是段落的行距，即段落内每行之间的距离

line-height:n -- 它与元素字体大小相乘，得出需要的行高

line-height:a -- 这里的a是以em、px、pt为单位的值

line-height:p% -- 字体大小百分比

同时设置所有字体值

可以使用font同时设置字体样式、粗细、变体、大小、行高和字体系列

使用font，至少需要包含字体大小和字体系列属性

设置颜色

color:red;

使用样式表可以包含颜色名称、十六进制值、RGB、HSL、RGBA和HSLA值的任意组合来定义颜色

设置背景

background-color、background-image、background-repeat（重复背景图像）、background-attachment、background-position，还可以使用background简记法

background-repeat：重复背景图像，background-repeat:direction，direction有四个可选值：repeat、repeat-x、repeat-y、no-repeat

background-attachment：控制背景图像是否随页面滚动，fixed：背景图像附着在浏览器窗口上，即使访问者滚动窗口，图像仍会继续显示，scroll：访问者滚动页面时背景图像会移动，local：只有访问者滚动背景图像所在元素时，背景图像才会移动。

background-position：指定元素背景图位置

控制间距

可以增加或减少单词之间或字母之间的距离，前者称为字间距，后者称为字偶距

字间距：word-spacing:length

字偶距：letter-spacing:length

添加缩进

text-indent属性，可以指定段落第一行前面应该空出多大空间

对齐文本

text-align:left(right,center,justify)，左对齐，右对齐，居于中间，两端对齐

修改文本的大小写

text-transform属性，可以为样式定义文本大小写。

text-transform:capitalize -- 每个单词首字母大写

text-transform:uppercase -- 让所有字母大写

text-transform:lowercase -- 让所有字母小写

text-transform:none -- テキストをそのまま保持します

小さい大文字を使用します

小さい大文字: 文字は大文字ですが、小文字のサイズに縮小されます。フォントバリアントコントロールを使用します。

使用: font-variant:small-caps

キャンセル: font-variant:none

テキストの装飾

text-decoration 属性はテキストを装飾し、下線または他の種類の線を追加します

text-decoration:underline --下線を追加 ... -space:pre -- ブラウザに元のテキスト内のすべてのスペースと改行を表示させます