HTML+CSS:认识css的概念与语法,了解css的优势

之前的文章给大家介绍了下网页中常用的html的基本知识,从这篇文章开始我们开始介绍css的内容。可以这么说学完了html你可以做出网页的框架,学好了css之后呢,你就可以给做好的框架进行美化填色,做出各种各样的网页。本篇文章先带大家认识一下css的概念与语法,了解一下css的优势之处。

如果有想一起学习web前端,HTML5及JavaScript的可以来一下我的前端群733581373,好友都会在里面交流,分享一些学习的方法和需要注意的小细节,每天也会准时的讲一些前端的炫酷特效,及前端直播课程学习

1)css的概念与语法

CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,比如文字大小、颜色、字体加粗等。

使用语法:

详细讲解:

1、选择符:又称选择器,指明网页中要应用样式规则的元素,如我们想要让网页中所有p标签中的文字变成红色,那么我们只需要选择标题对应的标签就行设置即可。

2、声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号(:)分隔。当有多条声明时,中间可以英文分号 (;) 分隔。

我们再浏览器中显示的样式就如下所示:(我们所设置标签中的字体已经变成了红色了)

书写格式:css的代码写法有两种可以将代码写在一行里,使用分号(;)隔开,也可以为了更容易阅读,每条代码占一行。我们css中的注释代码是使用两个反斜杠和两个星来包含,中间写注释的内容(/* 注释的内容 */),注释的内容在网页中是不显示的,具体见下图所示:

2)css的优势

那么我们为什么要使用css样式来设置网页的外观样式呢?它对我们来说到底有什么好处和便利吗?我们接下来看下面一个例子就能很清楚的了解css的作用了。

首先呢我们先写很长很长的一篇文章,然后呢我们的文章中有很多的一样的文字比如:“恒创信息”,“爱上写代码”,“关注我们”,如果我们想把这几个文字统一都设为红色,字体为16px,并且加粗,这时就可以通过设置样式来修改其字体颜色以及字体大小,而且只需要编写一条css样式语句就可以实现。具体的代码就如下图所示:

我们再网页中显示的效果就如下图所示:

由此可以看出,我们只需要设置一个标签的样式,我们就可以控制很多文字的颜色、大小等样式,是不是很方便呢,想一想都还有那些地方可以统一使用样式来控制呢。

这篇文章我们就先说到这里,下一篇我们会介绍大家如何在网页中引用css的样式,它有3种不同的引用方式。另外一定要自己亲自动手写一写,这样对自己才有提升,技术才能不断的进步。

每日金句:艰苦是面临,挫折是经验,努力是桥梁,成功是彼岸。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。

最后,如果有想一起学习web前端,HTML5及JavaScript的可以来一下我的前端群733581373,好友都会在里面交流,分享一些学习的方法和需要注意的小细节,每天也会准时的讲一些前端的炫酷特效,及前端直播课程学习

如果想看到更加系统的文章和学习方法经验可以关注的微信号:‘web前端技术圈’或者‘webxh6’关注后回复‘2018’可以领取一套完整的学习视频

猜你喜欢

转载自blog.csdn.net/qq_40433465/article/details/84874276