课程名称:前端零基础入门(体系课)
课程章节:第三章 CSS选择器
主讲老师:(课程中没有显示)
今天学习的内容包括:
标签选择器
类选择器
ID选择器
全局选择器
群组选择器
后代选择器
CSS样式规则
css规则由两部分构成:选择器,声明
h1{color:red;font-size:14px;}
css选择器
1)标签选择器
2)类选择器
3)ID选择器
4)全局选择器
5)群组选择器
6)后代选择器
标签选择器
以HTML标签作为选择器,例如:p{},h1{}等
※通过标签选择器设置样式,那使用该标签的内容都引用该样式。
类选择器(类选择器以点开头,并且在html页面中可以被多次调用)
步骤1)为HTML标签添加class属性:
如:<h1 class="special">内容</h1>
<p>内容2</p>
<p class="special">内容3</p>
步骤2)通过类选择器来为具有此class属性的元素设置css样式,写在<style>里面:
如:.special{color:red;}
※只要通过class属性引用类选择器设置的样式,那该标签引用相应的样式。
可对不同类型元素的同一个名称的类选择器设置不同的样式规则,它也是写在<style>标签内:
p.special{font-size:50px}
※只有设置了class为special的<p>标签,才可以引用该样式。
同一个标签,想引用多个样式,则样式之间用空格隔开(同一个元素可以有多个类,中间用空格分开即可):
<p class="special one">
这里有两个样式,special和one,这里引用的都是类选择器样式
下划线:text-decoration:underline;
字体加粗:font-weight:bold;
字体加粗还可以使用数字(100~900,定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold)
ID选择器:和类选择器基本相同
如: <p id="p1">内容</p>,#p1{color:red},
一个ID只能设置在一个元素上,每个ID对应的元素是唯一的
今天学习课程共用了65分钟,今天主要学习了CSS选择器及优先级的内容。今天也是收获满满的一天,希望能够每天学习一点点,一直坚持下,加油!