CSSとは何ですか？

CSSは、カスケードスタイルシート（カスケードスタイルシート）の
スタイル定義を参照して、HTML要素を表示および制御し、HTMLコンテンツを美化する方法を示します。
スタイルは通常スタイルシートに保存され、コンテンツとプレゼンテーションの分離の問題を解決することも目的です。
外部スタイルシート（CSSファイル）は作業の効率を大幅に向上させることができます。
複数のスタイル定義を1つに積み重ねることができ、後者は前者のスタイルを上書きできます。

CSSの基本構文

形式：セレクター{属性：値;属性：値;属性：値; ...}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础语法</title>
    <style>
        /*内部样式*/
        /*选择器{属性:值;属性:值;属性:值} */
    h3{
     
     color:deeppink;font-size: 30px;}
    li{
     
     color:firebrick;font-size: 30px;line-height: 30px;}    
    </style>

</head>
<body>
    <h3>什么是CSS?</h3>
    <ul>
    <li>指层叠样式表 (Cascading Style Sheets)</li> 
    <li>样式定义如何显示控制 HTML 元素,从⽽实现美化HTML⽹⻚。</li> 
    <li>样式通常存储在样式表中，⽬的也是为了解决内容与表现分离的问题</li> 
    <li>外部样式表(CSS⽂件)可以极⼤提⾼⼯作效率</li> 
    <li>多个样式定义可层叠为⼀，后者可以覆盖前者样式</li> 
</ul>
</body>
</html>

効果図は次のとおりです。
ここに画像の説明を挿入

CSSの一般的なセレクター

（1）htmlセレクタ（タグセレクタ）を
使用することであるhtmlため、セレクタとしてタグを
例えばp{....}、内のすべてのpタグ
h2{....}ウェブは、このスタイルを使用し、ウェブの使用における全てのH2タグこのスタイル
（2）。クラスセレクタ（使用ドットを使用します。カスタム名（クラス名）で定義されたセレクター）
定義：.类名{样式....} 匿名类
その他のセレクター名。クラス名{スタイル...}
使用：<html标签 class="类名">...</html标签>
.mc{color:blue;}/ *すべてのクラス属性値mcはこのスタイルを使用します* /
p.ps{color:green;}/ pタグのみクラス属性psの値はこのスタイルを使用して記録されました/
注：クラスセレクター使用は⽹⻚で繰り返すことができます
（3）IDセレクター：
定義：#id名{样式.....}
使用：<html标签 id="id名">...</html标签>
注：idセレクターのみ⽹⻚で1回使用されます。

セレクターの優先順位：大きいものから小さいものへ[IDセレクター]-> [クラスセレクター]-> [htmlセレクター]-> [html属性]

（4）。関連するセレクター（セレクターを含む
形式：セレクター1セレクター2セレクター3…{スタイル…}

table a{....} /*table标签⾥的a标签才采⽤此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采⽤此样式*/

（5）。組み合わせセレクター（セレクターグループ）
形式：セレクター1、セレクター2、セレクター3…{スタイル…}

h3,h4,h5{color:green;} /*h3、h4和h5都采⽤此样式*/

（6）。疑似カテゴリ（疑似要素）セレクタ：
形式：タグ名：疑似カテゴリ名{スタイル...}

a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* ⿏标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */

CSS3のセレクター

（1）関係セレクター：

div>p 选择所有作为div元素的⼦元素p
div+p 选择紧贴在div元素之后p元素
div~p 选择div元素后⾯的所有兄弟元素p

（2）。属性セレクター：

[attribute]选择具有attribute属性的元素。
[attribute=value]选择具有attribute属性且属性值等于value的元素。
[attribute~=value]选择具有attribute属性且属性值为⼀⽤空格分隔的字词列表，其中⼀个等于
value的元素。
[attribute|=value]选择具有att属性且属性值为以val开头并⽤连接符"-"分隔的字符串的E元素。
[attibute^=value]匹配具有attribute属性、且值以valule开头的E元素
[attribute$=value]匹配具有attribute属性、且值以value结尾的E元素
[attribute*=value]匹配具有attribute属性、且值中含有value的E元素

（3）構造的疑似クラスセレクター：

::first-letter设置对象内的第⼀个字符的样式。
::first-line设置对象内的第⼀⾏的样式。
:before设置在对象前（依据对象树的逻辑结构）发⽣的内容。
:after设置在对象后（依据对象树的逻辑结构）发⽣的内容。
:lang(language)匹配使⽤特殊语⾔的E元素。
:element1~element2:
:first-of-type匹配同类型中的第⼀个同级兄弟元素
:last-of-type匹配同类型中的最后⼀个同级兄弟元素
:only-of-type匹配同类型中的唯⼀的⼀个同级兄弟元素
:only-child匹配⽗元素仅有的⼀个⼦元素
*:nth-child(n)匹配⽗元素的第n个⼦元素
:nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素
*:first-child 匹配⽗元素的第⼀个⼦元素
* :last-child 匹配⽗元素的最后⼀个⼦元素
:root匹配元素在⽂档的根元素。在HTML中，根元素永远

（4）状態疑似クラスセレクター

:link 设置超链接a在未被访问前的样式。
:visited 设置超链接a在其链接地址已被访问过时的样式
:active 设置元素在被⽤户激活（在⿏标点击与释放之间发⽣的事件）时的样式
*:hover 设置元素在其⿏标悬停时的样式
*:focus 设置元素在其获取焦点时的样式
:target 匹配相关URL指向的E元素
:enabled 匹配⽤户界⾯上处于可⽤状态的元素
:disabled 匹配⽤户界⾯上处于禁⽤状态的元素
:checked 匹配⽤户界⾯上处于选中状态的元素
:not(selector)匹配不含有selector选择符的元素
::selection 设置对象被选择时的样式

（5）その他の疑似クラスセレクター

E:not(s) ： {attribute}
匹配所有不匹配简单选择符s的元素E
p:not(.bg) {background-color:#00FF00;}

CSSの基本構文！

CSSとは何ですか？

CSSの基本構文

CSSの一般的なセレクター

CSS3のセレクター

おすすめ