css基本操作实例教程Word文档格式.docx
- 文档编号:18595407
- 上传时间:2022-12-29
- 格式:DOCX
- 页数:32
- 大小:19.91KB
css基本操作实例教程Word文档格式.docx
《css基本操作实例教程Word文档格式.docx》由会员分享,可在线阅读,更多相关《css基本操作实例教程Word文档格式.docx(32页珍藏版)》请在冰豆网上搜索。
/body>
/html>
2如何设置部分文本的背景颜色。
html>
span.highlight
{
background-color:
yellow
spanclass="
highlight"
这是文本。
/span>
这是文本。
<
3如何将图像设置为背景。
body{background-image:
url(/i/eg_bg_04.gif);
4如何重复背景图像
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat:
repeat
5如何垂直地重复背景图像
repeat-y
6如何水平地重复背景图像。
repeat-x
如何仅显示一次背景图像。
url('
/i/eg_bg_03.gif'
);
no-repeat
7如何在页面上放置背景图像。
background-image:
url('
background-repeat:
no-repeat;
background-attachment:
fixed;
background-position:
center;
8如何使用百分比来在页面上定位背景图像。
no-repeat;
background-attachment:
background-position:
30%20%;
9如何使用像素来在页面上定位背景图像。
10px100px;
10如何设置固定的背景图像。
图像不会随着页面的其他部分滚动。
body
url(/i/eg_bg_02.gif);
fixed
11如何使用简写属性来将所有背景属性设置在一个声明之中。
background:
#ff0000url(/i/eg_bg_03.gif)no-repeatfixedcenter;
12如何设置文本的颜色。
body{color:
red}
h1{color:
#00ff00}
p.ex{color:
rgb(0,0,255)}
13如何增加或减少字符间距。
h1{letter-spacing:
-0.5em}
h4{letter-spacing:
20px}
14如何使用百分比值来设置段落中的行间距。
p.small{line-height:
90%}
p.big{line-height:
200%}
15如何使用像素值来设置段落中的行间距。
p.small
{
line-height:
10px
}
p.big
30px
16如何使用一个数值来设置段落中的行间距。
line-height:
0.5
2
17如何对齐文本
h1{text-align:
center}
h2{text-align:
left}
h3{text-align:
right}
18如何向文本添加修饰
h1{text-decoration:
overline}
h2{text-decoration:
line-through}
h3{text-decoration:
underline}
h4{text-decoration:
blink}
a{text-decoration:
none}
19如何缩进文本首行。
p{text-indent:
1cm}
20如何控制文本中的字母。
h1{text-transform:
uppercase}
p.uppercase{text-transform:
p.lowercase{text-transform:
lowercase}
p.capitalize{text-transform:
capitalize}
21如何禁止在元素中的文本折行。
p
white-space:
nowrap
22如何增加段落中单词间的距离。
p.spread{word-spacing:
30px;
p.tight{word-spacing:
-0.5em;
spread"
Thisissometext.Thisissometext.<
tight"
23如何设置文本字体
p.serif{font-family:
"
TimesNewRoman"
Georgia,Serif}
p.sansserif{font-family:
Arial,Verdana,Sans-serif}
CSSfont-family<
serif"
Thisisaparagraph,shownintheTimesNewRomanfont.<
sansserif"
Thisisaparagraph,shownintheArialfont.<
24如何设置字体尺寸。
h1{font-size:
300%}
h2{font-size:
p{font-size:
100%}
25如何设置字体风格。
p.normal{font-style:
normal}
p.italic{font-style:
italic}
p.oblique{font-style:
oblique}
normal"
Thisisaparagraph,normal.<
italic"
Thisisaparagraph,italic.<
oblique"
Thisisaparagraph,oblique.<
26如何设置字体的粗细。
p.normal{font-weight:
normal}
p.thick{font-weight:
bold}
p.thicker{font-weight:
900}
Thisisaparagraph<
thick"
thicker"
27如何使用简写属性将字体属性设置在一个声明之内
p.ex1
font:
italicarial,sans-serif;
p.ex2
italicbold12px/30pxarial,sans-serif;
ex1"
Thisisaparagraph.Thisisaparagraph.Thisisaparagraph.Thisisaparagraph.Thisisaparagraph.Thisisaparagraph.Thisisaparagraph.Thisisaparagraph.<
ex2"
28如何设置四边框样式
p.dotted{border-style:
dotted}
p.dashed{border-style:
dashed}
p.solid{border-style:
solid}
p.double{border-style:
double}
p.groove{border-style:
groove}
p.ridge{border-style:
ridge}
p.inset{border-style:
inset}
p.outset{border-style:
outset}
dotted"
Adottedborder<
dashed"
Adashedborder<
solid"
Asolidborder<
double"
Adoubleborder<
groove"
Agrooveborder<
ridge"
Aridgeborder<
inset"
Aninsetborder<
outset"
Anoutsetborder<
29如何在元素的各边设置不同的边框。
p.soliddouble{border-style:
soliddouble}
p.doublesolid{border-style:
doublesolid}
p.groovedouble{border-style:
groovedouble}
p.three{border-style:
soliddoublegroove}
soliddouble"
Sometext<
doublesolid"
groovedouble"
three"
30如何设置四个边框的颜色。
可以设置一到四个颜色
p.one
border-style:
solid;
border-color:
#0000ff
p.two
#ff0000#0000ff
p.three
#ff0000#00ff00#0000ff
p.four
#ff0000#00ff00#0000ffrgb(250,0,255)
one"
One-coloredborder!
two"
Two-coloredborder!
Three-coloredborder!
four"
Four-coloredborder!
b>
注释:
/b>
border-width"
属性如果单独使用的话是不会起作用的。
请首先使用"
border-style"
属性来设置边框。
31如何设置文本的左外边距。
p.leftmargin{margin-left:
2cm}
这个段落没有指定外边距。
leftmargin"
这个段落带有指定的左外边距。
32如何设置文本的右外边距。
p.rightmargin{margin-right:
8cm}
rightmargin"
这个段落带有指定的右外边距。
33如何设置文本的上外边距。
p.topmargin{margin-top:
7cm}
topmargin"
这个段落带有指定的上外边距。
34如何设置文本的下外边距。
p.bottommargin{margin-bottom:
4cm}
bottommargin"
这个段落带有指定的下外边距。
35如何将所有的外边距属性设置于一个声明中
p.margin{margin:
2cm4cm3cm4cm}
margin"
这个段落带有指定的外边距。
35使用简写属性将所有的填充属性设置于一个声明中,可以有一到四个值。
td.test1{padding:
1.5cm}
td.test2{padding:
0.5cm2.5cm}
tableborder="
1"
tr>
tdclass="
test1"
这个表格单元的每个边拥有相等的内边距。
/td>
/tr>
/table>
br/>
test2"
这个表格单元的上和下内边距是0.5cm,左和右内边距是2.5cm。
窗体顶端
36如何使用像素值设置元素的高度。
img.normal
height:
auto
img.big
160px
img.small
imgclass="
src="
/i/eg_smile.gif"
/>
big"
small"
窗体底端
37如何使用百分比值来设置元素的高度。
50%
20%
38如何使用像素值来设置元素的宽度。
img
width:
300px
imgsrc="
39如何使用百分比值来设置元素的宽度。
40如何使用百分比值来设置段落中的行间距。
p.sm
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css 基本 操作 实例教程