给大家带来CSS教程:视觉语义不即是基于体现的类
使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。破洛洛文章简介:HTML和CSS中的视觉语义.
你和用户之间的网站仓库(简化版)
在TXJS年夜会的最初一天,一个开辟者问我:
面向工具的CSS没有给你留下一年夜堆基于体现的class名?
收集仓库中的每层都有它本人的布局。你不会希冀将数据库架构用于构建PHP两头件,人们关于HTML和CSS的希冀是一样一样的。HTML必要用一种能代表数据或内容的成心义的器材来誊写,也就是我所谓的代码语义。HTML中的代码语义关于可移植性和易用性都是极其主要的。另外一方面,CSS在仓库中的确是一个自力的层,它必要能反应页面的视觉语义的属于本人的系统布局。
视觉语义形貌在页面计划中的全体反复形式。他们刻画了你的网站的基础构成部分。现实上,他们常常只必要少量的修正就可以轻松的完成跨站点使用。视觉语义,纷歧定要绑缚到HTML语义,由于你必要一个切合每层仓库的详细需求的架构。
从款式中剥离模板布局
一样,很多PHP开辟职员想要婚配CSS和HTML架构到PHP。也许实验将你最熟习的某一层笼统使用到他们你会以为更具应战?对这一点儿我感应很内疚。在我在Facebook的时分,我但愿PHP层能婚配CSS层。还好Facebook有一些伶俐的开辟者勒住了并帮我促进了了解。
倔强的把CSS和HTML塞到PHP内里能够避免代码太单调(DRY)并终极招致代码痴肥,由于的CSS和HTML必要比PHP更仔细的工具布局。现实上,PHP的模板不是生成符合的,由于每一个模板包括了很多分歧的HTML,和以分歧的体例相分离的CSS工具。
视觉语义!=基于体现的类
必要注重的主要的是,我不是倡议相似“giantBlueHeading”的类名。类名必要体现你要界说的工具布局,而不是特定的视觉类的名。比方,我常常选择好记的对照笼统的类名,如“media”很简单记着。media块由一个流动宽度的图片或flash和一些笔墨或其他内容组合。
media块可用于很多分歧的情形,比方,组合一个图标和一个链接或团体材料图片和用户名。详细用例是从工具布局平分离出来的。HTML能够被看做是CSS工具的实例。
该media块的代码,和很多其他基础的工具都能够在OOCSS开源项目中找到。
PS:假如你对OOCSS不太熟习,能够浏览一下OOCSS的FAQ,和99CSS对该FAQ的中文翻译
本文译自:VisualSemanticsinHTMLandCSS
原NicoleSullivan
中文原文:HTML和CSS中的视觉语义
请尊敬版权,转载请说明出处,多谢!</p>
在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。 俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。 以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
页:
[1]