在这里,我们将看看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

评论