重置样式

首先写一个项目的时候需要有一个重置全局的样式,为了弥补各种浏览器的展现不同

(1) 首先使用元素标签将每个元素的margin和padding的值改为0,让页面不会因浏览器默认设置不同而改变页边距和字边距;

(2) 设置<body>元素的字体颜色,字号大小等,可以规范整个项目网站的样式风格;

(3) 设置其他元素的特定样式;

 1 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
 2     margin: 0;padding: 0;
 3 }
 4 body,button,input,select,textarea{
 5     font:12px/1.5 tahoma,arial,\5b8b\4f53;
 6 }
 7 h1,h2,h3,h4,h5,h6{
 8     font-size: 100%;
 9 }
10 address,cite,dfn,em,var{
11     font-style: normal;
12 }
13 code,kbd,pre,samp{
14     font-family: courier new,courier,monospace;
15 }
16 small{
17     font-size: 12px;
18 }
19 ul,ol{
20     list-style: none;
21 }
22 a{
23     text-decoration: none;
24 }
25 a:hover{
26     text-decoration: underline;
27 }
28 sup{
29     vertical-align: text-top;
30 }
31 sub{
32     vertical-align: text-bottom;
33 }
34 legend{
35     color:#000;
36 }
37 fieldset,img{
38     border: 0;
39 }
40 button,input,select,textarea{
41     font-size: 100%;
42 }
43 table{
44     border-collapse: collapse;//如果可能边框会合并为一个单一的边框。会忽略border-spacing和empty-cell属性
45 }
46 .clear{
47     clear: both;
48     float: none;
49     height: 0;
50     overflow: hidden;
51 }
52 html .hide{
53     display: none;
54 }

注释:

第五行

这是css中font的简写写法

字体: 字体大小/字体行高 字体格式

相当于

body,html,input
{
font: 12px;
line-height: 1.5;
font-family: tahoma,arial,\5b8b\4f53,sans-serif;

//tahoma 大河马字体,window英文默认字形;

//arial 是一套随同多套微软应用软件所分发的无衬线体TrueType字

//sans-serif    表示是无衬线字体,是一种通用字体族。

//"\5b8b\4f53″ 就是 “宋体”。用 unicode 表示,不用 SimSun, 是因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法。注释乱码:强烈建议不要用中文注释。font-family:’宋体’
}

一些中文名字的unicode

新细明体 \65B0\7EC6\660E\4F53
细明体 \7EC6\660E\4F53
标楷体 \6807\6977\4F53
黑体 \9ED1\4F53
宋体 \5B8B\4F53
新宋体 \65B0\5B8B\4F53
仿宋 \4EFF\5B8B
楷体 \6977\4F53
仿宋_GB2312 \4EFF\5B8B_GB2312
楷体_GB2312 \6977\4F53_GB2312
微软正黑体 \5FAE\x8F6F\6B63\9ED1\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1

时间: 2024-10-09 22:00:43

重置样式的相关文章

CSS重置样式表

一.为什么需要重置样式表 即使不写CSS样式,HTML标签在浏览器中也有样式,这些样式来自浏览器本身.但问题是,不同浏览器默认样式可能不同.CSS重置样式表就是为了解决这个问题. 二.常用的重置样式表 (1)简单暴力型 只有一行: *{margin:0; padding:0;} 通配符"*"匹配了所有的标签,通常认为性能不好. (2)归零型 (几乎)全部将标签样式清零.如YUI(http://yuilibrary.com/)的重置样式表. (3)保留基础样式型 并不是将所有标签的默认样

css reset重置样式有那么重要吗?

在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下: @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp

Normalize.css – HTML5-ready 的css重置样式集

Normalize.css 是一个可定制的 css文件,使浏览器呈现的所有元素,更一致和符合现代标准.它正是针对只需要统一的元素样式.该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样式.这是一个现代的,HTML5-ready 的css重置样式集. Normalize.css 是 HTML5-ready 的css重置样式集 官网网站:http://www.yyyweb.com/demo/inner-show/normalize.html

CSS工具:重置样式到底该怎样写?

由于各个浏览器用于不同的默认样式,比如标题字体大小和外边距,行高等.为了确保在各种浏览器下,文档表现一致,使用重置样式能让文档跨浏览器下表现一致,效率也更高,重置样式就是覆盖不同浏览器默认样式,从而保证浏览器表现一致.同时,对于重置样式,也有颇多争论,这些问题的本质在于没有根据实际情况而选择适合自己的重置样式,和充值样式的滥用.没有好不好,只有适不适合,用户体验至上,简单是最好的. 全局重置 *{ margin: 0; padding: 0; }

两种不同的重置样式方法(normalize.css)

重置样式非常多,凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们.他们是盲目的在做还是知道为什么这么做呢?原因是不同的浏览器对一些元素有不同的默认样式,如果你不处理,在不同的浏览器下会存在必要的风险,或者更有戏剧性的性发生. * { padding: 0; margin: 0; } 这是最普遍最简单的CSS重设,将所有元素的padding和margin值都设为0,可以避免一些浏览器在理解这两个属性默认值上的”分歧”. /*! normalize.css v4.1.1 | MI

页面重置样式reset.css

我把经常用到的一些页面重置样式归类到了一个.css文件中,这样可以减少代码冗余.当然还有其他的很多用处,比如h1~h5的样式全部统一的话,下面写东西很清晰很多. @charset 'utf-8'; html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;} /*这里不要用通配符*{margin:0;padding:0;}因为会遍

两个div之间有空隙怎么解决(重置样式)

/* 盒模型中规定了垂直边界重叠,层之间有默认margin值,需要重置css样式 来源网址:http://meyerweb.com/eric/tools/css/reset/ css样式代码如下: */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,

移动端重构系列3——重置样式

移动端重构系列-mobile 本系列文章,如果没有特别说明,兼容安卓4.0.4+,测试demo 基于Normalize.css,根据目前我们大家的使用习惯进行了一些清零及移动端的特点添加一些基础样式. html { font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-si

移动前端一些重置样式模板和标签入门

一.meta标签相关知识 1.移动端页面设置视口宽度等于设备宽度,并禁止缩放. <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 2.移动端页面设置视口宽度等于定宽(如640px),并禁止缩放,常用于微信浏览器页面. <meta name="