前端05day

<em>和<strong>

**em標(biāo)簽用于表示一段內(nèi)容中的著重點(diǎn)。
**strong標(biāo)簽用于表示一個(gè)內(nèi)容的重要性。
**通常em顯示斜體,二strong顯示為粗體。

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

*i標(biāo)簽會(huì)使文字變成斜體。
b標(biāo)簽會(huì)使文字變?yōu)榇煮w。
這兩個(gè)標(biāo)簽和EM STRONG類似,但是這兩個(gè)標(biāo)簽沒有語義

<small>

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

<cite>

使用cite標(biāo)簽可以指明對(duì)某內(nèi)容的引用或參考。
例如: <cite>《西游記》</cite>講述的是三和尚取經(jīng)的故事
<blockquote>(換行)和<q>(加引號(hào))
blockquote和q表示標(biāo)記引用的文本。
blockquote用于長(zhǎng)引用,q用于短引用。

<ins>和<del>

ins表示插入的內(nèi)容,顯示時(shí)通常會(huì)加上下劃線。
del表示刪除的內(nèi)容,顯示時(shí)通常會(huì)加上刪除線。

<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:如果我們將一個(gè)圖片放大的話,我們會(huì)發(fā)現(xiàn)一個(gè)圖片 是有一個(gè)一個(gè)的小色塊構(gòu)成的,這一個(gè)小色塊就是一 個(gè)像素,也就是1px,對(duì)于不同的顯示器來說一個(gè)像素 的大小是不同的。
%:也可以使用一個(gè)百分?jǐn)?shù)來表示一個(gè)大小,百分比是相 對(duì)于父元素來說的,如果父元素使用的大小是16px, 則100%就是16px,200%就是32px。
em:em和百分比類似,是相對(duì)于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 "華文行楷"}字體號(hào)必須在最后,字號(hào)在字體之前

字體屬性的簡(jiǎn)寫:

font可以一次性同時(shí)設(shè)置多個(gè)字體的樣式。
– font:加粗 斜體 小型大寫 大小/行高 字體
這里前邊幾個(gè)加粗、斜體和小型大寫的順 序無所謂,也可以不寫,但是大小和字體 必須寫且必須寫到后兩個(gè)。

行間距: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è)置單詞之間的間距。
對(duì)齊文本text-align用來設(shè)置文本的對(duì)其方式。
-lift:左對(duì)齊 -right 右對(duì)齊 -justify兩邊對(duì)其 center 居中對(duì)齊
首行縮進(jìn):text-indent用來設(shè)置首行縮進(jìn)

盒子

CSS處理網(wǎng)頁(yè)時(shí),它認(rèn)為每個(gè)元素都包含在一 個(gè)不可見的盒子里。
盒子模型,一般分成幾個(gè)部分:
內(nèi)容區(qū)(content)
內(nèi)邊距(padding)
邊框(border)
外邊距(margin)

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

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

padding:10px 20px 30px;
分別指定上、左右、下四個(gè)方向的內(nèi)邊距
padding:10px 20px;
分別指定上下、左右四個(gè)方向的內(nèi)邊距
padding:10px;
同時(shí)指定上左右下四個(gè)方向的內(nèi)邊距
同時(shí)在css中還提供了padding-top、padding-right、padding-right、padding-bottom分別用來指定四個(gè)方向的內(nèi)邊距

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

border:1px red solid;
上邊的樣式分別指定了邊框的寬度、顏色和樣式。
也可以使用border-top/left/right/bottom分別指定上右下左 四個(gè)方向的邊框。
和padding一樣,默認(rèn)width和height并包括邊框的寬

邊框的樣式:style:

邊框可以設(shè)置多種樣式:
none(沒有邊框)
dotted(點(diǎn)線)
dashed(虛線)
solid(實(shí)線)
double(雙線)
groove(槽線)
ridge(脊線)
inset(凹邊)
outset(凸邊)

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

使用margin屬性可以設(shè)置外邊距。
用法和padding類似,同時(shí)也可以提供四個(gè)方向的
margin -top/right/bottom/left
但是將左右外邊距設(shè)置為auto是,瀏覽器會(huì)將左右外 邊距設(shè)置為相等,所以這行代碼margin:0 auto可 以使元素居中。

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

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,204評(píng)論 1 92
  • 學(xué)會(huì)使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,451評(píng)論 2 66
  • 1.塊級(jí)元素和行內(nèi)元素 塊級(jí)(block-level)元素;行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,228評(píng)論 1 4
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,200評(píng)論 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,887評(píng)論 1 45

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