第1关：初识CSS：丰富多彩的网页样式

相关知识

CSS基本概念

CSS基础语法

选择器

声明

第2关：CSS样式引入方式

相关知识

样式引入方式

内部样式表

外部样式表

内联样式

使用哪一种样式表？

样式的优先级顺序

第1关：初识CSS：丰富多彩的网页样式

相关知识

CSS基本概念

CSS(Cascading Style Sheets)即层叠样式表，它是一种用来为结构化文档（例如HTML文档或XML应用）添加样式的计算机语言，目前由W3C定义和维护。

在前端网页开发中，我们使用CSS来定义网页元素的样式，例如背景颜色、字体展示、元素位置、动画效果等等。

所以，HTML 与 CSS 结合，将网页的内容与样式分离，有利于提高开发效率。

基本的CSS语法如同积木一般，通过各种变换设计，构成了丰富多彩的网页世界。

例如，使用CSS排版清晰的网站；包含丰富多媒体的网站；自如运用CSS动画的网站。

一个简单的实例

首先，我们来下一个简单的实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
body {
background-color: teal;
}
h1 {
color:white;
font-size: 36px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS让网页样式更丰富</h1>
</body>
</html>

显示效果如下：

我们在HTML文档的<head>元素中，加入了<style>元素，设置其属性type为text/css，表示此处内容为CSS。

我们在此CSS代码中，指定了：

body背景颜色为蓝绿色(teal)；
h1标题的字体颜色为白色(white)，字体大小为36px并且在网页中居中对齐。

CSS基础语法

一般而言，CSS要如何指定HTML元素样式呢？CSS的基础语法是什么的呢？

由上面的实例，我们可以看出CSS语法主要包括两部分：选择器和声明。

基本格式如下：

选择器 {声明1}

选择器

选择器用于指定我们要修改的HTML元素。例如，在上述实例中，body和h1就是选择器。在之后的实训中，我们也会学习使用多种更复杂的选择器。

声明

通过声明，我们定义要改变的元素样式。声明由属性和值构成，包含在花括号中，基本格式如下：

{属性: 值;}

例如，在上述实例中：

{background-color: teal;}

这一声明，指定了body元素的背景颜色为蓝绿色(teal)。

同样的，我们对h1添加了多行声明：

{
/* 声明代表`h1`的字体颜色设置为白色*/
color: white;
/* 字体大小(font-size)为36px */
font-size: 36px;
/* 文字居中方式(text-align)为居中 */
text-align: center;
}

在平时开发网站时，建议每个声明通常单独列为一行，有助于阅读。当网站发布时，可以使用工具压缩，将多行声明写在一行，使得CSS文件大小更小，加载速度更快。

提示：

语句最后的分号可以不写。如果多个声明写在一行，就必须书写。一般情况下，建议都书写。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Hello World</title><style type="text/css">body {text-align: center;}h1 {/* ********** BEGIN ********** */text-align: center;font-size:40px;       /************ END ********** */color: #62A8CB;}img {height: 250px;}p {/* ********** BEGIN ********** */color:grey;font-size:18px;/* ********** END ********** */}</style></head><body><h1>CSS让网页样式更丰富</h1><img src="https://www.educoder.net/attachments/download/189467"><p>使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。</p></body>
</html>

第2关：CSS样式引入方式

相关知识

样式引入方式

CSS样式有三种引入方式：

内部样式表：如同之前实例中所示，在文档头部中引入；
外部样式表：通过外部文件引入；
内联样式：直接在特定元素中引入。

下面，我们将为大家一一介绍这三种引入方式。

内部样式表

首先，对于内部样式表，书写的方式是直接在HTML文件的头部，添加<style type="text/css"> </style>元素。

具体举例如下：

<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
/*样式添加在这里*/
</style>
</head>

在之前的实例中，为了方便大家同时看到HTML和CSS代码，我们都是使用的这一种方式。

外部样式表

第二种方式，是将CSS单独书写在文件后缀名为.css的文件中。然后在HTML的<head>中添加CSS文件链接。

<head>
<meta charset="utf-8">
<title>Hello World</title>
/* 引入外部的CSS文件 */
<link rel="stylesheet" href="style.css" />
</head>

属性rel的值stylesheet代表样式表，通常不变。href属性值，代表文件的位置。与图像路径的链接方式类似，href属性值的书写方式要根据具体的CSS文件位置。

例如，当HTML文件与要引入的CSS文件不在同一文件夹时：

可以如下书写：

<link rel="stylesheet" href="CSS/style.css" />

在实际的项目中，推荐将样式表统一放在CSS文件夹中，使得项目结构更清晰，资源管理更容易。

内联样式

内联样式是指直接在标签内添加样式属性。

举例如下：

<p style="color: Red; margin-left: 24px; font-size:20px;">内联样式CSS表格<p>

显示如下：

通用的书写格式：

<tag style="样式表">
<tag style="样式表"></tag>

使用哪一种样式表？

在实际开发过程中，通常建议使用第二种外联样式表的方式。

主要优点如下：

内容与样式分离；

易于开发和维护样式。
样式易于复用；

可在多个HTML文件中引入相同的样式文件。
加载更快。

如果在不同的页面中引入相同的样式文件。通常浏览器会直接从缓存中读取，而不再需要再一次访问服务器资源。

样式的优先级顺序

三种样式引入的优先级顺序是：

外部样式< 内部样式 < 内联样式

也就是说，如果同时有三种样式的方式作用于同一元素，会优先的使用内联样式。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>O Captain! My Captain!</title><!-- ********** BEGIN ********** --><link rel="stylesheet" href="step2/CSS/style.css"><!-- ********** END ********** --><style type="text/css">h1 {color:darkblue;}img {float: left;margin-right: 1em;}p {font-weight:bold;}</style>
</head><body><div><!-- ********** BEGIN ********** --><h1 style="color:cornflowerblue">O Captain! My Captain!</h1><!-- ********** END ********** --><img src="https://www.educoder.net/attachments/download/170157" width="300" height="175" alt="Blue Flax (Linum lewisii)" /><p>O Captain! my Captain! our fearful trip is done,
The ship has weather’d every rack, the prize we sought is won,
The port is near, the bells I hear, the people all exulting,
While follow eyes the <em>steady keel</em>, the vessel grim and daring;</p><!-- ********** BEGIN ********** --><p ><small style="color:lightslategray;font-size:10px;">&copy; Walt Whitman</small></p><!-- ********** END ********** --></div>
</body></html>

Educoder/头歌JAVA——CSS从入门到精通——基础知识相关推荐

educoder(头歌)-CSS从入门到精通-基础知识
温馨提示:请仔细核对编程要求!!! 第一关:编程要求: 在右侧编辑器中,补全Begin至end中间的部分,选择index.html文件,设置其CSS样式为: 修改h1标题的text-align为居中显 ...
educoder头歌实训 web课——JavaScript语言基础：JS循环语句
educoder头歌实训太原理工大学web课程----JavaScript语法基础:JS运算符_玛卡巴卡的博客-CSDN博客第1关:while类型任务描述质数的定义如下:大于1的自然数,且除 ...
Educoder/头歌JAVA——JavaWeb：JSP入门
第1关:搭建你的第一个Web服务器 <%@ page language="java" contentType="text/html; charset ...
Educoder/头歌JAVA实训——JAVA面向对象：类与对象
第1关:什么是类,如何创建类什么是类类:类是一个模板,它描述一类对象的行为和属性. 对象:对象是类的一个实例,有属性和行为 . 举个例子: 人是一个 "类",小明就是人的 ...
Educoder/头歌JAVA——jQuery动画
目录第一关:jQuery动画效果--隐藏/显示相关知识 show()和hide() toggle() 编程要求第2关:jQuery动画效果--淡入淡出相关知识 fadeIn(),fadeOut ...
Educoder头歌—Java多线程基础常用函数
第1关:线程的状态与调度任务描述本关任务:学习本关知识完成选择题. 相关知识为了完成本关你需要掌握: 1.线程的状态与调度: 2.线程执行的优先级. 线程的状态与调度如果看懂下图,你对线程的了 ...
Educoder/头歌JAVA——HTML：表格
目录第1关:表格的基本构成相关知识第2关:表格的属性--宽.高相关知识第3关:表格的属性--cellpadding 相关知识第4关:表格的属性--cellspacing 相关知识第5关: ...
Educoder/头歌JAVA——JAVA面向对象：封装、继承和多态
目录第1关:什么是封装,如何使用封装任务描述相关知识什么是封装编辑封装的意义实现Java封装的步骤编程要求第2关:什么是继承,怎样使用继承相关知识继承的基本概念继承的特性多 ...
Educoder/头歌JAVA——HTML：表单类的标签
目录第1关:表单元素--文本框相关知识第2关:表单元素--密码框相关知识第3关:表单元素--单选框相关知识第4关:表单元素--多选框相关知识第5关:表单元素--checked属性相 ...

Educoder/头歌JAVA——CSS从入门到精通——基础知识

第1关：初识CSS：丰富多彩的网页样式

相关知识

CSS基本概念

CSS基础语法

选择器

声明

第2关：CSS样式引入方式

相关知识

样式引入方式

内部样式表

外部样式表

内联样式

使用哪一种样式表？

样式的优先级顺序

Educoder/头歌JAVA——CSS从入门到精通——基础知识相关推荐

最新文章

热门文章