add: CSS 基础回顾
This commit is contained in:
qianguyihao
@@ -1,11 +1,5 @@
|
||||
|
||||
|
||||
> 本文最初于2015-10-03发表于[博客园](http://www.cnblogs.com/smyhvae/p/4853995.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 本文主要内容
|
||||
|
||||
- CSS概述
|
||||
@@ -14,15 +8,13 @@
|
||||
- CSS几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器`
|
||||
- CSS样式优先级
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
现在的互联网前端分三层：
|
||||
|
||||
- HTML：超文本标记语言。从**语义**的角度描述页面**结构**。
|
||||
- CSS：层叠样式表。从**审美**的角度负责页面**样式**。
|
||||
- JS：JavaScript 。从**交互**的角度描述页面**行为**。
|
||||
|
||||
- JS：JavaScript。从**交互**的角度描述页面**行为**。
|
||||
|
||||
## CSS 概述
|
||||
|
||||
@@ -30,7 +22,6 @@ CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面
|
||||
|
||||
css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和css2.1不矛盾，必须先学2.1然后学3。
|
||||
|
||||
|
||||
接下来我们要讲一下为什么要使用CSS。
|
||||
|
||||
**HTML的缺陷：**
|
||||
@@ -49,15 +40,12 @@ css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和c
|
||||
|
||||
比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。
|
||||
|
||||
|
||||
### CSS的重点知识点
|
||||
|
||||
盒子模型、浮动、定位
|
||||
|
||||
|
||||
### CSS 整体感知
|
||||
|
||||
|
||||
我们先来看一段简单的css代码：
|
||||
|
||||
```html
|
||||
@@ -98,12 +86,10 @@ css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和c
|
||||
|
||||
|
||||
|
||||
|
||||
我们写css的地方是style标签，就是“样式”的意思，写在head里面。后面的课程中我们将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面。
|
||||
|
||||
如果在sublime中输入`<st`或者`<style`然后按tab键，可以自动生成的格式如下：（建议）
|
||||
|
||||
|
||||
```html
|
||||
<style type="text/css"></style>
|
||||
```
|
||||
@@ -118,13 +104,10 @@ type表示“类型”，text就是“纯文本”，css也是纯文本。
|
||||
|
||||
css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。
|
||||
|
||||
|
||||
|
||||
## CSS语法
|
||||
|
||||
**语法格式：**（其实就是键值对）
|
||||
|
||||
|
||||
```html
|
||||
选择器{
|
||||
属性名: 属性值;
|
||||
@@ -132,7 +115,6 @@ css对换行不敏感，对空格也不敏感。但是一定要有标准的语
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
或者可以写成：
|
||||
|
||||
```css
|
||||
@@ -150,7 +132,6 @@ css对换行不敏感，对空格也不敏感。但是一定要有标准的语
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
**解释：**
|
||||
|
||||
- 选择器代表页面上的某类元素，选择器后一定是大括号。
|
||||
@@ -208,15 +189,12 @@ p{color: red;}
|
||||
|
||||
注意：CSS只有`/* */`这种注释，没有`//`这种注释。而且注释要写在`<style>`标签里面才算生效哦。
|
||||
|
||||
|
||||
接下来，我们要开始真正地讲css的知识咯。
|
||||
|
||||
css怎么学？CSS有两个知识部分：
|
||||
1） 选择器，怎么选；
|
||||
2） 属性，样式是什么
|
||||
|
||||
|
||||
|
||||
## CSS的一些简单常见的属性
|
||||
|
||||
> 我们先来接触CSS的一些简单常见的属性，因为接下来需要用到。后期会专门用一篇文章来写CSS的属性。
|
||||
@@ -231,7 +209,6 @@ color:red;
|
||||
|
||||
color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制(后期详细讲)。
|
||||
|
||||
|
||||
**字号大小：**（fos）
|
||||
|
||||
```html
|
||||
@@ -261,10 +238,8 @@ font是“字体” weight是“重量”的意思，bold粗。
|
||||
```html
|
||||
font-weight: normal;
|
||||
```
|
||||
|
||||
normal就是正常的意思。
|
||||
|
||||
|
||||
**斜体：**（fsi）
|
||||
|
||||
```html
|
||||
@@ -279,7 +254,6 @@ italic就是“斜体”。
|
||||
font-style: normal;
|
||||
```
|
||||
|
||||
|
||||
**下划线：**（tdu）
|
||||
|
||||
```html
|
||||
@@ -294,9 +268,6 @@ decoration就是“装饰”的意思。
|
||||
text-decoration:none;
|
||||
```
|
||||
|
||||
PS：css没啥难的，就是要把属性给记忆准确。
|
||||
|
||||
|
||||
## CSS和HTML结合的方式（样式表）
|
||||
|
||||
CSS和HTML结合的方式，其实就是问你css的代码放在哪里比较合适。CSS代码理论上的位置是任意的，**但通常写在`<style>`标签里**。只要是`<style>`标签里的代码，那就是css代码，浏览器就是这样来进行解析的。
|
||||
@@ -305,12 +276,11 @@ CSS和HTML的结合方式有3种：
|
||||
|
||||
- **行内样式**：在某个特定的标签里采用style**属性**。范围只针对此标签。
|
||||
- **内嵌样式表**：在页面的head里采用`<style>`**标签**。范围针对此页面。
|
||||
- **引入外部样式表css文件**的方式。这种方式又分为两种：
|
||||
- **引入外部样式表css文件**的方式。这种引入方式又分为两种：
|
||||
- 1、采用`<link>`标签。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
|
||||
- 2、采用import，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`
|
||||
|
||||
> 两种引入样式方式的区别：外部样式表中不能写<link>标签,但是可以写import语句。
|
||||
|
||||
> 两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写import语句。
|
||||
|
||||
下面来详细的讲一讲这三种方式。
|
||||
|
||||
@@ -320,8 +290,8 @@ CSS和HTML的结合方式有3种：
|
||||
|
||||
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
|
||||
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<p style="color:white;background-color:red">我不会就这样轻易的狗带</p>
|
||||
```
|
||||
@@ -347,8 +317,6 @@ CSS和HTML的结合方式有3种：
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<p>洗白白</p>
|
||||
<p style="color:blue">你懂得</p>
|
||||
@@ -367,29 +335,33 @@ CSS和HTML的结合方式有3种：
|
||||
> 两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写import语句。
|
||||
|
||||
**具体操作如下：**
|
||||
|
||||
我们先在html页面的同级目录下新建一个`a.css`文件，那说明这里面的代码全是css代码，此时就没有必要再写`<style>`标签这几个字了。
|
||||
`a.css`的代码如下：
|
||||
|
||||
```css
|
||||
p{
|
||||
border: 1px solid red;
|
||||
font-size: 40px;
|
||||
}
|
||||
```
|
||||
|
||||
上方的css代码中，注意像素要带上px这个单位，不然不生效。
|
||||
然后我们在html文件中通过`<link>`标签引入这个css文件就行了。效果如下：
|
||||
|
||||
|
||||
|
||||
这里再讲一个补充的知识：link标签的rel属性
|
||||
**`<link>`标签的rel属性：**
|
||||
其属性值有以下两种：
|
||||
- `stylesheet`：定义的样式表
|
||||
- `alternate stylesheet`：候选的样式表
|
||||
这里再讲一个补充的知识：**`<link>`标签的rel属性：**。其属性值有以下两种：
|
||||
|
||||
- `stylesheet`：定义的样式表
|
||||
- `alternate stylesheet`：候选的样式表
|
||||
|
||||
看字面意思可能比较难理解，我们来举个例子，一下子就明白了。
|
||||
举例：
|
||||
|
||||
现在定义我们来定义3种样式表：
|
||||
现在我们来定义3个样式表：
|
||||
|
||||
|
||||
a.css：定义一个实线的黑色边框
|
||||
|
||||
```css
|
||||
@@ -464,7 +436,6 @@ p{
|
||||
|
||||
|
||||
|
||||
|
||||
再比如说，我想让“生命壹号学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么我可以用`<span>`标签把“前端”这两个字围起来，然后给`<span>`标签加一个标签选择器。
|
||||
|
||||
代码如下：
|
||||
@@ -510,7 +481,6 @@ p{
|
||||
|
||||
|
||||
|
||||
|
||||
id选择器的选择符是“#”。
|
||||
|
||||
任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：
|
||||
@@ -619,12 +589,10 @@ css中用`.`来表示类。举例如下：
|
||||
|
||||
|
||||
|
||||
|
||||
上图所示，css和js都在用同一个id，会出现不好沟通的情况。
|
||||
|
||||
我们记住这句话：**类上样式，id上行为**。意思是说，`class`属性交给css使用，`id`属性交给js使用。
|
||||
|
||||
|
||||
**上面这三种选择器的区别：**
|
||||
|
||||
- 标签选择器针对的是页面上的一类标签。
|
||||
@@ -637,7 +605,6 @@ css中用`.`来表示类。举例如下：
|
||||
|
||||
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
|
||||
|
||||
|
||||
举例：
|
||||
|
||||
```css
|
||||
@@ -652,7 +619,6 @@ css中用`.`来表示类。举例如下：
|
||||
|
||||
|
||||
|
||||
|
||||
## CSS的几种高级选择器
|
||||
|
||||
**高级选择器：**
|
||||
@@ -664,11 +630,8 @@ css中用`.`来表示类。举例如下：
|
||||
|
||||
下面详细讲一下这几种高级（扩展）选择器。
|
||||
|
||||
|
||||
|
||||
### 1、后代选择器: 定义的时候用空格隔开
|
||||
|
||||
|
||||
对于`E F`这种格式，表示**所有属于E元素后代的F元素**，有这个样式。空格就表示后代。
|
||||
|
||||
后代选择器，就是一种平衡：共性、特性的平衡。当要把**某一个部分的所有的什么**，进行样式改变，就要想到后代选择器。
|
||||
@@ -687,12 +650,10 @@ css中用`.`来表示类。举例如下：
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
空格就表示后代。`.div1 p` 表示`.div1`的后代所有的`p`。
|
||||
|
||||
这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。
|
||||
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
@@ -750,18 +711,14 @@ css中用`.`来表示类。举例如下：
|
||||
|
||||
上面css中的`div div p`，也能使文字的颜色变红。通过浏览器的审查元素，我们可以看到 p元素的祖先列表：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
讲到这里，我们再提一个sublme的快捷键。
|
||||
|
||||
|
||||
在sublime中输入`p#haha`，按tab键后，会生成`<p id="haha"></p>`。
|
||||
|
||||
在sublime中输入`p.haha`，按tab键后，会生成`<p class="haha"></p>`。
|
||||
|
||||
|
||||
### 2、交集选择器：定义的时候紧密相连
|
||||
|
||||
定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如`div.haha`，再比如`p.special`。
|
||||
@@ -808,10 +765,8 @@ h3.special{
|
||||
|
||||
|
||||
|
||||
|
||||
注意，交集选择器没有空格。所以，没有空格的`div.red`（交集选择器）和有空格的`div .red`（后代选择器）不是一个意思。
|
||||
|
||||
|
||||
交集选择器可以连续交：（一般不要这么写）
|
||||
|
||||
```css
|
||||
@@ -822,9 +777,6 @@ h3.special.zhongyao{
|
||||
|
||||
上面这种写法，是 IE7 开始兼容的，IE6 不兼容。
|
||||
|
||||
|
||||
|
||||
|
||||
### 3、并集选择器：定义的时候用逗号隔开
|
||||
|
||||
三种基本选择器都可以放进来。
|
||||
@@ -841,17 +793,14 @@ p,h1,#mytitle,.one{
|
||||
|
||||
|
||||
|
||||
|
||||
## 一些 CSS3 选择器
|
||||
|
||||
> 所有的css3选择器，我们放在HTML5和CSS3课上介绍。暂时先接触一部分。
|
||||
|
||||
PS：我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。
|
||||
|
||||
|
||||
> 所有的 CSS3 选择器，我们放在 CSS3 的内容里介绍。本文暂时先接触一部分。
|
||||
|
||||
### 浏览器的兼容性问题
|
||||
|
||||
> 我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。
|
||||
|
||||
IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下：
|
||||
|
||||
- windows xp 操作系统安装的IE6
|
||||
@@ -868,12 +817,8 @@ IE： 微软的浏览器，随着操作系统安装的。所以每个windows都
|
||||
|
||||
测试结果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率：
|
||||
|
||||
- IE9 5.94%
|
||||
@@ -889,7 +834,6 @@ IE： 微软的浏览器，随着操作系统安装的。所以每个windows都
|
||||
|
||||
我们可以用「IETester」软件看看css在各个浏览器中的显示效果。
|
||||
|
||||
|
||||
### 1.子代选择器，用符号`>`表示
|
||||
|
||||
> IE7开始兼容，IE6不兼容。
|
||||
@@ -922,7 +866,6 @@ div的儿子p。和div的后代p的截然不同。
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
### 2.序选择器
|
||||
|
||||
> IE8开始兼容；IE6、7都不兼容
|
||||
@@ -976,7 +919,6 @@ div的儿子p。和div的后代p的截然不同。
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### 3.下一个兄弟选择器
|
||||
|
||||
> IE7开始兼容，IE6不兼容。
|
||||
@@ -1009,16 +951,13 @@ div的儿子p。和div的后代p的截然不同。
|
||||
<h3>我是一个标题</h3>
|
||||
```
|
||||
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
这种选择器作用不大。
|
||||
|
||||
|
||||
|
||||
##我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
@@ -1026,4 +965,3 @@ div的儿子p。和div的后代p的截然不同。
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user