继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

bao_
关注TA
已关注
手记 47
粉丝 9
获赞 42

课程名称:前端零基础入门(体系课)

课程章节:第三章 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对应的元素是唯一的    



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


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


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


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


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

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP