css小笔记

,

唤醒记忆三部曲——css(Cascading Style Sheets)

css简单介绍：

众所周知，css是帮助人们将文档信息的内容和如何展现它的细节相分离。以便人们更好的处理文档的“内容”和“样式”。

那么浏览器是怎么处理标志语言和css的呢？

浏览器首先将标记语言和css转换成dom（文档对象模型）结构。之后，浏览器将dom的内容展现出来。

这里再讲一下dom结构和标记语言中的元素的区别：
首先，我们可以将标记语言如html中的<p>标签称为“元素”。这里的元素可以允许我们把它作为一个容器去存储信息：

1
2
3
4
5
<p>
	<strong>C</strong>ascading
	<strong>S</strong>tyle
	<strong>S</strong>heets
</p>

这里就用<p>和</p> 构造了一个容器。
而dom结构是一个树形结构，每个元素和非空文本都可以看做是树形结构上的一个结点。dom不再是一个容器，但是，它可以看做为子节点的父节点而存在。可以看：

    P
    ├─STRONG
    │ └─"C"
    ├─"ascading"
    ├─STRONG
    │ └─"S"
    ├─"tyle"
    ├─STRONG
    │ └─"S"
    └─"heets"

针对上面的html标记语言，dom模型可以这样去理解其结构。

层叠和继承:

一个元素的样式，有很多种定义的方式，对于层叠来说，主要有三种样式的来源：

  1. 浏览器对HTML定义的默认样式
  2. 用户定义的样式
  3. 开发者定义的样式：1、定义在外部文件（外链样式）2、在页面的头部定义（内联样式）3、定义在特定的元素身上（行内样式）

他们之间的优先级是：浏览器默认定义<用户定义<开发者定义。我们这里主要是针对于开发者定义。css还提供了使用!important关键字，使关键字处的样式立马成为最高级别的优先级。

选择器:

  • 元素选择器

请看下面这个例子：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<link rel="stylesheet" href="index.css">
	</head>
	<body>
		<div>a</div>
		<p>b</p>
	</body>
</html>

这里是一段html的代码，我在body中分别写了两个标签，然后请看index.css代码：

1
2
3
div {
	color: red;
}

index.css中，这个代码的意思是以<div>标签为选择器，括号中是对其进行的申明（declaration），其中的color是“属性”，red是对应的“值”。<div>标签中的a就会被变为红色。如果想同时选择多个标签作为选择器，那么他么之间只需要加一个英文的逗号即可。
这种以标签类型作为选择条件的方法我们就称为类型选择器。

  • 类选择器（class selectors）

类选择器主要是通过设置元素的class属性，然后通过“类”（class）对其进行选择，请看：

1
2
3
4
5
6
7
8
9
10
11
!DOCTYPE html>
<html>
	<head>
		<title></title>
		<link rel="stylesheet" href="index.css">
	</head>
	<body>
		<div>a</div>
		<p class="afv">bab</p>
	</body>
</html>

这里我们将<p>标签添加了class="afv"这个“类”，然后请看index.css代码：

1
2
3
4
.afv {
	color: red;
}

这里我们通过.afv这样的格式，选定了有类为afv的元素，然后就可以将bab变为了红色。注意，其中的<link rel="stylesheet" href="index.css">这句话的意思是链接一个名为index的外部样式表，这句话不能省略。如果，同时定义两个类，那么类之间需要添加一个空格就好：

1
2
3
...
<p class="afv xcs">
...

此时想要选择同时有afv和xcs的类时，index.css就可以这样：

1
2
3
.afv.xcs {
	color: red;
}

如果在定义类时是这样的：（span是用来组合文档中的行内元素）

1
2
3
<p class="afv">
	<span class="xcs"></span>
</p>

index.css文件就要这样

1
2
3
.afv .xcs {
	font-weight:bolder;
}

在两个属性之间要有一个空格。

  • id选择器

一般id选择器只用于页面中的唯一的元素，例如：

1
<p id="principal">logo</p>

在index.css文件中这样来选择：

1
2
3
#principal {
	color:bolder;
	}
  • 属性选择器

例如此段代码：

1
2
3
<body>
	<button title="提交此文件">提交</button>
</body>

可以通过属性“title”去选择：看index.css文件：

1
2
3
[title] {
	color: blue;
}

此时就可以将含有title元素的button的字体“提交”改为了蓝色。如果我们想特定的选择属性值为xx的，可以直接这样书写：

1
2
3
[title="提交此文件"] {
	color: blue;
}

这样选择控制就更加的精确。

如果，index.css文件是这样：

1
2
3
[title*="提交"] {
	color: blue;
}

这个的意思是选择只要属性中包含“提交”两字的所有元素。上面的直接等号是指完全匹配，注意区分。

如果，index.css文件是这样的：

1
2
3
[title^="提交"] {
	color: blue;
}

这里的意思是选择那些元素中包含“提交”两字的，且必须是以“提交”两字开头的元素。

如果想选择以“提交”两个字结束的元素，那么可以这样：

1
2
3
[title$="提交"] {
	color: blue;
}

如果想选择特定标签的特定属性的元素，那么可以这样：

1
2
3
a[title] {
	color: blue;
}
  • 后代选择器

例如看下面这个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="asd.css">
	<title></title>
</head>
<body>
	<div class="a">a
		<div class="b">b
			<div class="c">c
			</div>
		</div>
	</div>

</body>
</html>

这里嵌套了三个div标签，然后请看asd.css：

1
2
3
.a .b .c {
	border: 2px solid black;
}

这里因为我们是对“类”进行选择，所以要加一个点号，这里.a .b .c（.a前面没有空格）的意思是在a的下面去找b再在b的下面去找c，中间用空格去隔开。也可以.a .c依然可以定位到类c，所以说，只要类a下面有类c就可以。也可以.a *（.a和*之间有空格）选择类a下面的所有类，以此类推。总的来说，注意他们之间的嵌套关系，使用空格，*****号去操作就可以，要灵活使用。

  • 相邻选择器

例如请看：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="asd.css">
	<title></title>
</head>
<body>
	<div class="a">a</div>
	<div class="b">b</div>
	<div class="c">c</div>
</body>
</html>

这里有三个并行的div标签。然后我们可以这样对其选择：

1
2
3
.a + div {
	background: rgba(220,0,0,.4);
}

这里因为我们是选择类a，所有要加一个点号，然后使用+号，意思是选择类a的相邻的（准确的来说是选择类a下面的一个，因为相邻选择器只会至下选择）一个div标签。如果想要选择类a下面的所有的标签，可以这样：

1
2
3
.a ~ div {
	background: rgba(220,0,0,.4);
}

当然上面两个中的div都可以直接写成.b这里之所以写.div就是假如类a的弟弟没有“类”呢。也当然，我也可以直接写.b直接选择到了类b的元素，这里之所以这样写只是为了说明相邻选择器的工作方式，不要误会~~

  • 伪类选择器

同样看例子：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="asd.css">
</head>
<body>
	<a href="http://google.com">google</a>
	<input type="text">
	<button>进入</button>
</body>
</html>

这里分别有一个链接，一个输入框，一个按钮，接着看asd.css：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a:link {
	color: red;
}

a:visited {
	color: blue;
}

button:hover {
	background: #fff;
}

button:active {
	background: #111;
}

input:focus {
	outline: none;
}

这里第1行是选择a标签，且网址链接没有点击的话就显示为红色，第5行的意思是如果网址被点击过，那么就显示为蓝色。第8行是选择button标签，hover的作用是在鼠标悬停在按钮上时的效果，这里为背景色为#fff。hover同样可以在<a>标签中使用。button:active的作用是设置按钮在被触发时候的效果。input:focus的作用是设置选定输入框时的效果。这里只例举了几个常用的伪类选择器。

  • 伪元素选择器

直接看例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="asd.css">
</head>
<body>
	<a class="comm">查看目录</a>
	<a class="comm">查看目录</a>
	<p>i love learning css! </p>
	<div>
		<p>a</p>
		<p>b</p>
		<p>c</p>
	</div>
	
</html>

这里写了两个链接，一个段落，一个div里面有三个p标签，现在使用伪元素选择器对其进行修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
p:first-letter {
	font-size: 25px;
}

.comm:before {
	content: "-";
	color: blue;
}

.comm:after {
	content: "@";
	color: red;
}

div p:first-child {
	color: blue;
}

div p:last-child {
	color: red;
}

div p:nth-child(2) {
	color: green;
}

这里第1-3行的意思是选择p标签且对他的第一个字母改变字体大小，使用first-letter。第5-8行分别是选择了类comm，所以要加一个点号，接着使用before在其前面添加了一个-，第10-13行一个意思，只是是在最后加。（这里使用了content，一般css只对样式进行修改，不会改变其中的内容，而这里是为数不多的css中增加了内容的用法，注意）第15-17行，是先选择div标签后再选择p标签，后对其中的“第一个孩子”进行修改。第19-21行是对“最后一个孩子”，第23-25是通过传值来指定选择“哪一个孩子”。不难类推。