HTMLは比較的静的であり、サポートできるインタラクティブな効果は比較的限られていますが、CSSは、視覚的なインタラクティブな効果だけでなく、色の設定やマウスインタラクションの効果など、わかりやすい構造調整スキームも提供できます。一瞬
CSSは比較的「静的な」「構成言語」でもあり、プロセスコントロールが多すぎないことに注意してください。選択したラベルオブジェクトに従って構成する必要があります。
プランを選択
cssは、ラベル名に従って（ただし、この変更は同じ名前のグローバルラベルに影響を与えます）、またはカスタムラベルクラスまたはラベルIDに従ってラベルオブジェクトを選択して、異なる選択を行います
h1 {
/* 根据标签名来选择对象 */
}
.className {
/* 根据标签对象自定义的class名来选择对象 */
}
# id {
/* 根据标签对象自定义的id来选择对象，id唯一 */
}
cssファイルをインポートするには？
linkタグを使用してcssファイルを導入できます。これは、cssの設定を直接htmlに適用して、構造と外観を分離できることを示します。herf属性はcssファイルのアドレスです
<link rel="stylesheet" type="text/css" href="style.css">
簡単な例
まず、このような新しいHTMLページを作成します
<!DOCTYPE html>
<html lang="zh-CN">
<meta charset="utf-8">
<head>
<!-- title -->
<title>css练习页面</title>
</head>
<body>
<!-- 大标题 -->
<h1>这是一级标题</h1>
<!-- 次大标题 -->
<h2 class="h2">这是二级标题</h2>
<!-- 第一个division区域 -->
<div class="div1" id="div1">
这是div1
</div>
<!-- 第二个division区域 -->
<div class="div2" id="div2">
这是div2
</div>
<!-- unordered list 1 列表栏目 -->
<ul class="ul1">
<li>这是li1</li>
<li>这是li2</li>
<li>这是li3</li>
</ul>
<!-- 第三个division区域，链接按钮 -->
<div class="div3">
<a href="https://www.baidu.com" target="view_window">传送门1</a>
<a href="https://www.bilibili.com" target="view_window">传送门2</a>
<a href="https://www.taobao.com" target="view_window">传送门3</a>
</div>
</body>
</html>
CSSファイルを書き込む
CSSファイルを作成してプロパティを構成する
/* 对所有的h1标签，都变成红色 */
h1 {
color: red;
}
/* 对所有的h2标签都变成 0ff色(16进制rgb) */
.h2 {
color: #0ff;
}
/* 对id为div1的标签设置属性 */
#div1 {
display: inline-block; /* 设置为行内块 */
text-align: center; /* 文字显示居中 */
width: 100px;
height: 100px;
line-height: 100px; /* 文字上下居中 */
background-color: pink; /* 背景颜色 */
}
/* 对class为div2的标签设置属性 */
.div2 {
display: inline-block; /* 设置为行内块 */
text-align: center; /* 文字显示居中 */
width: 100px;
height: 100px;
line-height: 100px; /* 文字上下居中 */
background-color: red; /* 背景颜色 */
}
/* 对class为div2的标签设置鼠标放上去时的属性 */
.div2:hover {
background-color: blue; /* 背景颜色 */
transform: scale(1.1); /* 缩放1.1倍 */
}
/* 对class为ul1的标签中的所有子li标签设置属性 */
.ul1 li {
color: gray;
background-color: #0ff;
}
.ul1 li:hover {
color: red;
background-color: #ff0;
font-size: 32px;
}
/* 对class为div3的标签中包含的所有a标签设置属性 */
.div3 a {
display: inline-block;
text-align: center;
line-height: 50px;
width: 80px;
height: 50px;
background-color: #0ff;
}
.div3 a:hover {
background-color: green;
}
htmlファイルの先頭に追加することを忘れないでください
<link rel="stylesheet" type="text/css" href="style.css">
効果
