仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 778|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来讲讲:CSS使用基本教程(5) 笔墨性子

[复制链接]
深爱那片海 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:17:59 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Table中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div更能体现样式和结构相分离,结构的重构性强。
<P><P>
本 章 C S S 的 主 要 作 用
  本章要先容的是笔墨相干的CSS指令。通常一个网站的内容最多的就是笔墨了,透过这些笔墨相干的CSS指令,您能够将您的网页内容排版得美美的。本章将分两个部分为您先容,第一部分是字型性子的CSS指令,用以把持笔墨字型的各类款式;第二部分先容的是笔墨性子的CSS指令,用以控制笔墨段落的表面及安排体例。

字 型 性 质 的 C S S 指 令
font-family 设定笔墨字型
支 持:IE3、IE4
适 用:一切元素
大概值:<family-name>字型称号
预设值:视扫瞄器而定
承继性:有
一样平常典范:SPAN{family-name:"标楷体"}
同轴典范:<SPANstyle="family-name:标楷体">

font-style 设定字体款式
支 持:IE3、IE4、NC4
适 用:一切元素
大概值:normal一般字
italic斜体字
oblique斜体字
预设值:normal
承继性:有
一样平常典范:SPAN{font-style:italic}
同轴典范:<SPANstyle="font-style:italic">

font-weight 设定字型分量
支 持:IE3、IE4、NC4
适 用:一切元素
大概值:normal一般字
bold粗体字
bolder相对父元素稍粗
lighter相对父元素稍细
100,200,300,
400,500,600,
700,800,900.数字由小到年夜代表笔划由细到粗
normal=400 bold=700
预设值:normal
承继性:有
一样平常典范:SPAN{font-weight:bolder}
同轴典范:<SPANstyle="font-weight:bolder">

font-size 设定笔墨巨细
支 持:IE3、IE4、NC4
适 用:一切元素
大概值:<absolute-size>相对巨细,可用的参数由小到年夜分离有七项
xx-small,x-small,small,medium,large,x-large,xx-large
<relative-size>绝对巨细,可用的参数为larger,smaller两项
以父元素字型巨细为基准
<lenght>长度单元,请参考第一章基础单元的相干申明
<percentage>百分比,以父元素字型巨细为基准
预设值:medium
承继性:有
一样平常典范:SPAN{font-size:12pt}
同轴典范:<SPANstyle="font-size:12pt">

font-variant 设定笔墨转换
支 持:IE3、IE4、NC4
适 用:一切元素
大概值:normal一般字
small-caps将小写笔墨转换为年夜写
预设值:normal
承继性:有
一样平常典范:SPAN{font-variant:small-caps}
同轴典范:<SPANstyle="font-variant:small-caps">

font 综合设定字型性子
支 持:IE3、IE4、NC4
适 用:一切元素
大概值:<font-style>设定字体款式
<font-variant>设定笔墨转换
<font-weight>设定字型分量
<font-size/line-height>设定笔墨巨细与列高(请参考设定笔墨列高部分)
<font-family>设定笔墨字型
预设值:无
承继性:有
一样平常典范:SPAN{font:boldersmall-caps12pt/120%Arial}
同轴典范:<SPANstyle="font:boldersmall-caps12pt/120%Arial">

文 字 性 质 的 C S S 指 令
line-height 设定列高
支 持:IE3、IE4、NC4
适 用:一切元素
大概值:normal一般列高,依据字体变更公道高度,视扫瞄器而定
<number>以元素字型巨细乘以该数即为列高
<length>设定长度,请参考第一章基础单元的相干申明
<percentage>百分比,相对元素字型巨细为比例
预设值:normal
承继性:有
一样平常典范:DIV{line-height:120%}
同轴典范:<DIVstyle="line-height:120%">

text-align 设定笔墨对 
支 持:IE3、IE4、NC4
适 用:区块元素
大概值:center对 中心
right对 右侧
left对 右边
justify摆布对 
预设值:视扫瞄器而定
承继性:有
一样平常典范:DIV{text-align:center}
同轴典范:<DIVstyle="text-align:center">

vertical-align 设定垂直对 
支 持:IE4
适 用:同轴元素
大概值:top对 同列最高元素顶端
bottom对 同列最低元素底端
baseline对 底线
middle对 中心
sub将元素置于下标
super将元素置于上标
text-top对 笔墨顶端
text-bottom对 笔墨底端
<percentage>参照元素自己列高,以父元素底线为基准作位移
预设值:baseline
承继性:有
一样平常典范:SPAN{vertical-align:sub}
同轴典范:<SPANstyle="vertical-align:sub">

text-decoration 设定笔墨粉饰
支 持:IE3、IE4、NC4
适 用:一切元素
大概值:none一般字
underline笔墨加底线
overline笔墨加顶线
line-through笔墨加删除线
blink设定笔墨闪灼
预设值:none
承继性:有
一样平常典范:SPAN{text-decoration:blink}
同轴典范:<SPANstyle="text-decoration:blink">

text-transform 设定笔墨转换
支 持:IE3、IE4、NC4
适 用:一切元素
大概值:none一般字
capitalize将英文单字地一个字母转换为年夜写
uppercase将一切笔墨转换为年夜写
lowercase将一切笔墨转换为小写
预设值:none
承继性:有
一样平常典范:SPAN{text-transform:uppercase}
同轴典范:<SPANstyle="text-transform:uppercase">

letter-spacing 设定字母距离
支 持:IE4
适 用:一切元素
大概值:normal不改动字母距离,利用扫瞄器预设值
<length>要分外增添的距离长度,可为负值
预设值:normal
承继性:有
一样平常典范:SPAN{letter-spacing:0.5pt}
同轴典范:<SPANstyle="letter-spacing:0.5pt">

text-indent 设定笔墨缩排
支 持:IE3、IE4、NC4
适 用:区块元素
大概值:<length>长度单元,请参考第一章基础单元的相干申明
<percentage>以父元素宽度为基准的百分比值
预设值:0
承继性:有
一样平常典范:DIV{text-indent:3pt}
同轴典范:<DIVstyle="text-indent:3pt">




另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用他的ID进行控制。
冷月葬花魂 该用户已被删除
沙发
发表于 2015-1-18 06:00:15 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
小女巫 该用户已被删除
板凳
发表于 2015-1-26 22:30:24 来自手机 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
老尸 该用户已被删除
地板
发表于 2015-2-5 02:34:55 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
若相依 该用户已被删除
5#
发表于 2015-2-11 03:21:28 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
若天明 该用户已被删除
6#
发表于 2015-3-1 20:35:05 | 只看该作者
可以使用 CSS 检查工具进行设计。
活着的死人 该用户已被删除
7#
发表于 2015-3-11 00:15:42 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
简单生活 该用户已被删除
8#
发表于 2015-3-24 16:35:49 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-29 07:35

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表