从0到1开启web前端学习之旅四

老渡司机回来了,前几天因为一些私事耽搁了一阵,今天重启我们的学习之旅,经过前一阵子的学习想必大家都已经熟练掌握html常用标签的用法了,也就是说网页的结构我们已经会搭建了, 剩下的事情就是要给网页加样式了,没错今天我们来说一说CSS语言,全称层叠样式表,算不上是一个正经的编程语言,学习起来很容易,上手极其快速,但是如果想在项目中写出高效的Css代码,也是需要积累长期的项目经验才能完成的。

 

首先我们需要创建一个.css文件 图1并且通过link标签把该文件引入到html页面中,只有这样做才能使css样式语言对html中的标签起作用。

图2

 

讲CSS 我们首先从选择器开始,因为Css的目的就是要给各种标签添加不一样的样式,所以我们从选择器开始说起。

 

什么叫选择器呢?顾名思义就是选择html标签的工具,一个标签有他自己的标签名称,标签身上还可以有自身的属性。那集这么多特质的html标签一定会有多种方式被选择到。没错css提供了我们多种选择器来选中某个,某种或某类标签。

选择器种类:标签选择器,类名选择器,id选择器,属性选择器。

那如何通过这些选择器去选中一个标签呢。

Html:代码

 图3

Css代码:

 图4


效果图:

图5


 

可以看出通过选择器确实选中了这四个标签,并且把样式作用在它们的身上了。

 

当然如果想赋予标签样式不仅仅限于选择器,你可以使用行间样式直接把css代码写在标签上如:

这种方式固然

这种方式固然可以,但是我们在编程中需要遵循规范结构、样式、行为相分离。所以你把css代码直接写在了html中其实我们是不建议这么书写的。

 

当然CSS虽然简单但毕竟是一个大项,用只言片语想要把选择器解释清楚都很难,这里我还是以视频的方式传授细致的知识点。

 

视频链接:

http://v.youku.com/v_show/id_XMTYzMDIwODIwNA==.html?from=s1.8-1-1.2

http://v.youku.com/v_show/id_XMTYzMDIxMzc3Mg==.html?from=s1.8-1-1.2

http://v.youku.com/v_show/id_XMTYzMDIxNDAxNg==.html?from=s1.8-1-1.2

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值