导图社区《互联网数据库程序设计》6.5-6.8链接与CSS设计

《互联网数据库程序设计》6.5-6.8链接与CSS设计

《互联网数据库程序设计》6.5-6.8链接与CSS设计。CSS基础，CSS选择器，标题级别，段落与换行，内嵌

编辑于2023-04-13 16:20:20 吉林

大学计算机

Ray的思维导图

他的近期作品查看更多>>

《互联网数据库程序设计》10动态网页及程序设计
《互联网数据库程序设计》10动态网页及程序设计。链接数据库服务器，链接数据库服务器的通知语句，发送SQL语句的向导，输出记录集中的数据与记录集相关的数据
《互联网数据库程序设计》8.5-8.8数值与逻辑表达式
《互联网数据库程序设计》8.5-8.8数值与逻辑表达式，数值表达式，数值运算符，常用数值函数，逻辑表达式，时间戳
《互联网数据库程序设计》8.1-8.5PHP与表达式
《互联网数据库程序设计》8.1-8.5PHP与表达式，常用PHP编辑器，Dreamweaver开发PHP应用程序，PHP程序语法，PHP与HTML的区别，变量及其赋值运算与表达式输出，字符串表达式，字符串连接符

《互联网数据库程序设计》6.5-6.8链接与CSS设计

社区模板帮助中心，点此进入>>

Ray的思维导图

他的近期作品查看更多>>

相似推荐
大纲

互联网9大思维
- 30.8k
- 2.2k
- 361
MindMaster
组织架构-单商户商城webAPP 思维导图。
- 13.8k
- 176
- 15
Kacyun
域控上线
- 1.5k
- 10
- 5
jackrao
python思维导图
- 5.1k
- 231
- 7
(*^▽^*)
css
- 1.2k
- 41
- 5
A张舫
CSS
- 3.1k
- 187
- 33
journey
计算机操作系统思维导图
- 3.9k
- 196
- 21
journey
计算机组成原理
- 1.4k
- 70
- 10
journey
IMX6UL(A7)
- 475
- 5
- 1
Handler XU
考试学情分析系统
- 611
- 10
- 1
蒋龙

6.5-6.8链接与CSS设计

6.5.1 标题级别

1. HTML方法

格式

标题级别决定字体大小和粗细程度，数字越小，标题级别越高

<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 文本基本属性

标签

属性描述 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图像的添加与设置

属性描述属性描述 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属性直接嵌在标签内，仅对所在标签有效，适用于仅应用一次的样式

内部样式表

在<Head>标签内使用<Style>定义样式，在<Body>标签内引用，只对所在网页文档有效

格式

<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“

6.8.2CSS选择器

标记选择器

用于整体样式的控制，选择器名称为HTML标签

P{ Color:#FF0000; Text-Align:Center }

类选择器

类名称前面加一个圆点“.” ，同一个类选择器可以被引用多次

.Center{Text-Align:Center}

引用方法

ID选择器

用于定义单一元素的样式，类名称前面加一个#号

#First{Background:Lime}

引用方法

与类选择器的区别

⑴ 一个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 背景图像