CSS

【HTML语言基础】

一、HTML语言概述

1、文件头标记

标题事例

编码方式、URL、…… ；

说明：不放置网页的任何内容，只放置HTML文件的信息。

2、文件体标记

background=＂背景图片位置＂

text=网页文字颜色

>文件主体

说明：HTML文件的内容主体，显示在网页上的所有内容也都放置在这个元素中。

3、事例程序

标题事例

Hello，World！

二、文字版面编辑

1、换行标记

说明：将其插入文件的中将起到换行作用。它为单标记标签。

2、取消换行标记

文本内容

说明：当文本内容的长度大于浏览器窗口的宽度时，文本内容将不会自动换行。

3、保留原始排版标记

说明：在浏览器窗口中，文本内容将会保留在文件中的排版显示在浏览器窗口中。 4、段落标记

>段落内容

说明：在浏览器显示时，不同的段落之间除了换行外，还会以一行空白加以区分段落。

5、水平分割线标记

width = n|n%

align = left|center|right

color = color

noshade

>

说明：使用此标记可以绘制出一条横线来，用来分隔不同的文字段落。

6、空格符号标记

 ；

说明：在文件中不论你插入多少个空格，在浏览器中只能看到一个空格，用这种方法可以插入多个空格。

7、居中对齐标记

文本内容

说明：将文本内容居中显示在浏览器窗口中。

8、向右缩进标记

说明：将文本内容以向右缩进的方式显示在浏览器窗口中。

9、标题文字标记

>标题文字

说明：其中n是可变量，取值为1-6,其中

10、文字格式标记

size = n

color = color

>文本内容

说明：face为文字字体如：宋体；size为字体大小取值为1-7，7最大；color为颜色如：＂blue＂。

11、特定文字样式标记

粗体文本

斜体文本 加强强调文本

下划线文本 强调文本 删除线文本 程序代码和指令

CSS 背景属性（Background）

属性 描述 CSS

background在一个声明中设置所有的背景属性。 1

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 1

background-color设置元素的背景颜色。 1

background-image设置元素的背景图像。 1

background-position设置背景图像的开始位置。 1

background-repeat设置是否及如何重复背景图像。 1

CSS 边框属性（Border 和 Outline）

属性 描述 CSS

border在一个声明中设置所有的边框属性。 1

border-bottom(top/left/right) 在一个声明中设置所有的下边框属性。 1

border-bottom-color设置下边框的颜色。 2

border-bottom-style设置下边框的样式。 2

border-bottom-width设置下边框的宽度。 1

border-color设置四条边框的颜色。 1

border-width设置四条边框的宽度。 1

outline在一个声明中设置所有的轮廓属性。 2

outline-color设置轮廓的颜色。 2

outline-style设置轮廓的样式。 2

outline-width设置轮廓的宽度。 2

CSS 文本属性（Text）

属性 描述 CSS

color设置文本的颜色。 1

direction规定文本的方向 / 书写方向。 2

letter-spacing设置字符间距。 1 line-height设置行高。 1

text-align规定文本的水平对齐方式。 1

text-decoration规定添加到文本的装饰效果。 1

text-indent规定文本块首行的缩进。 1

text-shadow 规定添加到文本的阴影效果。 2

text-transform控制文本的大小写。 1

CSS超全笔记（适合新⼿⼊门）

CSS

CSS初识

CSS(Cascading Style Sheets) 美化样式

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。

引⼊CSS样式表（书写位置）

CSS可以写到那个位置？ 是不是⼀定写到html⽂件⾥⾯呢？

内部样式表

内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：

语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。type="text/CSS" 在html5中可以省略， 写上也⽐较符合规范， 所以这个地⽅可以写也可以省略。

⾏内式（内联样式）

内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下： 内容

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。

外部样式表（外链式）

链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：

注意： link 是个单标签哦

该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。type：定义所链接⽂档的类型，在这⾥需要指定为“text/CSS”，表⽰链接的外部⽂件为CSS样式表。rel：定义当前⽂档与被链接⽂档之间的关系，在这⾥需要指定为“stylesheet”，表⽰被链接的⽂档是⼀个样式表⽂件。

CSS(Cascading Style Sheets)简介

当初一帮技术人员想出HTML，主要侧重于定义内容，比如

表示一个段落，

随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用Table来排版，用空白的图片表示白色的空间等。直到CSS出现。

CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。

CSS的英文是Cascading Style Sheets，中文可以翻译成串联式样式表。

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

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在

HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

CSS按其位置可以分成三种：

内嵌样式(Inline Style)

内部样式表(Internal Style Sheet)

外部样式表(External Style Sheet) --------------------------------------------------------------------------------

内嵌样式(Inline Style)

Inline Style是写在Tag里面的。内嵌样式只对所在的Tag有效。