书签分享收藏举报版权申诉 / 18

立即下载加入VIP,免费下载

当前位置：首页 > 求职职场 > 简历 > 2CSS 20 基础知识.docx

2CSS 20 基础知识.docx

文档编号：10285030
上传时间：2023-02-09
格式：DOCX
页数：18
大小：30.02KB

2CSS 20 基础知识.docx

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

2CSS 20 基础知识.docx

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间使用，应用广泛。

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

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

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

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

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技术的综合应用

宁静的夏天

全国计算机等级考试

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的单位

单位

描述

单位

描述

厘米

英寸，1in=2.54cm

毫米

点，1pt=1/72in

相对长度单位。

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

皮卡，1pc=12pt

相对长度单位。

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

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

像素

百分比

二、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属性的变化而进行缩放。

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

...

之间，再在

标记中使用class属性确定样式。

③“定位元素”相当于DreamWeaver中的“层”。

10．clip:

剪辑，限定只显示裁切出来的区域。

解释：

裁出的区域为矩形，只要确定两个点的坐标即可。

一个是矩形左上角的顶点，由top、left指定；另一个是矩形右下角的顶点，由bottom、right指定。

格式：

selector{clip:

rect（toprightbottomleft）;}

含义：

top:

第一个顶点的x坐标。

left:

第一个顶点的y坐标。

bottom:

第二个顶点的x坐标。

right:

第二个顶点的y坐标。

注意：

该属性只能再position属性选为absolute（绝对定位）时才可以使用。

分析下列例子：

.dw1{position:

absolute;top:

20px;left:

10px;}

.dw2{position:

relative;top:

20px;left:

10px;width:

200;height:

100;overflow:

auto;}

.dw3{position:

absolute;clip:

rect（20px100px100px20px）;}

3">

2">全国计算机等级考试

全国计算机等级考试博文报名点；全国计算机等级考试博文报名点；全国计算机等级考试博文报名点；全国计算机等级考试博文报名点；全国计算机等级考试博文报名点；全国计算机等级考试博文报名点。

文报名点；全国计算机等级考试博文报名点。

八、列表属性（共3个，重点）：

1．list-style-type:

设置项目符号和编号的类型。

取值

描述

disc

缺省值，实心黑点。

●

circle

空心圆圈。

○

square

方形黑块。

□

decimal

数值：

1，2，3．．．

lower-alpha

小写字母：

a，b，c．．．

upper-alpha

大写字母：

A，B，C．．．

lower-roman

小写罗马字母：

i，ii，iii．．．

upper-roman

大写罗马字母：

I，II，III．．．

none

无样式。

2．list-style-image:

设置图片为列表项目的符号。

格式：

selector{list-style-image:

url（image_path）;}

3．list-style-positon:

设置项目符号是否跟随列表项缩进而缩进。

目录列表项标记显示在文本内还是文本外。

取值：

outside（列表项目符号紧贴左侧边框，不跟随列表项缩进而缩进）、inside（跟随列表缩进）。

000000000000000000000000000000000000000000000000000000000000000000000000000000000

九、盒子属性（共27个，重点）：

盒子：

在格式化页面对象时，CSS将所有的对象都放置在一个容器中，这个容器称为盒子，也叫区块。

...

盒子有四大类属性，共27个：

（一）外边界margin（共5个）：

盒子与浏览器窗口边界或前一个元素边界的距离。

1．margin-left:

左边界宽度。

2．margin-top:

上边界宽度。

3．margin-right:

右边界宽度。

4．margin-bottom:

下边界宽度。

5．margin:

按照上、右、下、左的顺序同时设置四个边界的宽度。

格式：

selector{margin:

toprightbottomleft;}

注意：

①如果仅指定一个值，则四个边界采用相同的（设置的宽度）宽度。

②如果指定了2个或3个值，则没有指定边界宽度的边将采用对边的宽度。

③如果指定的是负值，可以获得特殊的效果。

（margin可以出现负值）

（二）内填充（共5个）：

盒子边框与盒子内容之间的距离。

1．padding-left:

左填充宽度。

2．padding-top:

上填充宽度。

3．padding-right:

右填充宽度。

4．padding-bottom:

下填充宽度。

5．padding:

按照上、右、下、左的顺序同时设置四个填充的宽度。

格式：

selector{padding:

toprightbottomleft;}

注意：

①如果仅指定一个值，则四个填充采用相同的（设置的宽度）宽度。

②如果指定了2个或3个值，则没有指定填充宽度的边将采用对边填充的宽度。

③不能指定为负值。

（三）边框（共15个）：

盒子填充与边界之间的部分。

1．宽度属性：

border-left-width:

左边框宽度。

border-top-width:

上边框宽度。

border-right-width:

右边框宽度。

border-bottom-width:

下边框宽度。

border-width:

按照上、右、下、左的顺序同时设置四个边框的宽度。

2．颜色属性：

border-left-color:

左边框颜色。

border-top-color:

上边框颜色。

border-right-color:

右边框颜色。

border-bottom-color:

下边框颜色。

border-color:

按照上、右、下、左的顺序同时设置四个边框的颜色。

3．样式属性：

border-left-style:

左边框样式。

border-top-style:

上边框样式。

border-right-style:

右边框样式。

border-bottom-style:

下边框样式。

border-style:

按照上、右、下、左的顺序同时设置四个边框的样式。

边框样式取值

描述

none

无边框

dotted

边框由点组成

dashed

边框由短线组成

solid

实线边框

double

双实线边框

groove

沟槽

ridge

脊状

inset

凹陷。

outset

凸出

border:

3px#00FF00solid;

去掉图片边框的写法：

border:

0none;

（四）浮动（共2个）：

将对象环绕在一个元素的周围。

1．float：

设置元素浮动到页面的边缘。

取值:

none（缺省值，不浮动）、left（元素在页面左边缘浮动）、right（元素在页面右边缘浮动）。

2．clear:

指定一个元素是否有漂浮在它旁边的对象。

（clear:

both;清除浮动）

取值：

none（缺省值，允许浮动）、left（元素左边不允许有对象漂浮）、

right（元素右边不允许有对象漂浮）、both（元素不允许有对象漂浮）。

注意：

禁止漂浮的元素应该移到漂浮对象的下边。

十、鼠标形状：

（共1个）

语法格式：

selector{cursor:

value;}

功能：

设置鼠标在经过某一对象时的形状。

鼠标形状属性值

描述

pointer

手形。

crosshair

交叉十字。

text

文本选择符。

wait

Windows沙漏形状。

default

默认的鼠标形状。

help

带问号的鼠标。

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: 2CSS 20 基础知识 CSS

冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：2CSS 20 基础知识.docx
链接地址：https://www.bdocx.com/doc/10285030.html

2CSS 20 基础知识.docx

...

HTML与CSS技术的综合应用

HTML与CSS技术的综合应用

HTML与CSS技术的综合应用

HTML与CSS技术的综合应用

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

热门标签