Skip to content

Commit

Permalink
update css02
Browse files Browse the repository at this point in the history
  • Loading branch information
@smyhvae
smyhvae committed Jan 11, 2018
1 parent 6dd17f0 commit f636ff5
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 105 deletions.
38 changes: 19 additions & 19 deletions 02-CSS/01-CSS样式表和选择器.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,15 +83,15 @@ css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和c
font-weight: bold;
background-color: pink;
}
</style>
</head>
<body>
<h1>我是大标题</h1>
<p>
我是内容
</p>

</body>
</html>
```
Expand Down Expand Up @@ -186,7 +186,7 @@ p{color: red;}
```
效果：

![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-01.png)
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-01.png)

### css代码的注释

Expand Down Expand Up @@ -310,10 +310,10 @@ CSS和HTML的结合方式有3种：
- **引入外部样式表css文件**的方式。这种方式又分为两种：
- 1、采用`<link>`标签。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
- 2、采用import，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`

> 两种引入样式方式的区别：外部样式表中不能写<link>标签,但是可以写import语句。

下面来详细的讲一讲这三种方式。

### 1、CSS和HTML结合方式一：行内样式
Expand Down Expand Up @@ -365,7 +365,7 @@ CSS和HTML的结合方式有3种：
- （1）**采用`<link>`标签**。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`

- （2）**采用import**，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`

> 两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写import语句。
**具体操作如下：**
Expand Down Expand Up @@ -500,7 +500,7 @@ p{
（3）选择的所有，而不是一个。



### 2、ID选择器：规定用`#`来定义

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。
Expand Down Expand Up @@ -543,7 +543,7 @@ id选择器的选择符是“#”。

一个标签可以被多个css选择器选择，共同作用，这就是“**层叠式**”的第一层含义（第一层含义和第二层含义，放到css基础的第三篇文章里讲）。


### 3、类选择器：规定用圆点`.`来定义

、针对**你想要的所有**标签使用。优点：灵活。
Expand Down Expand Up @@ -709,7 +709,7 @@ css中用`.`来表示类。举例如下：
```html
<style type="text/css">
h3 b i{
color:red ;
color:red ;
}
</style>
```
Expand Down Expand Up @@ -846,7 +846,7 @@ p,h1,#mytitle,.one{
```

效果：

![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-10.png)


Expand All @@ -856,7 +856,7 @@ p,h1,#mytitle,.one{
- `link`：超链接点击之前
- `visited`：超链接点击之后
- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
- `hover`：鼠标放到某个标签上的时候
- `hover`：鼠标放到某个标签上的时候
- `active`：点击某个标签没有松鼠标时

CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：
Expand Down Expand Up @@ -885,14 +885,14 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
让超链接点击之前是红色
*/
a:link{
color:red;
color:red;
}
/*
让超链接点击之后是绿色
*/
a:visited{
color:green;
color:green;
}
</style>
Expand All @@ -904,7 +904,7 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选

上图中，超链接点击之前是红色，点击之后是绿色。


问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？
答：

Expand All @@ -917,7 +917,7 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选

用于以下几种状态：
- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
- `hover`：鼠标放到某个标签上的时候
- `hover`：鼠标放到某个标签上的时候
- `active`：点击某个标签没有松鼠标时

> 注意：上面这三种状态针适用于所有的标签。
Expand Down Expand Up @@ -946,14 +946,14 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
鼠标放在标签上时显示蓝色
*/
label:hover{
color:blue;
color:blue;
}
/*
点击标签鼠标没有松开时显示红色
*/
label:active{
color:red;
color:red;
}
</style>
Expand Down Expand Up @@ -1037,7 +1037,7 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选

> 所有的css3选择器，我们放在HTML5和CSS3课上介绍。暂时先接触一部分。
PS：我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。
PS：我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。



Expand Down
77 changes: 0 additions & 77 deletions 02-CSS/02-CSS属性.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
- 字体属性
- 文本属性
- 背景属性
- 盒子模型
- 定位属性：position、float、overflow等

## CSS的单位
Expand Down Expand Up @@ -297,82 +296,6 @@ ul li{

![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-26.png)

## 盒子模型（重要）

之前我们是把标签看做是一个对象。从现在开始，我们要把标签理解成一个盒子。

标准盒子模型：

![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-27.jpg)

IE盒子模型：

![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-30.jpg)

上图显示：





- 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： <font color="#0000FF">**内容、内边距、边框、外边距**</font>。
- 在 CSS的<font color="#0000FF">**标准盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域**</font>的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。<font color="#0000FF">**IE盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域+border+padding**</font>的宽度和高度。
注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有bording这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
<br>

![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-29.jpg)

例如，上图所示：假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素。



`<body>`标签有必要强调一下。很多人以为`<body>`标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是`<document>`，即浏览器。而`<body>`是`<document>`的儿子。浏览器给`<body>`默认的margin大小是8个像素，此时`<body>`占据了整个页面的一大部分区域，而不是全部区域。来看一段代码。

```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>

<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
}
</style>

</head>

<body>

<div>有生之年</div>
<div>狭路相逢</div>

</body>

</html>

```

上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：

![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-27.png)

补充一下，如果我在css样式中这样写：
```html
padding:20 30 40 50;
```
上方代码的设置边距的顺序是：上、右、下、左（顺时针方向）。margin的道理是一样的。


## 定位属性(position,float,overflow,z-index)
Expand Down
10 changes: 5 additions & 5 deletions 02-CSS/03-CSS样式表的继承性和层叠性.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
![](http://img.smyhvae.com/20170727_0843.png)


另外：**如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。**举例如下：
另外：**如果大家都是0，那么有一个就近原则：谁描述的近，听谁的**。举例如下：

![](http://img.smyhvae.com/20170727_0845.png)

Expand All @@ -156,8 +156,8 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1

### CSS样式表的冲突的总结

- 1、对于相同的选择器，其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
- 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
- 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
- 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器

> 总结：就近原则。ID选择器优先级最大。
Expand All @@ -168,8 +168,8 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1

另外还有两个冲突的情况：

- 1、对同一个标签，如果用到了多个相同的内嵌样式表，它的优先级：**定义**的CSS样式表中，谁最近，就用谁。
- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
- 1、对同一个标签，如果用到的都是内嵌样式表，且权重一致，那它的优先级：**定义**的CSS样式表中，谁最近，就用谁。
- 2、对于同一个标签，如果用到的都是外部样式表，且权重一致，那它的优先级：html文件中，引用样式表的位置越近，就用谁。

例如：

Expand Down
81 changes: 78 additions & 3 deletions 02-CSS/04-盒子模型.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,82 @@



上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。注意：**宽度和真实占有宽度，不是一个概念！**
上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。

注意：**宽度和真实占有宽度，不是一个概念！**来看下面这例子。


![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-29.jpg)

例如，上图所示：假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素。


### 标准盒子模型和IE盒子模型

> 我们目前所学习的知识中，以标准盒子模型为准。
标准盒子模型：

![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-27.jpg)

IE盒子模型：

![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-30.jpg)

上图显示：


- 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： <font color="#0000FF">**内容、内边距、边框、外边距**</font>。
- 在 CSS的<font color="#0000FF">**标准盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域**</font>的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。<font color="#0000FF">**IE盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域+border+padding**</font>的宽度和高度。

注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
<br>


### `<body>`标签也有margin

`<body>`标签有必要强调一下。很多人以为`<body>`标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是`<document>`，即浏览器。而`<body>`是`<document>`的儿子。浏览器给`<body>`默认的margin大小是8个像素，此时`<body>`占据了整个页面的一大部分区域，而不是全部区域。来看一段代码。

```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>

<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
}
</style>

</head>

<body>

<div>有生之年</div>
<div>狭路相逢</div>

</body>

</html>

```

上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：

![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-27.png)



### 认识width、height
Expand Down Expand Up @@ -117,7 +192,7 @@ padding是4个方向的，所以我们能够分别描述4个方向的padding。



综合属性的写法：(上、右、下、左)（用空格隔开）
综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）


```
Expand Down Expand Up @@ -182,7 +257,7 @@ padding: 20px;




**题目2**：说出下面盒子真实占有宽高，并画出盒模型图。

```css
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

- [02-CSS属性](./02-CSS/02-CSS属性.md)

- [03-CSS的继承性和层叠性](./02-CSS/03-CSS样式表的继承性和层叠性.md)
- [03-CSS样式表的继承性和层叠性](./02-CSS/03-CSS样式表的继承性和层叠性.md)

- [04-盒子模型](./02-CSS/04-盒子模型.md)

Expand Down

0 comments on commit f636ff5

Please sign in to comment.