03_day CSS文本標(biāo)簽 、盒子

<em>和<strong>

**em標(biāo)簽用于表示一段內(nèi)容中的著重點。

**strong標(biāo)簽用于表示一個內(nèi)容的重要性。

**通常em顯示斜體,二strong顯示為粗體。


例題1-1》

<i>和<b>標(biāo)簽

*i標(biāo)簽會使文字變成斜體。

b標(biāo)簽會使文字變?yōu)榇煮w。

這兩個標(biāo)簽和EM STRONG類似,但是這兩個標(biāo)簽沒有語義

<small>

small標(biāo)簽表示細(xì)則一類的旁注,通常包括聲明,版權(quán)信息等。small標(biāo)簽在瀏覽器中顯示會比父元素小的字號。

<cite>

使用cite標(biāo)簽可以指明對某內(nèi)容的引用或參考。

例如: <cite>《西游記》</cite>講述的是三和尚取經(jīng)的故事

<blockquote>(換行)和<q>(加引號)

blockquote和q表示標(biāo)記引用的文本。

blockquote用于長引用,q用于短引用。

<sup>和<sub>

sup和sub用于定義上標(biāo)和下標(biāo)。

H<sup>2</sup>0

H<sub><a href = "#">[2]</a></sub>0

<ins>和<del>

ins表示插入的內(nèi)容,顯示時通常會加上下劃線。

del表示刪除的內(nèi)容,顯示時通常會加上刪除線。

<code>和<pre>

果你的內(nèi)容包含代碼示例或文件名,就 可以使用code元素。

pre元素表示的是預(yù)格式化文本,可以使用pre包住code來表示一段代碼。

<pre>

? ? <code>

? ? ? ? ? ? while true:

? ? ? ? ? ? ? ? ? ? ? ? print("lalalalalalala")

? ? </code>

<pre>

列表:

1、無序列表(ul,li)


2、有序列表(ol,li)


3、定義列表(dl,dt)


套用可無序套有序。

單位

px:如果我們將一個圖片放大的話,我們會發(fā)現(xiàn)一個圖片 是有一個一個的小色塊構(gòu)成的,這一個小色塊就是一 個像素,也就是1px,對于不同的顯示器來說一個像素 的大小是不同的。

%:也可以使用一個百分?jǐn)?shù)來表示一個大小,百分比是相 對于父元素來說的,如果父元素使用的大小是16px, 則100%就是16px,200%就是32px。

em:em和百分比類似,是相對于font-size說的

1em = 1font-size

字體大?。篺ont-size用于指定文字的大小

font-family可以指定標(biāo)簽中文字的字體。

font-style設(shè)置樣式、斜體 itatic

font-weight粗細(xì) bold

font - variant:small-caps 小寫變大寫

p{bold italic 60px "華文行楷"}字體號必須在最后,字號在字體之前

字體屬性的簡寫:

font可以一次性同時設(shè)置多個字體的樣式。

– font:加粗 斜體 小型大寫 大小/行高 字體

這里前邊幾個加粗、斜體和小型大寫的順 序無所謂,也可以不寫,但是大小和字體 必須寫且必須寫到后兩個。

行間距:line-height ? ? ? ? ? font-size

大寫化:text-transform樣式將元素中的字母全都變成大寫

大寫:text-transform:upercase

小寫:text-tansform:lowercase

首字母大寫:text-transform:capitalize

正常:text-transform:none

文本的修飾:text-decoration屬性,用來給文本添加各種修飾。通過它可以為文本的上方下方或者中間添加線條。

-underline下劃線

-overline上劃線

line-through刪除

-none原樣輸出

字母間距和單詞間距:letter-spacing用來設(shè)置字符之間的間距。 ? ?

word-spacing用來設(shè)置單詞之間的間距。

對齊文本text-align用來設(shè)置文本的對其方式。

-lift:左對齊 ? ?-right 右對齊 ? ? -justify兩邊對其 ? center 居中對齊

首行縮進(jìn):text-indent用來設(shè)置首行縮進(jìn)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?盒子

CSS處理網(wǎng)頁時,它認(rèn)為每個元素都包含在一 個不可見的盒子里。

盒子模型,一般分成幾個部分:

內(nèi)容區(qū)(content)

內(nèi)邊距(padding)

邊框(border)

外邊距(margin)


設(shè)置盒子的元素


效果圖內(nèi)容區(qū)

內(nèi)容區(qū):通過width和height設(shè)置內(nèi)容區(qū)的大小。他們只適合塊元素。

內(nèi)邊距:padding:10px 20px 30px 40px 這樣可以設(shè)置元素上、右、下、左四個方向的內(nèi)邊距。

padding:10px 20px 30px;

分別指定上、左右、下四個方向的內(nèi)邊距

padding:10px 20px;

分別指定上下、左右四個方向的內(nèi)邊距

padding:10px;

同時指定上左右下四個方向的內(nèi)邊距

同時在css中還提供了padding-top、padding-right、padding-right、padding-bottom分別用來指定四個方向的內(nèi)邊距

邊框:可以使用border屬性來設(shè)置盒子的邊框:

border:1px red solid;

上邊的樣式分別指定了邊框的寬度、顏色和樣式。

也可以使用border-top/left/right/bottom分別指定上右下左 四個方向的邊框。

和padding一樣,默認(rèn)width和height并包括邊框的寬

邊框的樣式:style:

邊框可以設(shè)置多種樣式:

none(沒有邊框)

dotted(點線)

dashed(虛線)

solid(實線)

double(雙線)

groove(槽線)

ridge(脊線)

inset(凹邊)

outset(凸邊)

外邊距:外邊距是元素邊框與周圍元素相距的空間。

使用margin屬性可以設(shè)置外邊距。

用法和padding類似,同時也可以提供四個方向的

margin -top/right/bottom/left

但是將左右外邊距設(shè)置為auto是,瀏覽器會將左右外 邊距設(shè)置為相等,所以這行代碼margin:0 auto可 以使元素居中。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,168評論 1 92
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素;行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,217評論 1 4
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,192評論 0 1
  • 學(xué)會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,445評論 2 66
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,531評論 1 41

友情鏈接更多精彩內(nèi)容