Web前端基础（2）CSS 基础知识

· 大约 900 个字 · 预计 4 分钟 读完
Web前端 · 基础
Web · HTML · CSS · JavaScript

CSS 基础知识

一个 HTML 文档可以显示不同的样式, CSS 指层叠样式表 (Cascading Style Sheets)

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

css样式语法结构 css样式语法结构

CSS声明总是以分号 ; 结束，声明组以大括号 {} 括起来。

样式分类

插入样式表的方法有三种:

  • 外部样式表 (External style sheet)
1
2
3

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

浏览器会从文件 mystyle.css 中读到样式声明

  • 内部样式表 (Internal style sheet)

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表

1
2
3
4
5
6
7

<head>
    <style>
        hr { color : sienna; }
        p { margin-left : 20px; }
        body { background-image : url("images/back40.gif"); }
    </style>
</head>
  • 内联样式 (Inline style)

内联样式不建议使用

1

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

一些常见属性 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<style type="text/css">
	.testcolor{
		color:red;
		/*这是个注释*/
	}
<style type="text/css">

<span class="testcolor">测试字符颜色</span>

/*注意css和html的注释**/

  • 字符颜色 color:red;

  • 字号大小 font-size:40px;

  • 背景颜色 background-color:blue;

  • 加粗 font-weight:bold;

  • 不加粗 font-weight:normal;

  • 斜体 font-style:italic;

  • 不斜体 font-style:normal;

  • 下划线 text-decoration:underline;

  • 没有下划线 text-decoration:normal;

基础选择器

标签选择器

div{ }

id选择器

#id{ }

类选择器

.classname{ }

同一个标签可能同时属于多个类，用空格隔开。

1

<h3 class="teshu  zhongyao">我是一个h3啊</h3>

还有一个常有思路写出所有公共类供全局使用。

  1. 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
  2. 每一个类要尽可能小，有 公共 的概念，能够让更多的标签使用。
  3. 要尽可能的使用 class，外部框体和特殊地方才用 id 选择器。

后迭代选择器

向后迭代，不只是儿子，孙子，子子孙孙都可以。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<style type="text/css">
    .div1 p{
    	color:red;
    }
</style>

<div>
	<p>测试文本1<p>
</div>
<div class="div1">
	<p>测试文本2<p>
</div>

测试文本1

测试文本2

上面只会对文本2有效果。

交集选择器

一般是以标签选择器开头，class 选择器结尾。

1
2
3

h3.special{
	color:red;
}

并集选择器

用逗号分隔

1
2
3

h3,li{
	color:red;
}

通配符

通配符 * ：效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

1
2
3

* {
	color:red;
}

CSS的继承性和层叠性

继承性

有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。

哪些属性能继承？

color、 text-开头的、line-开头的、font-开头的

所以，如果我们的页面的文字，都是灰色，都是 14px。那么就可以利用继承性：

1
2
3
4

body{
	color:gray;
	font-size:14px;
}

层叠性

层叠性原则：

  1. 先看有没有选中，如果选中了，那么以（id 数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。
  2. 如果没有选中，那么权重是 0。如果大家都是 0，就近原则

如果同一个标签，携带了多个类名，有冲突怎么显示？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<style type="text/css">
    .spec2{
    	color:blue;
    }
    .spec1{
    	color:red;
    }
</style>

<p class="spec1 spec2">我是什么颜色？</p>
<p class="spec2 spec1">我是什么颜色？</p>

我是什么颜色？

我是什么颜色？

可以看到都是红色，所以和在标签中的挂类名的书序无关，只和 css 的顺序有关

!important标记

当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<style type="text/css">
    p{
    	color:red !important;
    }
    #para1{
    	color:blue;
    }
    .spec{
    	color:green;
    }
</style>

使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

盒模型

一个盒子中主要的属性就5个：width、height、padding、border、margin。

1
2
3
4
5
6
7
8
9

<style type="text/css">
	div.t1{
        width:200px;
        height:200px;
        border:1px solid red;
        padding: 50px;
	}
</style>
<div class="t1">测试文本</div>
测试文本

这个盒子 width:200px; height:200px; 但是真实占有的宽高是 302*302。 这是因为还要加上 padding、border。

chrome浏览器盒子模型 chrome浏览器盒子模型

宽度和真实占有宽度，不是一个概念！！

真实占有宽度= 左border + 左padding + width + 右padding + 右border

padding 分方向设置

1

padding : 30px 20px 40px 100px;  /*（上、右、下、左）*/

用小属性层叠大属性 

1
2

padding : 20px;
padding-left : 30px;

chrome浏览器盒子模型 chrome浏览器盒子模型

下面的写法错误

1
2

padding-left: 30px;
padding: 20px;

border的其他属性解释:

  • border-width:10px; → 边框宽度
  • border-style:solid; → 线型
  • border-color:red; → 颜色。
1

border:10px solid red;

标准文档流现象

我们的 web 页面和 photoshop 等设计软件有本质的区别：web 页面的制作，是个 流，必须从上而下，像 织毛衣。

标准文档流的几个特点和现象：

  1. 空白折叠现象

HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

  1. 高矮不齐，底边对齐

高矮不齐底边对齐演示 高矮不齐底边对齐演示

  1. 自动换行，一行写不满，换行写。

块级元素和行内元素

在 HTML 中，我们已经将标签分过类，当时分为了：文本级、容器级。

文本级： p、span、a、b、i、u、em 容器级： div、h系列、li、dt、d

所有的文本级标签，都是行内元素，除了 p，p 是个文本级，但是是个块级元素。 所有的容器级标签都是块级元素。

块级元素和行内元素的相互转换： display:inline;, display:block;

块级元素

  • 霸占一行，不能与其他任何元素并列
  • 能接受宽、高
  • 如果不设置宽度，那么宽度将默认变为父亲的100%。

行内元素

  • 与其他行内元素并排
  • 不能设置宽、高。默认的宽度，就是文字的宽度。

脱离标准流

标准流里面限制非常多，标签的性质恶心。比如，我们现在就要并排、并且就要设置宽高。所以，移民！脱离标准流！

css 中一共有三种手段，使一个元素脱离标准文档流：浮动、绝对定位、固定定位。

浮动

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

实现浮动

浮动分为左浮动和右浮动

1
2
3
4
5
6

img{
    float:left;
}
img{
    float:right;
}

浮动的特点

  1. 浮动的元素脱离标准流。（能够并排了，并且能够设置宽高了。无论它原来是个div还是个span）。
  2. 浮动的元素互相靠帖。
  3. 浮动的元素有“字围”效果。

字围效果示例 字围效果示例

浮动的清除

有时候我们需要清除行内元素浮动的特性以适应某种要求。

浮动效果 浮动效果

例如上面的文本如果我们清除其浮动效果则图片会规则排列成两行:

1
2
3
4

.text_line
{
    clear:both;
}

浮动清除效果 浮动清除效果

清除浮动的方法

例如：现在有两个 div，div 身上没有任何属性。每个 div 中都有 li，这些 li 都是浮动的。

 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

<style text="text/css">
    ul{
        float:left;
        margin:0px;
        padding:0px;
    }
    ul li{
        color:white;
        float:left;
        background-color:#FF923D;
    }
</style>

<div>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>HTML5</li>
        <li>设计模式</li>
    </ul>
</div>

<div>
    <ul>
        <li>学习方法</li>
        <li>英语水平</li>
        <li>面试技巧</li>
    </ul>
</div>
  • HTML
  • CSS
  • JS
  • HTML5
  • 设计模式
  • 学习方法
  • 英语水平
  • 面试技巧
**1. 给浮动的元素的祖先元素添加高度**

给浮动的元素的祖先元素添加高度 给浮动的元素的祖先元素添加高度

可以看到 div 的高度是 0px, 因为 div 内的元素是浮动的，所以 div 不能被撑出高度。

1
2
3
4
5

<style text="text/css">
    div{
    	height:40px;
    }
</style>
  • HTML
  • CSS
  • JS
  • HTML5
  • 设计模式
  • 学习方法
  • 英语水平
  • 面试技巧
网页制作中，高度 height 很少出现。为什么？因为能被内容撑高！工作中用的很少。

2. clear:both;

这种方法有一个非常大的、致命的问题，margin 失效了。

3. 隔墙法 这种方法可以在两个div中间添加一个块元素，和上面图片的例子很相似。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<style text="text/css">
	...
	
    #heightdiv{
		clear:both;
		height:10px;
    }
</style>

<div>
    <ul>
        ...
    </ul>
</div>
/*隔墙*/
<div id="heightdiv" ></div>
<div>
    <ul>
       ...
    </ul>
</div>
  • HTML
  • CSS
  • JS
  • HTML5
  • 设计模式
  • 学习方法
  • 英语水平
  • 面试技巧

4. 内墙法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<style text="text/css">
	...
	
	.heightdiv{
		height:40px;
	}
</style>

<div>
    <ul>
        ...
    </ul>
    /*内墙*/
	<div class="heightdiv" ></div>
</div>
<div>
    <ul>
       ...
    </ul>
    /*内墙*/
	<div class="heightdiv" ></div>
</div>
  • HTML
  • CSS
  • JS
  • HTML5
  • 设计模式
  • 学习方法
  • 英语水平
  • 面试技巧

5. overflow : hidden;

overflow 就是 “溢出” 的意思， hidden 就是 “隐藏” 的意思。表示 “溢出隐藏”。所有溢出边框的内容，都要隐藏掉。

块标签元素溢出现象 块标签元素溢出现象

本意就是清除溢出到盒子外面的文字。但是，前端开发工程师又发现了，它能做偏方。

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。

例如上面给两个 div 加上 overflow:hidde;

1
2
3
4
5

<style text="text/css">
    div{
    	overflow:hidden;
    }
</style>
  • HTML
  • CSS
  • JS
  • HTML5
  • 设计模式
  • 学习方法
  • 英语水平
  • 面试技巧