mofify css stucture
This commit is contained in:
qianguyihao
parent
7d7eadf3ff
commit
4a06751c6d
@ -42,19 +42,139 @@ html中的单位只有一种，那就是像素px，所以单位是可以省略
|
||||
|
||||
## 字体属性
|
||||
|
||||
css样式中，常见的字体属性有以下几种：
|
||||
### 行高
|
||||
|
||||
CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。
|
||||
|
||||
如下图所示：
|
||||
|
||||
|
||||
|
||||
上图中，我们设置行高为30px，30px * 5 = 150px，通过查看审查元素，这个p标签的高度果然为150px。而且我们发现，我们并没有给这个p标签设置高度，显然是内容将其撑高的。
|
||||
|
||||
垂直方向来看，文字在自己的行里是居中的。比如，文字是14px，行高是24px，那么padding就是5px：
|
||||
|
||||
|
||||
|
||||
为了严格保证字在行里面居中，我们的工程师有一个约定： **行高、字号，一般都是偶数**。这样可以保证，它们的差一定偶数，就能够被2整除。
|
||||
|
||||
|
||||
### 如何让单行文本垂直居中
|
||||
|
||||
小技巧：如果一段文本只有一行，如果此时设置**行高 = 盒子高**，就可以保证单行文本垂直居中。这个很好理解。
|
||||
|
||||
上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要计算盒子的padding。计算方式如下：
|
||||
|
||||
|
||||
|
||||
### 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样式中，常见的文本属性有以下几种：
|
||||
|
||||
|
||||
|
||||
## 背景属性
|
||||
|
||||
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）不加这个属性时：（即默认时）（背景图片会被平铺满）
|
||||
|
||||
|
||||
|
||||
PS：padding的区域也是有背景图的。
|
||||
|
||||
（2）属性值为`no-repeat`（不要平铺）时：
|
||||
|
||||
|
||||
|
||||
（3）属性值为`repeat-x`（横向平铺）时：
|
||||
|
||||
|
||||
|
||||
其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。
|
||||
|
||||
在搜索引擎上搜“**平铺背景**”，就可以发现，**周期性的图片**可以采用此种方法进行平铺。
|
||||
|
||||
（4）属性值为`repeat-y`（纵向平铺）时：
|
||||
|
||||
|
||||
|
||||
|
||||
### `background-position`属性
|
||||
|
||||
`background-position`属性指的是**背景定位**属性。公式如下：
|
||||
|
||||
|
||||
在描述属性值的时候，有两种方式：用像素描述、用单词描述。下面分别介绍。
|
||||
|
||||
**1、用像素值描述属性值：**
|
||||
|
||||
格式如下：
|
||||
|
||||
```
|
||||
background-position:向右偏移量 向下偏移量;
|
||||
```
|
||||
|
||||
属性值可以是正数，也可以是负数。比如：`100px 200px`、`-50px -120px`。
|
||||
|
||||
举例如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**2、用单词描述属性值：**
|
||||
|
||||
格式如下：
|
||||
|
||||
```
|
||||
background-position: 描述左右的词 描述上下的词;
|
||||
```
|
||||
|
||||
- 描述左右的词：left、center、right
|
||||
- 描述上下的词：top 、center、bottom
|
||||
|
||||
比如说，`right center`表示将图片放到右边的中间；`center center`表示将图片放到正中间。
|
||||
|
||||
位置属性有很多使用场景的。我们来举两个例子。
|
||||
|
||||
场景1：（大背景图）
|
||||
|
||||
打开“暗黑3 台湾”的官网<https://tw.battle.net/d3/zh/>，可以看到官网的效果是比较炫的：
|
||||
|
||||
|
||||
|
||||
|
||||
检查网页后，找到网站背景图片的url：<https://tw.battle.net/d3/static/images/layout/bg-repeat.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标签直接插入网页中，会有问题的：首先，图片不在网页的中间；其次，肯定会出现横向滚动条。如下图所示：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
正确的做法是，将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图的高度），不需要设置宽度（让宽度自动霸占整行即可）。效果如下：
|
||||
|
||||
|
||||
|
||||
上图可以看出，将banner图作为div的背景后，banner图会永远处于网页的正中间（水平方向来看）。
|
||||
|
||||
|
||||
### background-attachment属性
|
||||
|
||||
- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是：
|
||||
- `fixed`（背景就会被固定住，不会被滚动条滚走）。
|
||||
- `scroll`（与fixed属性相反，默认属性）
|
||||
|
||||
`background-attachment:fixed;`的效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
### 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;
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
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{
|
||||
|
||||
|
||||
|
||||
|
||||
## 定位属性(position,float,overflow,z-index)
|
||||
|
||||
> 这一段涉及到**浮动**的知识，我们在[浮动]()这篇文章中会专门讲解。本段只做简单介绍。
|
||||
|
||||
在讲之前，有个概念叫顺序流，需要强调一下。
|
||||
|
||||
<font color="#0000FF">**顺序流**</font>：所有的标签的初始排列顺序就称为顺序流。
|
||||
|
||||
有两种情况会脱离本身的顺序流：
|
||||
- 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;` <font color="#0000FF">**绝对定位**</font>：定义横纵坐标，原点在父容器的左上角。<font color="#0000FF">**脱离了本身的顺序流**</font>。横坐标用left表示，纵坐标用top表示。
|
||||
|
||||
|
||||
绝对定位的举例：
|
||||
|
||||
```html
|
||||
@ -469,9 +379,6 @@ position定位分为绝对定位和相对定位：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 5、z-index属性：属性值大的位于上层，属性值小的位于下层
|
||||
|
||||
这句话可能比较难理解。我们来看例子吧。
|
||||
@ -484,7 +391,6 @@ position定位分为绝对定位和相对定位：
|
||||
|
||||
|
||||
|
||||
|
||||
## 鼠标的属性cursor
|
||||
|
||||
鼠标的属性`cursor`有以下几个属性值：
|
||||
@ -558,8 +464,6 @@ p:hover{
|
||||
爆料一下，表示博主有两年多的平面设计经验，我做设计的时间其实比写代码的时间要长，嘿嘿···
|
||||
|
||||
|
||||
|
||||
|
||||
## 导航栏的制作（本段内容请忽略）
|
||||
|
||||
现在，我们利用float浮动属性来把无序列表做成一个简单的导航栏吧，效果如下：
|
||||
311
02-CSS/02-CSS属性：背景属性.md
Normal file
311
02-CSS/02-CSS属性：背景属性.md
Normal file
@ -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）不加这个属性时：（即默认时）（背景图片会被平铺满）
|
||||
|
||||
|
||||
|
||||
PS：padding的区域也是有背景图的。
|
||||
|
||||
（2）属性值为`no-repeat`（不要平铺）时：
|
||||
|
||||
|
||||
|
||||
（3）属性值为`repeat-x`（横向平铺）时：
|
||||
|
||||
|
||||
|
||||
其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。
|
||||
|
||||
在搜索引擎上搜“**平铺背景**”，就可以发现，**周期性的图片**可以采用此种方法进行平铺。
|
||||
|
||||
（4）属性值为`repeat-y`（纵向平铺）时：
|
||||
|
||||
|
||||
|
||||
|
||||
### `background-position`属性
|
||||
|
||||
`background-position`属性指的是**背景定位**属性。公式如下：
|
||||
|
||||
在描述属性值的时候，有两种方式：用像素描述、用单词描述。下面分别介绍。
|
||||
|
||||
**1、用像素值描述属性值：**
|
||||
|
||||
格式如下：
|
||||
|
||||
```
|
||||
background-position:向右偏移量 向下偏移量;
|
||||
```
|
||||
|
||||
属性值可以是正数，也可以是负数。比如：`100px 200px`、`-50px -120px`。
|
||||
|
||||
举例如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**2、用单词描述属性值：**
|
||||
|
||||
格式如下：
|
||||
|
||||
```
|
||||
background-position: 描述左右的词 描述上下的词;
|
||||
```
|
||||
|
||||
- 描述左右的词：left、center、right
|
||||
- 描述上下的词：top 、center、bottom
|
||||
|
||||
比如说，`right center`表示将图片放到右边的中间；`center center`表示将图片放到正中间。
|
||||
|
||||
位置属性有很多使用场景的。我们来举两个例子。
|
||||
|
||||
场景1：（大背景图）
|
||||
|
||||
打开“暗黑3 台湾”的官网<https://tw.battle.net/d3/zh/>，可以看到官网的效果是比较炫的：
|
||||
|
||||
|
||||
|
||||
检查网页后，找到网站背景图片的url：<https://tw.battle.net/d3/static/images/layout/bg-repeat.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标签直接插入网页中，会有问题的：首先，图片不在网页的中间；其次，肯定会出现横向滚动条。如下图所示：
|
||||
|
||||
|
||||
|
||||
正确的做法是，将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图的高度），不需要设置宽度（因为宽度会自动霸占整行）。效果如下：
|
||||
|
||||
|
||||
|
||||
上图可以看出，将banner图作为div的背景后，banner图会永远处于网页的正中间（水平方向来看）。
|
||||
|
||||
### background-attachment属性
|
||||
|
||||
- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是：
|
||||
- `fixed`（背景就会被固定住，不会被滚动条滚走）。
|
||||
- `scroll`（与fixed属性相反，默认属性）
|
||||
|
||||
`background-attachment:fixed;`的效果如下：
|
||||
|
||||
|
||||
|
||||
### 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;
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
PS：以后的CSS3内容中，我们会接触到更多的background属性： background-origin、background-clip、background-size（在CSS2.1背景图片是不能调整尺寸，IE9开始兼容）、多背景。
|
||||
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
- CSS概述
|
||||
- CSS和HTML结合的三种方式：`行内样式表`、`内嵌样式表`、`外部样式表`
|
||||
- CSS四种基本选择器：`标签选择器`、`类选择器`、`ID选择器`、`通用选择器`
|
||||
- CSS几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器`、`伪类选择器`
|
||||
- CSS几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器`
|
||||
- CSS样式优先级
|
||||
|
||||
|
||||
@ -850,363 +850,6 @@ p,h1,#mytitle,.one{
|
||||
|
||||
|
||||
|
||||
### 4、伪类选择器（待定）
|
||||
|
||||
对于`<a>`标签，其对应几种不同的状态：
|
||||
- `link`：超链接点击之前
|
||||
- `visited`：超链接点击之后
|
||||
- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
|
||||
- `hover`：鼠标放到某个标签上的时候
|
||||
- `active`：点击某个标签没有松鼠标时
|
||||
|
||||
CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：
|
||||
- 静态伪类：**只能用于超链接**
|
||||
- 动态伪类：针对所有标签都适用
|
||||
|
||||
下面来分别讲一下这两种伪类选择器。
|
||||
|
||||
**（1）静态伪类：**
|
||||
|
||||
用于以下两个状态：
|
||||
- `link`：超链接点击之前
|
||||
- `visited`：超链接点击之后
|
||||
|
||||
> **注意：上面这两个状态只能使用于超链接**。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
/*
|
||||
伪类选择器：静态伪类
|
||||
*/
|
||||
|
||||
/*
|
||||
让超链接点击之前是红色
|
||||
*/
|
||||
a:link{
|
||||
color:red;
|
||||
}
|
||||
|
||||
/*
|
||||
让超链接点击之后是绿色
|
||||
*/
|
||||
a:visited{
|
||||
color:green;
|
||||
}
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
上图中，超链接点击之前是红色，点击之后是绿色。
|
||||
|
||||
|
||||
问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？
|
||||
答：
|
||||
|
||||
**`a{}`和`a:link{}`的区别：**
|
||||
|
||||
- `a{}`定义的样式针对所有的超链接(包括锚点)
|
||||
- `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
|
||||
|
||||
**（2）动态伪类: **
|
||||
|
||||
用于以下几种状态：
|
||||
- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
|
||||
- `hover`：鼠标放到某个标签上的时候
|
||||
- `active`：点击某个标签没有松鼠标时
|
||||
|
||||
> 注意：上面这三种状态针适用于所有的标签。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
/*
|
||||
伪类选择器：动态伪类
|
||||
*/
|
||||
|
||||
/*
|
||||
让文本框获取焦点时：
|
||||
边框：#FF6F3D这种橙色
|
||||
文字：绿色
|
||||
背景色：#6a6a6a这种灰色
|
||||
*/
|
||||
input:focus{
|
||||
border:3px solid #FF6F3D;
|
||||
color:white;
|
||||
background-color:#6a6a6a;
|
||||
}
|
||||
|
||||
/*
|
||||
鼠标放在标签上时显示蓝色
|
||||
*/
|
||||
label:hover{
|
||||
color:blue;
|
||||
}
|
||||
|
||||
/*
|
||||
点击标签鼠标没有松开时显示红色
|
||||
*/
|
||||
label:active{
|
||||
color:red;
|
||||
}
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
利用这个`hover`属性，我们同样对表格做一个样式的设置：
|
||||
表格举例：
|
||||
|
||||
```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">
|
||||
|
||||
/*整个表格的样式*/
|
||||
table{
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 1px solid blue;
|
||||
/*border-collapse属性：对表格的线进行折叠*/
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/*鼠标悬停时，让当前行显示#868686这种灰色*/
|
||||
table tr:hover{
|
||||
background: #868686;
|
||||
}
|
||||
|
||||
/*每个单元格的样式*/
|
||||
table td{
|
||||
border:1px solid red;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 一些 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://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/>
|
||||
|
||||
测试结果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率：
|
||||
|
||||
- IE9 5.94%
|
||||
- IE8 21.19%
|
||||
- IE7 4.79%
|
||||
- IE6 4.11%
|
||||
|
||||
我们可以在<http://html5test.com/results/desktop.html>中查看
|
||||
|
||||
|
||||
|
||||
我们要知道典型的IE6兼容问题（面试要问），但是做项目我们兼容到IE8即可。不解决IE8以下的兼容问题，目的在于：培养更高的兴趣和眼光，别天天的跟IE6较劲。
|
||||
|
||||
我们可以用「IETester」软件看看css在各个浏览器中的显示效果。
|
||||
|
||||
|
||||
### 1.儿子选择器，用符号`>`表示
|
||||
|
||||
> IE7开始兼容，IE6不兼容。
|
||||
|
||||
```css
|
||||
div>p{
|
||||
color:red;
|
||||
}
|
||||
```
|
||||
|
||||
div的儿子p。和div的后代p的截然不同。
|
||||
|
||||
能够选择：
|
||||
|
||||
```html
|
||||
<div>
|
||||
<p>我是div的儿子</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
不能选择：
|
||||
|
||||
```html
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<p>我是div的重孙子</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
### 2.序选择器
|
||||
|
||||
> IE8开始兼容；IE6、7都不兼容
|
||||
|
||||
设置无序列表`<ul>`中的第一个`<li>`为红色：
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
ul li:first-child{
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
设置无序列表`<ul>`中的最后一个`<li>`为红色：
|
||||
|
||||
```css
|
||||
ul li:last-child{
|
||||
color:blue;
|
||||
}
|
||||
```
|
||||
|
||||
序选择器还有更复杂的用法，以后再讲。
|
||||
|
||||
由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li class="first">项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li class="last">项目</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
用类选择器来选择第一个或者最后一个：
|
||||
|
||||
```html
|
||||
ul li.first{
|
||||
color:red;
|
||||
}
|
||||
|
||||
ul li.last{
|
||||
color:blue;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### 3.下一个兄弟选择器
|
||||
|
||||
> IE7开始兼容，IE6不兼容。
|
||||
|
||||
`+`表示选择下一个兄弟
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
h3+p{
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
上方的选择器意思是：选择的是h3元素后面紧挨着的第一个兄弟。
|
||||
|
||||
```html
|
||||
<h3>我是一个标题</h3>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<h3>我是一个标题</h3>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<h3>我是一个标题</h3>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<h3>我是一个标题</h3>
|
||||
```
|
||||
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
这种选择器作用不大。
|
||||
|
||||
|
||||
|
||||
371
02-CSS/04-CSS选择器：伪类.md
Normal file
371
02-CSS/04-CSS选择器：伪类.md
Normal file
@ -0,0 +1,371 @@
|
||||
|
||||
|
||||
|
||||
|
||||
### 4、伪类选择器（待定）
|
||||
|
||||
对于`<a>`标签，其对应几种不同的状态：
|
||||
- `link`：超链接点击之前
|
||||
- `visited`：超链接点击之后
|
||||
- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
|
||||
- `hover`：鼠标放到某个标签上的时候
|
||||
- `active`：点击某个标签没有松鼠标时
|
||||
|
||||
CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：
|
||||
- 静态伪类：**只能用于超链接**
|
||||
- 动态伪类：针对所有标签都适用
|
||||
|
||||
下面来分别讲一下这两种伪类选择器。
|
||||
|
||||
**（1）静态伪类：**
|
||||
|
||||
用于以下两个状态：
|
||||
- `link`：超链接点击之前
|
||||
- `visited`：超链接点击之后
|
||||
|
||||
> **注意：上面这两个状态只能使用于超链接**。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
/*
|
||||
伪类选择器：静态伪类
|
||||
*/
|
||||
|
||||
/*
|
||||
让超链接点击之前是红色
|
||||
*/
|
||||
a:link{
|
||||
color:red;
|
||||
}
|
||||
|
||||
/*
|
||||
让超链接点击之后是绿色
|
||||
*/
|
||||
a:visited{
|
||||
color:green;
|
||||
}
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
上图中，超链接点击之前是红色，点击之后是绿色。
|
||||
|
||||
|
||||
问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？
|
||||
答：
|
||||
|
||||
**`a{}`和`a:link{}`的区别：**
|
||||
|
||||
- `a{}`定义的样式针对所有的超链接(包括锚点)
|
||||
- `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
|
||||
|
||||
**（2）动态伪类: **
|
||||
|
||||
用于以下几种状态：
|
||||
- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
|
||||
- `hover`：鼠标放到某个标签上的时候
|
||||
- `active`：点击某个标签没有松鼠标时
|
||||
|
||||
> 注意：上面这三种状态针适用于所有的标签。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
/*
|
||||
伪类选择器：动态伪类
|
||||
*/
|
||||
|
||||
/*
|
||||
让文本框获取焦点时：
|
||||
边框：#FF6F3D这种橙色
|
||||
文字：绿色
|
||||
背景色：#6a6a6a这种灰色
|
||||
*/
|
||||
input:focus{
|
||||
border:3px solid #FF6F3D;
|
||||
color:white;
|
||||
background-color:#6a6a6a;
|
||||
}
|
||||
|
||||
/*
|
||||
鼠标放在标签上时显示蓝色
|
||||
*/
|
||||
label:hover{
|
||||
color:blue;
|
||||
}
|
||||
|
||||
/*
|
||||
点击标签鼠标没有松开时显示红色
|
||||
*/
|
||||
label:active{
|
||||
color:red;
|
||||
}
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
利用这个`hover`属性，我们同样对表格做一个样式的设置：
|
||||
表格举例：
|
||||
|
||||
```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">
|
||||
|
||||
/*整个表格的样式*/
|
||||
table{
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 1px solid blue;
|
||||
/*border-collapse属性：对表格的线进行折叠*/
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/*鼠标悬停时，让当前行显示#868686这种灰色*/
|
||||
table tr:hover{
|
||||
background: #868686;
|
||||
}
|
||||
|
||||
/*每个单元格的样式*/
|
||||
table td{
|
||||
border:1px solid red;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 一些 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://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/>
|
||||
|
||||
测试结果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率：
|
||||
|
||||
- IE9 5.94%
|
||||
- IE8 21.19%
|
||||
- IE7 4.79%
|
||||
- IE6 4.11%
|
||||
|
||||
我们可以在<http://html5test.com/results/desktop.html>中查看
|
||||
|
||||
|
||||
|
||||
我们要知道典型的IE6兼容问题（面试要问），但是做项目我们兼容到IE8即可。不解决IE8以下的兼容问题，目的在于：培养更高的兴趣和眼光，别天天的跟IE6较劲。
|
||||
|
||||
我们可以用「IETester」软件看看css在各个浏览器中的显示效果。
|
||||
|
||||
|
||||
### 1.儿子选择器，用符号`>`表示
|
||||
|
||||
> IE7开始兼容，IE6不兼容。
|
||||
|
||||
```css
|
||||
div>p{
|
||||
color:red;
|
||||
}
|
||||
```
|
||||
|
||||
div的儿子p。和div的后代p的截然不同。
|
||||
|
||||
能够选择：
|
||||
|
||||
```html
|
||||
<div>
|
||||
<p>我是div的儿子</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
不能选择：
|
||||
|
||||
```html
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<p>我是div的重孙子</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
### 2.序选择器
|
||||
|
||||
> IE8开始兼容；IE6、7都不兼容
|
||||
|
||||
设置无序列表`<ul>`中的第一个`<li>`为红色：
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
ul li:first-child{
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
设置无序列表`<ul>`中的最后一个`<li>`为红色：
|
||||
|
||||
```css
|
||||
ul li:last-child{
|
||||
color:blue;
|
||||
}
|
||||
```
|
||||
|
||||
序选择器还有更复杂的用法，以后再讲。
|
||||
|
||||
由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li class="first">项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li>项目</li>
|
||||
<li class="last">项目</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
用类选择器来选择第一个或者最后一个：
|
||||
|
||||
```html
|
||||
ul li.first{
|
||||
color:red;
|
||||
}
|
||||
|
||||
ul li.last{
|
||||
color:blue;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### 3.下一个兄弟选择器
|
||||
|
||||
> IE7开始兼容，IE6不兼容。
|
||||
|
||||
`+`表示选择下一个兄弟
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
h3+p{
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
上方的选择器意思是：选择的是h3元素后面紧挨着的第一个兄弟。
|
||||
|
||||
```html
|
||||
<h3>我是一个标题</h3>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<h3>我是一个标题</h3>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<h3>我是一个标题</h3>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是一个段落</p>
|
||||
<h3>我是一个标题</h3>
|
||||
```
|
||||
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
这种选择器作用不大。
|
||||
|
||||
|
||||
### css精灵
|
||||
|
||||
@ -1,475 +0,0 @@
|
||||
|
||||
|
||||
## 行高和字号
|
||||
|
||||
### 行高
|
||||
|
||||
CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。
|
||||
|
||||
|
||||
如下图所示：
|
||||
|
||||
20170808_2216.png
|
||||
|
||||
上图中，我们设置行高为30px，30px * 5 = 150px，通过查看审查元素，这个p标签的高度果然为150px。而且我们发现，我们并没有给这个p标签设置高度，显然是内容将其撑高的。
|
||||
|
||||
文字，是在自己的行里面居中的。比如，现在文字字号14px，行高是24px。那么：
|
||||
|
||||
20170808_2220.png
|
||||
|
||||
为了严格保证字在行里面居中，我们的工程师有一个约定： **行高、字号，一般都是偶数**。这样可以保证，它们的差一定偶数，就能够被2整除。
|
||||
|
||||
|
||||
### 单行文本垂直居中
|
||||
|
||||
小技巧：如果一段文本只有一行，如果此时设置**行高 = 盒子高**，就可以保证单行文本垂直居中。这个很好理解。
|
||||
|
||||
上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要设置盒子的padding。如下：
|
||||
|
||||
20170808_2240.png
|
||||
|
||||
|
||||
### 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% “宋体”`。
|
||||
|
||||
|
||||
|
||||
|
||||
## 超级链接的美化
|
||||
|
||||
|
||||
> 超级链接就是a标签。
|
||||
|
||||
### 伪类
|
||||
|
||||
**伪类**：同一个标签，根据用户的某种状态不同，有不同的样式。这就叫做“伪类”。
|
||||
|
||||
类是工程师加的，比如div属于box类，很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户有没有点击、有没有触碰。所以，就叫做“伪类”。
|
||||
伪类用冒号来表示。
|
||||
|
||||
a标签有4种伪类，要求背诵。如下：
|
||||
|
||||
```
|
||||
a:link{
|
||||
color:red;
|
||||
}
|
||||
a:visited{
|
||||
color:orange;
|
||||
}
|
||||
a:hover{
|
||||
color:green;
|
||||
}
|
||||
a:active{
|
||||
color:black;
|
||||
}
|
||||
```
|
||||
|
||||
上方代码解释如下：
|
||||
|
||||
- `:link` 表示“链接”，用户没有点击过这个链接的样式。
|
||||
- `:visited` 表示“访问过的”， 用户访问过了这个链接之后的样式。
|
||||
- `:hover` 表示“悬停”，用户鼠标悬停的时候链接的样式。
|
||||
- `:active` 表示“激活”， 用户用鼠标点击这个链接，但是不松手，此刻的样式。
|
||||
|
||||
上面的代码，看一下动图的效果：
|
||||
|
||||
|
||||
|
||||
记住，这四种状态，在css中，必须按照固定的顺序写：
|
||||
|
||||
> a:**l**ink 、a:visited 、a:hover 、a:active
|
||||
|
||||
如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。
|
||||
|
||||
|
||||
|
||||
### 超链接的美化
|
||||
|
||||
超链接a标签在使用的时候，比较难。因为不仅仅要控制a这个盒子，也要控制它的伪类。
|
||||
|
||||
我们一定要将a标签写在前面，将`:link、:visited、:hover、:active`这些伪类写在后面。
|
||||
|
||||
举个例子。如果效果：
|
||||
|
||||
20170810_2235.gif
|
||||
|
||||
为了实现上面这个效果，完整版代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
<title>Document</title>
|
||||
<style type="text/css">
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav{
|
||||
width: 960px;
|
||||
height: 50px;
|
||||
border: 1px solid red;
|
||||
margin: 100px auto;
|
||||
}
|
||||
.nav ul{
|
||||
/*去掉小圆点*/
|
||||
list-style: none;
|
||||
}
|
||||
.nav ul li{
|
||||
float: left;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
/*让内容水平居中*/
|
||||
text-align: center;
|
||||
/*让行高等于nav的高度，就可以保证内容垂直居中*/
|
||||
line-height: 50px;
|
||||
}
|
||||
.nav ul li a{
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
}
|
||||
/*两个伪类的属性，可以用逗号隔开*/
|
||||
.nav ul li a:link , .nav ul li a:visited{
|
||||
text-decoration: none;
|
||||
background-color: purple;
|
||||
color:white;
|
||||
}
|
||||
.nav ul li a:hover{
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav">
|
||||
<ul>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
上方代码中，我们发现，当我们在定义`a:link`和 `a:visited`这两个伪类的时候，如果它们的属性相同，我们其实可以写在一起，用逗号隔开就好，摘抄如下：
|
||||
|
||||
```css
|
||||
.nav ul li a{
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
}
|
||||
/*两个伪类的属性，可以用逗号隔开*/
|
||||
.nav ul li a:link , .nav ul li a:visited{
|
||||
text-decoration: none;
|
||||
background-color: purple;
|
||||
color:white;
|
||||
}
|
||||
.nav ul li a:hover{
|
||||
background-color: orange;
|
||||
}
|
||||
```
|
||||
|
||||
如上方代码所示，最标准的写法，就是把link、visited、hover这三个伪类都要写。但是前端开发工程师在大量的实践中，发现不写link、visited也挺兼容。写法是：
|
||||
|
||||
> a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性）。写法如下：
|
||||
|
||||
|
||||
```css
|
||||
.nav ul li a{
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
text-decoration: none;
|
||||
background-color: purple;
|
||||
color:white;
|
||||
}
|
||||
.nav ul li a:hover{
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
当然了，在写`a:link`、`a:visited`这两个伪类的时候，要么同时写，要么同时不写。如果只写`a`属性和`a:link`属性，不规范。
|
||||
|
||||
|
||||
## 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-image属性
|
||||
|
||||
|
||||
|
||||
|
||||
### background-repeat属性
|
||||
|
||||
|
||||
|
||||
### background-position属性
|
||||
|
||||
|
||||
|
||||
|
||||
**CSS精灵：**
|
||||
|
||||
|
||||
|
||||
###
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -66,7 +66,7 @@
|
||||
font-size: 14px;
|
||||
font-family: "Microsoft YaHei","SimSun";
|
||||
height: 8888px;
|
||||
}
|
||||
}
|
||||
.header{
|
||||
height: 58px;
|
||||
background-color: #191D3A;
|
||||
@ -104,8 +104,8 @@
|
||||
text-align: center; /*让这个div内部的文本居中*/
|
||||
}
|
||||
.header .nav ul li a.current{
|
||||
color:white;
|
||||
background: #252947;
|
||||
color:white;
|
||||
background: #252947;
|
||||
}
|
||||
.header .nav ul li a:hover{
|
||||
color: white;
|
||||
@ -117,7 +117,7 @@
|
||||
height: 58px;
|
||||
width: 100px;
|
||||
padding-left: 48px;
|
||||
padding-top: 12px;
|
||||
padding-top: 12px;
|
||||
|
||||
}
|
||||
.header .jrwm_box .jrwm{
|
||||
Loading…
Reference in New Issue
Block a user