2CSS 20 基础知识Word格式.docx
《2CSS 20 基础知识Word格式.docx》由会员分享，可在线阅读，更多相关《2CSS 20 基础知识Word格式.docx（18页珍藏版）》请在冰点文库上搜索。
（同一id名只能使用一次）
html中：
h1id=”note”>
＃note{color:
3．虚类：
（链接）在body间使用，应用广泛。
a:
link设置正常状态下的链接文字的样式。
visited设置访问过的链接文字的样式。
hover设置鼠标放在链接上的链接文字样式。
（滑过事件，可以给所有标记使用）
a:
active设置鼠标单击时的链接文字的样式。
4．具有上下文关系的HTML标记：
一种用空格隔开的两个或多个标记组成的字符串。
h1b{color:
含义：
位于<
h1>
...<
之间的<
b>
/b>
标记的文字颜色显示为红色，其他的<
标记对中的文字颜色不变。
注意：
嵌套关系可以定义多层，但通常只使用一层。
（三）CSS与HTML的冲突：
当对同一段文本应用多个CSS样式时，由于这些样式之间可能存在着矛盾或样式与HTML之间存在着矛盾，可能在显示时无法出现预期的效果。
浏览器显示样式时，遵循以下2个规则：
（代码执行顺序：
从上到下，从左到右。
）
规则1：
样式叠加
当多个不同的样式作用于同一元素时，若样式之间互不矛盾，则浏览器显示所有的样式。
规则2：
距离优先
当多个不同的样式作用于同一元素时，若样式之间存在矛盾，则浏览器显示距离元素较近的样式。
（若样式存在冲突时，后设置的样式会覆盖之前设置的样式。
哪个选择器设置的越具体，样式会优先显示）
（四）CSS的基本写法：
1．内部样式块对象表示法其次
在<
head>
头部定义CSS样式，在<
body>
部位使用已经定义的样式。
优先级
定义CSS样式：
styletype="
text/css"
>
定义CSS类
/style>
若采用用户自定义类，则使用该类的标记采用class属性指定样式的名称。
html>
<
h5{font-size:
h1,h2,h3{font-size:
22px;
.note{color:
yellow;
pb{color:
/head>
HTML与CSS技术的综合应用<
h2>
/h2>
h3>
/h3>
h5>
/h5>
p>
宁静的夏天<
/p>
pclass="
note"
全<
国<
计算机等级考试
计算机等级考试<
/body>
/html>
2．内联定义表示法优先级最高
在HTML文件标签中使用style属性来指定样式。
h1style="
font-family:
黑体;
"
文字信息<
3．外部样式表示法再次
样式表文件：
专门存放CSS样式定义信息的外部文件，扩展名为*.css。
①在外部创建CSS样式表文件。
②在要使用外部样式的html文件的<
标记中写明：
linkrel="
stylesheet"
type="
href="
css文件路径及文件名"
③在要使用外接样式的html文件的<
标记中直接使用外部样式。
注：
写在外部（相对于HTML文件）CSS文件中，需要在HTML文件的<
之间，用<
link>
标记进行引用（CSS文件路径），然后就可以在外部CSS文件中设置HTML标记的样式。
外部样式表文件：
hw.css
h1{font-family:
.hx{font-family:
blue;
html文件：
aa.html
hw.css"
该标题使用了外部样式表文件<
spanclass="
hx"
调用外部样式表文件中的web自定义样式。
<
/span>
浏览器执行样式表顺序：
内联样式>
内部样式表>
外部样式表（服从就近原则）
样式叠加或样式冲突
样式冲突：
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中<
font>
标记的face属性）
如：
“黑体”;
2.font-size：
指定字号。
标记的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:
文本行高（让文本垂直居中的话，此属性取值需等于父盒子的高）。
6．text-transform:
控制英文大小写。
none（无文本转换）、capitalize（单词首字母大写）、
uppercase（小写转换为大写）、lowercase（大写转换为小写）。
7．text-indent:
设置首行缩进。
text-indent:
2em;
首行缩进2em。
（两字符）。
8．vertical-align:
文本垂直对齐方式。
baseline（基线）、sub（下标）、super（上标）、top（顶部）、text-top（文本顶部）、middle（中间）、bottom（底部）、text-bottom（文本底部）。
五、颜色属性（共1个）：
（颜色16进制，颜色名字，或是颜色RGB）
color：
指定文本颜色。
标记的color属性）
可以是颜色16进制代码，也可以是颜色名称。
六、背景属性（共5个）：
1．background-color:
设定背景颜色。
标记的bgcolor属性）
2．background-image:
设定背景图片。
标记的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:
设定图片附件。
标记的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中的<
img>
标记不起作用，图片会随着width、height属性的变化而进行缩放。
若想使图片也受该属性的影响，必须将<
标记加放在盒子内，例如：
div>
/div>
之间，再在<
标记中使用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;
20px;
left:
10px;
.dw2{position:
relative;
width:
200;
height:
100;
overflow:
auto;
.dw3{position:
clip:
rect（20px100px100px20px）;
imgclass="
dw1"
src="
sis.gif"
style="
z-index:
3"
2"
全国计算机等级考试<
br>
imgsrc="
fj.jpg"
dw2"
全国计算机等级考试博文报名点；
全国计算机等级考试博文报名点。
文报名点；
-
spanclass="
dw3"
八、列表属性（共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:
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:
①如果仅指定一个值，则四个填充采用相同的（设置的宽度）宽度。
②如果指定了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:
按照上、右、下、左的顺序同时设置四个边框的样式。
边框样式取值
无边框
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
带问号的鼠标。
升级会员 