千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

首页 视频教程 培训课程 师资团队 技术干货 常见问题 面试题 职场就业 零基础学Java 行业资讯
【热点话题】 Java技术干货 Java学习教程 Java学习笔记 Java面试题 Java培训问答 Java培训机构哪些好 Java职场就业
当前位置:Java培训  >  前端技术干货  >  网站的化妆师——CSS基础

网站的化妆师——CSS基础

来源:千锋教育
发布人:qyf
时间: 2022-12-28 17:01:33 1672218093

  在 HTML 的学习中,我们多次提起 CSS,早已期待在网页中应用它了,它到底有什么神奇功效呢?

  CSS 就如同我们生活中的化妆师,给一张张普通的面庞,涂抹上各种化妆品,这样看起来更加的光鲜亮丽、赏心悦目,这就是 CSS 的美妆功效。

  CSS 是 Cascading Style Sheets 的缩写,译为层叠样式表,是用来设计网页样式的语言。它描述了 HTML 元素在屏幕、纸张或其他媒体上的显示方式。它为我们节省了大量的工作,可以一次控制多个网页的布局,也可以通过CSS文件存储外部样式表。

  我们来看个例子,这里展示了一个有四个不同样式表的HTML页面。点击下面的 "样式表1"、"样式表2"、"样式表3"、"样式表4 "链接,可以看到不同的样式。也可以点击 "没有样式 ",这就是我们之前学过的没有添加CSS样式的 HTML基本布局了。

图片 1

图片 2

图片 3

图片 4

图片 5

  了解了 CSS 的作用后,你是不是迫不及待的想在网页里应用它。接下来,我们先得学习一下 CSS 的基本语法。

  通常,我们把 CSS 语法也称作 CSS 规则。一个CSS规则由一个选择器和一个声明块组成。

图片 6

  选择器指的是你要定义样式的HTML元素。声明块包含一个或多个声明。每个声明包括一个CSS属性名称和一个值,中间用冒号隔开。多个CSS声明要用分号隔开,声明块要用大括号包裹起来。

  注意,选择器和花括号之间,花括号和属性名之间,冒号前后,分号前后都可以添加任何多个空格和换行。所以大家编写样式不用太小心翼翼。但是属性名和属性值是一个整体,中间不能有空格和换行!

  我们来实战一下。打开VSCode,新建一个文件夹 001-try-css,在文件夹里创建一个 syntax.html 文件,创建基本代码。定义两个 p 元素,编写一些文本。

  接下来可以给 p 元素添加样式了!但问题来了,样式的代码放到哪里呢?我们先剧透一个知识点,后面我们还会详细的介绍。在 head 元素末尾,添加一个 style 元素,在这个元素内部添加样式。

  定义一个选择器 p,它指向了我们要定义样式的HTML元素:

元素,并且同时指向了两个P元素。接下来编写一对花括号。

  定义 color 颜色属性,值为颜色名称 red。

  再定义 text-align 属性,值为 center。保存文件。

  在浏览器预览前,你可以暂停一下视频,猜一下是什么效果,在弹幕里告诉我。

  我们来看一下,两个 p 元素的文本都变成了红色,并且水平居中对齐了,你想对了吗?

  返回编辑器,将 p 元素的 color 颜色值改为 purple,保存。

  回到浏览器,刷新,段落文字变成了紫色。

  在学习HTML时,你可能早就发现,每次修改页面保存,都得在浏览器上刷新一下,能否修改完代码,浏览器自动刷新呢?可以的!

  我们安装一个插件就可以实现了。点击扩展按钮,搜索 Live Server,安装。

  返回要预览的页面,鼠标右键,点击 Open with Live Server。

  接下来我们修改一下 color 颜色值改为 blue,保存。

  回到浏览器,我们看,段落文本自动变为了蓝色。

  什么是 CSS,如何定义 CSS 我们就讲完了。CSS 的探险旅程才刚刚开始,大家练习一下本节的案例后,跟我进入下一关吧!

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

猜你喜欢LIKE

最新文章NEW

相关推荐HOT

更多>>