简述HTML和CSS的概念和作用,HTML+CSS:认识css的概念与语法,了解css的优势

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

简述HTML和CSS的概念和作用,HTML+CSS:认识css的概念与语法,了解css的优势_第1张图片

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

1)css的概念与语法

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

使用语法:

简述HTML和CSS的概念和作用,HTML+CSS:认识css的概念与语法,了解css的优势_第2张图片

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

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

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

简述HTML和CSS的概念和作用,HTML+CSS:认识css的概念与语法,了解css的优势_第3张图片

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

简述HTML和CSS的概念和作用,HTML+CSS:认识css的概念与语法,了解css的优势_第4张图片

2)css的优势

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

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

简述HTML和CSS的概念和作用,HTML+CSS:认识css的概念与语法,了解css的优势_第5张图片

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

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

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

每日金句:艰苦是面临,挫折是经验,努力是桥梁,成功是彼岸。返回搜狐,查看更多

责任编辑:

你可能感兴趣的:(简述HTML和CSS的概念和作用,HTML+CSS:认识css的概念与语法,了解css的优势)