精华内容
下载资源
问答
  • 浏览器默认样式

    2020-02-25 17:10:27
    1、设置浏览器默认样式的原因 由于同一个标签在不同浏览器中有不同的默认样式,为了让样式在所有浏览器中统一,并希望页面更加符合美观简洁和将一些常用样式加入到自定义样式中去使用我们应该做浏览器默默人样式的...

    1、设置浏览器默认样式的原因

    由于同一个标签在不同浏览器中有不同的默认样式,为了让样式在所有浏览器中统一,并希望页面更加符合美观简洁和将一些常用样式加入到自定义样式中去使用我们应该做浏览器默默人样式的初始化

    2、浏览器默认样式的检查方法:

    可以用border+浏览器开发者工具来查看是否有默认样式

    3、常见浏览器默认样式

    1、文字斜体加粗字体样式:font-weight:normal;font-style:normal;
    2、清除body、ul等区块元素的内填充和外边距:margin:0;padding:0;
    3、清除li的默认样式:list-style:none;
    4、清除img在ie下边框以及img与文字的对齐方式为居中:border:none;vertical-align:middle;
    5、a标签和其状态性伪类的默认样式:

    a{textdecoration:none;color:#000;border:0;
    
    

    a:link{text-decoration:none; color:#000;} //有链接属性的并且未访问过的 – href 属性 a:visited{text-decoration:none; color:#000;} //链接地址被访问过 a:hover{text-decoration:none; color:#000;}( //鼠标移动到DOM节点上面 a:active{text-decoration:none; color:#000;} //鼠标点击瞬间
    6、为所有元素*设置盒模型的样式和字体颜色:box-sizing:border-box;color:#000;
    7、为body设置初始样式:

     body{
            font-size:12px;
            font-family:Arial,Verdana,Tahoma,"微软雅黑","黑体";
            line-height:120%;
            background:#fff;
            margin:0;
            overflow-x:hidden;
        }
    

    4、附加

    1、改变元素透明度:

    opacity:0.9; //赋值0-1,透明到完全不透明
    filter:alpha(opacity=90); //为了兼容低版本ie浏览器的滤镜
    

    2、css3的新的赋值颜色的方法:rgba

     rgba(r,g,b,a); //r、g、b依然是光的三原色,a是alpha,代表透明度0-1 
    

    注意:rgba只能做有颜色地方的半透明,而opacity可以为整个元素设置半透明
    3、隐藏元素:

      visibility:hidden/visible; //隐藏元素但是依然占位
        display:none/block; //隐藏元素但是不占位
    

    注意:虽然visibility:hidden的隐藏元素依然占位,但是它与透明度为0有区别,透明度为0的元素我们依然可以摸到,但是visibility:hidden的元素却无法摸得到
    4、overflow:溢出元素的部分如何显示

     overflow-x:; //水平方向溢出
        overflow-y:; //垂直方向溢出
        overflow:; //两个方向溢出
    

    值有5个:
    visible:默认值。溢出的内容不会被修剪,会呈现在元素框之外;
    hidden:溢出的内容会被修剪,并且其余内容是不可见的;(如上面的初始化默认样式中的overflow-x:hidden;,让body的内容在水平方向溢出时裁切,不显示滚动条)
    scroll:溢出的内容会被修剪,浏览器会显示滚动条以便查看其余的内容;
    auto:如果溢出的内容被修剪,则浏览器会显示滚动条以便查看其余的内容;
    inherit:规定应该从父元素继承 overflow 属性的值
    5、百分比单位的使用:
    我们在之前设置字体的行高等样式时,使用了百分,表示字体大小的百分之多少,除了这些地方以外,盒子模型也可以用百分比,子元素的百分比宽高是父元素宽高的百分比。但是子元素的padding和margin设置百分比时却不是对应父元素的内填充和外边距,而是父元素的宽(后面学习的left和top依然是父元素的宽高,需要注意)
    6、最大最小宽高:可以配合上面的百分比宽高一起使用,做一个变化带有范围的效果:max-width:;(最大宽)/min-width:;(最小宽)/max-height:;(最大高)/min-height:;(最小高)
    7、outline(轮廓线):它是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用,它不会占据空间,也不一定是矩形。可以按顺序设置如下属性:

       outline-color:; //轮廓线颜色
        outline-style:; //轮廓线样式
        outline-width:; //轮廓线宽度
        outline-offset:; //轮廓线扩张
    
    展开全文
  • 也许一个很漂亮的CSS样式表在一个浏览器上表现良好,在另外一个浏览器上即使是没有CSS Bug的情况也会变得结构混乱起来,我都是浏览器默认样式在作怪。 因此,我们在生成CSS样式规则的时候,一个必做的步骤就是重设...
  • 清除浏览器默认样式

    2019-07-16 18:13:00
    清除浏览器默认样式的原因 一、 某些标签的默认样式不符合我们的设计要求。比如说a标签,默认它是有一条下划线,并且字体颜色也让人觉得很难看,所以我们需要清除它默认的样式,同时根据要求给它重新添加自定义样式...

    清除浏览器默认样式的原因

    一、 某些标签的默认样式不符合我们的设计要求。比如说a标签,默认它是有一条下划线,并且字体颜色也让人觉得很难看,所以我们需要清除它默认的样式,同时根据要求给它重新添加自定义样式。如图是a标签的默认样式。

    二、各浏览器默认的样式各不同,所以会影响到我们的开发,因为在每次开发之前应该先对浏览器的默认样式进行一次清除,让每个浏览器保持一致的初始化样式。清除默认样式可以提高代码浏览器间的兼容性,同一个标签用在不同的浏览器中,默认样式可能不一样,比如说,行高在某个浏览器中是1,在另一个浏览器中可能是1.1,这样在布局的时候会得到两种不同的效果,从而带来兼容性问题。因此,统一清除标签的默认样式,再统一重新添加新的样式,就能避免这种问题。

    1.页边距
    IE默认为10px,通过body的margin属性设置
    FF默认为8px,通过body的padding属性设置
    要清除页边距一定要清除这两个属性值
    body {
        margin:0;
        padding:0;
    }
    
    2.段间距
    IE默认为19px,通过p的margin-top属性设置
    FF默认为1.12em,通过p的margin-bottom属性设
    p默认为块状显示,要清除段间距,一般可以设置
    p {
        margin-top:0;
        margin-bottom:0;
    }
    
    3.标题样式
    h1~h6默认加粗显示:font-weight:bold;。
    默认大小请参上表
    还有是这样的写的
    h1 {font-size:xx-large;}
    h2 {font-size:x-large;}
    h3 {font-size:large;}
    h4 {font-size:medium;}
    h5 {font-size:small;}
    h6 {font-size:x-small;}
    个大浏览器默认字体大小为16px,即等于medium,h1~h6元素默认以块状显示字体显示为粗体,
    要清除标题样式,一般可以设置
    hx {
        font-weight:normal;
        font-size:value;
    }
    
    4.列表样式
    IE默认为40px,通过ul、ol的margin属性设置
    FF默认为40px,通过ul、ol的padding属性设置
    dl无缩进,但起内部的说明元素dd默认缩进40px,而名称元素dt没有缩进。
    要清除列表样式,一般可以设置
    ul, ol, dd {
        list-style-type:none;/*清楚列表样式符*/
        margin-left:0;/*清楚IE左缩进*/
        padding-left:0;/*清楚非IE左缩进*/
    }
    
    5.元素居中
    IE默认为text-align:center;
    FF默认为margin-left:auto;margin-right:auto;
    
    6.超链接样式
    a 样式默认带有下划线,显示颜色为蓝色,被访问过的超链接变紫色,要清除链接样式,一般可以设置
    a {
        text-decoration:none;
        color:#colorname;
    }
    
    7 鼠标样式
    IE默认为cursor:hand;
    FF默认为cursor:pointer;。该声明在IE中也有效
    
    8 图片链接样式
    IE默认为紫色2px的边框线
    FF默认为蓝色2px的边框线
    要清除图片链接样式,一般可以设置
    img {
        border:0;vertical-align:top
    
    
    }
    
     
    浏览器默认样式
    html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*以上列表元素默认状态下一块状显示,未显示的将以内联元素显示,该列表针对HTML4版本,部分元素在XHTML1中将废弃*/
    li { display: list-item }/*默认以列表显示*/
    head { display: none }/*默认不显示*/
    table { display: table }/*默认为表格显示*/
    tr { display: table-row }/*默认为表格行显示*/
    thead { display: table-header-group }/*默认为表格头部分组显示*/
    tbody { display: table-row-group }/*默认为表格行分组显示*/
    tfoot { display: table-footer-group }/*默认为表格底部分组显示*/
    col { display: table-column }/*默认为表格列显示*/
    colgroup { display: table-column-group }/*默认为表格列分组显示*/
    td, th { display: table-cell; }/*默认为单元格显示*/
    caption { display: table-caption }/*默认为表格标题显示*/
    th { font-weight: bolder; text-align: center }/*默认为表格标题显示,呈现加粗居中状态*/
    caption { text-align: center }/*默认为表格标题显示,呈现居中状态*/
    body { margin: 8px; line-height: 1.12 }
    h1 { font-size: 2em; margin: .67em 0 }
    h2 { font-size: 1.5em; margin: .75em 0 }
    h3 { font-size: 1.17em; margin: .83em 0 }
    h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }
    h5 { font-size: .83em; margin: 1.5em 0 }
    h6 { font-size: .75em; margin: 1.67em 0 }
    h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder }
    blockquote { margin-left: 40px; margin-right: 40px }
    i, cite, em,var, address { font-style: italic }
    pre, tt, code, kbd, samp { font-family: monospace }
    pre { white-space: pre }
    button, textarea, input, object, select { display:inline-block; }
    big { font-size: 1.17em }
    small, sub, sup { font-size: .83em }
    sub { vertical-align: sub }/*定义sub元素默认为下标显示*/
    sup { vertical-align: super }/*定义sub元素默认为上标显示*/
    table { border-spacing: 2px; }
    thead, tbody, tfoot { vertical-align: middle }/*定义表头、主体表、表脚元素默认为垂直对齐*/
    td, th { vertical-align: inherit }/*定义单元格、列标题默认为垂直对齐默认为继承*/
    s, strike, del { text-decoration: line-through }/*定义这些元素默认为删除线显示*/
    hr { border: 1px inset }/*定义分割线默认为1px宽的3D凹边效果*/
    ol, ul, dir, menu, dd { margin-left: 40px }
    ol { list-style-type: decimal }
    ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
    u, ins { text-decoration: underline }
    br:before { content: ""A" }/*定义换行元素的伪对象内容样式*/
    :before, :after { white-space: pre-line }/*定义伪对象空格字符的默认样式*/
    center { text-align: center }
    abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
    :link, :visited { text-decoration: underline }
    :focus { outline: thin dotted invert }
     /* Begin bidirectionality settings (do not change) */
    BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }/*定义BDO元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
    BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }/*定义BDO元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
    *[DIR="ltr"] { direction: ltr; unicode-bidi: embed }/*定义任何元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
    *[DIR="rtl"] { direction: rtl; unicode-bidi: embed }/*定义任何元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
    @media print { /*定义标题和列表默认的打印样式*/
        h1 { page-break-before: always }
        h1, h2, h3,    h4, h5, h6 { page-break-after: avoid }
        ul, ol, dl { page-break-before: avoid }
    }
    HTML默认样式

    reset.css,用于清除浏览器差异的默认样式【结合我自己的备份和网上找的共三份,任选一份,我推荐第一份这是我自己日常在用的】

    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; }
    body { background:#fff; color:#555; font-size:14px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; }
    td,th,caption { font-size:14px; }
    h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
    address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
    a { text-decoration:none; }
    a:hover { text-decoration:none; }
    img { border:none; }
    ol,ul,li { list-style:none; }
    input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
    table { border-collapse:collapse; }
    html {overflow-y: scroll;}
    .clearfix::after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
    .clearfix { *zoom:1; }
    reset.css-1
    html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
    header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
    table{border-collapse:collapse;border-spacing:0;}
    caption,th{text-align:left;font-weight:normal;}
    html,body,fieldset,img,iframe,abbr{border:0;}
    i,cite,em,var,address,dfn{font-style:normal;}
    [hidefocus],summary{outline:0;}
    li{list-style:none;}
    h1,h2,h3,h4,h5,h6,small{font-size:100%;}
    sup,sub{font-size:83%;}
    pre,code,kbd,samp{font-family:inherit;}
    q:before,q:after{content:none;}
    textarea{overflow:auto;resize:none;}
    label,summary{cursor:default;}
    a,button{cursor:pointer;}
    h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
    del,ins,u,s,a,a:hover{text-decoration:none;}
    body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
    body{background:#fff;}
    a,a:hover{color:#333;}
    reset.css-2
    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, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    reset.css-3

     

    转载于:https://www.cnblogs.com/Caixingmin/p/11196614.html

    展开全文
  • 18、浏览器默认样式

    2020-06-22 10:22:26
    浏览器默认样式去除

    介绍

    本文是在学习CSS时做的学习笔记,所有笔记内容为 CSS学习笔记

    浏览器默认样式

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>meta</title>
    </head>
    <style>
    
      默认样式:
         - 通常情况,浏览器都会为元素设置一些默认样式
         - 通常情况下默认样式会影响到页面布局,通常情况编写网页时
           要去除浏览器的默认样式(pc端页面)
       
        可以使用重置样式表,专门用来对浏览器样式进行重置
           reset.css 直接去除了浏览器的默认样式
           normalize.css 对默认样式进行了统一    
    
    body{
        margin:0
    }
    p{
        margin:0
    }
    ul{
        margin:0;
        padding:0;
        list-style:none
    
        1、去除项目符号
     
        list-style:none
    }
    
    
      2、去除所有margin padding
    
    *{
        margin:0;
        padding:0
    }
    
    .box1{
        width:100px;
        height:100px;
        border 1px solid black
    }
                   
    </style>
    <body>
    
    <div class="box1"></div>
    
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>    
    
    <ul>
       <li>1</li>
        <li>1</li>
         <li>1</li>
    </ul>
    
     
    </body>
    </html>
    
    
    
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,583
精华内容 2,233
关键字:

浏览器默认样式