ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML5 および CSS3 基本チュートリアル 第 8 版 学習ノート 第 7 章~10_html/css_WEB-ITnose
第 7 章、CSS の構成要素
CSS には、基本的な形式 (フォント サイズ、色) を制御するプロパティ、レイアウト (位置、浮動小数点) を制御するプロパティ、および印刷時に訪問者がページを変更する場所を決定するプロパティがあります。要素。 CSS には、項目の表示または非表示を制御する多くの動的プロパティもあり、ドロップダウン リストやその他の対話型コンポーネントの作成に使用できます。
スタイル シート内のすべてのルールには、セレクターと宣言ブロックの 2 つの部分があります。
セレクターはどのブロックが影響を受けるかを決定し、宣言ブロックは何をすべきかを指定する 1 つ以上の属性と値のペアで構成されます。
/* Comment */。複数行のコメントにすることができ、スタイル シート内のどこにでも配置できます。ペアで表示する必要があり、ネストすることはできません。
継承は CSS において非常に重要な概念です。ブラウザは HTML をドキュメント ツリーとして認識します。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
ページ内で複数のリンク要素を使用して複数のスタイルシートをロードできます。競合が発生した場合、次のファイルのルールが許可されます。 。
c9ccee2e6ea535a969eb3f532ad9fe89スタイル シート531ac245ce3e4fe3d50054a55f265927 を head セクションに配置します
style 要素が link 要素の後にある場合にのみ、埋め込みスタイル シートのスタイルが適用されます。スタイルシートの外側のスタイル。
HTML要素にstyle属性を定義します。他の場所で競合するスタイルが !重要 とマークされていない限り、インライン スタイルは他のすべてのスタイルよりも優先されます。
埋め込みスタイル シートとリンクされた外部スタイル シートとの関係は、HTML 内の相対的な位置関係によって異なります。競合が発生した場合は、発生した順序が優先されます。
インライン スタイルが最も優先されます。適用すると、競合するスタイルがオーバーライドされます。
競合するスタイルの順序は優先順位に影響します。例外として、!重要とマークされたスタイルが常に最高の優先順位を持ちます。絶対に必要な場合を除き、 important は使用しないようにしてください
特定の出力にのみ使用されるスタイル シートを指定できます。たとえば、印刷バージョンと画面バージョンの両方に共通の機能を持つ共通のスタイル シートを作成し、印刷専用プロパティと画面専用プロパティに個別のプロパティを作成できます。 link または style 要素で media 属性を使用します。たとえば、media="output"、出力は print、screen、all (これらが最も一般的) などになります。
第 9 章、セレクターの定義
提案 : ID セレクターを使用しないようにしてください
编写CSS的一个重要目标就是让选择器尽可能简单,仅保持必要的特殊性
类型选择器
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;}
选中的是 25edfb22a4f469ecb59f1190150159c61bed06894275b65c1ab86501b08a632eb,并不是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 -- ブラウザに元のテキスト内のすべてのスペースと改行を表示させます