HTML5教程

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

本文主要是介绍【学习打卡】第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对应的元素是唯一的    



https://img4.sycdn.imooc.com/62f7270c0001802c06180342.jpg


https://img2.sycdn.imooc.com/62f7270c000164a610370447.jpg


https://img1.sycdn.imooc.com/62f7270c0001f84008540428.jpg


https://img3.sycdn.imooc.com/62f7270c0001662610610582.jpg


今天学习课程共用了65分钟,今天主要学习了CSS选择器及优先级的内容。今天也是收获满满的一天,希望能够每天学习一点点,一直坚持下,加油! 

这篇关于【学习打卡】第11天 前端零基础入门 页面化妆师CSS的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!