免费资源
享你所想

从零开始自学入门CSS(1):css介绍

从零开始自学HTML的基础知识我们已经学的差不多了,今天起我们来学习它的好搭档:CSS

css,中文名为层叠样式表,主要用于如何显示HTML元素,就好比为画像上色,让htnl页面变得丰富多彩。

css的语法很简单,只有两部分:选择器声明。

选择器指的是要改变样式的html标签。

声明指的是需要设置的样式属性,声明的组成是键值对,每个声明之间用分号;隔开。整个声明用大括号{}包括起来。

知道大家不太懂,还是上面的例子,选择器选择头发或是嘴唇,声明描述嘴唇或头发的颜色是红色还是黑色。

h1 {color:red; text-align:center;}

选择器选择了标题h1,并声明颜色为红色且居中显示。

css注释

注释的语法很简单,只要用/*看不见的内容*/括起来的内容就是注释。浏览器不会解读它。

插入css

要使css生效,有三种方法来将它插入到html文档中,外部样式表、内部样式表、内联样式表

外部样式表:顾名思义,样式表不在html文档中,而是新建css文件,将css样式放到一个文件中,在需要的时候调用。

这样做的好处是内容与显示完全分离,css文件可以被多个html文件调用,必要时只要改变一个属性就可以改变多个页面。css文件后缀为.css。

内部样式表:内部样式表只作用于一个文件,可以影响当前文件中的多个元素标签,内部样式表写在<head>标签之中,以<style>开始,</style>结束。

内联样式表:内联样式表的作用域更小了,它只作用于当前元素标签。内联样式表写在元素标签之中。

讲完了,开撸代码:

<html>
<head>
<style>
h1 {text-align:center;}
p {color:red;}
</style>
</head>
<body>
<h1>css大法好</h1>
<p>红色的段落</p>
<p style="font-size:22">又大又红的段落</p>
</body>
</html>

代码展示:

css大法好

红色的段落

又大又红的段落

大家有没有发现,代码中有两个p标签,在内部样式表中,把p标签定义为红色,所以两个p标签都是红色,后来我们又在第二个p标签中定义了内联样式表,并将字体放大到22px,所以第二个p标签有两个样式属性:color和font-size。

可如果内联样式表和内部样式表拥有同样的标签属性该怎么办,听谁的好呢?

内联样式表 > 内部样式表 > 外部样式表

所以如果出现相同的属性,优先使用离得最近的,也就是内联样式表。


可能有童鞋有疑问了,p标签在内部样式表中定义为红色后,下方肯定会有很多个p标签,这样它们就全是红色了,可我想要其中一些变成绿色,另一些变成黄色,也可怎么办,难道要为每个p标签都添加内联样式表吗?如果后期要改变颜色又怎么办?

关于这个问题,我会在下一张给出解决办法!

赞(1) 打赏
未经允许不得转载:无梦博客 » 从零开始自学入门CSS(1):css介绍
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无梦博客

币池塘关于本站

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏