Day 05 CSS <基础选择器>

CSS的选择器分为基础选择器以及复合选择器
本日将先说明基础选择器 DAY6将继续说明复合选择器

CSS中的基础选择器
单个选择器组成,包含标签选择器类选择器id选择器通配符选择器

标签选择器
是指用HTML标签名称作为选择器
按照标签名称分类,为页面中某一类标签指定统一的CSS样式

标签名{
属性1 : 属性值1;
属性1 : 属性值1;
...
}

主要功用 : 把某一类标签全部选择出来,像是所有的<div>标签和所有的<span>标签
优点 : 能快速为页面中同类型的标签统一设置样式
缺点 : 不能设计差异化的样式,只能选择全部的同类标签

类选择器
若要单独选一个或某几个标签,可以使用类选择器
HTML元素以class属性来设置类选择器,CSS中类选择器以"."来定义

<style>
.example{     //套用HTML标签中的example类别
color : red;  //把内容文字修改成颜色
}
</style>

<body>

<div class=example>
这是类选择器的范例
</div>

</body>

类选择器范例

备注:
1.可以理解为给HTML内标签起了名子来表示 (class=想要添加的命名)
2.不可使用纯数字或中文命名,一般都使用英文字母做命名
3.命名尽量有意义,也方便操作使用

多类名
给一个标签指定多个类名来达到更多的操作目的
简单理解就是一个标签有多个名子

<div class=" red fong">多类名册是 此处的div有red跟fong两种类名</div>

备注:

  1. 多个类名中间必须使用空格进行分开
  2. 上面的程序码div标签将会分别具有red以及fong两种类别的样式

多类名的使用场景:

  1. 可以把一些标签元素共同的部分放到一个类里面
  2. 这些标签就可以调用公共的类 然後再去调用自己独有的类
  3. 以此来节省CSS代码,修改也较方便

id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义

/*
ex:将id为nav元素中的内容设置为红色
*/
CSS语法:
#nav{
color: red;
}
HTML语法:
<div id=nav>
id选择器内容
</div>

id选择器和类选择器的区别

  1. 类选择器(class)好比人的名字,一个人可以有多个名子,一个名子也可以被多个人使用
  2. id选择器好比身分证号码,是唯一的,在页面中不可重复
  3. id选择器和类选择器最大的不同在於使用次数上
  4. 类选择器在修改样式中用的最多,id选择器一般用於页面唯一的元素上,经常和JS搭配使用

通配符选择器
通配符选择器使用"*"定义,表示选取页面中的所有元素(标签)

*{
margin: 0;
padding: 0;
}

备注 :
通配符选择器不需要调用,自动就给所有的元素使用样式
特殊情况才使用,EX : 清除所有元素标签的内外边距)


<<:  Day15 javascript 对象介绍

>>:  Day15-ProtoType

【Day 16】 介绍 AWS 中资讯安全 - 流量相关日志

大家午安~ 就以先前我们於 AWS 建置个人的 WordPress 网站举例(如下图所示),若要访问...

Day13-元件渐变语动画

渐变transition 这边就像写css一样,只是要渐变的东西包在transition里面,并到c...

Day20 iPhone捷径-将连拍照片做成GIF

Hello 大家, 上周我回南部, 家里的人想说我难得回家就临时的规划了家族旅游, 一口气冲到东部,...

Day30 :【TypeScript 不用学了】我终於完赛了!

终於完赛了!最近跑去画画,附上一幅《小王子与小狐狸》,小王子里面,最喜欢的就是他们的故事,是说画画...

Kotlin Android 第25天,从 0 到 ML - TensorFlow Lite 功能与特色

前言: 今天来看一下TensorFlow Lite 功能与特色 和开发流程 大纲 : TensorF...