常用CSS基础样式(二)

「这是我参与11月更文挑战的第27天,活动详情查看:2021最后一次更文挑战

常用CSS基础样式(二)

上一篇记录了css的介绍以及它的三种使用方式。下面接着写css选择器的基础知识点。

最初学习时,习惯将css代码以行内方式直接写在标签上 或者 又以内嵌方式 写在头部标签中,但是,大量的样式代码占据页面导致页面过长,可观性变差;行内样式修改时总会发现很多冗余部分 重复修改的话工作量又变大。

因此 当后期的不断学习然后再加上项目逐渐变大且经历反复样式修改的摩擦后,就慢慢开始改变了这个恶习,规规矩矩的将css样式表脱离出html页面。

人总是要在不断的磋磨中慢慢成长的,哈哈。

所以,为了代码简洁化,通常我们推荐使用外部链接的方式引用css 即link标签的方式。

<link rel="stylesheet" type="text/css" href="style.css">

1. css选择器

1.1 id选择器

由于id的唯一性,id选择器只会匹配HTML元素 id属性值相对应的唯一元素。id选择器使用符号 # +id名称。


#span1{

color:blue;

}

复制代码

1.2 元素选择器

元素选择器即 根据元素名称来选择相对应的HTML元素。


span{

color:red;

}

复制代码

1.3 类选择器

类选择器通过匹配class属性值来选择相应的HTMl元素。格式为符号 .+class类名.


.span2{

color:pink;

}

复制代码

如需要设置特定标签且拥有该样式的元素样式。则在元素标签后紧跟类名。如


span.span2{

font-size:20px;

}

复制代码

则 只有具有class="span2" 的 span标签 元素的字体大小会变成 20px ,其他则为默认大小。

注:HTML元素可以有多个类名,中间以空格隔开即可。

1.4 通用选择器

通用选择器(*) 用于匹配页面上全部HTML元素。通常用于设置默认格式,去除默认的边距和间距等等。


*{

margin:0;

padding:0;

font-size:15px;

}

复制代码

1.5 分组选择器

因部分样式的重复性太高,为简化代码,一般采用分组选择器将具有相同样式定义的HTML元素合并。


p,span,a{

font-size:15px;

color:red;

}

复制代码

好啦。选择器的记录到这里就结束了。后面将持续学习进步。加油,奥利给!

Guess you like

Origin juejin.im/post/7035092940363923486