From 4a06751c6d57da2b8ea4bc5d3aa1d73d83bb8e5d Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Fri, 12 Jan 2018 22:04:01 +0800 Subject: [PATCH] mofify css stucture --- ...性.md => 01-CSS属性：字体属性和文本属性.md} | 344 ++- 02-CSS/02-CSS属性：背景属性.md | 311 +++ ...式表和选择器.md => 03-CSS样式表和选择器.md} | 359 +-- 02-CSS/04-CSS选择器：伪类.md | 371 ++++ ...和层叠性.md => 05-CSS样式表的继承性和层叠性.md} | 0 02-CSS/06-CSS属性：行高&超链接&background.md | 475 ---- 02-CSS/{04-盒子模型.md => 06-盒子模型.md} | 0 02-CSS/{05-浮动.md => 07-浮动.md} | 1946 +++++++++-------- ...：博雅互动.md => 08-CSS案例讲解：博雅互动.md} | 8 +- 推荐链接.md | 17 + 10 files changed, 1803 insertions(+), 2028 deletions(-) rename 02-CSS/{02-CSS属性.md => 01-CSS属性：字体属性和文本属性.md} (65%) create mode 100644 02-CSS/02-CSS属性：背景属性.md rename 02-CSS/{01-CSS样式表和选择器.md => 03-CSS样式表和选择器.md} (74%) create mode 100644 02-CSS/04-CSS选择器：伪类.md rename 02-CSS/{03-CSS样式表的继承性和层叠性.md => 05-CSS样式表的继承性和层叠性.md} (100%) delete mode 100644 02-CSS/06-CSS属性：行高&超链接&background.md rename 02-CSS/{04-盒子模型.md => 06-盒子模型.md} (100%) rename 02-CSS/{05-浮动.md => 07-浮动.md} (92%) rename 02-CSS/{06-CSS案例讲解：博雅互动.md => 08-CSS案例讲解：博雅互动.md} (98%) diff --git a/02-CSS/02-CSS属性.md b/02-CSS/01-CSS属性：字体属性和文本属性.md similarity index 65% rename from 02-CSS/02-CSS属性.md rename to 02-CSS/01-CSS属性：字体属性和文本属性.md index 90be098..f45cf59 100644 --- a/02-CSS/02-CSS属性.md +++ b/02-CSS/01-CSS属性：字体属性和文本属性.md @@ -42,19 +42,139 @@ html中的单位只有一种，那就是像素px，所以单位是可以省略 ## 字体属性 -css样式中，常见的字体属性有以下几种： +### 行高 + +CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。 + +如下图所示： + +![](http://img.smyhvae.com/20170808_2216.png) + +上图中，我们设置行高为30px，30px * 5 = 150px，通过查看审查元素，这个p标签的高度果然为150px。而且我们发现，我们并没有给这个p标签设置高度，显然是内容将其撑高的。 + +垂直方向来看，文字在自己的行里是居中的。比如，文字是14px，行高是24px，那么padding就是5px： + +![](http://img.smyhvae.com/20170808_2220.png) + +为了严格保证字在行里面居中，我们的工程师有一个约定： **行高、字号，一般都是偶数**。这样可以保证，它们的差一定偶数，就能够被2整除。 + + +### 如何让单行文本垂直居中 + +小技巧：如果一段文本只有一行，如果此时设置**行高 = 盒子高**，就可以保证单行文本垂直居中。这个很好理解。 + +上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要计算盒子的padding。计算方式如下： + +![](http://img.smyhvae.com/20170808_2240.png) + +### font字体属性 + +css样式中，字体属性有以下几种： ```html p{ font-size:50px; /*字体大小*/ + line-height: 30px; /*行高*/ + font-family:幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/ font-style:italic ; /*斜体*/ font-weight:bold; /*粗体：属性值写成bolder也可以*/ - font-family:幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/ font-variant:small-caps; /*小写变大写*/ } ``` -另外还有一个`font`属性，它是一个简写属性。指的是：可以将上面的多个属性写在一个声明里面，个人不太喜欢这种写法。 +上面这些属性中，字号、行高、字体这三个属性是最常见的。我们继续看。 + +**1、字号、行高、字体三大属性：** + +（1）字号： + +``` + font-size:14px; +``` + +（2）行高： + +``` + line-height:24px; +``` + +（3）字体：（font-family就是“字体”，family是“家庭”的意思） + +``` + font-family:"宋体"; +``` + +上面这三个属性，我们可以使用一行代码来实现：（字号 font-size、行高 line-height、字体 font-family） + +``` + font: 14px/24px “宋体”; +``` + +**2、字体属性的说明：** + +（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置： + +``` + font-family: "华文彩云"; +``` + +上方代码中，如果用户电脑里面没有这个字体，那么就会变成宋体。 + +页面中，中文我们只使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。页面中如果需要其他的字体，就需要切图。 + +（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体。如下：（可以备选多个） + +``` + font-family: "微软雅黑","宋体"; +``` + +上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。 + + +（3）我们须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体： + +``` + font-family: "Times New Roman","微软雅黑","宋体"; +``` + +上方代码的意思是，英文会采用Times New Roman字体，而中文会采用微软雅黑字体（因为美国人设计的Times New Roman字体并不针对中文，所以中文会采用后面的微软雅黑）。比如说，对于`smyhvae哈哈哈`这段文字，`smyhvae`会采用Times New Roman字体，而`哈哈哈`会采用微软雅黑字体。 + +可是，如果我们把中文字体写在前面：(错误写法) + +``` + font-family: "微软雅黑","Times New Roman","宋体"; +``` + +上方代码会导致，中文和英文都会采用微软雅黑字体。 + +（4）所有的中文字体，都有英语别名。 + +微软雅黑的英语别名： + +``` + font-family: "Microsoft YaHei"; +``` + +宋体的英语别名： + +``` + font-family: "SimSun"; +``` + +于是，当我们把字号、行高、字体这三个属性合二为一时，也可以写成： + +``` + font:12px/30px "Times New Roman","Microsoft YaHei","SimSun"; +``` + +（5）行高可以用百分比，表示字号的百分之多少。 + +一般来说，百分比都是大于100%的，因为行高一定要大于字号。 + +比如说， `font:12px/200% “宋体”`等价于`font:12px/24px “宋体”`。`200%`可以理解成word里面的2倍行高。 + +反过来， `font:16px/48px “宋体”;`等价于`font:16px/300% “宋体”`。 + ## 文本属性 @@ -72,209 +192,9 @@ CSS样式中，常见的文本属性有以下几种： ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-18.png) -## 背景属性 - -CSS样式中，常见的背景属性有以下几种：（经常用到，要记住） - -- `background-color:#ff99ff;` 设置元素的背景颜色。 - -- `background-image:url(images/2.gif);` 将图像设置为背景。 - -- `background-repeat: no-repeat;` 设置背景图片是否重复及如何重复，默认平铺满。（重要） - - `no-repeat`不要平铺； - - `repeat-x`横向平铺； - - `repeat-y`纵向平铺。 - -- `background-position:center top;` 设置背景图片在当前容器中的位置。 - -- `background-attachment:scroll;` 设置背景图片是否跟着滚动条一起移动。 -属性值可以是：`scroll`（背景图片不动）、`fixed`（背景图片跟着滚动条一起移动）。注意属性值的含义不要搞反了，它的含义是根据滚动条来定义的。 - -- 另外还有一个简写属性叫做`background`，它的作用是：将上面的多个属性写在一个声明中。 - -上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。 - - -### `background-repeat`属性（重要） - -`background-repeat:no-repeat;`设置背景图片是否重复及如何重复，默认平铺满。属性值可以是： - -- `no-repeat`（不要平铺） -- `repeat-x`（横向平铺） -- `repeat-y`（纵向平铺） - - - -这个属性在开发的时候也是经常用到的。我们通过设置不同的属性值来看一下效果吧： - -（1）不加这个属性时：（即默认时）（背景图片会被平铺满） - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-19.png) - -PS：padding的区域也是有背景图的。 - -（2）属性值为`no-repeat`（不要平铺）时： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-20.png) - -（3）属性值为`repeat-x`（横向平铺）时： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-21.png) - -其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。 - -在搜索引擎上搜“**平铺背景**”，就可以发现，**周期性的图片**可以采用此种方法进行平铺。 - -（4）属性值为`repeat-y`（纵向平铺）时： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-22.png) - - -### `background-position`属性 - -`background-position`属性指的是**背景定位**属性。公式如下： - - -在描述属性值的时候，有两种方式：用像素描述、用单词描述。下面分别介绍。 - -**1、用像素值描述属性值：** - -格式如下： - -``` - background-position:向右偏移量 向下偏移量; -``` - -属性值可以是正数，也可以是负数。比如：`100px 200px`、`-50px -120px`。 - -举例如下： - -![](http://img.smyhvae.com/20170812_1643.png) - - -![](http://img.smyhvae.com/20170812_1645.png) - - - -**2、用单词描述属性值：** - -格式如下： - -``` - background-position: 描述左右的词 描述上下的词; -``` - -- 描述左右的词：left、center、right -- 描述上下的词：top 、center、bottom - -比如说，`right center`表示将图片放到右边的中间；`center center`表示将图片放到正中间。 - -位置属性有很多使用场景的。我们来举两个例子。 - -场景1：（大背景图） - -打开“暗黑3 台湾”的官网，可以看到官网的效果是比较炫的： - -![](http://img.smyhvae.com/20170812_1945.jpg) - - -检查网页后，找到网站背景图片的url：。背景图如下： - -![](http://img.smyhvae.com/20170812_1950.jpg) - -实际上，我们是通过把这张图片作为网站的背景图来达到显示效果的。只需要给body标签加如下属性即可： - -``` - body{ - background-image: url(/Users/smyhvae/Dropbox/img/20170812_1950.jpg); - background-repeat: no-repeat; - background-position: center top; - } -``` - -上方代码中，如果没加`background-position`这个属性，背景图会默认处于浏览器的左上角（显得很丑）；加了此属性之后，图片在水平方向就位于浏览器的中间了。 - -场景2：（通栏banner） - -很多网站的首页都会有banner图（网站最上方的全屏大图叫做「**通栏banner**」），这种图要求横向的宽度特别大。比如说，设计师给你一张1920*465的超大banner图，如果我们把这个banner图作为img标签直接插入网页中，会有问题的：首先，图片不在网页的中间；其次，肯定会出现横向滚动条。如下图所示： - -![](http://img.smyhvae.com/20170813_1102.gif) - - - - -正确的做法是，将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。需要给div设置的属性如下： - -```css - div{ - height: 465px; - background-image: url(http://img.smyhvae.com/20170813_1053.jpg); - background-position: center top; - background-repeat: no-repeat; - } -``` - -上方代码中，我们给div设置height（高度为banner图的高度），不需要设置宽度（让宽度自动霸占整行即可）。效果如下： - -![](http://img.smyhvae.com/20170813_1119.gif) - -上图可以看出，将banner图作为div的背景后，banner图会永远处于网页的正中间（水平方向来看）。 - - -### background-attachment属性 - -- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是： - - `fixed`（背景就会被固定住，不会被滚动条滚走）。 - - `scroll`（与fixed属性相反，默认属性） - -`background-attachment:fixed;`的效果如下： - -![](http://img.smyhvae.com/20170813_1158.gif) - - -### background综合属性 - -background属性和border一样，是一个综合属性，可以将多个属性写在一起。(在盒子模型这篇文章中会专门讲border) - -举例1: - -``` - background:red url(1.jpg) no-repeat 100px 100px fixed; -``` - -等价于： - -``` - background-color:red; - background-image:url(1.jpg); - background-repeat:no-repeat; - background-position:100px 100px; - background-attachment:fixed; -``` - -以后，我们可以用小属性层叠掉大属性。 - -上面的属性中，可以任意省略其中的一部分。 - -比如说，对于下面这样的属性： - -``` - background: blue url(images/wuyifan.jpg) no-repeat 100px 100px; -``` - -效果如下： - -![](http://img.smyhvae.com/20170813_1515.png) - - -PS：以后的CSS3内容中，将学习更多background属性： background-origin、background-clip、background-size（在CSS2.1背景图片是不能调整尺寸，IE9开始兼容）、多背景。 - - - ## 列表属性 - ```html ul li{ list-style-image:url(images/2.gif) ; /*列表项前设置为图片*/ @@ -297,18 +217,9 @@ ul li{ ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-26.png) - ## 定位属性(position,float,overflow,z-index) -> 这一段涉及到**浮动**的知识，我们在[浮动]()这篇文章中会专门讲解。本段只做简单介绍。 - -在讲之前，有个概念叫顺序流，需要强调一下。 - -**顺序流**：所有的标签的初始排列顺序就称为顺序流。 - -有两种情况会脱离本身的顺序流： - - 1、控件的位置设置为绝对定位。 - - 2、设置控件的float属性。 +> 这一段涉及到**浮动**的知识，我们在[浮动](https://github.com/smyhvae/Web/blob/master/02-CSS/05-%E6%B5%AE%E5%8A%A8.md)这篇文章中会专门讲解。本段只做简单介绍。 ### 1、pisition属性： @@ -318,7 +229,6 @@ position定位分为绝对定位和相对定位： - `position:absolute;` **绝对定位**：定义横纵坐标，原点在父容器的左上角。**脱离了本身的顺序流**。横坐标用left表示，纵坐标用top表示。 - 绝对定位的举例： ```html @@ -469,9 +379,6 @@ position定位分为绝对定位和相对定位： ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-31.png) - - - ### 5、z-index属性：属性值大的位于上层，属性值小的位于下层 这句话可能比较难理解。我们来看例子吧。 @@ -484,7 +391,6 @@ position定位分为绝对定位和相对定位： ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-33.png) - ## 鼠标的属性cursor 鼠标的属性`cursor`有以下几个属性值： @@ -558,8 +464,6 @@ p:hover{ 爆料一下，表示博主有两年多的平面设计经验，我做设计的时间其实比写代码的时间要长，嘿嘿··· - - ## 导航栏的制作（本段内容请忽略） 现在，我们利用float浮动属性来把无序列表做成一个简单的导航栏吧，效果如下： diff --git a/02-CSS/02-CSS属性：背景属性.md b/02-CSS/02-CSS属性：背景属性.md new file mode 100644 index 0000000..7928245 --- /dev/null +++ b/02-CSS/02-CSS属性：背景属性.md @@ -0,0 +1,311 @@ + + +## background系列属性 + +### 常见背景属性 + +CSS样式中，常见的背景属性有以下几种：（经常用到，要记住） + +- `background-color:#ff99ff;` 设置元素的背景颜色。 + +- `background-image:url(images/2.gif);` 将图像设置为背景。 + +- `background-repeat: no-repeat;` 设置背景图片是否重复及如何重复，默认平铺满。（重要） + - `no-repeat`不要平铺； + - `repeat-x`横向平铺； + - `repeat-y`纵向平铺。 + +- `background-position:center top;` 设置背景图片在当前容器中的位置。 + +- `background-attachment:scroll;` 设置背景图片是否跟着滚动条一起移动。 +属性值可以是：`scroll`（背景图片不动）、`fixed`（背景图片跟着滚动条一起移动）。注意属性值的含义不要搞反了，它的含义是根据滚动条来定义的。 + +- 另外还有一个简写属性叫做`background`，它的作用是：将上面的多个属性写在一个声明中。 + +上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。 + + +### background-color：背景颜色的表示方法 + +css2.1中，背景颜色的表示方法有三种：单词、rgb表示法、十六进制表示法。 + +比如红色可以有下面的三种表示方法： + +``` + background-color: red; + background-color: rgb(255,0,0); + background-color: #ff0000; +``` + +下面分别介绍。 + +**1、用英语单词来表示：** + +能够用英语单词来表述的颜色，都是简单颜色。比如红色： + +``` +background-color: red; +``` + +**2、rgb表示法：** + +rgb表示三原色“红”red、“绿”green、“蓝”blue。 + +光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。 + +比如红色： + +``` +background-color: rgb(255,0,0); +``` + +黑色： + +``` +background-color: rgb(0,0,0); +``` + +颜色可以叠加，比如黄色就是红色和绿色的叠加： + +``` +background-color: rgb(255,255,0); +``` + +**3、十六进制表示法：** + +比如红色： + +``` +background-color: #ff0000; +``` + +PS:所有用#开头的值，都是16进制的。 + +这里，我们就要学会16进制与10进制之间的转换。下面举几个例子。 + +问：16进制中28等于10进制多少？ +答：2*16+8 = 40。 + +16进制中的af等于10进制多少？ +答：10 * 16 + 15 = 175 + +所以，#ff0000就等于rgb(255,0,0)。 + +`background-color: #123456;`等价于`background-color: rgb(18,52,86);` + + +**十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc**。举例如下： + +比如： + +``` + background-color:#ff0000; +``` + +等价于： + +``` + background-color:#f00; +``` + +比如： + +``` + background-color:#112233; +``` + +等价于： + +``` + background-color:#123; +``` + +但是，比如下面这个是无法简化的： + +``` + background-color:#222333; +``` + +再比如，下面这个也是无法简化的： + +``` + background-color:#123123; +``` + +几种常见的颜色简写可以记住。如下： + +``` + #000 黑 + #fff 白 + #f00 红 + #222 深灰 + #333 灰 + #ccc 浅灰 +``` + + +### `background-repeat`属性（重要） + +`background-repeat:no-repeat;`设置背景图片是否重复及如何重复，默认平铺满。属性值可以是： + +- `no-repeat`（不要平铺） +- `repeat-x`（横向平铺） +- `repeat-y`（纵向平铺） + +这个属性在开发的时候也是经常用到的。我们通过设置不同的属性值来看一下效果吧： + +（1）不加这个属性时：（即默认时）（背景图片会被平铺满） + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-19.png) + +PS：padding的区域也是有背景图的。 + +（2）属性值为`no-repeat`（不要平铺）时： + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-20.png) + +（3）属性值为`repeat-x`（横向平铺）时： + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-21.png) + +其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。 + +在搜索引擎上搜“**平铺背景**”，就可以发现，**周期性的图片**可以采用此种方法进行平铺。 + +（4）属性值为`repeat-y`（纵向平铺）时： + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-22.png) + + +### `background-position`属性 + +`background-position`属性指的是**背景定位**属性。公式如下： + +在描述属性值的时候，有两种方式：用像素描述、用单词描述。下面分别介绍。 + +**1、用像素值描述属性值：** + +格式如下： + +``` + background-position:向右偏移量 向下偏移量; +``` + +属性值可以是正数，也可以是负数。比如：`100px 200px`、`-50px -120px`。 + +举例如下： + +![](http://img.smyhvae.com/20170812_1643.png) + + +![](http://img.smyhvae.com/20170812_1645.png) + +**2、用单词描述属性值：** + +格式如下： + +``` + background-position: 描述左右的词 描述上下的词; +``` + +- 描述左右的词：left、center、right +- 描述上下的词：top 、center、bottom + +比如说，`right center`表示将图片放到右边的中间；`center center`表示将图片放到正中间。 + +位置属性有很多使用场景的。我们来举两个例子。 + +场景1：（大背景图） + +打开“暗黑3 台湾”的官网，可以看到官网的效果是比较炫的： + +![](http://img.smyhvae.com/20170812_1945.jpg) + +检查网页后，找到网站背景图片的url：。背景图如下： + +![](http://img.smyhvae.com/20170812_1950.jpg) + +实际上，我们是通过把这张图片作为网站的背景图来达到显示效果的。只需要给body标签加如下属性即可： + +``` + body{ + background-image: url(/Users/smyhvae/Dropbox/img/20170812_1950.jpg); + background-repeat: no-repeat; + background-position: center top; + } +``` + +上方代码中，如果没加`background-position`这个属性，背景图会默认处于浏览器的左上角（显得很丑）；加了此属性之后，图片在水平方向就位于浏览器的中间了。 + +场景2：（通栏banner） + +很多网站的首页都会有banner图（网站最上方的全屏大图叫做「**通栏banner**」），这种图要求横向的宽度特别大。比如说，设计师给你一张1920*465的超大banner图，如果我们把这个banner图作为img标签直接插入网页中，会有问题的：首先，图片不在网页的中间；其次，肯定会出现横向滚动条。如下图所示： + +![](http://img.smyhvae.com/20170813_1102.gif) + +正确的做法是，将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。需要给div设置的属性如下： + +```css + div{ + height: 465px; + background-image: url(http://img.smyhvae.com/20170813_1053.jpg); + background-position: center top; + background-repeat: no-repeat; + } +``` + +上方代码中，我们给div设置height（高度为banner图的高度），不需要设置宽度（因为宽度会自动霸占整行）。效果如下： + +![](http://img.smyhvae.com/20170813_1119.gif) + +上图可以看出，将banner图作为div的背景后，banner图会永远处于网页的正中间（水平方向来看）。 + +### background-attachment属性 + +- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是： + - `fixed`（背景就会被固定住，不会被滚动条滚走）。 + - `scroll`（与fixed属性相反，默认属性） + +`background-attachment:fixed;`的效果如下： + +![](http://img.smyhvae.com/20170813_1158.gif) + +### background综合属性 + +background属性和border一样，是一个综合属性，可以将多个属性写在一起。(在[盒子模型](http://www.cnblogs.com/smyhvae/p/7256371.html)这篇文章中专门讲到boder) + +举例1: + +``` + background:red url(1.jpg) no-repeat 100px 100px fixed; +``` + +等价于： + +``` + background-color:red; + background-image:url(1.jpg); + background-repeat:no-repeat; + background-position:100px 100px; + background-attachment:fixed; +``` + +以后，我们可以用小属性层叠掉大属性。 + +上面的属性中，可以任意省略其中的一部分。 + +比如说，对于下面这样的属性： + +``` + background: blue url(images/wuyifan.jpg) no-repeat 100px 100px; +``` + +效果如下： + +![](http://img.smyhvae.com/20170813_1515.png) + + +PS：以后的CSS3内容中，我们会接触到更多的background属性： background-origin、background-clip、background-size（在CSS2.1背景图片是不能调整尺寸，IE9开始兼容）、多背景。 + + + diff --git a/02-CSS/01-CSS样式表和选择器.md b/02-CSS/03-CSS样式表和选择器.md similarity index 74% rename from 02-CSS/01-CSS样式表和选择器.md rename to 02-CSS/03-CSS样式表和选择器.md index b2e13ea..38e7e8e 100644 --- a/02-CSS/01-CSS样式表和选择器.md +++ b/02-CSS/03-CSS样式表和选择器.md @@ -11,7 +11,7 @@ - CSS概述 - CSS和HTML结合的三种方式：`行内样式表`、`内嵌样式表`、`外部样式表` - CSS四种基本选择器：`标签选择器`、`类选择器`、`ID选择器`、`通用选择器` - - CSS几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器`、`伪类选择器` + - CSS几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器` - CSS样式优先级 @@ -850,363 +850,6 @@ p,h1,#mytitle,.one{ ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-10.png) -### 4、伪类选择器（待定） - -对于``标签，其对应几种不同的状态： -- `link`：超链接点击之前 -- `visited`：超链接点击之后 -- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点） -- `hover`：鼠标放到某个标签上的时候 -- `active`：点击某个标签没有松鼠标时 - -CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种： - - 静态伪类：**只能用于超链接** - - 动态伪类：针对所有标签都适用 - -下面来分别讲一下这两种伪类选择器。 - -**（1）静态伪类：** - -用于以下两个状态： - - `link`：超链接点击之前 - - `visited`：超链接点击之后 - - > **注意：上面这两个状态只能使用于超链接**。 - -举例： - -```html - -``` - -效果： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-01.gif) - -上图中，超链接点击之前是红色，点击之后是绿色。 - - -问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？ -答： - -**`a{}`和`a:link{}`的区别：** - - - `a{}`定义的样式针对所有的超链接(包括锚点) - - `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点) - -**（2）动态伪类: ** - -用于以下几种状态： - - `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点） - - `hover`：鼠标放到某个标签上的时候 - - `active`：点击某个标签没有松鼠标时 - - > 注意：上面这三种状态针适用于所有的标签。 - -举例： - -```html - -``` - -效果： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-02.gif) - - -利用这个`hover`属性，我们同样对表格做一个样式的设置： -表格举例： - -```html - - - - - - - - - Document - - - - - - - - - - - - - - - - - - - - - - - -
- - - -``` - -效果： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-04.gif) - - - -## 一些 CSS3 选择器 - -> 所有的css3选择器，我们放在HTML5和CSS3课上介绍。暂时先接触一部分。 - -PS：我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。 - - - -### 浏览器的兼容性问题 - -IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下： - -- windows xp 操作系统安装的IE6 -- windows vista 操作系统安装的IE7 -- windows 7 操作系统安装的IE8 -- windows 8 操作系统安装的IE9 -- windows10 操作系统安装的edge - -浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。 - -为了测试浏览器CSS 3的兼容性，我们可以在网上搜"css3 机器猫"关键字，然后在不同的浏览器中打开如下链接： - -- - -测试结果如下： - - - -![](http://img.smyhvae.com/20170711_1939.png) - - - -我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率： - -- IE9 5.94% -- IE8 21.19% -- IE7 4.79% -- IE6 4.11% - -我们可以在中查看 - -![](http://img.smyhvae.com/20170711_1948.png) - -我们要知道典型的IE6兼容问题（面试要问），但是做项目我们兼容到IE8即可。不解决IE8以下的兼容问题，目的在于：培养更高的兴趣和眼光，别天天的跟IE6较劲。 - -我们可以用「IETester」软件看看css在各个浏览器中的显示效果。 - - -### 1.儿子选择器，用符号`>`表示 - -> IE7开始兼容，IE6不兼容。 - -```css -div>p{ - color:red; -} -``` - -div的儿子p。和div的后代p的截然不同。 - -能够选择： - -```html -
-

我是div的儿子

-
-``` - -不能选择： - -```html -
-
    -
  • -

    我是div的重孙子

    -
    • -
-
-``` - - -### 2.序选择器 - -> IE8开始兼容；IE6、7都不兼容 - -设置无序列表`