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 : 清除所有元素标签的内外边距)


<<:  C# 入门之逻辑判断(下)

>>:  用心看待这个世界

Day4 用python写UI-聊聊视窗控件配置管理员-grid方法

今天要介绍的是grid()方法,这个方法就像表格式排版,控件是依据指定的索引位置, 放入表格中,很适...

Day 5 : 基本常识以及变数

今天终於可以开始来学习程序了,在这之前有一些程序语言的基本常识要知道: 基本观念 程序的执行: 程序...

[Day6] 'undefined' vs 'not defined'

undefined 与 not defined 虽然在字面上的意思,都是未定义、还未定义的意思,但两...

放开那本字典:匿名函式 anonymous function

唯心又看了诗忆之前写的几个高阶函式练习。「嗯⋯⋯我觉得你与其说是对高阶函式不熟,不如说是对匿名函式不...

Day7收假第一天-无头...苍蝇头

记得在KiKi吃到苍蝇头,让不爱吃韭菜的我也是搭着白饭一口接一口,而且苍蝇头做法简单材料单纯,只要韭...