diff --git a/02-CSS/01-CSS样式表和选择器.md b/02-CSS/01-CSS样式表和选择器.md index 6f8c61b..11afd0d 100644 --- a/02-CSS/01-CSS样式表和选择器.md +++ b/02-CSS/01-CSS样式表和选择器.md @@ -714,7 +714,7 @@ css中用`.`来表示类。举例如下: ``` -上方代码的意思是说:定义了`

`标签中的``标签中的``标签的样式。 +上方代码的意思是说:定义了`

`标签中的``标签中的``标签的样式。 同理: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键后,会生成`

`。 在sublime中输入`p#haha`,按tab键后,会生成`

`。 +在sublime中输入`p.haha`,按tab键后,会生成`

`。 ### 2、交集选择器 来看下面这张图就明白了: -20170711_1851.png +![](http://img.smyhvae.com/20170711_1851.png) + ```css h3.special{ @@ -808,7 +811,9 @@ h3.special{ ``` -效果图:.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% 我们可以在中查看 -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变为红色: +设置无序列表`
    `中的第一个`
  • `为红色: ```html ``` -选择最后一个1i变为红色: +设置无序列表`
      `中的最后一个`
    • `为红色: ```css ul li:last-child{ @@ -1199,12 +1203,12 @@ div的儿子p。和div的后代p的截然不同。 效果如下: +![](http://img.smyhvae.com/20170711_1950.png) 这种选择器作用不大。 -> 注:本文将持续更新。 ##我的公众号 diff --git a/02-CSS/02-CSS属性.md b/02-CSS/02-CSS属性.md index 5130ebb..148e397 100644 --- a/02-CSS/02-CSS属性.md +++ b/02-CSS/02-CSS属性.md @@ -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中不一样。 **CSS中的单位是必须要写的**,因为它没有默认单位。 - **绝对单位:**1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。 diff --git a/README.md b/README.md index 3c6248d..4fc5007 100644 --- a/README.md +++ b/README.md @@ -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)