ウェブフロントエンド記事：CSSスタイルシートに使用する機能セレクタ
はじめに1.CSS
- CSS：カスケーディングスタイルシートカスケーディングスタイルシート
- 役割：Webパブリッシングレイアウトを達成するためのページ要素の変更や美化
2.CSSの使用
線路パターン1 /インラインスタイル
特徴：特定のタグでstyle属性、組み込まれたCSSスタイルコード
構文：
- <ラベルスタイル=「CSSスタイル宣言」>
- CSSスタイル宣言/声明：
- 現在の要素にスタイルを追加します。
- 構文：CSSプロパティ：値;
- 注意：CSSスタイル宣言は、複数の<ラベルスタイル=することができ「：値;属性：プロパティ値;」
共通のCSSプロパティ
設定したフォントサイズ：
1.属性：フォントサイズ
2.ピクセル値の値は、ブラウザのデフォルトのフォントサイズは16pxにあります
フォントの色を設定します。
1.プロパティ：カラー
2.値：英語の単語の色又はRGM（値、値、値）または＃b0b0b0（16進数）
背景色を設定
- 背景色
- 値：英語の単語の色やRGM（値、値、値）または＃b0b0b0（16進数）
<!--行内样式--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p style="background: red;color:RGB(123,145,164);font-size: 19px;">asd</p> </body> </html>
2.ドキュメント組み込み/内部スタイルシート
特長：HTMLドキュメント内の特定の相分離とCSSコードラベルCSSコードを導入したタグ。
構文：
<style> 选择器1 选择器2 选择器3 ... </style>セレクター：
1.文書を使用して相分離構造とスタイルが、ドキュメント内の要素を一致させるために、独自のセレクタを定義する必要があり、そのアプリケーションのスタイルを実現するためにインラインCSSスタイルシートを導入しました。
2.役割：そのドキュメント要素にマッチするスタイルを適用します。
3.構文：セレクタは、実際には2つの部分で構成されています
セレクタ（オペレータ）{
属性：値;
属性：値;
}et : 标签选择器/元素选择器： 使用标签名作为选择符，匹配文档中所有的该标签，并应用样式 p { color :green; font-size :20px; }- 注：ドキュメント内のどこにでも書くことができますが、スタイルの優先順位の原則に基づいて、一般的に書かれました。
3.外側リンク先/ Waibuyangshibiao
- 外部.cssファイルの定義は、真に分離スタイルシートとHTML文書中に導入することができます。
- 構文：
- セレクタは、外部スタイルシートにスタイルを定義使用し、HTML文書で使用 導入CSSファイル
3.スタイルシートの機能
1人の相続
- 承継
- ほとんどのCSSプロパティをすることができ継承されます
- スタイルの親要素を継承できる子要素または要素の子孫
- テキスト属性のすべては、ブロック要素一貫した親要素の幅を継承することができます
2.ラミネートプロパティ
要素が複数のスタイルは一緒に仕事を定義ことができます。
p{ color:red; background-color:blue; }
3.スタイルシートの優先順位
- ローからハイへ
- ローからハイへ：
- ブラウザのデフォルト設定：ブラウザのデフォルトスタイル
- 組み込みドキュメント/チェーン道外：スタイルは一緒にスタイルの仕事、と競合しない、
紛争、後発のスタイル、最後に定義されたスタイル最終的な表示の場合 - 最高の行のスタイルで優先順位
4.CSSセレクタ
- 役割：要素は良いスタイル文で適用可能なページ仕様
- 目的：マッチ・ページ・エレメント
1.タグセレクタ/セレクタ要素
特徴：ラベル内のすべての文書と一致するように、セレクタとしてラベル名は、子孫要素が含まれています
構文：
标签名{ 属性：值 } 标签名如a,divテキスト装飾：なし;アンダースコアをキャンセル
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: #aaffff; font-size:20px; } a{ text-decoration:none; } </style> </head> <body> <div>这是标签</div> <a href="">点一下</a> </body> </html>
2.クラスセレクタ
特徴：要素のclass属性の値を一致させることで
構文：
.cl{ 样式 } <p class="cl">p文本</p> 以英文.开头，跟上class属性值，中间没有空格
创建文件 class-selector
创建几个元素 div p span h1
使用类选择器为上述元素添加样式
1. 文本大小为24px
2. 背景颜色为橘色
3. 文本斜体显示 font-style : italic;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cl{
font-size:24px;
background-color: orange;
font-style:italic;
}
</style>
</head>
<body>
<div>这是标签</div>
<p class="cl">p文本</p>
</body>
</html>3.IDセレクタ
ID役割：HTMLのすべての要素は、主にユニークな、文書のロゴの要素を表すために使用されるid属性を持っています。
IDセレクタ：要素のid属性の値と一致
構文：
属性值{ 样式 }注意：通常のWebページが特定のID、ユニークなを使用し、ラベルの周囲に構成されています。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #seq{ width:100%; height:50px; background-color: pink; } </style> </head> <body> <span id="seq">这是一个span文本</span> </body> </html>
4.グループセレクタ
役割：複数のセレクタに共通のスタイルを設定します。
構文：
选择器1，选择器2，选择器3{ 样式 } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div,h1,p{ background-color: gray; margin:0;<!--外边距为0--> } </style> </head> <body> <h1>标题1</h1> <div>div</div> <p>p</p> </body> </html>
5.子孫セレクタ
役割：要素と一致する要素の子孫との間の関係に依存する（直接の子要素の両方を含むだけでなく、子孫の要素を含みます）。
構文：
选择器1 选择器2{ 样式 ｝要素2の子孫に対応する要素1の子孫マッチング素子を選択するセレクタを満たさなければなりません。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nav span{
border-radius:2px;
background-color:RGB(204,204,204);
padding-left:10px;
}
</style>
</head>
<body>
<p id="nav">
<span>你好</span>
<span>
<span>在那里</span>
</span>
<span>再见</span>
</p>
</body>
</html>6.子孫セレクタ
役割：関係要素が一致頼っ子孫は、唯一の直接の子要素に一致します。
構文：
选择器1>选择器2 { ｝<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #nav>ul>li{ color:red; } </style> </head> <body> <div id ="nav"> <ul> <li>你好</li> <li>你好<span>good<span>good</span></span></li> </ul> </div> </body> </html>
7.カモフラージュセレクタ
カテゴリー：
- ハイパーリンク擬似クラスセレクタ
- ダイナミック疑似クラスセレクタ
役割：
スタイルを設定するためのさまざまな状態のための主な要素
ハイパーリンクの異なる状態
- 訪問前：リンク
- 訪問：訪問した後、
- アクティベーション（マウスクリックまたは緩すぎる）：有効
- マウスオーバー：ホバー
他の要素は持っています
- マウスオーバー：ホバー
- マウスクリック：アクティブ
フォームコントロール
- フォーカスを取得する状態時間：フォーカス
- ユーザーが入力をクリックすると、テキストボックスとパスワードボックスの場合、状態がフォーカスを取得したとみなされています
他の選択と組み合わせて使用される疑似クラスセレクタ、異なる状態に配置されたスタイル要素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link{ color: #8e3fff; text-decoration:none; } a:hover{ color: #ff45aa; text-decoration:none; } a:visited{ color: greenyellow; text-decoration:none; } a:active{ color:blue; text-decoration:none; } </style> </head> <body> <a href="#">哈哈</a> </body> </html>
注意：あなたは四つの状態にスタイルを追加するには、ハイパーリンクを与える場合は、次の順序で疑似クラスセレクタで記述する必要があります
:link
:visited
:hover
:active
简称 “爱恨原则 LoVe / HAte ”8.属性セレクタ
tpye要素によって達成CSS。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input[type="text"]{ background-color: red; } </style> </head> <body> <input type="text"> </body> </html>
9.擬似要素セレクタ
- テキストの前後にコンテンツを増やし
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*在p标签前添加元素*/
p::before{
content:"抽烟";
}
/*在p标签后添加元素*/
p::after{
content:"烫头";
}
</style>
</head>
<body>
<p>喝酒</p>
</body>
</html>
#设置文本第一个字符
#通过伪元素添加内部为行内元素優先度セレクタ
セレクタスタイルの複数が同時に異なるスタイルを適用する優先選択に応じて、素子に適用した場合。
div{ color:red; } #box{ color:green; } .c1{ color:blue; } <div id="box" class="c1">文本</div>優先選択、主に右を分析して重みセレクタ（重量）より大きい値、より高い優先度を参照します。
选择器 权值 标签选择器 1 类选择器/伪类 10 id选择器 100 行内样式 1000それは複雑なセレクタ（子孫、子孫）である場合、各セレクタのセレクタの最終重量は、重みの合計であります
权重比较:
1.数选择器数量： id 类 标签 谁大它的优先级越高，如果一样大，后面的会覆盖掉前面的属性
2.选中的标签的属性优先级用于大于继承来的属性，它们是没有可比性
3.同是继承来的属性
3.1 谁描述的近，谁的优先级越高
3.2 描述的一样近，这个时候才回归到数选择器的数6.演習：
Webページでの役割の1.divとspanタグ？
div将网站分割成独立的逻辑区域division分割
span:小区域标签，在不影响文本正常显示的情况下，单独设置对应的样式。
<style>
span.active{
font-weight:bold;
}
</style>
<p>
<span>内容</span>
</p>2.CSS基本および高度なセレクタは何をセレクタ？
- 基础选择器
- 类选择器
- 标签选择器
- id选择器
- 高级选择器
- 后代选择器
- 子代选择器
- 组合选择器
- 交集选择器
- 伪装选择器 （link visited hover active）
- 伪元素选择器3.プロパティは何のモデルをボックス？そして、ボックスモデル図を描き、プロパティの意味を説明しますか？
- width:内容宽度
- height:内容的高度
- border:边框
- padding:内边距
- margin:外边距4.どのようにテキストを垂直方向と水平方向中心に作るには？
<style>
div{
width:200px;
height:60px;
text-align:center;
line-height:60px;
}
</style>
<div>
wusir
</div>
让行高等于盒模型的高度实现垂直居中
使用text-align:center;实现文本水平居中5.どのようにアンダースコアラベル削除するには？
text-decoration:none;
none:无线，underline:下划线,overline:上划线,line-through:删除线.6.どのようにページスタイルをリセットするのですか？
html,body,p,ul,ol{
margin: 0;
padding: 0;
}
/*通配符选择器 */
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
input,textarea{
border: none;
outline: none;
}7.どのようにデフォルトの境界線と外部入力やtextareaのタグを削除するには？
border:0;
outline:0;属性8. CSSで継承することができますか？
1.字体系列属性：
font-family:字体系列
font-weight:字体的粗细
font-size:字体的大小
fnot-style:字体的风格
2.文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:单词之间的间距
letter-spacing:中文或者字母之间的间距
text-transform:控制文本大小
color:文本颜色
3.元素可见性
visibility:控制元素显示隐藏
4.列表布局属性
list-style列表风格，包括list-style-type,list-style-image
5.光标属性：
cursor:光标显示为何种形态
color,text-xxx,font-xxx,line-height,letter-spacing,word-spacing9.どのように右のCSS正しく重いですか？
如果选中了标签
数选择器的数量 id class 标签 谁大优先级越高 如果一样大，后面优先级越大
如果没有选中标签，当前属性是被继承下来，他们的权重为0，与选中的标签没有可比性
都是继承来的，谁描述的近，就显示谁的属性（就近（选中的标签越近）原则），如果描述的一样近，继续数选择器的数量。
!important 它设置当前属性的权重为无限大，大不过行内样式的优先级前記ブロックレベルのタグとタグライン？
块级标签:
1.可以设置高度，如果不设置宽度，默认是父标签的100%的宽度
2.独占一行
p
div
ul
ol
li
h1~h6
table
tr
form
行内标签：
1.不可以设置宽高
2.在一行内显示
a
span
b
strong
em
i
行内块标签
1.可以设置宽高
2.在一行内显示
input
img