CSS样式初始化

CSS/设计
558
0
0
2022-03-27
标签   Css基础

CSS样式初始化

1.CSS样式初始化

不同的浏览器对有些HTML标签属性的默认值是不同的,为消除这种差异,需要对CSS进行初始化,即通过设置样式及其属性值,替代浏览器默认的属性值。

2.京东首页CSS初始化

(1)CSS初始化样式引入方式

采用引入外部样式表的方式进行CSS初始化

CSS样式初始化

CSS样式初始化

(2)相关代码解读

/* 京东CSS初始化 */ 
/* *为通配符,表示html所有标签 */ 
* {
  margin: 0; /* 标签外边距为0*/ 
  padding: 0; /* 标签内边距为0*/ 
}
 /* em、i表示斜体标签 */ 
em,
i {
  font-style: normal; /* 表示标签中内容不以斜体表示*/ 
}
/* li 表示列表标签 */ 
 li {
  list-style: none; /* 表示去掉列表的样式,如前面圆点等*/ 
}
/* img 表示图片标签 */ 
img {
  border: 0; /* 以下两句表示 图片与同级别行内元素middle对齐*/ 
  vertical-align: middle;
}
/* button 表示按钮标签 */ 
button {
  cursor: pointer; /* 表示鼠标样式 小手 */ 
}
/* a 表示超链接标签 */ 
a {
  color: #666;
  text-decoration: none; /* 表示去掉超链接下划线 */ 
}
 /* a:hover 表示a标签的动态伪类选择器 */ 
a:hover {
  color: #c81623; /* 表示当鼠标悬停在超链接上时,自体变为红色 */ 
}
 /* button、input表示按钮标签、表单输入标签 */ 
button,
 input {
/* 设置默认字体,包括unicode编码的字体 */ 
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
"\5B8B\4F53", sans-serif;
}
 /* body 表示body标签*/ 
body {
  /* css3属性(-webkit-font-smoothing)字体抗锯齿渲染,字体更为平滑 */ 
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial,
  Hiragino Sans GB, "\5B8B\4F53", sans-serif;
  color: #666;
}
/* 表示当class属性的值包含hide、none时的样式 */ 
.hide,
.none {
  display: none; /* 表示隐藏元素,且该元素空间可以被其他元素使用*/ 
}
/* 表示伪元素选择器 用来清除浮动*/ 
.clearfix:after {
  visibility: hidden; /* 为保证兼容性 必要的固定设置*/ 
  clear: both; /* 清除浮动 必要的固定设置*/ 
  display: block; /* 清除浮 必要的动固定设置*/ 
  content: "."; /* 清除浮动 必要的固定设置*/ 
  height: 0; /* 可选的固定设置*/ 
}
.clearfix {
  /* 这是针对于IE6/7的,因为IE6/7不支持:after伪类,
  让IE6/7的元素可以清除浮动来包裹内部元素。*/ 
  *zoom: 1;
}

3.淘宝首页CSS初始化

(1)CSS初始化样式引入方式

采用内部样式的方式进行CSS初始化

CSS样式初始化

(2)相关代码解读

淘宝在进行CSS样式初始化时,并没有采用通配符*的方式设置标签的内外边距,而是将具体的标签进行并集罗列。根据网上资料,通配符*,容易书写,但是在大型网站中,会初始化所有标签,会加大网站负荷,使得网站加载变慢。当然京东应该是做了优化的,不然网站体验也会很差。

/* 淘宝CSS初始化 */ 
/* 设置标签的内外边距为0 */ 
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}
/* 设置字体大小、行高及默认字体 */ 
body,
button,
input,
select,
textarea {
  font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53",sans-serif;
}
/* 字体大小同body中设置的一样 */ 
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}
/* 字体不采用斜体展示 */ 
address,
cite,
dfn,
em,
var {
  font-style: normal;
}
/* 设置默认字体 */ 
code,
kbd,
pre,
samp {
  font-family: courier new, courier, monospace;
}
/* 设置标签为small的字体大小 */ 
small {
  font-size: 12px;
}
/* 去掉字体列表样式 */ 
ol,
ul {
  list-style: none;
}
/* 去掉a标签下划线 */ 
a {
  text-decoration: none;
}
/* 设置动态伪类选择器,鼠标悬停其上时显示下划线 */ 
a:hover {
  text-decoration: underline;
}
/* 设置垂直对齐方式,在右上角 */ 
sup {
  vertical-align: text-top;
}
/* 设置垂直对齐方式,在右下角 */ 
sub {
  vertical-align: text-bottom;
}
legend {
  color: #000;
}
fieldset,
img {
  border: 0;
}
button,
input,
select,
textarea {
  font-size: 100%;
}
button {
  border-radius: 0;
}
 /* 设置表格相邻边框融合 */ 
table {
  border-collapse: collapse;
  border-spacing: 0;
}

4.寻找CSS样式初始化代码技巧

通常在CSS初始化代码中包含padding:0和margin:0的代码,表示将内外边距设置为0;当找到该代码时,一般是找到了CSS样式初始化的代码开头。

关于伪类和伪元素参见:Web前端开发-CSS中伪类和伪元素

关于垂直对齐方式参见:CSS中直角三角形、常规页码、垂直对齐方式设置

关于鼠标样式参见:CSS中鼠标样式、文本框轮廓线、文本溢出等

关于CSS中选择器类型参见:Web前端开发-CSS入门干货01Web前端开发-CSS入门干货02

关于CSS中浮动和清除浮动参见:Web前端开发-CSS布局-浮动和定位-入门干货