目次
HTML5の新しいタグ
<body>
<!-- 旧标签的实现方式-->
<div id="header"></div>
<div id="nav"></div>
<div id="article">
<div id="section"></div>
</div>
<div id="silder"></div>
<div id="footer"></div>
<!-- 新标签的实现方式-->
<header></header>
<nav></nav>
<article>
<section></section>
</article>
<aside></aside>
<footer></footer>
</body>
<ヘッダー></ヘッダー>頭
<nav></nav>ナビゲーション
<section></section> は、章、ヘッダー、フッターなど、ドキュメント内のセクションを定義します。
<aside></aside>サイドバー
<フッター></フッター>尾部
<article></article> は、完全なフォーラム投稿、ブログ投稿、ユーザー コメントなど、関連コンテンツの独立した完全なブロックを表します。
CSS の概要
CSS の概念
CSS (Cascading Style Sheets) カスケード スタイル シート、カスケード スタイル シート、略してスタイル シートとも呼ばれます。
CSS ファイルには.cssという接尾辞が付いています。
CSS は、HTML ドキュメント内の要素のスタイルを定義するために使用されます。
CSSの役割
CSSを使用する目的は、Webページを美しく一貫性のあるページにすることです。
文法
CSS ルールは、セレクターと 1 つ以上の宣言という 2 つの主要な部分で構成されます。
セレクターは通常、スタイルを変更する必要がある HTML 要素です。
各宣言は属性と値で構成されます。
プロパティは、設定するスタイル属性です。各プロパティには値があります。属性と値はコロンで区切られます。
<style>
h1{
color:blue;
font-size:9px;
}
</style>CSSをインポートする方法
インライン スタイル (インライン スタイル)
インライン スタイルを使用するには、関連するタグで style (style) 属性を使用する必要があります。Style プロパティには、任意の CSS プロパティを含めることができます。
整合性と計画の欠如はメンテナンスに役立たず、メンテナンスコストが高くなります。
<p style="background:orange; font-size:24px;">CSS</p>内部スタイル
内部スタイル シートは、個々のドキュメントに特定のスタイルが必要な場合に使用する必要があります。<style>タグを使用して、ドキュメントのヘッダーで内部スタイル シートを定義できます。
単一ページ内の CSS コードは統一され計画されているため、保守は容易ですが、複数のページ間で混同されやすくなります。
<head>
<style>
h1{
color:blue;
font-size:9px;
}
</style>
</head>外部スタイル (推奨)
外部スタイル シートは、多くのページにスタイルを適用する必要がある場合に最適です。外部スタイルシートの場合は、フォルダーをひとつ変えるだけでサイト全体の見た目を変えることができます。各ページは、<link>タグを使用してスタイルシートにリンクします。<link>タグはドキュメントの先頭にあります。
<link rel="stylesheet" href="xxx.css" type="text/css" />セレクタ
CSS 構文ルールは、セレクターと 1 つ以上の宣言 (スタイル) という2 つの主要な部分で構成されます。
グローバルセレクター
最も低い優先順位で任意の要素と一致させることができ、通常はスタイルの初期化に使用されます。
<style>
*{
margin:0;
padding:0;
}
</style>要素セレクター
HTML ドキュメント内の要素、p、b、div、a、imgなど。
これは、ページ上のこのタイプのすべてのタグを選択するタグ セレクターとも呼ばれるため、多くの場合「共通性」を説明し、特定の要素の「個性」を説明することはできません。
<style>
p{
font-size:9px;
}
</style>知らせ：
1. すべてのタグをセレクターにすることができます。たとえば、ul、li、dt、dl、input、div などです。
2. このラベルはどんなに深く隠されていても、必ず選択されます。
3. 1 つだけではなく、すべてを選択します。
クラスセレクター
ルールはドット . で定義され、必要なすべてのタグに使用されます。利点は非常に柔軟性があることです。
<head>
<style>
.oneclass{
width:800px;
}
</style>
</head>
<body>
<h2 class="oneclass">hello</h2>
</body>class属性の特徴
- クラス セレクターはさまざまなタグで使用できます。
- クラス名を数字で始めることはできません。
- 同じタグに対して複数のクラス セレクターを使用できます。スペースで区切ります。
<body>
<h2 class="classone classtwo">hello</h2> <!--正确-->
<h2 class="classone" class="classtwo">hello</h2> <!--错误-->
</body>IDセレクター
これは特定のラベルに使用され、一度だけ使用できます。CSSのID セレクターは#で定義されます。
知らせ：
1.IDはユニークです。
2. ID を数字で始めることはできません。
<body>
<p id="text">hello1</p>
<p id="text">hello2</p> <!-- 在ID选择器中这样是不规范的，尽管能够实现效果-->
<p class="classone">Hello1</p> <!-- 在类选择器中是可以的-->
<p class="classone">Hello2</p>
</body>マージセレクター
構文: selector1、selector2、...{}
役割: 共通のスタイルを抽出し、重複するコードを削減します。
<style>
h1{
color:blue;
font-size:9px;
}
p{
color:blue;
font-size:9px;
}
<!-- 相当于上面两个选择器-->
h1,p{
color:blue;
font-size:9px;
}
</style>セレクターの優先順位
CSS では、重みは数値的に測定されます。
- 要素セレクターの重みは次のとおりです: 1
- クラスセレクターの重みは次のとおりです: 10
- ID セレクターの重みは 100 です。
- インライン スタイルのウェイト: 1000
フォントのプロパティ
色
テキストの色を指定します
<style>
div{
color:rgba(255,0,0,.5); <!-- .5修改字体的透明度-->
}
</style>フォントサイズ
テキストのサイズを設定する
Chrome ブラウザで受け入れられる最小フォント サイズは 12 ピクセルです。
フォントの太さ
テキストの太さを設定する
太字: 太字
太い: 太い
ライター：より薄い
100-900 : 任意の定義。400 はデフォルト、700 は太字に相当します。
フォントスタイル
テキストのフォントスタイルを指定します
| 価値 | 説明 |
|---|---|
| 普通 | デフォルト |
| イタリック | イタリック体の定義 |
フォントファミリー
font-family 属性は要素のフォントを指定します
各値はカンマで区切られます。
フォント名にスペースが含まれる場合は、引用符で囲む必要があります。
font-family:"Microsoft YaHei","Simsun","SiHei";背景プロパティ
CSS の背景プロパティには主に次のものが含まれます。
| 属性 | 説明 |
|---|---|
| 背景色 | 背景色を設定する |
| 背景画像 | 背景画像を設定する |
| 背景位置 | 背景画像の表示位置を設定する |
| 背景リピート | 背景画像の塗りつぶし方法を設定する |
| 背景サイズ | 背景画像サイズプロパティを設定する |
背景色
このプロパティは背景色を設定します
<head>
<style>
.box{
width:300px;
height:300px;
background-color:palevioletred;
}
</style>
</head>
<body>
<div class="box"></div>
</body> 
背景画像
要素の背景画像を設定します。
要素の背景は、パディングと境界線 (マージンを除く) を含む要素の合計サイズです。デフォルトでは、background-image 属性は要素の左上隅に配置されます。画像が十分に大きくない場合は、画像を垂直方向と水平方向に並べて配置します。画像サイズが要素サイズを超える場合、要素の一部が配置されます。サイズは画像の左上から表示されます。
背景リピート
このプロパティは、背景画像を並べて表示する方法を設定します
| 価値 | 説明する |
|---|---|
| 繰り返す | デフォルト |
| リピート-x | 水平方向のみに並べて表示 |
| 繰り返します | 垂直方向のみに並べて表示 |
| 繰り返し禁止 | タイル張りではない |
背景サイズ
このプロパティは背景画像のサイズを設定します。
| 価値 | 説明する |
|---|---|
| 長さ | 背景画像の幅と高さを設定します。最初の値は幅、2 番目の値は高さです。1 つだけが設定されている場合、2 番目の値は自動です |
| 割合 | 相対位置領域のパーセンテージを計算します。最初の値は幅、2 番目の値は高さです。1 つだけ設定されている場合、2 番目の値は自動です |
| カバー | 画像のアスペクト比を維持しながら、背景領域を完全にカバーする最大サイズに画像を拡大縮小します。 |
| 含む | 画像のアスペクト比を維持しながら、背景の配置領域に適合する最大サイズに画像を拡大縮小します。 |
テキスト属性
テキスト整列
要素のテキストの水平方向の配置を指定します。
| 価値 | 説明 |
|---|---|
| 左 | テキストを左揃えにする (デフォルト値) |
| 右 | テキストを右揃えにする |
| 中心 | テキストを中央揃えにする |
テキスト装飾
text-decoration 属性は、テキストに追加する装飾、下線、上線、取り消し線などを指定します。
| 価値 | 説明 |
|---|---|
| 下線 | アンダースコアを定義する |
| 上線 | オーバーラインを定義する |
| ラインスルー | 取り消し線を定義する |
テキスト変換
text-transform プロパティはテキストの大文字化を制御します。
| 価値 | 説明 |
|---|---|
| 大文字にする | 各単語の先頭の大文字と小文字を定義する |
| 大文字 | すべての大文字を定義する |
| 小文字 | すべての小文字を定義します |
テキストインデント
text-indent 属性は、テキスト ブロック内のテキストの最初の行のインデントを指定します。
p{
text-indent:2em; <!-- 首行缩进2个字节-->
}
<!-- 或者用px（像素）来定义-->
p{
text-indent:50px;
}注: 負の値も許可されます。負の場合は、最初の行を左にインデントします。
フォームのプロパティ
テーブルの境界線
CSS テーブルの境界線を指定するには、border プロパティを使用します。
<style>
table,td{
border:1px solid black;
}
</style>折りたたまれた境界線
border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开。
表格宽度和高度
width和height属性定义表格的宽度和高度。
表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左，右，或中心。
<style>
td{
text-align:center;
}
</style>垂直对齐属性设置垂直对齐
<style>
td{
height：50px;
vertical-align:bottom;
}
</style>表格填充
如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性
<style>
td{
padding:15px;
}
</style>表格颜色
<style>
table,td,th{
border:1px solid green;
}
td{
background-color:green;
color:white;
}
</style>关系选择器
关系选择器分类：
1.后代选择器
2.子代选择器
3.相邻兄弟选择器
4.通用兄弟选择器
后代选择器
定义
选择所有被E元素包含的F元素，中间用空格隔开。
语法
<head>
<style>
ul li{
color:green;
}
</style>
</head>
<body>
<ul>
<li>后代选择器</li>
<li>子代选择器</li>
</ul>
<ol>
<li>没有绿色文本的效果</li>
</ol>
</body>
子代选择器
定义
选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示。
语法
<head>
<style>
div>a{
color:red;
}
</style>
</head>
<body>
<div>
<a href="">子元素1</a>
<p><a href="">孙元素</a></p>
<a href="">子元素2</a>
</div>
</body> 
相邻兄弟选择器
定义
选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素。（使用率不高）
语法
<head>
<style>
h1+p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>标题一</h1>
<p>这是一个段落。</p>
</body>
通用兄弟选择器
定义
选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开。
语法
<head>
<style>
h1~p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>标题一</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
</body> 
end