日韩激情毛片,波多野一区二区

與文本編排有關(guān)的CSS屬性設(shè)置

liuying — Sun, 12 Dec 2021 10:38:22 +0000

與字體相關(guān)的屬性包括字體族、文本大小、粗細(xì)、字體風(fēng)格、行高等。

1、font-family：設(shè)置字體族。

格式為font-family：字體1，字體2，……，通用字體族|inher

通用字體族，是指一類相似的字體。W3C的CSS規(guī)則規(guī)定，要指定一個(gè)通用字體族，避免客戶端沒有安裝指定字體時(shí)能使用本機(jī)上的通用字體族中的字體。該屬性及其值的涵義如下圖

2、font-size：設(shè)置文本的大小。該屬性及其值的涵義如下圖

3、font-weight：設(shè)置文本加粗。該屬性及其值的涵義如下圖

4、font-style：可設(shè)置字體是正常還是斜體。該屬性及其值的涵義如下圖

5、line-height：設(shè)置文本的行高，它是指上下文本行的基線之間的垂直距離。其屬性及其值的涵義如下圖

6、字體屬性font：是字體設(shè)置的簡寫形式，其格式及解釋如下：

其中，用[]括住的屬性是可選的，而font-size和font-family是必須要寫的兩個(gè)屬性，其他屬性若不寫，則網(wǎng)頁將使用它們對(duì)應(yīng)的默認(rèn)值。另外，font-size/line-height必須用/組成一個(gè)，不能分開寫。例如：

這段CSS設(shè)置了字號(hào)為12像素，2倍行距，字體族為arial 和arial black。

7、字體顏色color屬性：

8、text-align屬性：設(shè)置文本的水平對(duì)齊方式。其值有三，分別是左對(duì)齊left（默認(rèn)）、居中對(duì)齊center、右對(duì)齊right。

9、首行縮進(jìn)屬性text-indent：其屬性值及涵義見下圖。

10、文本修飾屬性text-decoration：用來設(shè)置文本是否帶有下劃線或刪劃線等，其值及涵義如下圖：

11、字符間距屬性letter-spacing：設(shè)置字符與字符之間的間隔，正值是拉寬字符間距，負(fù)值是縮小字符間距。其值及涵義如下圖：

12、字間距屬性word-spacing：設(shè)置單詞與單詞之間的間隔。該屬性對(duì)包含兩個(gè)詞以上的英文有作用，對(duì)漢字是沒有作用的。

例如，定義一種文本樣式，其字體族為“黑體，宋體，新宋體”，字體粗細(xì)為500，斜體，大小16像素，行距26像素，紅色，帶下劃線，則代碼應(yīng)寫成下圖所示：

以上是我總結(jié)的與文本樣式相關(guān)的CSS屬性及其值的解釋，希望對(duì)大家的學(xué)習(xí)有所幫助。

網(wǎng)頁設(shè)計(jì)技術(shù)基礎(chǔ)之HTML中文本的常用標(biāo)簽及語義

liuying — Sun, 12 Dec 2021 10:38:22 +0000

在

1、段落標(biāo)簽p

段落標(biāo)簽的語法格式為：

段落文本

。被其標(biāo)記的文本，默認(rèn)會(huì)與上下文之間產(chǎn)生一行的間隔。通常情況下，我們?cè)贒W的設(shè)計(jì)視圖界面輸入一段文本后，按回車鍵，就會(huì)在該段文本的前后自動(dòng)加上

和

，不需要專門書寫段落標(biāo)簽。

將光標(biāo)放在段落標(biāo)簽的起始標(biāo)簽的p后面，鍵入空格，就會(huì)出現(xiàn)該標(biāo)簽的可用屬性，具體語法格式為

文本

，其中常用的屬性是align和class：

align屬性中所說的“容器”，是指段落文本的外側(cè)對(duì)象，例如：段落是放在一個(gè)單元格中的，那么單元格就是該段落的容器，此時(shí)如果align="center"，則段落文本是相對(duì)單元格居中顯示的。如果段落沒有放入任何對(duì)象內(nèi)，則它所屬的容器就是頁面。如下圖，段落文本是相對(duì)頁面右對(duì)齊顯示：

class是指定段落所使用的類，這個(gè)類一般是CSS定義的樣式類。大家可能會(huì)說，難道文本不能設(shè)定顏色、大小等效果嗎？能！按照設(shè)計(jì)網(wǎng)頁的常規(guī)思路，有兩種方法，一是在頭部區(qū)域利用標(biāo)簽設(shè)定（見本文第5點(diǎn)內(nèi)容）；一種是利用CSS類，本文中先不涉及，后面的文章會(huì)詳細(xì)講解CSS樣式。

2、換行標(biāo)簽br

換行標(biāo)簽是個(gè)單標(biāo)簽，一般使用/來結(jié)束標(biāo)簽，即正確格式為
。它的功能就是換行，也就是說在想要換行的地方輸入一個(gè)
就OK了，該標(biāo)簽沒有屬性，效果如下圖：

3、標(biāo)題標(biāo)簽hn

其中n=1~6。即"

…

"至"

…

"，它們是DW預(yù)設(shè)好效果的標(biāo)題文本，其預(yù)設(shè)效果為：

hn的常用屬性也是align和class，屬性值與p標(biāo)簽中所講的一致。

4、強(qiáng)調(diào)語義標(biāo)簽strong和em

所謂強(qiáng)調(diào)語義是指，一方面顯示加粗或傾斜效果，一方面加重語氣以更加吸引搜索引擎。文本是加粗文本，文本是傾斜文本。在語氣上，strong語氣較重，em語氣較輕。它們沒有屬性，效果如下：

5、突出顯示標(biāo)簽mark

mark標(biāo)簽是HTML5的新標(biāo)簽，IE8以下的瀏覽器不解析該標(biāo)簽。其語法格式為：文本。它是為文本設(shè)定了黃色背景，以突出顯示，效果如下。如果設(shè)計(jì)視圖看不到突出顯示效果，只要在瀏覽器中預(yù)覽該頁面就能看到了（本文所用瀏覽器為QQ瀏覽器）。

中不能直接修改背景顏色，要想修改突出顯示的背景色，需要在頭部區(qū)域設(shè)置是HTML的樣式標(biāo)簽，其內(nèi)部可以直接定義某個(gè)標(biāo)簽的樣式。格式為：

例如，在中同時(shí)設(shè)定了mark和p的樣式，效果為：

這里設(shè)定的屬性其實(shí)就是CSS的樣式屬性，所以常用的屬性及其解釋，將在后續(xù)講解CSS的文章中詳細(xì)介紹。

6、裝飾性標(biāo)簽span

語法格式為文本，其功能是對(duì)文本進(jìn)行裝飾。但是在內(nèi)部也無法設(shè)置效果類的屬性，也需要借助標(biāo)簽。例如，接上例，將“主頁”二字設(shè)置為紅底白字：

以上就是我為大家介紹的一些常用的文本類標(biāo)簽。由于水平有限，難免存在不足之處。隨著學(xué)習(xí)的深入，大家將會(huì)對(duì)HTML標(biāo)簽了解的越來越多。所以歡迎大家對(duì)本文內(nèi)容進(jìn)行補(bǔ)充，歡迎留言交流！如果覺得有用，歡迎收藏、轉(zhuǎn)發(fā)、點(diǎn)贊、關(guān)注^_^

高效整潔CSS代碼原則

liuying — Sun, 12 Dec 2021 10:34:57 +0000

　　核心提示：CSS學(xué)起來并不難，但在大型項(xiàng)目中，就變得難以管理，特別是不同的人在CSS書寫風(fēng)格上稍有不同，團(tuán)隊(duì)上就更加難以溝通，為此總結(jié)了一些如何實(shí)現(xiàn)高效整潔的CSS代碼原則：1. 使用Reset但并非全局Reset不同瀏覽器元素的默認(rèn)屬性有所不同，使用Reset可重置瀏覽器元素的一些默認(rèn)屬性，以達(dá)到瀏覽器的兼…

itE-SPACE: normal; LETTER-SPACING: normal; COLOR: rgb(51,51,51); WORD-SPACING: 0px; -webkit-text-stroke-width: 0px">CSS學(xué)起來并不難，但在大型項(xiàng)目中，就變得難以管理，特別是不同的人在CSS書寫風(fēng)格上稍有不同，團(tuán)隊(duì)上就更加難以溝通，為此總結(jié)了一些如何實(shí)現(xiàn)高效整潔的CSS代碼原則：

1. 使用Reset但并非全局Reset

不同瀏覽器元素的默認(rèn)屬性有所不同，使用Reset可重置瀏覽器元素的一些默認(rèn)屬性，以達(dá)到瀏覽器的兼容。但需要注意的是，請(qǐng)不要使用全局Reset：

*{ margin:0; padding:0; }

這不僅僅因?yàn)樗蔷徛偷托实姆椒?，而且還會(huì)導(dǎo)致一些不必要的元素也重置了外邊距和內(nèi)邊距。在此建議參考YUI Reset和Eric Meyer的做法。

/** 清除內(nèi)外邊距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 結(jié)構(gòu)元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表單元素 */
th, td, /* table elements 表格元素 */
img/* img elements 圖片元素 */{
border:medium none;
margin: 0;
padding: 0;
}
/** 設(shè)置默認(rèn)字體 **/
body,button, input, select, textarea {
font: 12px/1.5 '宋體',tahoma, Srial, helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超鏈接元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置圖片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

2. 良好的命名習(xí)慣

無疑亂七八糟或者無語義命名的代碼，誰看了都會(huì)抓狂。就像這樣的代碼：

.aaabb{margin:2px;color:red;}

我想即使是初學(xué)者，也不至于會(huì)在實(shí)際項(xiàng)目中如此命名一個(gè)class，但有沒有想過這樣的代碼同樣是很有問題的：

My name is Wiky

問題在于如果你需要把所有原本紅色的字體改成藍(lán)色，那修改后就樣式就會(huì)變成：

.red{color:bule;}

這樣的命名就會(huì)很讓人費(fèi)解，同樣的命名為.leftBar的側(cè)邊欄如果需要修改成右側(cè)邊欄也會(huì)很麻煩。所以，請(qǐng)不要使用元素的特性（顏色，位置，大小等）來命名一個(gè)class或id，您可以選擇意義的命名如：#navigation{…}，.sidebar{…}，.postwrap{…}

這樣，無論你如何修改定義這些class或id的樣式，都不影響它跟HTML元素間的聯(lián)系。

另外還有一種情況，一些固定的樣式，定義后就不會(huì)修改的了，那你命名時(shí)就不用擔(dān)憂剛剛說的那種情況，如

.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}

那么對(duì)于這樣一個(gè)段落

我是一個(gè)段落！

如果需要把這個(gè)段落由原先的左對(duì)齊修改為右對(duì)齊，那么只需要修改它的className就為alignright就可以了。

3. 代碼縮寫

CSS代碼縮寫可以提高你寫代碼的速度，精簡你的代碼量。在CSS里面有不少可以縮寫的屬性，包括margin，padding，border，font，background和顏色值等，如果您學(xué)會(huì)了代碼縮寫，原本這樣的代碼：

li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}

就可以縮寫為：

li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}

4. 利用CSS繼承

如果頁面中父元素的多個(gè)子元素使用相同的樣式，那最好把他們相同的樣式定義在其父元素上，讓它們繼承這些CSS樣式。這樣你可以很好的維護(hù)你的代碼，并且還可以減少代碼量。那么本來這樣的代碼：

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

就可以簡寫成：

#container{ font-family:Georgia, serif; }

5. 使用多重選擇器

你可以合并多個(gè)CSS選擇器為一個(gè)，如果他們有共同的樣式的話。這樣做不但代碼簡潔且可為你節(jié)省時(shí)間和空間。如：

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

可以合并為:

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. 適當(dāng)?shù)拇a注釋

代碼注釋可以讓別人更容易讀懂你的代碼，且合理的組織代碼注釋，可使得結(jié)構(gòu)更加清晰。你可以選擇做的樣式表的開始添加目錄:

/*————————————
1. Reset
2. Header
3. Content
4. SideBar
5. Footer
———————————– */

如此你代碼的結(jié)構(gòu)就一目了然，你可以容易的查找和修改代碼。

而對(duì)于代碼的主內(nèi)容，也應(yīng)適當(dāng)?shù)募右詣澐?，甚至在有必要的地方在?duì)代碼加以注釋說明，這樣也有利于團(tuán)隊(duì)開發(fā):

/*** Header ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}

/*** Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content h1{color:#F00}/* 設(shè)置字體顏色 */
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

/*** Footer ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

7. 給你的CSS代碼排序

如果代碼中的屬性都能按照字母排序，那查找修改的時(shí)候就能更加快速:

/*** 樣式屬性按字母排序 ***/
div{
background-color:#3399cc;
color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}

8. 保持CSS的可讀性

書寫可讀的CSS將會(huì)使得更容易查找和修改樣式。對(duì)于以下兩種情況，哪種可讀性更高，我想不言而明。

/*** 每個(gè)樣式屬性寫一行 ***/
div{
background-color:#3399cc;
color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}

/*** 所有的樣式屬性寫在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

當(dāng)對(duì)于一些樣式屬性較少的選擇器，我會(huì)寫到一行：

/*** 選擇器屬性少的寫在同一行 ***/
div{ background-color:#3399cc; color:#666;}

對(duì)于這個(gè)規(guī)則并非硬性規(guī)定，但無論您采用哪種寫法，我的建議是始終保持代碼一致。屬性多的分行寫，屬性少于3個(gè)可以寫一行。

9. 選擇更優(yōu)的樣式屬性值

CSS中有些屬性采用不同的屬性值，雖然達(dá)到的效果差不多，當(dāng)性能上卻存在著差異，如

區(qū)別在于border:0把border設(shè)為0px，雖然在頁面上看不見，但按border默認(rèn)值理解，瀏覽器依然對(duì)border-width/border-color進(jìn)行了渲染，即已經(jīng)占用了內(nèi)存值。
而border:none把border設(shè)為"none"即沒有，瀏覽器解析"none"時(shí)將不作出渲染動(dòng)作，即不會(huì)消耗內(nèi)存值。所以建議使用border:none;

同樣的，display:none隱藏對(duì)象瀏覽器不作渲染，不占用內(nèi)存。而visibility:hidden則會(huì)。

10. 使用代替@import

首先，@import不屬于XHTML標(biāo)簽，也不是Web標(biāo)準(zhǔn)的一部分，它對(duì)于較早期的瀏覽器兼容也不高，并且對(duì)于網(wǎng)站的性能有某些負(fù)面的影響。

11. 使用外部樣式表

這個(gè)原則始終是一個(gè)很好的設(shè)計(jì)實(shí)踐。不單可以更易于維護(hù)修改，更重要的是使用外部文件可以提高頁面速度，因?yàn)镃SS文件都能在瀏覽器中產(chǎn)生緩存。內(nèi)置在HTML文檔中的CSS則會(huì)在每次請(qǐng)求中隨HTML文檔重新下載。所以，在實(shí)際應(yīng)用中，沒有必要把CSS代碼內(nèi)置在HTML文檔中：

而是使用導(dǎo)入外部樣式表：

12. 避免使用CSS表達(dá)式（Expression）

CSS表達(dá)式是動(dòng)態(tài)設(shè)置CSS屬性的強(qiáng)大（但危險(xiǎn)）方法。Internet Explorer從第5個(gè)版本開始支持CSS表達(dá)式。下面的例子中，使用CSS表達(dá)式可以實(shí)現(xiàn)隔一個(gè)小時(shí)切換一次背景顏色：

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上所示，expression中使用了JavaScript表達(dá)式。CSS屬性根據(jù)JavaScript表達(dá)式的計(jì)算結(jié)果來設(shè)置。

表達(dá)式的問題就在于它的計(jì)算頻率要比我們想象的多。不僅僅是在頁面顯示和縮放時(shí)，就是在頁面滾動(dòng)、乃至移動(dòng)鼠標(biāo)時(shí)都會(huì)要重新計(jì)算一次。給CSS表達(dá)式增加一個(gè)計(jì)數(shù)器可以跟蹤表達(dá)式的計(jì)算頻率。在頁面中隨便移動(dòng)鼠標(biāo)都可以輕松達(dá)到10000次以上的計(jì)算量。

如果必須使用CSS表達(dá)式，一定要記住它們要計(jì)算成千上萬次并且可能會(huì)對(duì)你頁面的性能產(chǎn)生影響。所以，在非不得已，請(qǐng)避免使用CSS表達(dá)式。

13. 代碼壓縮

當(dāng)你決定把網(wǎng)站項(xiàng)目部署到網(wǎng)絡(luò)上，那你就要考慮對(duì)CSS進(jìn)行壓縮，出去注釋和空格，以使得網(wǎng)頁加載得更快。壓縮您的代碼，可以采用一些工具，如YUI Compressor，利用它可精簡CSS代碼，減少文件大小，以獲得更高的加載速度。

淘寶、騰訊等各大網(wǎng)站CSS代碼初始化集合

liuying — Sun, 12 Dec 2021 10:33:40 +0000

淘寶官網(wǎng) 樣式初始化

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 { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, c

騰訊QQ官網(wǎng) 樣式初始化

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋體","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}

新浪官網(wǎng) 樣式初始化

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;}

網(wǎng)易官網(wǎng) 樣式初始化

html {overflow-y:scroll;}
body {margin:0; padding:29px00; font:12px"5B8B4F53",sans-serif;background:#ffffff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}

根據(jù)瀏覽器和分辨率調(diào)用CSS代碼

liuying — Sun, 12 Dec 2021 10:17:32 +0000

　　解釋：

　　如果瀏覽器為IE，則調(diào)用default.css

　　如果瀏覽器為Firefox，則調(diào)用default2.css

　　如果瀏覽器為其他，則調(diào)用newsky.css

　　用法：放在前面即可。