网站制作教程:HTML CSS介绍

你的网络首码项目网 网站建设来源:你的网络首码项目网评论24字数 1579阅读模式

在这里,我们将看看CSS到底是什么,以及为什么它非常适合HTML。

什么是HTML CSS?

CSS代表级联样式表。CSS是在网页上定义样式的标准语言。尽管CSS因其在HTML文档中的应用而广为人知,但它可用于定义任何结构化文档格式(例如XML)的样式。文章源自你的网络首码项目网-https://www.youranweb.com/230.html

样式是使用CSS属性设置的。例如,您可以设置字体属性(大小,颜色,样式等),背景图像,边框样式等等。文章源自你的网络首码项目网-https://www.youranweb.com/230.html

历史

自1996年12月CSS级别成为W3C建议以来,CSS经历了一些重大变化。CSS1描述了CSS语言以及一个简单的视觉格式设置模型。CSS2于1998年5月成为W3C推荐,它建立在CSS1的基础上,并增加了对特定于媒体的样式表(例如打印机和听觉设备),可下载字体,元素定位和表格的支持。文章源自你的网络首码项目网-https://www.youranweb.com/230.html

在撰写本文时,CSS3目前正在开发中,包括更高级的功能,例如动画,背景渐变,多列布局,边框图像等。文章源自你的网络首码项目网-https://www.youranweb.com/230.html

网页与中文

这并不是真正的“HTML与CSS”。事实上,网页版和CSS是最好的朋友!CSS是网页版的补充扩展。以下是每个功能:文章源自你的网络首码项目网-https://www.youranweb.com/230.html

HTML

HTML的目的是提供文档结构和含义。在引入HTML5时尤其如此。您可以使用HTML来指定页面上的元素(例如,标题,段落,表格,图像等)。这些元素中的每一个(以及它们的属性和属性值)都有一定的含义。文章源自你的网络首码项目网-https://www.youranweb.com/230.html

CSS

您可以使用CSS来指定这些HTML元素的外观。但不仅仅是它们的外观,它们的呈现方式。毕竟,您可以使用CSS为语音输出提供样式(例如,对于使用屏幕阅读器的用户)。因此,您可以编写HTML文档而不关心其表示形式,然后使用CSS指定在任何给定上下文中的呈现方式。不仅如此,您还可以更改CSS而无需更改HTML。换句话说,您可以将样式表“插入”到HTML文档中,HTML文档将立即采用该样式表的样式。文章源自你的网络首码项目网-https://www.youranweb.com/230.html

以前

下面是一个仅使用HTML的示例。不涉及企业社会责任。文章源自你的网络首码项目网-https://www.youranweb.com/230.html

文章源自你的网络首码项目网-https://www.youranweb.com/230.html

堆栈编辑器取消堆叠编辑器文章源自你的网络首码项目网-https://www.youranweb.com/230.html

<!DOCTYPE html>
<html> 
<head>
<title>Example</title>
</head>
<body>
<main>
<h1>HTML Page</h1>
<p>This is a basic web page.</p>
</main>
</body>
</html>

在此示例中,我们添加了一些CSS。文章源自你的网络首码项目网-https://www.youranweb.com/230.html

<!DOCTYPE html>
<html> 
<head>
<title>Example</title>
<style>
main {
  width: 200px;
  height: 200px;
  padding: 10px;
  background: beige;
  }
h1 {
  font-family: fantasy, cursive, serif;
  color: olivedrab;
  border-bottom: 1px dotted darkgreen;
  }
p {
  font-family: sans-serif;
  color: orange;
  }
</style>
</head>
<body>
<main>
<h1>HTML Page</h1>
<p>This is a basic web page.</p>
</main>
</body>
</html>

我们所做的只是将以下代码添加到第二个示例中:文章源自你的网络首码项目网-https://www.youranweb.com/230.html

<style>
main {
  width: 200px;
  height: 200px;
  padding: 10px;
  background: beige;
  }
h1 {
  font-family: cursive;
  color: olivedrab;
  border-bottom: 1px dotted darkgreen;
  }
p {
  font-family: sans-serif;
  color: orange;
  }
</style>

继续“剪切/粘贴”<样式>标签以及它们之间从第二个示例到第一个示例的所有内容,以查看它如何影响这两个示例。文章源自你的网络首码项目网-https://www.youranweb.com/230.html

所以,是的,你可以创建一个没有CSS的HTML文档,但它可能看起来像是在1995年创建的!文章源自你的网络首码项目网-https://www.youranweb.com/230.html

接下来,我们将介绍CSS语法。文章源自你的网络首码项目网-https://www.youranweb.com/230.html 文章源自你的网络首码项目网-https://www.youranweb.com/230.html

相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网

发表评论