导图社区 《互联网数据库程序设计》6.5-6.8链接与CSS设计
- 377
- 7
- 2
- 举报
《互联网数据库程序设计》6.5-6.8链接与CSS设计
《互联网数据库程序设计》6.5-6.8链接与CSS设计。CSS基础，CSS选择器，标题级别，段落与换行，内嵌
编辑于2023-04-13 16:20:20 吉林- 大学计算机
- 相似推荐
- 大纲
6.5-6.8链接与CSS设计
6.5.1 标题级别
1. HTML方法
格式
<Hn>…</Hn>
标题级别决定字体大小和粗细程度，数字越小，标题级别越高
<Html> <Head><Meta CharSet="utf-8" /> <Title>标题字</Title> </Head> <Body> <H1>人才招聘网</H1> <H2>职场资讯</H2> <H3>个人简历</H3> <H4>企业服务</H4> <H5>职位选择</H5> <H6>创业培训</H6> </Body> </Html>
2. DW方法
在设计视图，选中文字，单击属性面板的HTML按钮，在格式中选择标题
6.5.2段落与换行
1. HTML方法
换行标签：<Br>、</Br>或<Br/>
段落标签格式： <P>…</P>
<Html> <Head> <Meta CharSet="utf-8" /> <Title>段落与换行</Title> </Head> <Body> <H1>段落效果</H1> <P Align="Center">招聘信息</P> <P Align="Center">求职信息</P> <P Align="Right">求职论坛</P> <H1>换行效果</H1> <P Align="Center">招聘信息<Br/> 求职信息<Br/> 求职论坛</P> </Body></Html>
2. DW方法
在设计视图中输入一段文字后按回车键，就形成一个段落，内容包含在<P>…</P>标签中；按Shift+回车键，生成<Br/>标签。
用鼠标选中一段文字，单击属性面板上的HTML按钮，在格式下拉列表中选择段落
6.5.3 文本基本属性
标签
<Font>…</Font>
属性 描述 Face 字体类型。 Size 字体相对大小 Color 字体颜色
6.5.4文本格式标签
文字加粗B、倾斜I、 下划线U、删除线S、 上标Sup、下标Sub、 大字Big和小字Small。
<B><Big>人才招聘网</Big></B><BR> <I><Small>名企招聘</Small></I><BR> <U>个人简历</U><BR> <S>职位名称</S><BR> X<Sup>2</Sup> F<Sub>x</Sub><BR>
6.5.5图像的添加与设置
<IMG 属性 />
属性 描述 属性 描述 SRC URL路径 Align 对齐方式 ALT 无法加载时显示的文字 Border 边框宽度 Width 宽度 Hspace 水平间距(左边距离) Height 高度 Vspace 垂直间距(顶端距离)
<Html><Head><Meta CharSet="utf-8" /> <Title>图像基本属性</Title></Head> <Body> <IMG Border =3 SRC="image/LOGO.JPG" ALT="无法加载图像" Width=140 Height=89 hspace=20 vspace=40 /> </Body> </Html>
6.6.1链接设计
标签格式
＜A Href=“对象名” Targe="浏览对象窗口"＞链接对象内容＜/A＞
引用对象名
引用对象类型 说明 文件名 打开的目标文件名 网站域名(IP地址) 跳转的目标网站域名或IP地址 Email地址 要发送Email的地址
浏览引用对象的目标窗口名
浏览引用对象的窗口名 说明 框架名 网页中已定义的框架名 _Blank或_New 新窗口打开引用对象 _Self 在当前网页窗口中打开引用对象 _Parent 当前网页的父窗口中打开引用对象 _Top 顶层窗口中打开引用对象
链接对象内容
链接对象内容是用户由一个网页跳转到另一个网页的操作对象，通常是文字或图像等
6.6.2引用对象的文件路径
绝对路径
完整的URL地址。当引用当前站点以外的文件时通常使用绝对路径
优点：精确定位文件
缺点：不利于测试和站点移植
相对路径
指以当前网页文件所在的文件夹为起点的路径。在创建设计链接前，应该保存当前网页文件
⑴ 当前目录：直接写文件名或文件名前加./ ⑵ 当前目录下的子目录：直接写子目录名和/ ⑶ 前级目录：../表示前级目录
6.8.3创建CSS
内嵌样式表
也称内联样式表，样式代码通过Style属性直接嵌在标签内，仅对所在标签有效，适用于仅应用一次的样式
<P Style="Color:Sienna;Font-Size:20px">
内部样式表
在<Head>标签内使用<Style>定义样式，在<Body>标签内引用，只对所在网页文档有效
格式
<Head> <Style Type="Text/Css">... </Style> </Head>
<Style Type="Text/Css"> H1{Color:Red;Text-Align: right;} #Logo{Background-Color:Purple;} #Nav{Font-Size:20px;}
外部样式表
将CSS样式规则独立存储于扩展名为CSS的文件中，而HTML文件通过链接方式引用它，其对所有引用它的网页都有效
网页中使用<Link>标签链接到样式表文件。其必须放到<Head></Head>标签内
格式
<Link Rel="Stylesheet" Type="Text/Css" Href=CSS文件/>
<Link Rel="Stylesheet“
6.8.2CSS选择器
标记选择器
用于整体样式的控制，选择器名称为HTML标签
P{ Color:#FF0000; Text-Align:Center }
类选择器
类名称前面加一个圆点“.” ，同一个类选择器可以被引用多次
.Center{Text-Align:Center}
引用方法
<P Class="Center">人才招聘</P> <P Class="Center Red">招聘信息</P>
ID选择器
用于定义单一元素的样式，类名称前面加一个#号
#First{Background:Lime}
引用方法
<P Id="First">招聘信息</P>
与类选择器的区别
⑴ 一个Id选择器只能在一个HTML文档中使用一次
⑵ Id选择器一个元素只能引用一个Id名
<P Class="Center Red">招聘信息</P> √ <P Id="First Next">招聘信息</P> ⅹ
6.8.1CSS基础
CSS为一个预先定义的格式集合（字体样式、背景、表格、链接、排列方式、区域尺寸和边框等显示方式），与HTML文档配合使用
一个CSS样式表可以同时作用于多个HTML文档，修改CSS中某个样式，能使所有相关网页的样式随之变化
使用CSS 能够简化网页代码，加快下载速度，减少重复设计，便于网维护
1 CSS语法基础
选择器{ 属性1:值1 ; 属性2:值2 ; … ; 属性N:值N }
.t-Red { Color :Red ; Font-Size : 16px }
选择器
类型说明
标记选择器、类选择器和ID选择器
名称
英文字母及其开头的数字或减号的组合
声明
声明要用花括号括起来 每条声明由一个属性和值组成 属性和值用冒号分隔 声明之间用分号隔开
CSS样式
属性 说明 Font-Family 字体 Font-Size 字的尺寸 Font-Weight 字的粗细 Color 文本颜色 Text-Align 对齐方式 Text-Decoration 线方式 Background-Color 背景颜色 Background-Image 背景图像