运筹帷幄 用CSS控制网站总“队形”

全胜庄园

全胜庄园

2016-02-19 20:25

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的运筹帷幄 用CSS控制网站总“队形”,希望大家看完后能赶快学习起来。

    网页设计中我们通常需要统一网页的整体风格,统一的风格大部分涉及到网页中文字属性、网页背景色以及链接文字属性等等,如果我们应用CSS来控制这些属性,会大大提高网页设计速度,更加统一网页总体效果。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

    为了达到修改整个网页的目的,我们需要编辑一个外挂式的CSS文档。根据这个文档定义和修改不同CSS属性并在页面元素相同或者相似的网页里调用它。

  整体改变页面风格
 
  现在网页中流行宋体的9pt和10.5pt的字体,按快捷键“Shift+F11”打开“CSS Style控制面板”,单击“New Style”按钮,弹出“New Style”对话框,复选“Redefine HTML Tag”的“Type”类型,这时在Tag处会出现“body”、“br”、“cite”等选项,选择“body”后确认。这样我们就建立了一个外挂的 CSS文档,在保存对话框中保存为all后就进入“Style Definition for body in all.css”对话框(如图1)。选择“Category”中的“Type”项,定义“Font”为“宋体”、“Size”参数为“9”,其后的下拉框选择“Points”、“Color”自定义为喜好颜色就可以了。当然还可以选择“Category”中的“Background”项来定义 “Background”颜色和其他背景属性。这时您会看到页面中内容的整体改变。

  偏好元素风格的改变

  经过上面的改变有时不免给您带来一定麻烦,如果遇到页面中某个元素,比如突出显示的文字的字体、字号以及颜色怎么办!这里我们就需要再定义一个新的CSS样式单来对其进行控制,右键点击页面编辑区,在弹出快捷菜单中点击“CSS Style/Edit Style Sheet”命令,弹出“Edit Style Sheet”对话框,选择列表中的all.css,点击“New”按钮,在弹出的“New Style”对话框中选择“Make Custom Style(class)”的“Type”类型定义一个自己偏好的CSS控制。如果想更改页面中某一元素的属性,选中它然后右键单击“CSS Styles”面板中“Apply Styles”中刚才定义的CSS,执行“Apply”命令就可以了(如图2)。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  统一控制超级链接

  超级链接也是网页中经常使用的,而网页的链接色默认都是蓝色,虽然可以更改,但单一色彩在不同背景色的网页上显示就不是那么奏效了,我们来看一下如何用CSS控制网页实现不同的个性链接颜色。在“New Style”对话框中,选择“Use CSS Selector”的“Type”类型,在“Selector”下拉框中会列出“a:link(链接属性)”、“a:hover(鼠标移动到链接上的属性)”、“a:visited(链接被访问后属性)”、“a:active(链接焦点状态下的属性)”4个选项(如图3),这4个选项的设置会控制网页中所有的链接的属性,我们可以分别定义这4个属性,然后添加到“CSS Style”面板中与默认设置不同的CSS控制中,再将其“Apply”到需要改变的链接上就实现了。如果将“Hover”的字体设置的比“Link”稍微大一点,就会出现鼠标移动到链接上时字体变大的效果,试试看是不是很奇妙!

  名词解释:CSS即层叠样式表(Cascading Style Sheet)是在网页制作过程中普遍用到的技术。采用了CSS技术控制的网页,设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。Dreamweaver MX推出后,其改进的CSS渲染和设计工具、通过增强CSS面板清晰显示内、外部定义的样式,让用户构建出符合最新CSS标准的站点。

展开更多 50%)
分享

猜你喜欢

运筹帷幄 用CSS控制网站总“队形”

Web开发
运筹帷幄 用CSS控制网站总“队形”

运筹帷幄 十条极简风格照片秘籍

摄影 人像摄影 静物摄影
运筹帷幄 十条极简风格照片秘籍

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

《航海大时代》要塞战场兵法 运筹帷幄千里之外

手机游戏 IOS
《航海大时代》要塞战场兵法 运筹帷幄千里之外

《新仙剑奇侠传》运筹帷幄之中 卡牌分类攻略

手机游戏
《新仙剑奇侠传》运筹帷幄之中 卡牌分类攻略

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用CSS巧控制段落缩进

Html CSS布局 Div+CSS XHTML
用CSS巧控制段落缩进

用CSS控制网页总体风格

Html CSS布局 Div+CSS XHTML
用CSS控制网页总体风格

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Java入门-关于字符串分割的两种方法

Java入门-关于字符串分割的两种方法

CSS层叠样式的主次顺序

CSS层叠样式的主次顺序
下拉加载更多内容 ↓