web前端入门到实战:css样式初始化

为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候出现的样式不兼容问题,都可以通过css初始化代码来解决。

1.最耗资源的,最简单的

* { padding: 0; margin: 0; border: 0; } 

2.选择性初始化举例(综合)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button
form,fieldset,input,textarea,p,blockquote,th,td {
  padding: 0;
  margin: 0;
}
/* 酌情修改 */
body {
    background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";
}

/* 短引用的内容可取值:‘‘或"" */
q:before,q:after {content:”;}  

/* 缩写,图片等无边框 */
fieldset,img,abbr,acronym {border: 0 none;}
abbr,acronym {font-variant: normal;}
legend {color:#000;}

/* 清除特殊标记的字体和字号 */
address,caption,cite,code,dfn,em,strong,th,var {
  font-weight: normal;
  font-style: normal;
}

/* 上下标 */
sup {vertical-align: text-top;}
sub {vertical-align: text-bottom;}

/* 设置表格的边框被合并为一个单一的边框, 指定分隔边框模型中单元格边界之间的距离为0*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}   

/* 表格标题及内容居左显示 */
caption,th {text-align: left;}
input,img,select {vertical-align:middle;}

/* 清除列表样式 */
ol,ul {list-style: none;}  

/* 输入控件字体 */
input,button,textarea,select,optgroup,option {
    font-family:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
}

/* 标题元素样式清除 */
h1,h2,h3,h4,h5,h6 {
  font-weight: normal;
  font-size: 100%;
}   

/* 链接样式,颜色可酌情修改 */
del,ins,a {text-decoration:none;}
a:link {color:#009;}
a:visited {color:#800080;}
a:hover,a:active,a:focus {color:#c00; text-decoration:underline;} 

/* 鼠标样式 */
input[type="submit"] {cursor: pointer;}
button {cursor: pointer;}
input::-moz-focus-inner { border: 0; padding: 0;}

.clear {clear:both;}
web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)

3.sina的

/* 全局样式 */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{
    margin:0;padding:0;border:0;
}
body{
    background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";
}
ul,ol{
    list-style-type:none;
}
select,input,img,select{
    vertical-align:middle;
}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

4.yahoo的

html {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0 none;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}
li {
    list-style: none outside none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
q:before, q:after {
    content: "";
}
abbr, acronym {
    border: 0 none;
    font-variant: normal;
}
sup {
    vertical-align: text-top;
}
sub {
    vertical-align: text-bottom;
}
input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}
input, textarea, select {
}
legend {
    color: #000000;
}
body {
    font: 13px/1.231 arial,helvetica,clean,sans-serif;
}
select, input, button, textarea {
    font: 99% arial,helvetica,clean,sans-serif;
}
table {
    font-size: inherit;
}
pre, code, kbd, samp, tt {
    font-family: monospace;
    line-height: 100%;
}
a {
    text-decoration: none;
}
a:hover, a:focus {
    text-decoration: underline;
}
strong {
    font-weight: bold;
}
input[type="submit"] {
    cursor: pointer;
}
button {
    cursor: pointer;
}

5.博客园的

/*version: 2.7.0*/
html,body{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{
    margin:0;padding:0;
}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{
    font-style:inherit;font-weight:inherit;
}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{    font-size:100%;font-weight:normal;}
q:before,q:after{content:‘‘;}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{
    font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;
}
input,button,textarea,select{*font-size:100%;}
.clear{clear:both;}
input::-moz-focus-inner{ border: 0;padding: 0;}

/*added*/
input[type=button],input[type=submit] {-webkit-appearance: button;}

normalize:

normalize.css最大特点:保留有用的浏览器默认样式,而不是一概将它们“抹杀”,对浏览器很友好

vue框架中如何使用

NPM
npm install --save normalize.css

mianimport ‘normalize.css‘  如果报错
npm install css-loader style-loader
web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)

原文地址:https://blog.51cto.com/14592820/2448608

时间: 2024-10-11 23:37:53

web前端入门到实战:css样式初始化的相关文章

web前端入门到实战:css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

  H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现,但必要随意添加或添加过度. 在Web前端开发中,经常要使用H1标签对关键字进行优化,可是如果是一行文字中的某个词加上了H1标记,就会换行.可以使用下面的方法,H标签就不会强制换行了.Css控制为一行文字中某个字加上<h2>标签不换行,display:inline; 解释为:内联对象的默认值.用该值

web前端入门到实战:css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交.就会触发浏览器自动填充表单.比如chrome自动填充后,淡慌色输入框代替了背景样式,看起来有些怪异. 那么如何通过css实现取消浏览器自动填充表单的默认样式呢? 解决方法一: 当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的慌色背景:如: web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新

web前端入门到实战:CSS的文本格式化样式总汇

长度单位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 300px; height: 300px; background-color: red; } .box1{ font-size: 20px; /*em数值根据当前元

web前端入门到实战:css动画优雅降级的简单总结

CSS动画优雅降级的简单总结 CSS动画相关属性 transition:兼容性 transform 3D:兼容性 transform 2D:兼容性 animation: 可以看到动画在IE8(这里主要讨论IE)及以下完全不支持,IE9由于只支持transform(非transform3d) 优雅降级 <div class="a"></div> CSS: web前端开发学习Q-q-u-n: ××× ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(

web前端入门到实战:CSS 、JS实现浪漫流星雨动画

1,效果图 2,源码 HTML < body > < div class = "container" > < div id = "mask" > </ div > < div id = "sky" > </ div > < div id = "moon" > </ div > < div id = "stars&qu

web前端入门到实战:CSS自定义属性+CSS Grid网格实现超级的布局能力

最近我还注意到的一件事就是CSS自定义属性.CSS自定义属性的工作方式有点像SASS和其他预处理器中的变量,主要的区别在于其它方法都是在浏览器中编译后生成,还是原本的CSS写法.CSS自定义属性是真正的动态变量,可以在样式表中或使用javascript即时更新,这使得它们具有更多的可能性.如果你熟悉JavaScript,我喜欢把预处理器变量和CSS自定义属性之间的区别想象成与const和let之间的区别相似--它们都有不同的用途. CSS自定义属性可以方便的实现很多功能(例如主题变化).最近我一

web前端入门到实战:CSS阴影效果的比较 drop-Shadow与box-Shadow

drop-shadow与box-shadow都是阴影效果(光晕效果)的css属性,二者最大的不同点在于:box-shadow只能制作矩形的阴影,而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影.底下是二个css属性的用法: .drop-shadow { -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7)); filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.

web前端入门到实战:css骚操作之表单验证

效果图 原理 表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号.邮箱..):valid伪类,可以匹配通过pattern验证的元素:invalid伪类则相反,可以匹配未通过pattern验证的元素:于是就可以随便搞啦,上面的效果图只是做一些简单的效果,更多效果以及限制大家就发挥自己的想象力咯: html 布局很简单,input跟button是兄弟节点的关系,required属性是必填的意思,也就是输入的内容必须要验证通过: <section class="containe