HTML | 青训营笔记

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

一、CSS是什么

CSS是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

二、CSS的代码构成

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

三、不同引入方式的区别

import 和link的区别

@import先加载HTMl文件，再加载css文件；link是同时加载HTMl和css文件
@import只能引入css文件；link还可以引入其他内容
<link rel="icon" href="">：网页图标
@import有网页兼容性（ie5以上支持）；link没有兼容性
@impport会增加页面的http请求
当javascript操作DOM时，只能操作link引入的文件

四、CSS的选择器

1、元素选择器 如：p,h2,span,a,div等

例如：

html {background-color: black;}

p {font-size: 30px; backgroud-color: gray;}

h2 {background-color: red;}

可以直接选择元素对代码修改

2、类选择器

<div class="aaa">...</div>

<span class="bbb">...</span>

我们可以用“.”直接进行选择

.aaa{ color: red;}
.bbb{ color: red;}

3、ID选择器

ID选择器代表元素的唯一标识，类似类属性，在使用ID选择器前首先要在元素中添加ID属性，例如：

<p id="sss">...</p>

<p id="bbb">...</p>

使用ID选择器的方法为井号”#”后面跟id值。现在我们使用id选择器选择以上2个p元素如：

#sss{} #bbb{}；

这样我们就可以对以上2个段落进行需要的操作了。正因为ID选择器的唯一性，也使其用法变得相对简单。

4、属性选择器

属性选择器使我们可以根据元素的属性及属性值来选择元素

简单的属性选择器可以使我们根据一个元素是否包含某个属性来做出选择。使用方法为: 元素名[属性名] 或 *[属性名]。比如我们希望选择带有alt属性的所有img元素： img[alt] { ...}

选择带有title属性的所有元素：*[title] { ...}。同类选择器类似，我们也可以根据多个属性信息进行选择，例如同时拥有href和title的a元素：

a[href][title] { ...}

组合使用类选择器使我们的选择更加富于灵活性。

5、派生选择器

派生选择器，是使用文档DOM结构来进行css选择的。

(1)后代选择器

选择后代的时候加空格即可

body div { ...}

这里会选择所有的div后代

(2)子元素选择器

子元素选择器和后代选择器不同，它只能选择某元素的直接后代

ul > li { ...}

两个子元素中间用一个大于号>连接。上面的代码会选择到所有ul元素的直接li子元素。对应到DOM树中，所有的li元素都会被选中，原因是图中所有的li元素都是ul的子元素。

(3)相邻兄弟选择器

相邻兄弟选择器，会选取某个元素的相邻兄弟元素

li + li { ...}

直接加加号即可选择

五、总结

将元素选择好，直接设计样式即可达到自定义要求，关键部分还需要后续学习。

CSS ｜ 青训营笔记