html CSS基礎知識回顧

2021-07-02 04:28:31 字數 3526 閱讀 7067

html部分

address,blockquote,center,dir, div, dl, dt, dd, fieldset, form, h1~h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.

a, abbr, acronym, b, bdo, big, br, cite, code, drn, em,font, img, input,lable,kbd, q, samp, select, small, span, strong, sub, sup, textarea,.

轉換的**如下:

display: block; /* 轉成塊元素 */

display: inline; /* 轉成內嵌元素 */

1:塊元素可以包含內聯元素或某些塊元素,但內聯元素卻不能包含塊元素,它只能包含其它的內聯元素.

—— 對

—— 對

—— 錯

2:塊級元素不能放在p裡面.

—— 錯

—— 錯

3:有幾個特殊的塊級元素只能包含內嵌元素,不能再包含塊級元素.

這幾個特殊的標籤是: h1、h2、h3、h4、h5、h6、p、dt.

4:li 內可以包含 div 標籤:li 和 div 標籤都是裝載內容的容器,地位平等,沒有級別之分

(例如:h1、h2 這樣森嚴的等級制度^_^),要知道,li 標籤連它的父級 ul 或者是 ol 都可以容納的.

5:塊級元素與塊級元素並列、內嵌元素與內嵌元素並列:

—— 對

—— 對

—— 錯

字型屬性:font

大小 font-size: x-large;(特大) xx-small;(極小) 一般中文用不到,只要用數值就可以,單位:px、pd

樣式 font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)

行高 line-height: normal;(正常) 單位:px、pd、em

粗細 font-weight: bold;(粗體) lighter;(細體) normal;(正常)

變體 font-variant: small-caps;(小型大寫字母) normal;(正常)

大小寫 text-transform: capitalize;(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)

修飾 text-decoration: underline;(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)

常用字型: (font-family)

"courier new", courier, monospace, "times new roman", times, serif, arial, helvetica, sans-serif, verdana

背景屬性:background

色彩background-color: #ffffff;

background-image: url();

重複background-repeat: no-repeat;

滾動background-attachment: fixed;(固定) scroll;(滾動)

位置background-position: left(水平) top(垂直);

簡寫方法 background:#000 url(..) repeat fixed left top;

區塊屬性:block

字間距letter-spacing: normal; 數值

對齊text-align: justify;(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)

縮排text-indent: 數值px;

垂直對齊vertical-align: baseline;(基線) sub;(下標) super;(下標) top; text-top; middle; bottom; text-bottom;

詞間距word-spacing: normal; 數值

空格white-space: pre;(保留) nowrap;(不換行)

顯示display:block;(塊) inline;(內嵌) list-item;(列表項) run-in;(追加部分) compact;(緊湊) marker;(標記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(**標題)

方框屬性:box

width:; height:; float:; clear:both; margin:; padding:;     順序:上右下左

邊框屬性:border

border-style: dotted;(點線) dashed;(虛線) solid; double;(雙線) groove;(槽線) ridge;(脊狀) inset;(凹陷) outset;

border-width:; 邊框寬度

border-color:#;

簡寫方法border:width style color;

列表屬性:list

型別list-style-type:    disc;(圓點) circle;(圓圈) square;(方塊) decimal;(數字) lower-roman;(小羅碼數字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

影象list-style-image: url(..);

定位屬性: (position)

position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切) 

常見選擇器和擴充套件選擇器

◆標籤名選擇器,如:p{},即直接使用html標籤作為選擇器。

◆類選擇器,如.polaris{}。

◆id選擇器,如#polaris{}。

◆後代選擇器,如.polaris span img{},後代選賊器實際上是使用多個選擇器加上中間的空格來找到具體的要控制標籤。

◆群組選擇器,如div,span,img{},群組選擇器實際上是對css的一種簡化寫法,只不過把有相同定義的不同選擇器放在一起,省了很多**。

css選擇器優先順序的結論是:!important>行內樣式優先順序》id選擇器優先順序 > 類class選擇器優先順序 > 標籤選擇器優先順序

◆盡量少使用層級關係

一般寫法:#divbox p .red

更好寫法:.red

◆使用class代替層級關係

一般寫法:#divbox ul li a

更好寫法:.block

HTML CSS基礎知識

二 cs與bs 面試題 三 html使用 四 css 1.概述 html hypertext markup language 超文字標記語言。2.作用 編寫網頁內容的 3.常見標籤 1.table 2.img 3.超連結a 4.表單form 文字框 type text 密碼框 type passwo...

HTML CSS基礎知識

5大瀏覽器 4大核心 ie trident firefox gecko google chrome webkit blink safari webkit opera presto 在html中body 預設margin 8px。float float會產生浮動流 所有產生了浮動流的元素,塊級元素看不...

Html CSS基礎知識(一)

什麼是html?html是一種描述網頁的語言,是一種超文字標記語言,html可以使用標記標籤來描述網頁,裡面包含了標籤和文字內容,也可以把這種叫做web頁面全稱是 hypertext markup language html標籤格式 html 標籤通常是成對出現的,比如和,大部分的瀏覽器不新增結束標...