在html中怎么写三的倍数,HTML第三课

结构框架

一 CSS核心基础

1.css样式规则

具体格式：

选择器{属性1：属性值1 ；属性2：属性值2；}

属性值与属性之间用英文":“连接，多个“键值对”之间用英文”;"进行区分。

·CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。

·多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。

·如果属性的值有多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。

2.引入CSS样式表

(1)行内式

也称内联样式，是通过标记的style属性来设置元素的样式，其基本语法格式如下：

内容标记名>

style是标记的属性，实际上任何HTML标记都会拥有style属性，用来设置行内式。其中，属性和值得书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用。

(2)内嵌式

是将CSS代码集中写在HTML文档的< head >头部标记中，并且用< style >标记来定义。其基本语法如下：

< head >

< style type="text-css">

选择器 {属性1:属性值1; 属性2:属性值2;}

< /style >

< head >

该语法

中< style >一般位于< title >标记后面，也可以放在任何地方，但是由于浏览器解析是从上到下的，所以把CSS代码放在头部便于提前被下载和解析。同时必须设置type的属性值为text/css，这样浏览器才知道< style>标记包含的是css代码。

(3)链入式

链入式是将所有的样式放在一个或多个以.css为拓展名的外部样式文件中，通过< link >标记将外部文样式件

链接到HTML文件中。基本语法格式如下：

< head >

< link href="css文件的路径" type="text-css" rel="stylesheet"/>

< /head>

该语法中< link/>标记需要放在< head>头部标记中，并且必须指定< link/>标记的3个属性。具体如下：

href：定义外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

type：定义所链接文档的类型，如：text/css

rel：定义当前文档与被链接文档之间的关系，如：stylesheet

(4)导入式

导入式与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用style标记，并在< style>标记内的开头处用@import语句，即可导入外部样式表文件。基本语法格式：

< style type="text/css>

@import url(css文件路径)；或@import“css文件路径“；

< /style>

*

3.CSS基础选择器*

(1)标记选择器

基本语法格式如下：

标记名{属性1：属性值1；属性2：属性值2：}

该语法中，所有的HTML标记名都可以作为标记选择器，例如：body，h1，p，strong 等。用标记选择器定义的样式对页面中该类型的所有标记都有效。

(2)类选择器

使用“；”(英文点号)进行标记，后面紧跟着类名。基本语法格式如下：

.类名{属性1：属性值1；属性2：属性值2；}

该语法中，类名即为HTML元素的class属性值，类选择器的最大优势是可以为元素对象定义单独或相同的样式。

注意：类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符。

(3)id选择器

使用“#”进行标记，后面紧跟id名。基本语法格式如下：

#id名{属性1：属性值1；属性2：属性值2；}

元素的id之是唯一的，只能对应于文档中某一个具体的元素。

(4)通配符选择器

使用“*”表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。基本语法格式如下：

*{属性1：属性值1；属性2：属性值2；}

例如下面的代码，使用通配符选择器定义CSS样式，清除所有 HTML标记的默认边距。

*{

margin： 0；/*定义外边距*/

padding： 0；/*定义内边距*/

在

实际网页开发中不建议使用通配符选择器，因为他设置的样式对所有的HTML标记都生效，反而降低了代码的执行速度。

== 优先级：内联样式>类选择器>外部引入文件> id选择器>类选择器>标记选择器=

二 CSS文本相关样式

1.CSS字体样式属性

(1)font-size：字号大小

css长度单位

相对长度单位

说明

em

相当于当前对象文本的字体尺寸

px

像素，最常用，推荐使用

绝对长度单位

说明

in

英寸

cm

厘米

mm

毫米

pt

点

其中，相对长度单位比较常用，例如，将网页所有段落文本的字号大小设为12px，：

p{font-size：12px；}

(2)font-family：字体

p{font-family：“微软雅体”；}

可以同时指定多个字体，中间用逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，知道找到合适的字体。

使用font-family设置字体时，需要注意以下几点：

1.各种字体之间必须使用英文状态下的逗号隔开。

2.中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当设置英文字体时，英文字体名必须位于中文字体名前。

3.如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下 的单引号或双引号。

4.尽量使用系统默认的字体，保证在任何用户的浏览器中都能正确显示。

(3)font-weight：字体粗细

foont-weight可用属性值

值

描述

normal

默认值，定义标准的字符

bold

定义粗体字符

bolder

定义更粗的字符

lighter

定义更细的字符

100~900(100的整数倍)

定义有细到粗的字符。其中，400等同于normal，700等同于bold，值越大字体越粗

(4)font-variant:变体

一般用于定义小型大写字母，仅对英文字符有效。其属性值如下：

normal：默认值，浏览器会显示标准的字体。

small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是，所有使用小型大写字体的字母与其余的=文本相比，其字体尺寸更小。

(5)font-style：字体风格

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

其中italic与oblique本质上没有区别，但实际上常用italic。

(6)font：综合设置字体样式

基本语法格式如下：

选择器{font：font-style font-variant font-weight font-size/line-height font-family;}

使用font属性时，必须按照上面的语法格式顺序书写，各个属性之间用空格隔开。其中line-height指的是行高。

2.CSS文本外观属性

(1)color：文本颜色

取值方式有三种

预定义的颜色值，如热点，green，blue。

十六进制，如#FF6600、#FF0000等，实际工作中，十六进制是最常用的定义颜色的方式。

RGB代码，如红色可以表示为rgb(255，0，0)或(100%，0%，0%)。

==十六进制颜色值每两位为一个颜色值，如果每两个十六进制数都相同可以缩写，#FF0000可缩写成F00。(2)letter-spacing：字间距

就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

(3)word-spacing：单词间距

用于定义英文单词之间的间距，对中文字符无效，允许使用负值，默认为normal。

word-spacing与letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距

(4)line-height:行间距

常用属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

(5)text-transform：文本转换

属性值

none：不转换(默认值)。

capitalize：首字母大写

uppercase：全部字符转换为大写。

lowercase：全部字符转换为小写。

(6)text-decoration

属性值

none：没有装饰。

underline：下画线。

overline：上画线。

line-through：删除线。

text-deaoration后可以赋多个值。

(7)text-align：水平对齐方式

属性值

left：左对齐

right：右对齐

center：居中对齐

(8)text-indent：首行缩进

用于设置首行文本缩进，属性值可为不同单位的数值、em字符宽度的倍数，或相对于浏览器窗口的百分比%，允许使用负值，建议使用em作为设置单位。

(9)while-space：空白符

属性值

normal：常规，文本中的空格、空行无效，满行后自动换行。

pre：预格式化，按文档的书写格式保留换行、空行原样显示。

nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记< hr>。内容超过元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。

作业：