网页设计中我们通常需要统一网页的整体风格,统一的风格大部分涉及到网页中文字属性、网页背景色以及链接文字属性等等,如果我们应用CSS来控制这些属性,会大大提高网页设计速度,更加统一网页总体效果。为了达到修改整个网页的目的,我们需要编辑一个外挂式的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)。统一控制超级链接超级链接也是网页中经常使用的,而网页的链接色默认都是蓝色,虽然可以更改,但单一色彩在不同背景色的网页上显示就不是那么奏效了,我们来看一下如何用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标准的站点。
运筹帷幄 用CSS控制网站总“队形”
来源:互联网 发布日期:2016-03-25 16:23:43 浏览:1535次
相关内容
AiLab云推荐
最新资讯
- 机器人实现全自动显微注射 将提高大规模遗传学实验能力
- 星尘智能发布AI机器人,可以叠衣、炒菜、叠杯,预计今年商业化
- 全球首台商用协作机器人制造商:拒绝价格战,大力引入人工智能
- 马斯克:可能在明年年底前出售特斯拉人形机器人 Optimus
- 苹果中国工厂回收机器人首次露面,规避了哪些电子回收弊端?
- 特斯拉或将在2025年底前销售人形机器人Optimus,机器人100ETF(159530)一度涨超1%
- 马斯克:“擎天柱”机器人仍在试验阶段 最早明年年底上市
- 马斯克称最快明年底前开卖人形机器人Optimus!网友:真能那么快吗?
- 外媒:马斯克透露,“擎天柱”机器人仍在试验阶段,最早明年年底上市
- 投资300亿!机器人产业爆发:几大趋势
本月热点
- 人形机器人崛起:OpenAI、微软洽谈投资Figure AI,望募资5亿美元
- OpenAI 悄悄升级 ChatGPT:可在对话中调用不同的自定义聊天机器人 | 懂点AI
- Limbic开发AI心理咨询机器人,帮用户避免与人类交流可能引发的焦虑感
- 麒麟信安入股超能机器人 或尝试打开新业绩增长点?公司最新回应来了
- 灿瑞科技:已有产品应用于消费级机器人领域
- 英伟达官宣AI聊天机器人,本地RTX显卡运行,这是要挑战OpenAI?
- 人形机器人企业暂时得救了
- Meta联合研发家务机器人,能在零人力帮助下自主整理房间
- 端到端纯视觉!OpenAI押注的人形机器人献艺拜年了
- 波士顿动力 Atlas 机器人能力升级,可灵活搬运汽车零件
热门排行
-
斯坦福家政机器人火了但又翻车了!多数是真人操控编排的
阅读量:167404
-
斯坦福团队发布新机器人Mobile Aloha,人形机器人将迎来产业元年?
阅读量:165704
-
我的同事是 GPT-4 机器人,我们在 Slack 上一起工作
阅读量:162431
-
谷歌起草“机器人宪法”,以确保 AI 机器人不会伤害人类
阅读量:160333
-
人形机器人崛起:OpenAI、微软洽谈投资Figure AI,望募资5亿美元
阅读量:104310
-
大疆回应停售青少年教育产品:将资源聚焦在大学生高校机器人赛事
阅读量:68788