CSS 樣式初始化

Pines_Cheng 發(fā)布于2019-04-23 13:33 / 1607人閱讀

摘要：去除瀏覽器對的附加樣式，避免不同瀏覽器之間的樣式差異，給前端開發(fā)提供統(tǒng)一的樣式基礎(chǔ)。附加樣式清除浮動允許文本在任意位置的換行超長文本截斷，以省略號顯示

　　去除瀏覽器對html的附加樣式，避免不同瀏覽器之間的樣式差異，給前端開發(fā)提供統(tǒng)一的樣式基礎(chǔ)。附加樣式：

　　.clearfix - 清除浮動

　　.wordsBreak - 允許文本在任意位置的換行

　　.ellipsis - 超長文本截斷，以省略號顯示

@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,button,textarea,p,table,th,td,section,img{
    margin:0; 
    padding:0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
    display: block;
    margin:0; 
    padding:0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
ol,ul,li,dl,dt,dd {
    list-style:none;
}
button, input, select, textarea {
    font-family: Helvetica,Tahoma,Arial,"Helvetica Neue","Hiragino Sans GB","Microsoft YaHei";
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    outline: none;
    border-radius: 0;
    border: 1px solid #ccc;
}
i,em{
    font-style:normal;
} 
img {
    border:none;
}
table{
    border-collapse:collapse;
    border-spacing:0;
}
html,body {
    width: 100%;
    height: 100%;
    background: #fff;
    font-size: 14px;
    line-height: 1.4;
    font-family: Helvetica,Tahoma,Arial,"Helvetica Neue","Hiragino Sans GB","Microsoft YaHei";
    color: #313135;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust: 100%;
    text-rendering: optimizelegibility;
}
a,a:hover,a:link,a:visited,a:active {
    color: #313135;
    text-decoration:none;
}
p,.wordsBreak{
    word-wrap:break-word;
    word-break:break-all;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height:0; 
    clear:both; 
    visibility: hidden;
}
.clearfix { 
    *zoom:1; 
}
.ellipsis{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

云服務(wù)器 GPU云服務(wù)器 css樣式頁面css樣式 css的樣式 css樣式代碼

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/2025.html

相關(guān)文章

從css到頁面樣式渲染

摘要：對應(yīng)多種語法規(guī)則可以為指定樣式。渲染頁面繪制到屏幕后，頁面結(jié)構(gòu)的改變也有可能導(dǎo)致渲染樹重新計算，其中重排和重繪是最耗時的部分。寫了這么多class,color,background,display...; 也許有時候會疑惑，怎么就顯示在頁面上，改變元素的樣式。本文簡明介紹整個解析，匹配，渲染過程 css 描述 css 是Cascading Style Sheets的簡寫，是一種樣式...

Nekron 2019-08-30 15:43 評論0 收藏0
在HTML中使用CSS

摘要：一前言在中使用，包括內(nèi)聯(lián)式內(nèi)嵌式鏈接式和導(dǎo)入式。鏈接式使用時需要在標(biāo)記中使用標(biāo)記，通過標(biāo)記的相關(guān)屬性指明外部文件的路徑，以方便找到其中定義的樣式并運用在當(dāng)前網(wǎng)頁元素上。導(dǎo)入式通過在標(biāo)記的標(biāo)記中使用方法導(dǎo)入相應(yīng)的文件。一、前言在 HTML 中使用 CSS，包括內(nèi)聯(lián)式、內(nèi)嵌式、鏈接式和導(dǎo)入式。二、分類 2.1 內(nèi)聯(lián)式內(nèi)聯(lián)式是所有樣式應(yīng)用方式中最為直接的一種，它通過對 HTML 標(biāo)記...

andong777 2019-08-30 12:52 評論0 收藏0
在HTML中使用CSS

摘要：一前言在中使用，包括內(nèi)聯(lián)式內(nèi)嵌式鏈接式和導(dǎo)入式。鏈接式使用時需要在標(biāo)記中使用標(biāo)記，通過標(biāo)記的相關(guān)屬性指明外部文件的路徑，以方便找到其中定義的樣式并運用在當(dāng)前網(wǎng)頁元素上。導(dǎo)入式通過在標(biāo)記的標(biāo)記中使用方法導(dǎo)入相應(yīng)的文件。一、前言在 HTML 中使用 CSS，包括內(nèi)聯(lián)式、內(nèi)嵌式、鏈接式和導(dǎo)入式。二、分類 2.1 內(nèi)聯(lián)式內(nèi)聯(lián)式是所有樣式應(yīng)用方式中最為直接的一種，它通過對 HTML 標(biāo)記...

chengjianhua 2019-08-01 15:10 評論0 收藏0
CSS瀏覽器兼容性的4個解決方案：瀏覽器CSS樣式初始化、瀏覽器私有屬性，CSS hack語法和自動

摘要：關(guān)于瀏覽器樣式初始化，經(jīng)驗不豐富的話，可能也不知道該初始化什么，這里給大家推薦一個庫，，數(shù)量接近萬，選取展示其中幾個樣式設(shè)置，如下通過樣式初始化，相信能解決不少常規(guī)的兼容性問題，接下來再看看瀏覽器的私有屬性。前端是一個苦逼的職業(yè)，不僅因為技術(shù)更新快，而且要會的東西實在太多了（如果全寫出來，那真是一籮筐），更讓人頭疼的是，還要面臨各種適配、兼容性問題。一直以來都是頭痛醫(yī)頭腳痛醫(yī)腳，沒...

Maxiye 2019-08-30 15:55 評論0 收藏0
CSS瀏覽器兼容性的4個解決方案：瀏覽器CSS樣式初始化、瀏覽器私有屬性，CSS hack語法和自動

摘要：關(guān)于瀏覽器樣式初始化，經(jīng)驗不豐富的話，可能也不知道該初始化什么，這里給大家推薦一個庫，，數(shù)量接近萬，選取展示其中幾個樣式設(shè)置，如下通過樣式初始化，相信能解決不少常規(guī)的兼容性問題，接下來再看看瀏覽器的私有屬性。前端是一個苦逼的職業(yè)，不僅因為技術(shù)更新快，而且要會的東西實在太多了（如果全寫出來，那真是一籮筐），更讓人頭疼的是，還要面臨各種適配、兼容性問題。一直以來都是頭痛醫(yī)頭腳痛醫(yī)腳，沒...

princekin 2019-08-23 15:17 評論0 收藏0