update css02
This commit is contained in:
qianguyihao
parent
c0c53ba9ce
commit
41c1ac6302
@ -83,7 +83,7 @@ css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和c
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background-color: pink;
|
background-color: pink;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -91,7 +91,7 @@ css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和c
|
|||||||
<p>
|
<p>
|
||||||
我是内容
|
我是内容
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
@ -186,7 +186,7 @@ p{color: red;}
|
|||||||
```
|
```
|
||||||
效果：
|
效果：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### css代码的注释
|
### css代码的注释
|
||||||
|
|
||||||
@ -310,10 +310,10 @@ CSS和HTML的结合方式有3种：
|
|||||||
- **引入外部样式表css文件**的方式。这种方式又分为两种：
|
- **引入外部样式表css文件**的方式。这种方式又分为两种：
|
||||||
- 1、采用`<link>`标签。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
|
- 1、采用`<link>`标签。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
|
||||||
- 2、采用import，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`
|
- 2、采用import，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`
|
||||||
|
|
||||||
> 两种引入样式方式的区别：外部样式表中不能写<link>标签,但是可以写import语句。
|
> 两种引入样式方式的区别：外部样式表中不能写<link>标签,但是可以写import语句。
|
||||||
|
|
||||||
|
|
||||||
下面来详细的讲一讲这三种方式。
|
下面来详细的讲一讲这三种方式。
|
||||||
|
|
||||||
### 1、CSS和HTML结合方式一：行内样式
|
### 1、CSS和HTML结合方式一：行内样式
|
||||||
@ -365,7 +365,7 @@ CSS和HTML的结合方式有3种：
|
|||||||
- （1）**采用`<link>`标签**。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
|
- （1）**采用`<link>`标签**。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
|
||||||
|
|
||||||
- （2）**采用import**，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`
|
- （2）**采用import**，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`
|
||||||
|
|
||||||
> 两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写import语句。
|
> 两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写import语句。
|
||||||
|
|
||||||
**具体操作如下：**
|
**具体操作如下：**
|
||||||
@ -500,7 +500,7 @@ p{
|
|||||||
（3）选择的所有，而不是一个。
|
（3）选择的所有，而不是一个。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 2、ID选择器：规定用`#`来定义
|
### 2、ID选择器：规定用`#`来定义
|
||||||
|
|
||||||
针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。
|
针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。
|
||||||
@ -543,7 +543,7 @@ id选择器的选择符是“#”。
|
|||||||
|
|
||||||
一个标签可以被多个css选择器选择，共同作用，这就是“**层叠式**”的第一层含义（第一层含义和第二层含义，放到css基础的第三篇文章里讲）。
|
一个标签可以被多个css选择器选择，共同作用，这就是“**层叠式**”的第一层含义（第一层含义和第二层含义，放到css基础的第三篇文章里讲）。
|
||||||
|
|
||||||
|
|
||||||
### 3、类选择器：规定用圆点`.`来定义
|
### 3、类选择器：规定用圆点`.`来定义
|
||||||
|
|
||||||
、针对**你想要的所有**标签使用。优点：灵活。
|
、针对**你想要的所有**标签使用。优点：灵活。
|
||||||
@ -709,7 +709,7 @@ css中用`.`来表示类。举例如下：
|
|||||||
```html
|
```html
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
h3 b i{
|
h3 b i{
|
||||||
color:red ;
|
color:red ;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
```
|
```
|
||||||
@ -846,7 +846,7 @@ p,h1,#mytitle,.one{
|
|||||||
```
|
```
|
||||||
|
|
||||||
效果：
|
效果：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -856,7 +856,7 @@ p,h1,#mytitle,.one{
|
|||||||
- `link`：超链接点击之前
|
- `link`：超链接点击之前
|
||||||
- `visited`：超链接点击之后
|
- `visited`：超链接点击之后
|
||||||
- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
|
- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
|
||||||
- `hover`：鼠标放到某个标签上的时候
|
- `hover`：鼠标放到某个标签上的时候
|
||||||
- `active`：点击某个标签没有松鼠标时
|
- `active`：点击某个标签没有松鼠标时
|
||||||
|
|
||||||
CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：
|
CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：
|
||||||
@ -885,14 +885,14 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
|
|||||||
让超链接点击之前是红色
|
让超链接点击之前是红色
|
||||||
*/
|
*/
|
||||||
a:link{
|
a:link{
|
||||||
color:red;
|
color:red;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
让超链接点击之后是绿色
|
让超链接点击之后是绿色
|
||||||
*/
|
*/
|
||||||
a:visited{
|
a:visited{
|
||||||
color:green;
|
color:green;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -904,7 +904,7 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
|
|||||||
|
|
||||||
上图中，超链接点击之前是红色，点击之后是绿色。
|
上图中，超链接点击之前是红色，点击之后是绿色。
|
||||||
|
|
||||||
|
|
||||||
问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？
|
问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？
|
||||||
答：
|
答：
|
||||||
|
|
||||||
@ -917,7 +917,7 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
|
|||||||
|
|
||||||
用于以下几种状态：
|
用于以下几种状态：
|
||||||
- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
|
- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
|
||||||
- `hover`：鼠标放到某个标签上的时候
|
- `hover`：鼠标放到某个标签上的时候
|
||||||
- `active`：点击某个标签没有松鼠标时
|
- `active`：点击某个标签没有松鼠标时
|
||||||
|
|
||||||
> 注意：上面这三种状态针适用于所有的标签。
|
> 注意：上面这三种状态针适用于所有的标签。
|
||||||
@ -946,14 +946,14 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
|
|||||||
鼠标放在标签上时显示蓝色
|
鼠标放在标签上时显示蓝色
|
||||||
*/
|
*/
|
||||||
label:hover{
|
label:hover{
|
||||||
color:blue;
|
color:blue;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
点击标签鼠标没有松开时显示红色
|
点击标签鼠标没有松开时显示红色
|
||||||
*/
|
*/
|
||||||
label:active{
|
label:active{
|
||||||
color:red;
|
color:red;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -1037,7 +1037,7 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
|
|||||||
|
|
||||||
> 所有的css3选择器，我们放在HTML5和CSS3课上介绍。暂时先接触一部分。
|
> 所有的css3选择器，我们放在HTML5和CSS3课上介绍。暂时先接触一部分。
|
||||||
|
|
||||||
PS：我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。
|
PS：我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -9,7 +9,6 @@
|
|||||||
- 字体属性
|
- 字体属性
|
||||||
- 文本属性
|
- 文本属性
|
||||||
- 背景属性
|
- 背景属性
|
||||||
- 盒子模型
|
|
||||||
- 定位属性：position、float、overflow等
|
- 定位属性：position、float、overflow等
|
||||||
|
|
||||||
## CSS的单位
|
## CSS的单位
|
||||||
@ -297,82 +296,6 @@ ul li{
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 盒子模型（重要）
|
|
||||||
|
|
||||||
之前我们是把标签看做是一个对象。从现在开始，我们要把标签理解成一个盒子。
|
|
||||||
|
|
||||||
标准盒子模型：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
IE盒子模型：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
上图显示：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- 在 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>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
例如，上图所示：假设框的每个边上有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，显示效果如下：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
补充一下，如果我在css样式中这样写：
|
|
||||||
```html
|
|
||||||
padding:20 30 40 50;
|
|
||||||
```
|
|
||||||
上方代码的设置边距的顺序是：上、右、下、左（顺时针方向）。margin的道理是一样的。
|
|
||||||
|
|
||||||
|
|
||||||
## 定位属性(position,float,overflow,z-index)
|
## 定位属性(position,float,overflow,z-index)
|
||||||
|
|||||||
@ -133,7 +133,7 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
另外：**如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。**举例如下：
|
另外：**如果大家都是0，那么有一个就近原则：谁描述的近，听谁的**。举例如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -156,8 +156,8 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
|||||||
|
|
||||||
### CSS样式表的冲突的总结
|
### CSS样式表的冲突的总结
|
||||||
|
|
||||||
- 1、对于相同的选择器，其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
|
- 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
|
||||||
- 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
|
- 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
|
||||||
- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
|
- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
|
||||||
|
|
||||||
> 总结：就近原则。ID选择器优先级最大。
|
> 总结：就近原则。ID选择器优先级最大。
|
||||||
@ -168,8 +168,8 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
|||||||
|
|
||||||
另外还有两个冲突的情况：
|
另外还有两个冲突的情况：
|
||||||
|
|
||||||
- 1、对同一个标签，如果用到了多个相同的内嵌样式表，它的优先级：**定义**的CSS样式表中，谁最近，就用谁。
|
- 1、对同一个标签，如果用到的都是内嵌样式表，且权重一致，那它的优先级：**定义**的CSS样式表中，谁最近，就用谁。
|
||||||
- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
|
- 2、对于同一个标签，如果用到的都是外部样式表，且权重一致，那它的优先级：html文件中，引用样式表的位置越近，就用谁。
|
||||||
|
|
||||||
例如：
|
例如：
|
||||||
|
|
||||||
|
|||||||
@ -34,7 +34,82 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。注意：**宽度和真实占有宽度，不是一个概念！**
|
上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
|
||||||
|
|
||||||
|
注意：**宽度和真实占有宽度，不是一个概念！**来看下面这例子。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
例如，上图所示：假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素。
|
||||||
|
|
||||||
|
|
||||||
|
### 标准盒子模型和IE盒子模型
|
||||||
|
|
||||||
|
> 我们目前所学习的知识中，以标准盒子模型为准。
|
||||||
|
|
||||||
|
标准盒子模型：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
IE盒子模型：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
上图显示：
|
||||||
|
|
||||||
|
|
||||||
|
- 在 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，显示效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 认识width、height
|
### 认识width、height
|
||||||
@ -117,7 +192,7 @@ padding是4个方向的，所以我们能够分别描述4个方向的padding。
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
综合属性的写法：(上、右、下、左)（用空格隔开）
|
综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
|
||||||
|
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -182,7 +257,7 @@ padding: 20px;
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
**题目2**：说出下面盒子真实占有宽高，并画出盒模型图。
|
**题目2**：说出下面盒子真实占有宽高，并画出盒模型图。
|
||||||
|
|
||||||
```css
|
```css
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user