`
steely816
  • 浏览: 130601 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

HTML模板和CSS基准样式(二)

阅读更多

今天,我要写的是CSS文件的模块化。

如果你看过CSS文件,就会知道很难看懂它。每个CSS文件有 许多行,每一行就是一条命令,可以放在文件的任何位置,都能够同样生效,而且后面的行随时可以覆盖前面的行的设置。所以,阅读CSS文件就好像猜谜一样, 必须努力将不同的线索拼起来,令人非常痛苦,这直接导致了日后难于维护和修改。

考虑到这一点,很早就有人提出了CSS文件的模块化,就是将相关的设置都放在一起。一般来说,CSS中的设置可以分成下面几个模块:

* typography(字体)

* colour(颜色)

* link(链接)

* forms(表单)

* layout(布局)

* navigation(导航)

这些模块当然不是固定不变的,你可以根据自己的需要进行增删。有时候,单单一个模块中就有许多行,这时候,你就可以把它独立出来,作为一个单独的CSS子文件,然后在父文件中进行调用。

比如,昨天的HTML模板中,调用CSS文件是这样写的:

@import url(style.css);

在这里,style.css就是父文件,然后我们在其中调用子文件:

/* typography styles */
@import url("typo.css");

/* form elements */
@import url("forms.css");

/* main layout */
@import url("layout.css");

/* navigation */
@import url("horizontal-nav.css");

/* colour scheme */
@import url("skin.css");

除了上面这些模块以外,CSS中有些设置是全局性的,主要用于覆盖浏览器的默认样式,这被称作CSS基准样式。我们可以把基准样式单独做成一个base.css,将它也加入主样式表。

/* basic styling */
@import url("base.css");

网上有很多别人已经写好的CSS基准样式,我下面采用的是Crucial Web Hosting 提供的一份,我觉得写得比较规范,内容也很充分。

/***** Global Settings *****/

html, body {
border:0;
margin:0;
padding:0;
}

body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}

/***** Headings *****/

h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}

h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}

h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}

h3 {
font-size:1em;
font-weight:bold;
}

/***** Common Formatting *****/

p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}

ul, ol {
padding:0 0 1.25em 2.5em;
}

blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}

small {
font-size:0.85em;
}

img {
border:0;
}

sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}

sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}

acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}

/***** Links *****/

a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}

/***** Forms *****/

form {
margin:0;
padding:0;
display:inline;
}

input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}

textarea {
width:100%;
line-height:1.25;
}

label {
cursor:pointer;
}

/***** Tables *****/

table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}

table tr td {
padding:2px;
}

/***** Wrapper *****/

#wrap {
width:960px;
margin:0 auto;
}

/***** Global Classes *****/

.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }

.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }

.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }

.wrap { width:960px;margin:0 auto; }

.img-left { float:left;margin:4px 10px 4px 0; }
.img-right { float:right;margin:4px 0 4px 10px; }

.nopadding { padding:0; }
.noindent { margin-left:0;padding-left:0; }
.nobullet { list-style:none;list-style-image:none; }

有了HTML模板和CSS基准样式以后,最后就剩下一个页面布局的问题了,这将是我明天要写的内容。

分享到:
评论

相关推荐

    HTML5_CSS3多颜色柱状图表 带基准数据线.zip

    在这个“HTML5_CSS3多颜色柱状图表 带基准数据线”的压缩包中,我们可以深入探讨如何使用这两种技术来创建具有多颜色柱状图的可视化数据展示,并且带有基准数据线,这是一种在数据分析和信息传达中非常常见的图表...

    480_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码 (2).zip

    标题中的“480_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码 (2).zip”表明这是一个适用于手机和电脑的HTML网页源码压缩包,其中包含了H5(HTML5)模板,且这些模板是自适应和响应式的,意味着它们...

    trafford-website-style-baseline:Trafford Council 网站的 CSSSASS 样式

    特拉福德网站风格基准 用于 Trafford Council 网页和附属网站的基线样式。 Trafford 委员会基于 CMS 的新网站和设计于 2013 年 10 月上线。该设计最初是使用平面 css ... main:标准的 html 模板、css 和 JavaScript。

    PC移动兼容页面模板

    6. **栅格布局**:栅格系统(Grid Layout)是CSS3的另一个重要工具,允许开发者创建二维布局,其中单元格可以按行和列分布。使用`grid-template-columns`和`grid-template-rows`属性,可以定义适应性网格,适合各种...

    前端响应式网站开发模板

    模板可能包含HTML结构示例、CSS样式表、JavaScript代码和Bootstrap的定制版本,所有这些都是为了实现灵活、可扩展和兼容性强的前端解决方案。通过深入理解并运用这些技术,开发者能够创建出既美观又实用的响应式网站...

    企业主机模板

    英文模板则意味着该模板特别适合英文内容的展示,考虑到国际化的使用场景,其设计风格、排版和字体选择都是以英文阅读习惯为基准的。这对于面向全球市场或者英语为主要交流语言的企业来说,能够提供更佳的用户体验。...

    一款非常酷的CSS3 3D左右滑动开关按钮.zip

    总的来说,这个压缩包提供了一个利用CSS3 3D效果实现的滑动开关按钮模板,可以用于提升网页的用户体验和视觉吸引力。学习和理解其中的CSS3技术,对于网页设计师和前端开发者来说,不仅可以提升他们的技能,也能为...

    T型摄像风格的个人博客模板下载.zip

    HTML5模版则是指以HTML5技术为基准预设的网页模板,用户无需从零开始编写代码,只需修改模板中的内容和样式,就可以快速地搭建起一个功能完备的网站。网站模版则更加广泛,它可以是基于任何技术创建的网站预设框架。...

    awesome-css-in-js:JS文章中的Aosome CSS CSS教程视频基准比较

    "CSS教程视频基准比较"意味着这个资源可能包含了多个教程视频,通过比较来展示不同方法的性能和优缺点。 【描述解析】 描述与标题相同,这表明资源的主要焦点是CSS在JavaScript中的应用,并且可能提供了视频教程,...

    响应式自媒体运营培训教程类网站模板HTML5新闻博客网站源码资源站源码支持h5.txt

    综上所述,“响应式自媒体运营培训教程类网站模板HTML5新闻博客网站源码资源站源码支持h5”这款网站模板集成了先进的HTML5与CSS3技术,并采用了灵活的响应式设计理念,能够在不同终端设备上实现良好的兼容性和用户...

    网站前端网页源码模板 (470).zip

    综合以上,我们可以看出这个压缩包提供了构建一个基本网站所需的要素,包括结构(HTML)、样式(CSS)和视觉元素(图像)。开发者可以根据这些资源来定制自己的网站,也可以学习和理解网页设计的基本原理和技术。...

    HTML5中文参考手册

    - **功能**:定义文档中所有文本的基本字体,但在HTML5中已被废弃,推荐使用CSS样式。 - **版本**:仅在HTML4中支持。 ##### 15. `<bdo>` - **功能**:定义文本显示的方向,例如从右向左。 - **版本**:自HTML4...

    前端H5框架自适应模板

    5. **前端框架**:如Bootstrap、Vue.js、React或Angular等,提供了预设的样式、组件和工具,加速开发进程。这些框架往往包含响应式网格系统、导航、模态框、表单控件等,使得开发者能够快速构建符合现代标准的自适应...

    HTML5实现好看的别墅估价公司网站源码.zip

    源码中可能包括了前端设计的HTML文件、CSS样式表和JavaScript脚本。这些源文件为开发者提供了一个可定制的模板,使得他们可以根据自己的需求来调整网站的结构、外观和功能。 在文件名称列表中,我们看到只有一个...

    前端html笔记

    它通过一系列的元素来组织内容,如文本、图片、视频等,使得内容能以结构化的方式展现,并且可以通过CSS和JavaScript进一步美化与增强交互性。 #### HTML的基础组成部分 1. **注释** - **语法**:`<!---->` - **...

    ducking-octo-wallhack:日常模板

    "ducking-octo-wallhack" 是一个项目模板,主要用于日常开发工作中,它可能是用于快速启动新项目或者作为代码组织的基准。从标题来看,这个模板可能包含了多种实用功能,帮助开发者更高效地进行日常工作。描述中提到...

    Bootstrap开发指南英语文字版

    - **全局样式**:覆盖了浏览器的默认样式,为页面提供了一个统一的基准。 - **默认的栅格系统**:Bootstrap的栅格系统基于12列布局,允许开发者创建复杂的布局结构。 - **基本栅格HTML**:演示如何使用栅格类将页面...

    php ci框架中加载css和js文件失败的解决方法

    2. 在HTML模板中,使用base_url()函数来修改引用JS和CSS文件的路径: ```html <!-- 在HTML头部使用base标签指定基础路径 --> (); ?>"> <!-- 在引用CSS或JS文件时使用base_url()函数 --> (); ?>resource/aaa.js...

    TIBCO Jaspersoft® Studio 7.1官方用户指导学习教程

    同时,样式和模板的定制也是关键,用户可以通过CSS样式表控制报表的外观。 在预览阶段,你可以实时查看报表效果,调整布局和样式,确保满足需求。Jaspersoft Studio还支持导出报表为多种格式,如PDF、HTML、Excel等...

    js鼠标滚动图片等比例缩放代码.zip

    这个压缩包可能包含一个或多个文件,如JavaScript源代码文件、HTML模板、CSS样式表,甚至可能有示例图片。在网页中,当用户滚动鼠标时,图片能够根据预设规则等比例缩放,为用户提供一种互动且视觉上吸引人的体验。 ...

Global site tag (gtag.js) - Google Analytics