HTML|css选择器模型

• 2019 年 12 月 24 日
• 笔记

问题描述

我们在做前端网页的时候需要简单的布局形式使网页变得美观好看。一些尺寸，颜色，背景等形式都可以通过CSS选择器模型来解决。往往布局网页形式的方法很多，但CSS选择器模型比较清晰方便而且效率高。怎样才能做一个盒模型呢？

解决方案

选择器模型就是将一些形式对象装在一个CSS模型中，我们在使用这些对象时就可以直接通过写模型的名称就可以将其带入进网页改变其格式。对特定的元素的样式进行定义。要清楚有几种选择器：CSS派生选择器，CSSid选择器，CSS类选择器，属性选择器。下面我主要对id和类两种选择器进行描述。

id选择器：①id选择器可以为标有特定id的HTML元素指定特定的样 式。

②Id选择器以“#”来定义

图3.1

首先在css文件中新建一个文档，在里面写上你要的形式。

a.“#”为定义

b.“#”后面的为名称

c.所定义的样式要用{}

图3.2

图3.3

图3.4

d.在你所需要使用样式的地方插入id=“名称（尽量英文）”

图3.5

图3.6

类选择器：以一个点号来显示

用点号来定义

后加名称

用{}来写样式

图3.7

在你所需要使用样式的地方插入class=“名称（尽量英文）”

图3.8

还有另外一种简单的方法就是直接使用<style>

图3.9

结语

掌握这些选择器的格式，有很多注意事项。格式不能写错不然运行不出来，命名尽量不要用中文或数字，标签该对齐的要对齐。CSS很方便快捷不用重复去写代码，比较有结构性。深入学习CSS可以对前端网页的制作有很大的帮助。

END

实习编辑 | 王文星

责 编 | 江汪霖