update css01
This commit is contained in:
parent
3723fd4ecd
commit
7ce3cb81a8
@ -714,7 +714,7 @@ css中用`.`来表示类。举例如下:
|
||||
</style>
|
||||
```
|
||||
|
||||
上方代码的意思是说:定义了`<h4>`标签中的`<b>`标签中的`<i>`标签的样式。
|
||||
上方代码的意思是说:定义了`<h3>`标签中的`<b>`标签中的`<i>`标签的样式。
|
||||
同理:h3和b和i标签不一定是连续紧挨着的,只要保持一个后代的关联即可。
|
||||
|
||||
效果:
|
||||
@ -761,21 +761,24 @@ css中用`.`来表示类。举例如下:
|
||||
|
||||
上面css中的`div div p`,也能使文字的颜色变红。通过浏览器的审查元素,我们可以看到 p元素的祖先列表:
|
||||
|
||||
20170711_1836.png
|
||||
|
||||
![](http://img.smyhvae.com/20170711_1836.png)
|
||||
|
||||
|
||||
讲到这里,我们再提一个sublme的快捷键。
|
||||
|
||||
在sublime中输入`p.haha`,按tab键后,会生成`<p class="haha"></p>`。
|
||||
|
||||
在sublime中输入`p#haha`,按tab键后,会生成`<p id="haha"></p>`。
|
||||
|
||||
在sublime中输入`p.haha`,按tab键后,会生成`<p class="haha"></p>`。
|
||||
|
||||
|
||||
### 2、交集选择器
|
||||
|
||||
来看下面这张图就明白了:
|
||||
|
||||
20170711_1851.png
|
||||
![](http://img.smyhvae.com/20170711_1851.png)
|
||||
|
||||
|
||||
```css
|
||||
h3.special{
|
||||
@ -808,7 +811,9 @@ h3.special{
|
||||
</html>
|
||||
```
|
||||
|
||||
效果图:.png
|
||||
效果如下:
|
||||
|
||||
![](http://img.smyhvae.com/20170711_1852.png)
|
||||
|
||||
|
||||
注意,交集选择器没有空格。所以,没有空格的`div.red`(交集选择器)和有空格的`div .red`(后代选择器)不是一个意思。
|
||||
@ -835,7 +840,7 @@ h3.special.zhongyao{
|
||||
举例:
|
||||
|
||||
```css
|
||||
p,h1,.one,#mytitle{
|
||||
p,h1,#mytitle,.one{
|
||||
color:red;
|
||||
}
|
||||
```
|
||||
@ -1054,29 +1059,28 @@ IE: 微软的浏览器,随着操作系统安装的。所以每个windows都
|
||||
|
||||
测试结果如下:
|
||||
|
||||
20170711_1939.png
|
||||
|
||||
|
||||
![](http://img.smyhvae.com/20170711_1939.png)
|
||||
|
||||
|
||||
|
||||
我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率:
|
||||
|
||||
IE9 5.94%
|
||||
IE8 21.19%
|
||||
IE7 4.79%
|
||||
IE6 4.11%
|
||||
- IE9 5.94%
|
||||
- IE8 21.19%
|
||||
- IE7 4.79%
|
||||
- IE6 4.11%
|
||||
|
||||
我们可以在<http://html5test.com/results/desktop.html>中查看
|
||||
|
||||
20170711_1948.png
|
||||
![](http://img.smyhvae.com/20170711_1948.png)
|
||||
|
||||
我们要知道典型的IE6兼容问题(面试要问),但是做项目我们兼容到IE8即可。不解决IE8以下的兼容问题,目的在于:培养更高的兴趣和眼光,别天天的跟IE6较劲。
|
||||
|
||||
我们可以用「IETester」软件看看css在各个浏览器中的显示效果。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 1.儿子选择器,用符号`>`表示
|
||||
|
||||
> IE7开始兼容,IE6不兼容。
|
||||
@ -1114,7 +1118,7 @@ div的儿子p。和div的后代p的截然不同。
|
||||
|
||||
> IE8开始兼容;IE6、7都不兼容
|
||||
|
||||
选择第1个li变为红色:
|
||||
设置无序列表`<ul>`中的第一个`<li>`为红色:
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
@ -1124,7 +1128,7 @@ div的儿子p。和div的后代p的截然不同。
|
||||
</style>
|
||||
```
|
||||
|
||||
选择最后一个1i变为红色:
|
||||
设置无序列表`<ul>`中的最后一个`<li>`为红色:
|
||||
|
||||
```css
|
||||
ul li:last-child{
|
||||
@ -1199,12 +1203,12 @@ div的儿子p。和div的后代p的截然不同。
|
||||
|
||||
效果如下:
|
||||
|
||||
![](http://img.smyhvae.com/20170711_1950.png)
|
||||
|
||||
|
||||
这种选择器作用不大。
|
||||
|
||||
|
||||
> 注:本文将持续更新。
|
||||
|
||||
##我的公众号
|
||||
|
||||
|
@ -1,4 +1,11 @@
|
||||
|
||||
> 本文最初于2015-10-03发表于[博客园](http://www.cnblogs.com/smyhvae/p/4853995.html),并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我,一起入门和进阶前端。
|
||||
|
||||
|
||||
|
||||
|
||||
## 主要内容
|
||||
|
||||
- CSS的单位
|
||||
- 字体属性
|
||||
- 文本属性
|
||||
@ -6,11 +13,11 @@
|
||||
- 列表属性
|
||||
- 盒子模型
|
||||
- 定位属性:position、float、overflow、z-index等
|
||||
- 导航栏的制作
|
||||
- 鼠标的属性cursor
|
||||
- 滤镜的介绍
|
||||
|
||||
## CSS的单位
|
||||
|
||||
html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中不一样。
|
||||
<font color="#0000FF">**CSS中的单位是必须要写的**,因为它没有默认单位。</font>
|
||||
- **绝对单位:**1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。
|
||||
|
@ -13,9 +13,11 @@
|
||||
|
||||
- [01-CSS样式表和选择器](./02-CSS/01-CSS样式表和选择器.md)
|
||||
|
||||
- [02-CSS的继承性和层叠性](./02-CSS/02-CSS的继承性和层叠性.md)
|
||||
- [02-CSS属性](./02-CSS/02-CSS属性.md)
|
||||
|
||||
- [03-盒子模型](./02-CSS/03-盒子模型.md)
|
||||
- [03-CSS的继承性和层叠性](./02-CSS/03-CSS样式表的继承性和层叠性.md)
|
||||
|
||||
- [04-浮动](./02-CSS/04-浮动.md)
|
||||
- [04-盒子模型](./02-CSS/04-盒子模型.md)
|
||||
|
||||
- [05-浮动](./02-CSS/04-浮动.md)
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user