代码入门教程7divp及定位标签css样式Word格式文档下载.docx
- 文档编号:21980204
- 上传时间:2023-02-02
- 格式:DOCX
- 页数:6
- 大小:18.59KB
代码入门教程7divp及定位标签css样式Word格式文档下载.docx
《代码入门教程7divp及定位标签css样式Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《代码入门教程7divp及定位标签css样式Word格式文档下载.docx(6页珍藏版)》请在冰豆网上搜索。
之间的“内容”,可以是文字,也可以是图片等内容。
在使用块区标签的地方,浏览器会自动地给下面的内容空出一行的空格。
DIV标签应用于StyleSheet(式样表)会更显威力,它最终目的是给设计者另一种组织能力,有Class;
Style;
title;
ID等属性。
在&
标签中,可以添加许多属性。
添加属性的方式,大部分是以“样式”(style)的方式添加的。
现举例如下:
(1)设置对齐方式:
divalign="
center"
(2)设置宽度、高度和背景颜色:
divstyle="
width:
200px;
height:
background-color:
Black;
"
(3)设置外边距、宽度、高度和背景颜色:
margin:
5px10px20px30px;
height:
White;
(4)设置定位方式:
position:
relative(定位方式:
相对定位)
relative;
top:
10px;
left:
width:
140px;
2、&
是段落标签
段落标签语法:
/p&
是一个有特定语义的标签,表示段落,是用来区分段落的。
在大部分的浏览器中对P基本上都有一个上下的边距。
但是没有行首缩进,因为行首缩进只是表示段落的方式,并不是一定的或必需的方式。
所以在用&
P&
标签的时候,如果需要可以针对P设定一下行首缩进。
段落标签常用的属性是对齐方式。
即:
palign="
、&
right"
或者&
Left"
在使用段落标签的地方,浏览器会自动地给下面的文章空出两行的空格。
因此,我们在编撰文字或者图片的时候,如果想让两部分内容之间空出两行空格,就用&
标签;
如果想让两部分内容之间空出一行空格,就用&
标签。
3、&
span&
标签&
语法:
内容&
/span&
_
标签被用来组合文档中的行内元素。
span没有固定的格式表现。
当对它应用样式时,它才会产生视觉上的变化。
可以为span应用id或class属性,这样既可以增加适当的语义,又便于对span应用样式。
在行内定义一个区域,也就是一行内可以被&
划分成好几个区域,从而实现某种特定效果。
本身没有任何属性。
在CSS定义中属于一个行内元素,而&
是块级元素。
所谓“块元素”,是以另起一行开始渲染的元素,“行内元素”(又叫做“内嵌元素”),在它后边的内容不会换行。
我们可以通俗地理解为&
为大容器,&
就是小容器。
4、定位标签与代码
在制作网页时,我们常常需要给网页中的元素进行定位。
定位有水平对齐、垂直对齐、居中标签、绝对定位、相对定位等几种方式。
(1)水平对齐方式:
align=left(左对齐)align=center(居中对齐)align=right(右对齐)
水平对齐方式常常作为其它标签(例如:
表格、段落、块区等标签)的属性使用。
(2)垂直对齐方式:
valign=top(顶部对齐)valign=bottom(底部对齐)middle(中部对齐)
垂直对齐方式也常常作为其它标签(例如:
表格、段落、块区等标签)的属性使用,垂直对齐方式还常常和水平对齐方式配合使用。
(3)居中标签:
居中标签一般是单独使用的,居中标签有尾标签。
标签语法:
center&
/center&
(4)绝对定位语法:
POSITION:
absolute(定位:
绝对定位)。
绝对定位是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。
如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
绝对定位举例:
style="
LEFT:
0px;
WIDTH:
940px;
POSITION:
absolute;
TOP:
20px"
(5)相对定位语法:
relative(定位:
相对定位)。
相对定位是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。
相对定位举例:
relative;
5、&
strong&
强调标签
标签语法:
strong&
/strong&
strong意思是着重,这是有语义的,作用也很简单。
至于样式,是加粗着重,还是用色彩表明着重,都由你自行选择。
6、&
em&
标签
em&
/em&
em&
标签是表示强调,一般浏览器的默认值是斜体。
标签与&
标签都有强调的意思,但是强调的力度有所不同。
strong要比em力度更大一点。
如果说em是汉语中的“强调”、“注意”,那么strong就是“再三强调”、“特别注意”。
7、&
br&
wbr&
换行标签。
在&
后面的内容,会显示在下一行。
标签是空标签,它没有尾标签。
wbr是WordBReak的缩写,用来指定软换行(或单词换行)。
即使用&
nobr&
禁止了换行,使用&
仍然可以换行,但是又不是强制换行,这点和&
不一样。
换不换行要看浏览器的横幅。
8、&
:
不换行标签。
/nobr&
在一段文字或者几个图片代码的前面输入&
标签,后面输入它的尾标签&
,这些文字和图片就不会换行了。
作业:
1、认识上面讲解的这8种标签,理解这些标签各自表示的意义。
2、熟悉这些标签的表达语法。
3、自己找一些网页代码,认识这些标签并体会它们的用法。
把你认为精彩的标签,设置一个文件夹保存起来。
2012年10月19日于北京第一章 代码基础知识
第十三节 CSS样式
本节讲解有关CSS样式的内容。
CSS是什么?
CSS是英语CascadingStyleSheets(层叠样式表单)的缩写,它是一种用来表现HTML或XML等文件样式的计算机语言。
CSS目前最新版本为CSS3,能够真正做到网页表现与内容分离的一种样式设计语言。
相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象盒模型的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
CSS样式表能为我们做什么?
CSS样式表的作用是定义网页的外观(例如字体,颜色等等),它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。
这是一个没有添加css的普通网页:
“没有添加CSS的HTML网页”,我们不改动网页的HTML代码,只是添加了一些CSS规则,就得到了一个非常美观的网页:
“添加了css的网页”。
这不是CSS作用的全部,CSS可以将格式和结构分离。
可以以前所未有的能力控制页面布局。
可以制作体积更小下载更快的网页。
可以将许多网页同时更新,比以前更快更容易。
浏览器将成为你更友好的界面。
css的内容
css的内容是对“层叠样式表”使用方法的讲解。
它包括:
样式表的基本语法、把样式表加入网页的方式、文字属性的设置、文本属性的设置、背景属性的设置、列表项目的应用、div和span标签、盒子、定位方法、链接方法等内容。
应用css样式标签举例:
代码1:
IMGstyle="
BORDER-RIGHT-WIDTH:
MARGIN:
1000px;
BORDER-TOP-WIDTH:
BORDER-BOTTOM-WIDTH:
HEIGHT:
305px;
BORDER-LEFT-WIDTH:
0px"
src="
注释:
1、上面的图片标签解析:
图片标签样式=“图片右边框宽度:
0px;
图片外边距宽度:
图片宽度:
1000px;
图片上边框宽度:
图片下边框宽度:
图片高度:
305px;
图片右边框宽度:
0px"
图片地址="
2、说明:
上面的图片标签中使用了css样式,定义了图片的四个边框的宽度、图片外边距的宽度、图片高度和图片宽度。
代码2:
marqueestyle="
621px;
66px;
color:
rgb(255,0,255);
font-size:
24pt;
font-weight:
bold;
id="
class="
direction="
behavior="
alternate"
scrollAmount="
1"
1、上面的移动标签解析:
上面的移动标签中使用了css样式,定义了移动屏幕的宽度和高度、文字颜色、文字字号、文本粗细、标签序号(包括移动方向、移动方式和移动速度)
代码3:
fixed;
210px;
background-color:
Navy;
100px;
1、上面的块区标签解析:
块区标签样式=定位类型:
绝对定位;
居顶:
210px;
居左:
背景颜色(设置纯色):
海军蓝;
宽度:
100px;
高度:
上面的块区标签中使用了css样式,定义了定位类型(绝对定位)、居顶距离、居左距离、背景颜色、宽度和高度
。
编者声明:
我对CSS不是非常熟悉,在这里只向您介绍这些内容,css的具体内容以及使用方法,请您参阅我收藏的这些文章:
1、认识CSS的作用,初步了解CSS的内容。
2、阅读有关CSS的文章,学习CSS语法。
3、应用CSS样式,试着制作几篇文章。
代码入门教程
(1)
代码入门教程
(2)
代码入门教程(3)
代码入门教程(4)
代码入门教程(5)
代码入门教程(6)&
FONT
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 代码 入门教程 divp 定位 标签 css 样式