HTML和CSS之间的关系：

入门编程的伙伴，我们先从HTML和CSS这两个简单的语言开始入门，简单的语言能够提升我们对编程的兴趣，学习起来并不会感觉枯燥无味。

CSS是控制HTML内标签显示不同布局样式。可以控制对应html标签颜色、字体大小、字体、宽度、高度、浮动等样式。

可以这样说：HTML犹如一个人，而CSS则是服饰。通过不同服饰打扮出不同风格人。

一、Css与html不同

CSS语法与HTML语法完全不同

1、HTML里代码是功能标签，如DIV、SPAN、A链接、em标签、I斜体标签、u下划线等

html代码语法范例：

内容

内容

2、CSS样式代码语法

div{样式单词：值}

如div{font-size:12px;} 设置div对象内字体大小为12px

从以上2点可以看出HTML与CSS样式语法完全不同。CSS控制了html标签对象的样式表现。而HTML内标签表现样式（美化）被CSS控制。

二、Css与html相同

CSS与HTML相同之处在于，两个共同作用让网页实现需要的布局样式。

三、DI V+CSS叫法原因

在HTML中我们平凡地使用DIV标签，而通过CSS样式表对html标签赋予样式实现网页布局，由此我们通俗认为DIV+CSS代表XHTML（HTML）+CSS。平时我们所听所说的DIV+CSS大家就要立刻理解为，通过CSS样式+HTML代码实现的HTML静态网页通俗称法。

通过上述了解我想这一门WEB教程，非常适合拿过来学习。内容非常的丰富且内容非常充实；

喜欢的WEB前端的可以进行观看哦，1300多集内容非常之多，简直可以直接通关。

Css与html对于Java编程语言也是一门必要的学习语言，现在Java语言发展大多数也都是WEB企业级后端，Css与html是现在学习任何语言的必备的基础语言。

在学习Java这门编程语言，非常值得推荐这一套课程:内容紧凑、紧跟时代更新、没有拖泥带水行为，合适入门的课程：

下面来介绍一下Css与html的标签、语法、使用方式：

HTML简单的标签：

1、

必须是 HTML 文档的第一行，位于 标签之前。

声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

2、 标签

注释标签。...代表注释内容，不会在浏览器中显示。

3、 标签

定义超链接，用于从一张页面链接到另一张页面。

例：

4、 标签

body 元素定义文档的主体。

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

例：

5、
标签

可插入一个简单的换行符。

标签是空标签（意味着它没有结束标签，因此这是错误的：

）。在 XHTML 中，把结束标签放在开始标签中，也就是
。

需要注意的是，
标签只是简单地开始新的一行，而当浏览器遇到

标签时，通常会在相邻的段落之间插入一些垂直的间距。

6、 标签

标签定义一个按钮。

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

7、标签

定义 计算机代码 文本

8、 标签

可定义文档中的分区或节（division/section）。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。

PS ：（单单在html里对文档布局没有影响，但是在加入css时会非常方便划分区域）

9、 标签

标签定义文档或节的页脚。

元素应当含有其包含元素的信息。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

可以在一个文档中使用多个 元素。

Posted by:zhihu

Contact information: .

10、

到 标签

- 标签可定义标题。

定义最大的标题。 定义最小的标题。

这是标题 1

这是标题 2

这是标题 3

这是标题 4

11、 标签

标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：, , , , , 以及 。

定义文档的标题，它是 head 部分中唯一必需的元素。

12、 标签

标签定义文档的页眉（介绍信息）。

Welcome to my homepage

My name is Donald Duck

The rest of my home page...

13、 标签

此元素可告知浏览器其自身是一个 HTML 文档。

与 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由 标签定义，而主体由 标签定义。

14、 标签

标签定义文档与外部资源的关系。

标签最常见的用途是链接样式表。

15、 标签

标签规定文档的主要内容。

注释：在一个文档中，不能出现一个以上的 元素。 元素不能是以下元素的后代：、、、 或 。

Web Browsers

Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。

Google Chrome

Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。

Internet Explorer

Internet Explorer 由微软开发的一款免费的 web 浏览器，发布于 1995 年。

Mozilla Firefox

Firefox 是一款来自 Mozilla 的免费开源 web 浏览器，发布于 2004 年。

16、 标签

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

17、

标签

标签支持 HTML 中的全局属性。

This is some text in a very short paragraph

18、 标签

标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

PRC

The People's Republic of China was born in 1949...

19、 标签

select 元素可创建单选或多选菜单。

元素中的 标签用于定义列表中的可用选项。

20、 标签

标签用于为 HTML 文档定义样式信息。

在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。

vtype 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。

style 元素位于 head 部分中。

Header 1

A paragraph.

21、 标签

元素可定义文档的标题。

浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

CSS语法使用：

1，CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

下面的示意图为您展示了上面这段代码的结构：

提示：请使用花括号来包围声明。

2，CSS的引入方式

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

3，元素选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

例：

html代码：

我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用

希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

4，类选择器与ID选择器

1》在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

This heading will be center-aligned

This paragraph will also be center-aligned.

2》和 id 一样，class 也可被用作派生选择器：

在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）

3》元素也可以基于它们的类而被选择：

在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。

4》id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}

#green {color:green;}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

这个段落是红色。

这个段落是绿色。

5》id 选择器和派生选择器

在现代布局中，id 选择器常常用于建立派生选择器。

上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。

5，属性选择器

对带有指定属性的 HTML 元素设置样式。

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

例：带有 title 属性的所有元素设置样式：

6，后代选择器

后代选择器（descendant selector）又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

1》根据上下文选择元素：

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例，希望只对 h1 元素中的 em 元素应用样式，可以这样写：

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

This is a important heading

This is a important paragraph.

7，相邻选择器及通用相邻选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

8，伪类选择器

CSS 伪类用于向某些选择器添加特殊的效果。

伪类的语法：

selector : pseudo-class {property: value}

//CSS 类也可与伪类搭配使用。

selector.class : pseudo-class {property: value}

锚伪类：

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问和鼠标悬停状态。

9，伪元素选择器

CSS 伪元素用于向某些选择器设置特殊效果。

伪元素的语法：

在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：

实例:

HTML+CSS简单的语法、标签，以上简单举例，需要学习的更多的有关编程知识的伙伴，记得点赞哟！