【学习打卡】第11天 前端零基础入门 页面化妆师CSS

课程名称：前端零基础入门（体系课）

课程章节：第三章 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选择器及优先级的内容。今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下，加油!