《任务202 CSS》

任务地址

https://bbs.excellence-girls.org/topic/211/css核心知识

开始任务

CSS(Casecating Style Sheet),层叠样式表

  • 实现了内容与表现的分离
  • 定义如何显示HTML元素
  • 极大提高工作效率
    选择器是CSS的核心,常用的选择器有标签选择器、类选择器、ID选择器、后代选择器、子元素选择器等等。
    理解各个选择器的使用最好还是自己可以动手来做个小demo!比如理解css选择器#main > .images与#main .images的区别,经过我在论坛里面提问和我自己的实践,有大于符号(>),是用于选择指定标签原色的第一代子元素,而加入空格的表示用于选择指定标签元素下的后辈元素,可以来看一个例子
<div id="main">
    <div>1号
        <div class="images">
            4号
        </div>
    </div>
    <div class="images">2号</div>
    <div class="images">3号
        <div>5号
            <div class="images">6号</div>
        </div>
    </div>
</div>

如果我们使用 #main > .images{color: red;}可以看到

2号、3号、5号和6号字体都变成了红色,你可能会有疑问,怎么5号和6号也变成了红色呢?那是因为CSS中部分样式是可以继承的,比如font-family,font-size等,当然还有color。那么如果使用#main .images{color: red;}呢?

后辈元素都变成了红色呢。
在完成任务中,除了学习CSS,还要注意CSS布局模型CSS布局模型

页面显示

具体的代码在这里看这里

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容