在 HTML 的学习中,我们多次提起 CSS,早已期待在网页中应用它了,它到底有什么神奇功效呢?
CSS 就如同我们生活中的化妆师,给一张张普通的面庞,涂抹上各种化妆品,这样看起来更加的光鲜亮丽、赏心悦目,这就是 CSS 的美妆功效。CSS 是 Cascading Style Sheets 的缩写,译为层叠样式表,是用来设计网页样式的语言。它描述了 HTML 元素在屏幕、纸张或其他媒体上的显示方式。
它为我们节省了大量的工作,可以一次控制多个网页的布局,也可以通过CSS文件存储外部样式表。我们来看个例子,这里展示了一个有四个不同样式表的HTML页面。点击下面的 "样式表1"、"样式表2"、"样式表3"、"样式表4 "链接,可以看到不同的样式。
也可以点击 "没有样式 ",这就是我们之前学过的没有添加CSS样式的 HTML基本布局了。
了解了 CSS 的作用后,你是不是迫不及待的想在网页里应用它。接下来,我们先得学习一下 CSS 的基本语法。通常,我们把 CSS 语法也称作 CSS 规则。一个CSS规则由一个选择器和一个声明块组成。
选择器指的是你要定义样式的HTML元素。声明块包含一个或多个声明。每个声明包括一个CSS属性名称和一个值,中间用冒号隔开。多个CSS声明要用分号隔开,声明块要用大括号包裹起来。
注意,选择器和花括号之间,花括号和属性名之间,冒号前后,分号前后都可以添加任何多个空格和换行。所以大家编写样式不用太小心翼翼。但是属性名和属性值是一个整体,中间不能有空格和换行!
我们来实战一下。打开VSCode,新建一个文件夹 001-try-css,在文件夹里创建一个 syntax.html 文件,创建基本代码。定义两个 p 元素,编写一些文本。接下来可以给 p 元素添加样式了!但问题来了,样式的代码放到哪里呢?我们先剧透一个知识点,后面我们还会详细的介绍。
在 head 元素末尾,添加一个 style 元素,在这个元素内部添加样式。 定义一个选择器 p,它指向了我们要定义样式的HTML元素:<p> 元素,并且同时指向了两个P元素。接下来编写一对花括号。
定义 color 颜色属性,值为颜色名称 red。再定义 text-align 属性,值为 center。保存文件。在浏览器预览前,你可以暂停一下视频,猜一下是什么效果,在弹幕里告诉我。我们来看一下,两个 p 元素的文本都变成了红色,并且水平居中对齐了,你想对了吗?返回编辑器,将 p 元素的 color 颜色值改为 purple,保存。回到浏览器,刷新,段落文字变成了紫色。
在学习HTML时,你可能早就发现,每次修改页面保存,都得在浏览器上刷新一下,能否修改完代码,浏览器自动刷新呢?可以的! 我们安装一个插件就可以实现了。点击扩展按钮,搜索 Live Server,安装。
返回要预览的页面,鼠标右键,点击 Open with Live Server。接下来我们修改一下 color 颜色值改为 blue,保存。回到浏览器,我们看,段落文本自动变为了蓝色。
文章配套视频链接:https://www.bilibili.com/vide...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。