初次认识CSS样式 – ZRI综合研究所

概要

CSS层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

语法

CSS选择器{
    属性: 值;
    属性: 值;
    属性: 值;
}

属性后面用冒号”:”, 值后面用分号”;”隔开，要素用成对的大括号{}包围。

实例

HTML

把以下HTML文件的内容复制黏贴的windows记事本中，并且以.html的后缀保存后，使用浏览器打开，并可看到网页的内容。

<h1> 1章 JavaScript入门准备</h1>
<p>JavaScript是以下的样子</p>
<ul>
    <li>我爱你</li>
    <li>你却爱着他</li>
    <li>他是真的爱你吗</li>
    <li>你还是回到我身边吧</li>
</ul>

CSS

如果对以上HTML用下面的CSS样式去化妆，那么效果会怎么样呢？让我们一起来拭目以待。直接把以下代码复制黏贴到刚才保存的.html文件的最下方即可。

h1{
    font-size: 20px;
    background-color: red;
}

以上是h1要素的字体大小的20像素，背景色红色的css定义。

<style>
h1{
    background: #fdf5f5;
    font-size: 20px;
    padding: 10px;
    border-left: 10px solid #53b411;
}

ul{
    list-style-image: url(list.png);
}

li{
    margin: 5px 0;
}
</style>

CSS如何记述到HTML文件里

关于CSS的记述，有以下三种方法。

style要素里记述
使用link要素进行外部文件读入
style属性的HTML要素里记述

style要素里记述

HTML的style要素里记述CSS内容。style要素的head要素里记述方法如下。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample title</title>
<style>
h1 {
    font-size: 20px;
    background-color: red;
}
</style>
</head>
<body>
<h1>sample site/h1>
</body>
</html>

如果按照上面的方式来写样式文件，那么只能在一个html文件里使用，只能单独控制一个html页面，无法做到一对多的样式管理。

使用link要素进行外部文件读入

在link要素里参照外部文件的样式管理方式是最常用的。CSS文件和HTML文件可以单独管理，CSS文件被HTML读取即可对网页样式进行描画。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>sample site</h1>
</body>
</html>

style.css

h1 {
    font-size: 20px;
    background-color: red;
}

style属性的HTML要素里记述

最后说明style属性设定的方式来设置css样式。HTML的大部分属性都可以用style属性来指定，对属性值用CSS来记述。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample title</title>
</head>
<body>
<h1 style="font-size: 20px; background-color: red;">sample site</h1>
</body>
</html>

使用这种方式描述样式，没有link文件的方式去单独管理CSS文件和HTML文件的方便，一般都不会使用这样的方式对CSS样式进行管理。但是，style属性的CSS样式管理很容易被JavaScript调用，在JavaScript里动态的切换CSS样式就变得容易实现。

JavaScript控制CSS样式

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<h1 id="elem">用JavaScript控制CSS样式</h1>
<button id="btn">我是按钮，点我</button>
<script>
var button = document.getElementById('btn');
var elem = document.getElementById('elem');
var count=0;
btn.onclick = function() {
    count++;

    if (count % 2 == 1)
    {
        elem.style.backgroundColor = 'red';
    }
    else
    {
        elem.style.backgroundColor = 'yellow';
    }
};
</script>
</body>
</html>

CSS选择器

类型选择器
id选择器
class选择器
子孙选择器

类型选择器

全部的h1要素
h1 {
    background-color: red;
}
全部的div要素
div {
    background-color: blue;
}
全部的p要素
p {
    background-color: green;
}

id选择器

id选择器前面需要添加#作为开头。同样的id名只会存在一个，所以不会重复的可能是，也就不需要指定区别p要素还是div要素。

id名是sample-box的要素
#sample-box {
    background-color: red;
}
id名是sample-box的div要素
div#sample-box{
    background-color: red;
}

class选择器

class选择器的最前面需要指定”.”,这样就会去检索指定class的要素。

class名是textbox的所有要素
.textbox{
    background-color: red;
}
class名是textbox的div要素
div.textbox{
    background-color: red;
}

同一个class名在HTML里允许存在的，并且还有可能指定的要素还不一样，所以class指定特定要素是有必要的。

<div class="textbox">text</div>
<p class="textbox">text</p>

子孙选择器

<div class="textbox">
    <p>text</p>          I
    <div>                II
        <p>text</p>      III
        <div>            IV
            <p>text</p>   V
        </div>
    </div>
</div>

I和II是.textbox的子要素，III和IV是子要素的子要素，所以也是.textbox的孙要素。I~V的素有的要素都是.textbox的子孙要素。

I,III,V的p要素。
.box p{
    background-color: red;
}

使用子孙选择器的情况，可以将复数个要素连接起来。

#sample-box .textbox p.text{
    background-color: red;
}

<div id="sample-box">
    <div class="textbox">
        <p class="text">text</p>
    </div>
</div>

参考网站

https://www.asobou.co.jp/blog/web/css-selectors#CSSHTMLCSS
https://www.runoob.com/cssref/css-selectors.html
https://www.w3school.com.cn/cssref/css_selectors.asp

概要

语法

实例