这是我参与「第四届青训营」笔记创作活动的第2天。

笔记小结： 此篇是我对课堂上的“了解CSS”的学习补充笔记，关于伪类、选择器组、以及颜色，字体的部分将在下一篇笔记进行补充。

CSS是什么?

CSS是层叠样式表（ Cascading Style Sheets）的缩写，它用于定义HTML元素的显示形式，是一种格式化网页内容的技术。CSS现在已经被大多数浏览器所支持，成为网页设计者必须掌握的技术之一。

HTML(内容)
JavaScript(行为)
CSS(样式)	Cascading Style Sheets ：设置位置和大小，添加动画效果
HTML(内容)	用来定义页面元素的样式，设置字体和颜色

页面中使用CSS的三种方法：

外链式引入css样式

在head标签中使用<link rel="stylesheet" type="text/css" href="css/main.css">引入。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外链式引入css样式</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div>
        这是一个div标签
    </div>
</body>
</html>

内嵌式使用css样式

使用style标签引入,代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌式使用css样式</title>
    <style type="text/css">
        div{
            font-size: 20px;
            color: #2b542c;
            background-color: #d43f3a;
        }

    </style>
</head>
<body>
    <div>页面标题</div>
</body>
</html>

行内式引入css样式

使用style属性引入，代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内式引入css样式</title>
</head>
<body>
    <a href="https:www.baidu.com" title="跳转到百度" target="_blank" style="font-size: 20px;color: #007aff;background-color: #b3b3b3">国资软件</a>
</body>
</html>

CSS的工作方式

选择器 Selector

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素

按照标签名、类名或id
按照属性
按照 DOM树中的位置

选择器分类及应用示例：

通配符[选择器]（＊）

*{
    marigin: 0;
    padding: 0;
}

//ul元素下的所有元素
ul *{border:1px solid blue;}

元素选择器(Element)

li {background-color: grey;}

类选择器（.className）

01、单类选择器

<li class="important">1</li>
<li>2</li>
.important{font-weight: bold; color: yellow;}

02、多类选择器

<li class="active important">1</li>
<li>2</li>
.active.important{font-weight: bold; color: yellow;}

03、指定元素类选择器

<li class="important">1</li>
<li>2</li>
li.important{font-weight: bold; color: yellow;}

id选择器（#ID）

<li class="important">1</li>
<li id="last">2</li>
#last{background: #000;color: lime;}

属性选择器

01、E[attr]：只使用属性名，但没有确定任何属性值；

<p name="pname">段落1</p>
<p>段落2</p>
p[name]{color:red}

02、E[attr=”value”]：指定属性名，并指定了该属性的属性值；

<p name="pname">段落1</p>
<p>段落2</p>
p[name="pname"]{color:red}

03、E[attr~=”value”]：指定属性名，并且具有属性值，该属性的全部属性值值是一个词列表，以空格隔开，其中词列表中包含了一个value词，而且等号前面的“~”不能不写；

<p name="pname" class="pclass1 pclass2">段落1</p>
<p>段落2</p>
p[class~="pclass1"]{color:red}

04、E[attr^=”value”]：指定了属性名，并且有属性值，属性值是以value开头的；

<p name="pname" class="pclass1">段落1</p>
<p class="pclass2">段落2</p>
p[class^="pclass"]{color:red}

05、E[attr$=”value”]：指定了属性名，并且有属性值，而且属性值是以value结束的；

<p name="pname" class="firstpclass">段落1</p>
<p class="secondpclass">段落2</p>
p[class$="pclass"]{color:red}

06、E[attr=”value”]：指定了属性名，并且有属性值，而且属值中包含了value；*

<p name="pname" class="p-firstclass1">段落1</p>
<p class="p-secondclass2">段落2</p>
p[class*="class"]{color:red}

07、E[attr|=”value”]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

<p name="pname" class="zh-cn">段落1</p>
<p class="zh-en">段落2</p>
p[class|="zh"]{color:red}

结合选择器：指定元素具有的指定id、类或属性等

<li class="important">1</li>
<li>2</li>
li.important{font-weight: bold; color: yellow;}

<p name="pname">段落1</p>
<p>段落2</p>
p[name="pname"]{color:red}

后代选择器(E F)

E为祖先元素，F为后代元素

<div class="divclass">
    <ul>
        <li>列表1</li>
    </ul>
</div>
.divclass li{font-weight: bold; color: yellow;}
ul li{font-weight: bold; color: yellow;}

子元素选择器(E>F)

E为父元素，F为子元素

<div class="divclass">
    <ul>
        <li>列表1</li>
    </ul>
</div>
ul>li{font-weight: bold; color: yellow;}

相邻兄弟元素选择器(E+F)

EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻

<ul>
    <li>列表E</li>
    <li>列表F</li>
</ul>
li+li{font-weight: bold; color: yellow;}

通用兄弟选择器（E~F）

EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且F元素可以是多个、可以不相邻

<ul>
    <li class="classE">列表E</li>
    <p>段落P</p>
    <li>列表F</li>
    <p>段落P</p>
    <li>列表F</li>
</ul>
.classE~li{font-weight: bold; color: yellow;}

群组选择器（selector1,selector2,…,selectorN）

每个选择器之间使用逗号“，”隔开

<div class="div-class">div1</div>
<ul>
    <li>列表1</li>
</ul>
<p id="pid"></p>
<span title="span-title"></span>

.div-class,ul>li,#pid,span[title^="span"]{font-size:14px;}

小结：此篇是对于“了解CSS”的学习补充笔记，关于伪类、选择器组、以及颜色，字体的部分将在下一篇笔记进行补充。

了解CSS学习(1) | 青训营笔记