css-基础知识

发表于 | 分类于 | 阅读次数:

目录

  1. 选择器
  2. 在html引入css的方式
  3. css盒子模型

选择器Selectors

基本选择器

  1. 标签名选择器（tag selectors）：
1
2
3
4
p{
    color: blue;	/*声明部分*/
  	text-decoration: underline;
}
  1. 类选择器（最常用）（class selectors）：
1
2
3
4
.className{
  color: red;
  font-size: 18px;
}
  1. ID选择器（ID selectors）：
    • id选择器比较少用，一般样式是可复用的，而同个页面id是唯一的，这样就降低了样式的复用率。但是一般类似header，footer，banner，conntent可设置成ID选择器，因为相同的样式在同一页面里不可能有第二次。
1
2
3
4
#idName{
    color: black;
    font-size: 18px;
}

  1. 伪类选择器：

    • CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，:hover 会在鼠标悬停在选中元素上时应用相应的样式。伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 (:visited)， 内容状态(如 :checked ), 鼠标位置 (如:hover). 
    1
    2
    3
    4
    a:link {color: #FF0000}		/* 未访问的链接 */
    a:visited {color: #00FF00}	/* 已访问的链接 */
    a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
    a:active {color: #0000FF}	/* 选定的链接 */

    ​

  2. 通配符选择器（*）：

    *选择所有元素。

1
2
3
4
*{
  marigin: 0;
  padding: 0;
}

扩展选择器

  • 在标签内写入style=“”的方式，应该是css的一种引入，而不是选择器。
  1. 后代选择器：
    • 后代选择器实际上是使用多个选择器中间加上空格来找到具体要定位的标签。选择器之间的空格是一种结合符。以下的例子可以解释为em在h1中找到，em作为h1的后代。
1
2
3
h1 em{
    color: red;
}
  1. 群组选择器：
    • 实际上是css标签名选择器的一种简化写法。把有相同定义的不同选择器放在一起，节省代码。
1
2
3
div,span{
    color: green;
}

在HTML中引入css

  • 包括行内式，内嵌式，导入式，链接式。
  1. 行内式：在标签内的style属性设定css样式，这种方式本质上没有体现处css的优势，因此不推荐使用。

<h2 style="color: blue">在html引入css--行内式</h2>

  1. 嵌入式：在对页面中各种元素的设置集中写在<head></head>之间，对单个页面来说，这种方式很方便。
1
2
3
4
5
<style>
        h2{
            color: aqua;
        }
    </style>
  1. 导入式：
1
2
3
<style type="text/css">
        @import "style.css";
    </style>
  1. 链接式：

<link href="style.css" rel="stylesheet" type="text/css"/>

导入式和链接式的区别

  • 链接式：会在装载页面主体部分之前装载css文件，这样显示出来的网页从一开始就是带有样式效果的。

  • 导入式：会在整个页面装载完成之后在装入css文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会显示无样式的页面，闪烁一下之后再出现设置样式后的效果。从用户的角度看，这是导入式的一个缺陷。

  • 对于一些比较大的网站，为了便于维护，可能会希望把所有的css样式分类别放到几个CSS文件中，这样如果使用链接式引入，就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类，就需要同时调整HTML文件，这对于维护工作来说，是一个缺陷，如果使用导入式，则可以只引进一个总的CSS文件，在这个文件中再导入其他独立CSS文件；而连接则不具备这个特性。

    因此给大家的建议是：如果仅需要引入一个CSS文件，则使用连接方式，如果需要引入多个CSS文件，则首先用连接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件。如果希望用javascript来动态决定引入哪个css文件，则必须使用连接式才能实现。reference–在html中引入CSS的方法。

样例：

image.png

源码->：demo下载。

盒子模型（box-model）

  • CSS框模型是Web上布局的基础 - 每个元素都表示为一个矩形框，框的内容(content)，填充(padding)，边框(border)和边距(margin)彼此相似，如洋葱层。作为浏览器呈现网页布局，它制定了应用于每个框的内容的样式，周围的洋葱层有多大，以及盒子相对于彼此的位置。
  1. width和height：width和height的可以设定content的宽度和高度。
  2. padding：padding（填充）是指css框的content的外边缘和border的内边缘之间的部分。padding-top，padding-bottom，padding-right，padding-left。
  3. border：boder（边框）位于padding的外边缘和margin的内边缘之间。border的默认大小为0，使其不可见。border可一次设置所有四面体，也可分开设置：
    • border-top，border-right，border-bottom，border-left：设置厚度，款式和边境一侧的颜色。
    • border-width，border-style，border-color：设置仅厚，样式或颜色独立，但边界的所有四个侧面。
    • 您还可以设置单独的边框的单面的三个属性之一，使用border-top-width，border-top-style，border-top-color，等。
  4. margin：margin围绕一个CSS框，并向上推动布局中的其他CSS框。它的行为很像padding; 速记属性margin和个人属性是margin-top，margin-right，margin-bottom，和margin-left。

2种盒子模型

w3c标准盒子模型

image.png

从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

IE盒子模型

image.png

从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

box-sizing

1
2
3
/* 关键字 值 */
box-sizing: content-box;
box-sizing: border-box;

content-box

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box

border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

一些专家建议所有的Web开发者们将所有的元素的box-sizing都设为border-box。

举个例子

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        width: 200px;
        height: 100px;
        text-align: center;
    }
</style>
<body>
<div style="background-color: red;
            padding: 20px;
            border: 20px solid;
            box-sizing: content-box;">
    <p>
        content-box;//默认值
    </p>
</div>
<p>box-sizing: content-box;//默认值<br>
    width = 内容的宽度<br>
    height = 内容的高度
</p>
<hr>
<div style="background-color: blue;
            padding: 20px;
            border: 20px solid;
            box-sizing: border-box;">
    <p>
        border-box;
    </p>
</div>
<p>box-sizing: border-box;<br>
    width = border + padding + 内容的  width，<br>
    height = border + padding + 内容的 height。
</p>
</body>
</html>

两个200x100的块，显示如下：

box-sizing

在看下各自的盒模型：

使用content-box：

box-sizing

可以看出content部分还是200x100。

使用border-box：

box-sizing

可以看出 border + padding + 内容的 width = 200 = width。

content-box的缺点

举个例子

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
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        width: 200px;
        height: 100px;
        text-align: center;
    }
</style>
<body>
<div style="background-color: red;">
    parent
    <p style="width: 100%;
    border: 10px solid;
    box-sizing: content-box;
    padding: 10px;
    ">
        child
    </p>
</div>
</body>
</html>

会出现如下结果：

box-sizing

所以缺点很明显了吧。。

总结：

box-sizing: content-box 下：

  • width = 内容的宽度
  • height = 内容的高度

box-sizing: border-box下：

  • width = border + padding + 内容的 width
  • height = border + padding + 内容的 height

Reference

reference – CSS盒子模型理解

box-sizing