2CSS 20 基础知识.docx

《2CSS 20 基础知识.docx》由会员分享，可在线阅读，更多相关《2CSS 20 基础知识.docx（18页珍藏版）》请在冰点文库上搜索。

2CSS20基础知识

CSS2.0基础知识

Css样式表-html

一、CSS基本概念：

（一）基础知识：

1．CSS（CascadingStyleSheets，层叠样式表）

W3C标准化组织于1996年12月17日推出了CSS1.0规范，又于1998年5月12日推出了CSS2.0规范。

2．CSS样式表的功能：

样式的设置，结构的布局

（1）．弥补了HTML对网页格式化功能的不足；

（2）．设置字体变化和大小；

（3）．页面格式的动态更新；

（4）．排版定位；

（二）CSS规则：

语法格式：

selector{property1:

value1;property2:

value2;．．．}

解释：

selector：

CSS的选择器。

-选择给哪个html标记写样式。

property：

属性。

{属性：

属性值；属性：

属性值；}设置字体是，用引号引住

{font-fonily：

“宋体，黑体”}

value：

属性的取值。

例如：

CSS2.0有以下4种selector选择器，也称为类：

1．重定义HTML标记：

第一类选择器（将开始标记的关键字，作为选择器）

（1）．单个HTML标记的CSS定义：

例如：

h1{font-size:

12px;color:

red;}

（2）．多个HTML标记设置相同的CSS样式：

例如：

h1,h2,h3{color:

green;}（用“,”隔开）

2．用户自定义类，也称为通用类：

用class属性给标记起一个名字，那么想要在css中选中该标记，则选择器需以（．）开头+class名，是用户自己定义的名称。

（同一class名，可以给多个标记使用）

例如：

html中：

我是标题一

CSS中：

.note{color:

green;font-family:

楷体_gb2312;}

用id属性给标记起一个名字，那么想要在css中选中该标记，则选择器以（＃）开头+id名，是用户自己定义的名称。

（同一id名只能使用一次）

例如：

html中：

我是标题一

CSS中：

＃note{color:

green;font-family:

楷体_gb2312;}

3．虚类：

（链接）在body间使用，应用广泛。

a:

link设置正常状态下的链接文字的样式。

a:

visited设置访问过的链接文字的样式。

a:

hover设置鼠标放在链接上的链接文字样式。

（滑过事件，可以给所有标记使用）

a:

active设置鼠标单击时的链接文字的样式。

4．具有上下文关系的HTML标记：

一种用空格隔开的两个或多个标记组成的字符串。

例如：

h1b{color:

red;}

含义：

位于

...

注意：

嵌套关系可以定义多层，但通常只使用一层。

（三）CSS与HTML的冲突：

当对同一段文本应用多个CSS样式时，由于这些样式之间可能存在着矛盾或样式与HTML之间存在着矛盾，可能在显示时无法出现预期的效果。

浏览器显示样式时，遵循以下2个规则：

（代码执行顺序：

从上到下，从左到右。

）

规则1：

样式叠加

当多个不同的样式作用于同一元素时，若样式之间互不矛盾，则浏览器显示所有的样式。

规则2：

距离优先

当多个不同的样式作用于同一元素时，若样式之间存在矛盾，则浏览器显示距离元素较近的样式。

（若样式存在冲突时，后设置的样式会覆盖之前设置的样式。

哪个选择器设置的越具体，样式会优先显示）

（四）CSS的基本写法：

1．内部样式块对象表示法其次

在头部定义CSS样式，在部位使用已经定义的样式。

优先级

定义CSS样式：

定义CSS类

若采用用户自定义类，则使用该类的标记采用class属性指定样式的名称。

例如：

h5{font-size:

12px;color:

red;}

h1,h2,h3{font-size:

22px;color:

green;}

.note{color:

yellow;font-family:

楷体_gb2312;}

pb{color:

red;}

HTML与CSS技术的综合应用

HTML与CSS技术的综合应用

HTML与CSS技术的综合应用

HTML与CSS技术的综合应用

宁静的夏天

宁静的夏天

全国计算机等级考试

全国计算机等级考试

2．内联定义表示法优先级最高

在HTML文件标签中使用style属性来指定样式。

例如：

黑体;color:

red;">文字信息

3．外部样式表示法再次

样式表文件：

专门存放CSS样式定义信息的外部文件，扩展名为*.css。

①在外部创建CSS样式表文件。

②在要使用外部样式的html文件的...标记中写明：

③在要使用外接样式的html文件的...标记中直接使用外部样式。

注：

写在外部（相对于HTML文件）CSS文件中，需要在HTML文件的...之间，用标记进行引用（CSS文件路径），然后就可以在外部CSS文件中设置HTML标记的样式。

例如：

外部样式表文件：

hw.css

h1{font-family:

黑体;color:

red;}

.hx{font-family:

楷体_gb2312;color:

blue;}

html文件：

aa.html

该标题使用了外部样式表文件

调用外部样式表文件中的web自定义样式。

浏览器执行样式表顺序：

内联样式>内部样式表>外部样式表（服从就近原则）

样式叠加或样式冲突

样式冲突：

1样式的优先级：

内联样式>内部样式表>外部样式表

2，距离优先：

a后设置的样式会覆盖先设置的样式b设置的越具体，样式越优先显示。

（五）CSS的单位

单位

描述

单位

描述

cm

厘米

in

英寸，1in=2.54cm

mm

毫米

pt

点，1pt=1/72in

em

相对长度单位。

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

pc

皮卡，1pc=12pt

ex

相对长度单位。

相对于字符“x”的高度。

此高度通常为字体尺寸的一半

px

像素

%

百分比

二、CSS属性：

CSS提供了以下9种属性类，共71个：

1．字体：

控制网页中字符的字体样式。

2．文本：

控制网页中文本的段落布局。

3．颜色：

控制网页中文本的颜色。

4．背景：

对网页背景作适当的设置。

5．定位：

控制元素在页面上的位置及元素间的重叠。

6．列表：

对页面的列表样式进行修改。

7．盒子：

包括边界、填充、边框的设置。

8．鼠标形状：

控制鼠标的外观。

9．滤镜：

作用于文字或图像的外观特效。

三、字体属性（共5个）：

1.font-family:

指定字体类形或字体类形列表。

（*相当于HTML中标记的face属性）

如：

font-family:

“黑体”;

2.font-size：

指定字号。

（*相当于HTML中标记的size属性）

如:

font-size:

18px;

取值类型

值

说明

绝对大小

xx-small、x-small、small、medium、large、x-large、xx-large

medium为缺省值，字体从前向后越来越大。

相对大小

smaller、larger

分别表示比上一级元素中的字体小或大一号。

长度值

直接给出长度值

字体显示为给定长度的大小。

百分比

直接给定百分比

表示与缺省字体的百分比。

3．font-style：

指定字体样式。

取值：

normal（普通）、italic（斜体）、oblique（倾斜）。

如：

font-style:

italic

4．font-weight：

指定字体粗细。

取值：

normal（正常值，粗细度约为300）、bold（粗体，粗细度约为700）；

bolder（特粗体，粗细度约为900）、lighter（比正常值细）；

取值范围：

100~900（9个等级，数字越小越细）。

5．font-variant：

字体变量。

（不常用）

取值：

normal（正常值）、small-caps（把小写字母转换为大写字母，并显示为小型大写字母）

四、文本属性（共8个）：

1．letter-spacing：

设置字符间距。

取值:

normal（正常值）、具体长度值（带单位）。

[单位参照css单位]

注意：

系统认为字符间距是单个英文字母之间、单个中文汉字之间的距离。

2．word-spacing：

设置单词间距。

取值：

normal（正常值）、具体长度值（带单位）。

注意：

系统以空格分辨单词，英文单词之间的空格、中文汉字之间的空格均认可。

3．text-decoration：

文本修饰属性。

取值：

none（正常值）、underline（下划线）、overline（上划线）、line-through（删除线）、blink（闪烁，该值仅Netscape浏览器支持，IE无此效果）。

4．text-align：

文本水平对齐方式。

取值：

left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）。

5．line-height:

文本行高（让文本垂直居中的话，此属性取值需等于父盒子的高）。

取值：

normal（正常值）、具体长度值（带单位）。

6．text-transform:

控制英文大小写。

取值：

none（无文本转换）、capitalize（单词首字母大写）、

uppercase（小写转换为大写）、lowercase（大写转换为小写）。

7．text-indent:

设置首行缩进。

取值：

normal（正常值）、具体长度值（带单位）。

text-indent:

2em;首行缩进2em。

（两字符）。

8．vertical-align:

文本垂直对齐方式。

取值：

baseline（基线）、sub（下标）、super（上标）、top（顶部）、text-top（文本顶部）、middle（中间）、bottom（底部）、text-bottom（文本底部）。

五、颜色属性（共1个）：

（颜色16进制，颜色名字，或是颜色RGB）

color：

指定文本颜色。

（*相当于HTML中标记的color属性）

取值：

可以是颜色16进制代码，也可以是颜色名称。

六、背景属性（共5个）：

1．background-color:

设定背景颜色。

（*相当于HTML中标记的bgcolor属性）

2．background-image:

设定背景图片。

（*相当于HTML中标记的background属性）

格式：

selector{background-image:

url（image_path）;}

3．background-repeat:

背景图片重复方式。

取值：

repeat（图片平铺）、repeat-x（以x轴方向平铺）、repeat-y（以y轴方向平铺）、

no-repeat（不重复）

4．background-position:

设定图片位置。

取值：

水平和垂直两值。

垂直：

top（图片垂直局顶）、bottom（图片垂直居底）、

水平：

center（图片居中）、left（图片水平居左）、right（图片水平居右）、value（具体值），格式为：

selector{background-position:

xy;}

5．background-attachment:

设定图片附件。

（*相当于HTML中标记的bgproperties属性）

取值：

scroll（页面滚动时图片滚动）、fixed（页面滚动时图片不动）

七、定位属性（层）（共10个，难点）：

1．position:

规定Web元素的定位方式。

取值：

absolute（绝对定位）、relative（相对定位）

含义：

①绝对定位：

位置被设置为absolute的元素，可被定位于相对于包含它的元素的指定坐标。

此元素的位置可通过"left"、"top"、"right"以及"bottom"属性来规定元素的位置。

②相对定位：

让操作的元素参照前一个元素的末端位置进行偏移。

（参照物）

注：

若想给子元素通过添加绝对定位，给其调整位置，则其父元素必须先进行相对定位。

（子绝父相）

2．top:

依据定位方式，元素顶端与参照物顶端的距离。

单位为像素。

（元素必须进行绝对定位）

3．left:

依据定位方式，元素左端与参照物左端的距离。

单位为像素。

（元素必须进行绝对定位）

4．right:

依据定位方式，元素右端与参照物右端的距离。

单位为像素。

（元素必须进行绝对定位）

5．bottom:

依据定位方式，元素下端与参照物下端的距离。

单位为像素。

（元素必须进行绝对定位）

6．width:

定位元素的宽度。

7．height:

定位元素的高度。

8.z-index:

z轴，决定定位元素先后顺序的覆盖关系，值高的元素会覆盖值低的元素（该属性仅限于绝对定位状态）。

9．overflow:

溢出属性，当定位元素的内容超出定位元素所能容纳的范围时所采取的方案。

取值：

visible（可见）、hidden（隐藏）、scroll（滚动条）、auto（自动）。

含义：

①visible:

无论定位元素的大小，内容都可以显示出来。

②hidden:

将多出定位元素的部分内容隐藏。

③scroll:

不管内容是否超出定位元素的范围，都添加滚动条。

④auto:

只在定位元素内容超出定位元素的范围时才显示滚动条。

注意：

①top、left用来确定定位元素的位置；width、height用来确定定位元素的范围。

②overflow属性对于HTML中的标记不起作用，图片会随着width、height属性的变化而进行缩放。

若想使图片也受该属性的影响，必须将标记加放在盒子内，例如：