资讯专栏INFORMATION COLUMN

前端技术之_CSS详解第二天

番茄西红柿 / 2817人阅读

摘要:前端技术之详解第二天华文中宋基础选择器负责结构,负责样式,负责行为。微软雅黑浏览器的市场占有率浏览器打分儿子选择器测试工具的儿子。表示选择下一个兄弟微软雅黑选择上的是元素后面紧挨着的第一个兄弟。

前端技术之_CSS详解第二天

1、css基础选择器

html负责结构,css负责样式,js负责行为。

css写在head标签里面,容器style标签。

先写选择器,然后写大括号,大括号里面是样式。

    

常见属性:

    h1{
            color:blue;
            font-size: 60px;
            font-weight: normal;
            text-decoration: underline;
            font-style: italic;
        }    

1.1 标签选择器

就是用标签名来当做选择器。

1) 所有标签都能够当做选择器,比如body、h1、dl、ul、span等等

2) 不管这个标签藏的多深,都能够被选择上。

3) 选择的是所有的,而不是某一个。所以是共性,而不是特性。

比如网易,希望页面上所有的超级链接都没有下划线:

        a{
            /*去掉下划线:*/
            text-decoration: none; 
        }

1.2 id选择器

#表示选择id

1  #lj1{
2  font-size: 60px;
3  font-weight: bold;
4  color:black;
5  }

1)任何的标签都可以有id,id的命名要以字母开头,可以有数字、下划线。大小写严格区别,也就是说mm和MM是两个不同的id。

2)同一个页面内id不能重复,即使不一样的标签,也不能是相同的id。也就是说,如果有一个p的id叫做haha,这个页面内,其他所有的元素的id都不能叫做haha。

1.3 类选择器




    
    Document
    


    

我是一个h3啊

我是一个h3啊

我是一个h3啊

我是一个段落啊

我是一个段落啊

我是一个段落啊

.就是类的符号。类的英语叫做class。

所谓的类,就是class属性,class属性和id非常相似,任何的标签都可以携带class属性

class属性可以重复,比如,页面上可能有很多标签都有teshu这个类

1  

我是一个h3啊

2

我是一个h3啊

3

我是一个h3啊

4

我是一个段落啊

5

我是一个段落啊

6

我是一个段落啊

css里面用.来表示类:

1  .teshu{
2  color: red;
3  }

同一个标签,可能同时属于多个类,用空格隔开

1 

我是一个h3啊

这样,这个h3就同时属于teshu类,也同时属于zhongyao类

初学者常见的错误,就是写成了两个class:

1 

我是一个h3啊

所以要总结两条:

1) class可以重复,也就是说,同一个页面上可能有多个标签同时属于某一个类;

2) 同一个标签可以同时携带多个类。

类的使用,能够决定一个人的css水平。

1) 不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。

2) 每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。

正确使用公共类:案例




    
    Document
    


    

段落1

段落2

段落3

1.4到底用id还是用class?

答案:尽可能的用class,除非极特殊的情况可以用id。

原因:id是js用的。也就是说,js要通过id属性得到标签,所以我们css层面尽量不用id,要不然js就很别扭。另一层面,我们会认为一个有id的元素,有动态效果。

就是一个标签,可以同时被多种选择器选择,标签选择器、id选择器、类选择器。这些选择器都可以选择上同一个标签,从而影响样式,这就是css的cascading“层叠式”的第一层含义。

2、css高级选择器

2.1 后代选择器




    
    Document
    


    
  • 段落

    段落

    段落

  • 段落

    段落

    段落

  • 段落

    段落

    段落

段落

段落

段落

View Code
1  

空格就表示后代,.div1 p 就是.div1的后代所有的p。 

强调一下,选择的是后代,不一定是儿子。

例如:

1    
2
    3
  • 4

    段落

    5

    段落

    6

    段落

    7
  • 8

后代选择器,就是一种平衡:共性、特性的平衡。当要把某一个部分的所有的什么,进行样式改变,就要想到后代选择器。

后代选择器,描述的是祖先结构。

能够被下面的选择器选择上:

1  .div1 p{

2  color:red;

}

所以,看见这个选择器要知道是后代,而不是儿子。选择的是所有.div1“中的”p,就是后代p。

2.2 交集选择器

 




    
    Document
    


    

我是标题

我是标题

我是标题

我是段落

我是段落

我是段落

aaa
View Code

选择的元素是同时满足两个条件:必须是h3标签,然后必须是special标签。

交集选择器没有空格。

交集选择器,我们一般都是以标签名开头,比如div.haha  比如p.special。

2.3 并集选择器(分组选择器)




    
    Document
    


    

我是一个标题

是一个段落

  • 我是一个列表
View Code
1 h3,li{
2  color:red;
3 }

 用逗号就表示并集。

2.4 通配符*




    
    Document
    


    

段落

标题

  • 列表
  • 列表
  • 列表
View Code

*就表示所有元素。

1 *{
2  color:red;
3 }

效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。

3、一些CSS3选择器

3.1 兼容问题介绍

我们现在给大家介绍一下浏览器:

IE: 微软的浏览器,随着操作系统安装的。所以每个windows都有IE浏览器。

  windows xp 操作系统安装的IE6

  windows vista 操作系统安装的IE7

  windows 7 操作系统安装的IE8

  windows 8 操作系统安装的IE9

  windows10 操作系统安装的edge

浏览器兼容问题,要出,就基本上就是出在IE6、7身上,这两个浏览器是非常低级的浏览器。

 

 

浏览器的市场占有率: http://tongji.baidu.com/data/

HTML5浏览器打分:

http://html5test.com/results/desktop.html

3.2 儿子选择器>

http://www.ietester.cn/   测试工具

1 div>p{
2  color:red;
3 }

div的儿子p。和div的后代p的截然不同。

3.3 序选择器

IE8开始兼容;IE6、7都不兼容

选择第1个li:

1  

选择最后一个1i:

1  ul li:last-child{
2  color:blue;
3  }

由于浏览器的更新需要过程,所以现在如果公司还要求兼容IE6、7,那么就要自己写类名:

1    
    2
  • 项目
  • 3
  • 项目
  • 4
  • 项目
  • 5
  • 项目
  • 6
  • 项目
  • 7
  • 项目
  • 8
  • 项目
  • 9
  • 项目
  • 10
  • 项目
  • 11
  • 项目

用类选择器来选择第一个或者最后一个:

1        ul li.first{
2            color:red;
3        }
4
5        ul li.last{
6            color:blue;
        }

3.4 下一个兄弟选择器

IE7开始兼容,IE6不兼容。

+表示选择下一个兄弟

1    

选择上的是h3元素后面紧挨着的第一个兄弟。

1    

我是一个标题

2

我是一个段落

3

我是一个段落

4

我是一个段落

5

我是一个标题

6

我是一个段落

7

我是一个段落

8

我是一个段落

9

我是一个标题

10

我是一个段落

11

我是一个段落

12

我是一个段落

我是一个标题

4、CSS的继承性和层叠性

4.1 继承性

有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。

哪些属性能继承?

color、 text-开头的、line-开头的、font-开头的。

这些关于文字样式的,都能够继承; 所有关于盒子的、定位的、布局的属性都不能继承。

所以,如果我们的页面的文字,都是灰色,都是14px。那么就可以利用继承性:

1 body{
2     color:gray;
3     font-size:14px;
4 }

继承性是从自己开始,直到最小的元素。

5.2 层叠性

很多公司如果要笔试,那么一定会考层叠性。

层叠性:就是css处理冲突的能力。 所有的权重计算,没有任何兼容问题!

CSS像艺术家一样优雅,像工程师一样严谨。

当选择器,选择上了某个元素的时候,那么要这么统计权重:

id的数量,类的数量,标签的数量

 

如果权重一样,那么以后出现的为准:

 

如果不能直接选中某个元素,通过继承性影响的话,那么权重是0。

如果大家都是0,那么有一个就近原则:谁描述的近,听谁的。

 

权重问题大总结:

1) 先看有没有选中,如果选中了,那么以(id数,类数,标签数)来计权重。谁大听谁的。如果都一样,听后写的为准。

2) 如果没有选中,那么权重是0。如果大家都是0,就近原则。

 案例1:

案例2:

 

案例3:

 

案例4:

总结:

继承性:好的事儿。继承从上到下,哪些能?哪些不能?

层叠性:冲突,多个选择器描述了同一个属性,听谁的?

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2308.html

相关文章

  • 我的阿里路+Java面经考点

    摘要:我的是忙碌的一年,从年初备战实习春招,年三十都在死磕源码,三月份经历了阿里五次面试,四月顺利收到实习。因为我心理很清楚,我的目标是阿里。所以在收到阿里之后的那晚,我重新规划了接下来的学习计划,将我的短期目标更新成拿下阿里转正。 我的2017是忙碌的一年,从年初备战实习春招,年三十都在死磕JDK源码,三月份经历了阿里五次面试,四月顺利收到实习offer。然后五月怀着忐忑的心情开始了蚂蚁金...

    姘搁『 评论0 收藏0
  • 王下邀月熊_Chevalier的前端每周清单系列文章索引

    摘要:感谢王下邀月熊分享的前端每周清单,为方便大家阅读,特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清单系列,并以年月为单位进行分类,具体内容看这里前端每周清单年度总结与盘点。 感谢 王下邀月熊_Chevalier 分享的前端每周清单,为方便大家阅读,特整理一份索引。 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列,并以年/月为单位进行分类,具...

    2501207950 评论0 收藏0
  • 前端技术_CSS详解六天--完结

    前端技术之_CSS详解第六天--完结 一、复习第五天的知识 a标签的伪类4个:   a:link 没有被点击过的链接   a:visited 访问过的链接   a:hover 悬停   a:active 按下鼠标不松手 顺序就是“love hate”准则。 可以简写: 1 a{ 3 } 4 a:hover{ 6 } background系列属性,CSS2.1层面 ...

    番茄西红柿 评论0 收藏0
  • 前端技术_CSS详解一天

    摘要:前端技术之详解第一天一部分略。。。。中国主要城市北京上海广州美国主要城市纽约洛杉矶华盛顿西雅图在浏览器中,默认是不会增加任何的效果改变的,但是语义变了,中的所有元素是一个小区域。前端技术之_CSS详解第一天一html部分略。。。。二、列表列表有3种2.1 无序列表无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的。ul就是英语unordered list,无序列表的意...

    番茄西红柿 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<