CSS从入门到精通——基础选择器

第1关:CSS 元素选择器
任务描述
在完成本实训之后,你将掌握元素选择器、类选择器和id选择器这三种基础选择器。你将会学会独立制作如下新闻主页页面:
CSS从入门到精通——基础选择器_第1张图片
本关任务:熟悉元素选择器,使用属性选择器修改文档样式。
任务实现效果如图:

CSS从入门到精通——基础选择器_第2张图片
相关知识
元素选择器
最常见和易理解的CSS选择器是元素选择器,又称为类型选择器。也就是将HTML文档中的元素,直接作为选择器使用。
例如对于HTML页面:


  

标题1

标题2

普通段落中删除的引用。

使用元素选择器添加元素样式:

显示效果如下:
CSS从入门到精通——基础选择器_第3张图片
当我们指定一个元素,并设置样式属性之后,文档中该元素便会应用样式。例如,我们设置p元素的颜色为灰色(grey),在没有其他样式覆盖的情况下,文档中所有的p元素都将为灰色。
如果想要多种元素应用同一样式,可以直接使用组合元素选择器。将多个要应用样式的元素用逗号隔开,例如:
例如对于HTML页面:


    

组合选择器

组合选择器,可以将样式同时运用于多个元素。

使用元素选择器添加元素样式:

显示效果如下:
CSS从入门到精通——基础选择器_第4张图片
注意:
多个元素之间的逗号是必不可少的,如果缺失了逗号将表示其他含义。
元素选择器语法
我们可以看出元素选择器的语法规则如下:
/单个元素选择器/
元素 {样式声明}
/组合元素选择器/
元素1,元素2 {样式声明}
编程要求
使用元素选择器修改页面样式,要求如下:
设定html元素的background-color为#F0F0F0;
设定header元素的padding为40px,background-color为白色;
添加footer元素的font-size为0.6em,字体颜色为灰色(grey)。
测试说明
平台会对你的代码进行运行测试,如果实际输出结果与预期结果相同,则通关;反之,则 GameOver。
生活的道路一旦选定,就要勇敢地走到底,决不回头。——左拉
开始你的任务吧,祝你成功!
如果你觉得这一关的内容对你有帮助,请你在下面点赞。
参考代码:
step4/index.html




  
  
  
  元素选择器
  



  • 精选
  • 时事
  • 财政
  • 思想
  • 生活
  • 精选

  • 精选新闻1
  • 精选新闻2
  • 精选新闻3
  • 时事

  • 时事新闻1
  • 时事新闻2
  • 时事新闻3
  • 财政

  • 财政新闻1
  • 财政新闻2
  • 财政新闻3
  • 思想

  • 思想新闻1
  • 思想新闻2
  • 思想新闻3
  • 生活

  • 生活新闻1
  • 生活新闻2
  • 生活新闻3
  • Copyright (c) News Copyright Holder All Rights Reserved.

    step4/sample_1.html

    
    
    
      
      例子
      
    
    
      

    标题1

    标题2

    普通段落中删除的引用。

    step4/combine.html

    
    
    
      
      
      
      元素选择器
      
    
    
    
    	

    组合选择器

    组合选择器,可以将样式同时运用于多个元素。

    第2关:CSS 类选择器
    任务描述
    本关任务是通过类选择器的方式,更改独立于文档元素的属性。
    CSS从入门到精通——基础选择器_第5张图片
    相关知识
    类选择器
    类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式,而不考虑具体的元素时,会使用类选择器。
    例如,对于HTML页面:

    
    

    地震自救指南

    大的晃动时间约为1分钟左右。这时首先应顾及的是您自己与家人的人身安全。首先,在重心较低、且结实牢固的桌子下面躲避,并紧紧抓牢桌子腿。在没有桌子等可供藏身的场合,无论如何,也要用坐垫等物保护好头部。

    在该页面中,我们将第一个div元素的class设置为main,article元素的class值设置为news。通常设置class名字时,不要设置已有元素名,例如p、articel。
    之后,添加页面样式:

     
    

    与元素选择器不同,对同一类的元素应用样式,需要在类名前加上一个点号(.),然后书写相应的样式声明。
    最后,样式应用的效果如图:
    CSS从入门到精通——基础选择器_第6张图片
    类选择器语法
    所以,我们可以看出,类选择器的语法规则如下:
    首先,将html中想要应用类样式的元素,指定类名;
    <元素名 class=“指定的类名”>
    <元素名 class=“指定的类名”>
    然后,书写相应类的样式;
    .指定的类名 {样式声明}
    编程要求
    使用类选择器修改页面样式,具体要求入下:
    给第43行的div元素添加名字为newsSection的类;
    在第27行添加newsSection类的样式:外边距为20(margin-top: 20px;)内边距为20(padding: 20px;)和背景颜色白色(background-color: white;)。
    测试说明
    平台会对你的代码进行运行测试,如果实际输出结果与预期结果相同,则通关;反之,则 GameOver。
    读书是在别人思想的帮助下,建立起自己的思想。——鲁巴金
    开始你的任务吧,祝你成功!
    如果你觉得这一关的内容对你有帮助,请你在下面点赞。
    参考代码:
    step5/index.html

    
    
    
      
      
      
      类选择器
      
    
    
    
  • 精选
  • 时事
  • 财政
  • 思想
  • 生活
  • 精选

  • 精选新闻1
  • 精选新闻2
  • 精选新闻3
  • 时事

  • 时事新闻1
  • 时事新闻2
  • 时事新闻3
  • 财政

  • 财政新闻1
  • 财政新闻2
  • 财政新闻3
  • 思想

  • 思想新闻1
  • 思想新闻2
  • 思想新闻3
  • 生活

  • 生活新闻1
  • 生活新闻2
  • 生活新闻3
  • Copyright (c) News Copyright Holder All Rights Reserved.

    step5/sample_1.html

    
    
    
      
      类选择器
      
    
    
    

    地震自救指南

    大的晃动时间约为1分钟左右。这时首先应顾及的是您自己与家人的人身安全。首先,在重心较低、且结实牢固的桌子下面躲避,并紧紧抓牢桌子腿。在没有桌子等可供藏身的场合,无论如何,也要用坐垫等物保护好头部。

    第3关:CSS id选择器
    任务描述
    在本关中,你将通过id选择器的方式完成页面菜单栏样式布局,栏目导航等任务。
    完成任务之后,基本页面效果如下:
    CSS从入门到精通——基础选择器_第7张图片
    相关知识
    id选择器
    id选择器与我们上一关中学习的类选择器类似,但在使用上有不同。
    使用类选择器时,指定一个元素属于某类,使用的是关键字class,例如:

    
      

    温馨提示

    少一串脚印,多一份绿意。

    而在使用id选择器时,使用的是关键字id。对于上面类选择器的例子,用id选择器书写:

    
      

    温馨提示

    少一串脚印,多一份绿意。

    在样式表中,指定对应id名元素的样式,使用#符号,也称为棋盘号或井号。

    #important {
    color: red;
    font-weight: bold;
    }
    样式应用效果如图:
    CSS从入门到精通——基础选择器_第8张图片
    id选择器语法
    同理,我们可以看出,id选择器的语法规则如下:
    首先,将html中想要应用类样式的元素,指定id名。
    <元素名 id=“指定的类名”>
    <元素名 id=“指定的类名”>
    然后,书写相应类的样式。
    #指定的类名 {样式声明}
    类选择器与id选择器的区别
    类选择器与id选择器类似,那么它们的区别是什么呢?什么情况下应该使用哪一种选择器呢?
    它们最大的区别在于,在一个 HTML 文档中,可以为任意多个元素指定类,但id选择器只能使用一次,一个id只能运用于一个元素。
    一般情况下,都推荐使用类选择器。而在一些特定情况下,我们才会建议使用id选择器。例如,通过id选择器在页面中定义锚,在编写 JavaScript 为指定的页面元素应用特殊行为时。
    编程要求
    为header元素添加名为menu的id;
    使用id选择器,设置精选(#chosen)标题为红色(red),时事( #news)标题为蓝色(blue),财政(#finance)标题为橄榄绿(olive), 思想(#think)标题为绿色(green),生活(#life)标题为橘色(orange)。
    测试说明
    平台会对你的代码进行运行测试,如果实际输出结果与预期结果相同,则通关;反之,则 GameOver。
    文武之道,一张一弛。——《礼记》
    开始你的任务吧,祝你成功!
    如果你觉得这一关的内容对你有帮助,请你在下面点赞。
    参考代码:
    step6/index.html

    
    
    
      
      
      
      ID选择器
      
    
    
    

    精选

  • 精选新闻1
  • 精选新闻2
  • 精选新闻3
  • 时事

  • 时事新闻1
  • 时事新闻2
  • 时事新闻3
  • 财政

  • 财政新闻1
  • 财政新闻2
  • 财政新闻3
  • 思想

  • 思想新闻1
  • 思想新闻2
  • 思想新闻3
  • 生活

  • 生活新闻1
  • 生活新闻2
  • 生活新闻3
  • Copyright (c) News Copyright Holder All Rights Reserved.

    step6/sample_1.html

    
    
    
      
      类选择器
      
    
    
      

    温馨提示

    少一串脚印,多一份绿意。

    你可能感兴趣的:(Web,practice,of,Educoder)