网站首页 > 基础教程 正文
之前的文章给大家介绍了下网页中常用的html的基本知识,从这篇文章开始我们开始介绍css的内容。可以这么说学完了html你可以做出网页的框架,学好了css之后呢,你就可以给做好的框架进行美化填色,做出各种各样的网页。本篇文章先带大家认识一下css的概念与语法,了解一下css的优势之处。
1)css的概念与语法
CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,比如文字大小、颜色、字体加粗等。
使用语法:
详细讲解:
1、选择符:又称选择器,指明网页中要应用样式规则的元素,如我们想要让网页中所有p标签中的文字变成红色,那么我们只需要选择标题对应的标签就行设置即可。
2、声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号(:)分隔。当有多条声明时,中间可以英文分号 (;) 分隔。
我们再浏览器中显示的样式就如下所示:(我们所设置标签中的字体已经变成了红色了)
书写格式:css的代码写法有两种可以将代码写在一行里,使用分号(;)隔开,也可以为了更容易阅读,每条代码占一行。我们css中的注释代码是使用两个反斜杠和两个星来包含,中间写注释的内容(/* 注释的内容 */),注释的内容在网页中是不显示的,具体见下图所示:
2)css的优势
那么我们为什么要使用css样式来设置网页的外观样式呢?它对我们来说到底有什么好处和便利吗?我们接下来看下面一个例子就能很清楚的了解css的作用了。
首先呢我们先写很长很长的一篇文章,然后呢我们的文章中有很多的一样的文字比如:“恒创信息”,“爱上写代码”,“关注我们”,如果我们想把这几个文字统一都设为红色,字体为16px,并且加粗,这时就可以通过设置样式来修改其字体颜色以及字体大小,而且只需要编写一条css样式语句就可以实现。具体的代码就如下图所示:
我们再网页中显示的效果就如下图所示:
由此可以看出,我们只需要设置一个标签的样式,我们就可以控制很多文字的颜色、大小等样式,是不是很方便呢,想一想都还有那些地方可以统一使用样式来控制呢。
这篇文章我们就先说到这里,下一篇我们会介绍大家如何在网页中引用css的样式,它有3种不同的引用方式。另外一定要自己亲自动手写一写,这样对自己才有提升,技术才能不断的进步。
每日金句:艰苦是面临,挫折是经验,努力是桥梁,成功是彼岸。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。
猜你喜欢
- 2024-10-12 《CSS》实战指南2024 css实战手册第四版 pdf
- 2024-10-12 程序员都必掌握的前端教程之CSS基础教程(上)
- 2024-10-12 CSS与JavaScript的区别是什么? javascript css 区别
- 2024-10-12 css预处理器less语法 css3预处理器
- 2024-10-12 Css有哪些用法?小白轻松入门 css的用法
- 2024-10-12 CSS 样式规则 css样式规则由什么组成
- 2024-10-12 CSS bottom 属性 cssbottom属性
- 2024-10-12 HTMLCSS学习笔记(三)——CSS基础要打好
- 2024-10-12 什么是CSS? 什么是css盒模型? 盒模型由哪几部分组成?
- 2024-10-12 PostCSS——css必备 postcss的作用
- 最近发表
- 标签列表
-
- jsp (69)
- pythonlist (60)
- gitpush (78)
- gitreset (66)
- python字典 (67)
- dockercp (63)
- gitclone命令 (63)
- dockersave (62)
- linux命令大全 (65)
- mysql教程 (60)
- pythonif (86)
- location.href (69)
- deletesql (62)
- c++模板 (62)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- console.table (62)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)