更多課程 選擇中心

Web培訓
達內IT學院

400-111-8989

Web培訓

學習web前端的必備知識點之CSS知識

  • 發布:Web前端培訓
  • 來源:Web開發教程
  • 時間:2020-10-13 15:10

今天小編要跟大家分享的文章是關于學習web前端的必備知識點之CSS知識。css基本內容,類選擇符,id選擇符,偽類,偽元素,結構,繼承,特殊性,層疊,元素分類,顏色,長度,url,文本,字體,邊框,塊級元素,浮動元素,內聯元素,定位。

今天小編要跟大家分享的文章是關于學習web前端的必備知識點之CSS知識。

鏈接:

<link rel="stylesheet" type="text/css" href="sheet.css" title="default">

link標簽:

<link rel="stylesheet" type="text/css" href="sheet.css" title="default">

樣式:

h1 { color: red; };

@import指示引入多個外部樣式表的鏈接

<style type="text/css">

@import url(styles.css);

p { color: red };

</style>

css注解

/* dashucoding */

內聯樣式:

<p style="color: red;" >dashucoding</p>

規范:

選擇符 + 聲明

p { color: red; } // 選擇符 屬性 值

p { font-weight: bold; }

偽類和偽元素

屬性說明

:link超鏈接是一個未訪問過的地址

:visited訪問過的網頁

:active處于活躍的狀態

a { color: red; }; a:visited { color: red; };

偽元素:

:first-letter 和 :first-line 首字母 和 首行

p:first-letter { color: red; }

css有個特點是繼承,可以依賴于祖先-后代關系。

!important有這個標記,表示這條規則優先

p { color: red !important; }

元素分類:

三種類型:塊級元素,內聯元素,列表項元素

塊級元素有段落,標題,列表,表格,div,body等。內聯元素有a,em,span等。列表項元素有li元素。

dispaly: block | inline | list-item | none

顏色:

rgb(100%, 100%, 100%) 紅藍綠 ,白色

單位:

em 給字體的font-size值

文本:

文本縮進

text-indent <長度> | <百分比>

p { text-indent: -4em; }

text-align屬性

用于元素中文本行的對齊方式

text-align: left | center | right | justify

white-space空白

white-space pre | nowrap | normal

p { white-space: normal; } 將如何空白壓縮成單個空白符

white-space屬性值為pre,可以將元素內的空白忽略。

p { white-space: pre; }

行高:

line-height文本行的基線間的距離。

縱向對齊,vertical-align

vertical-align: baseline使元素的基線同父元素的基線對齊。

vertical-align: sub; vertical-align: super;

低端對齊: vertical-align

頂端對齊:vertical-align

vertical-align: top; vertical-align: text-top;

中間對齊:

vertical-align: middle;

文字間隔:

word-spacing 長度 | normal

word-spacing: 0.3em;

字母間隔:

letter-spacing: 長度 | normal

文本轉換:

text-transform uppercase | lowercase | capitalize | none

文本修飾:

text-decoration: none | overline | line-through

框:

width 長度 | 百分比 | auto

height 長度 | auto

margin 長度 | 百分比 | auto

margin: top right bottom left

margin-top

margin-right

margin-bottom

margin-left

border-width // thin medium thick

border-style: none;

padding

浮動與清除

float: left | right | none

<img src="" style="float: right"; alt="dashu">

float: none 用于防止元素浮動

清除浮動元素

clear left | right | both | none

clear原理是增加元素的上邊界,使它在低于浮動元素的位置結束,清除元素的上邊界寬度當有效地忽略。

list-style-type disc

disc | circle | square | decimal | upper-alpha | lower-alpha | upper-roman | lower-roman | none

list-style-type

disc 為實心圓

circle 為空心圓

square 實心或空心方塊

列表項圖像

list-style-image <url> | none

列表項位置:list-style-position

list-style-position: inside | outside

定位:

position: static | relative | absolute | fixed | inherit

溢出:

overflow: visible | hidden | scroll | auto | inherit

溢出剪切:

overflow-clip: rect | auto | inherit

元素剪切:

clip rect | auto | inherit

元素可見性:

visibility: visible | hidden | collapse | inherit

相對定位:

position: relative;

絕對定位:

position: relative;

固定定位:

position: fixed;

層疊定位:

z-index: integer | auto

輪廓:

outline, outline-color, outline-style, outline-width

邊框:

border-top-color, border-right-color, border-bottom-color

border-left-color, border-top-style

border-right-style, border-left-style

實例:

<table cellspacing=0 border cellpadding="10">

<tr>

<td rowspan=2>dashu</td>

<td colspan=2>dashu2</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

</tr>

</table>

以上就是小編今天為大家分享的關于學習web前端的必備知識點之CSS知識的文章,希望本篇文章能夠對正在從事web前端工作的小伙伴們有所幫助,想要了解更多web前端知識記得關注達內web培訓官網,最后祝愿小伙伴們工作順利,成為一名優秀的web前端工程師

文章來源:原創 Jeskson 達達前端

【免責聲明:本文圖片及文字信息均由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除。】

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

上一篇:2020年Web前端入門的學習路線總結
下一篇:Web前端進階階段需要學習哪些知識

Web前端進階階段需要學習哪些知識

學習web前端的必備知識點之CSS知識

2020年Web前端入門的學習路線總結

Web前端工程師入門必讀書籍推薦

  • 關注微信公眾號

    回復關鍵字:視頻資料

    免費領取 達內課程視頻學習資料

  • 視頻學習QQ群

    添加QQ群:1143617948

    免費領取達內課程視頻學習資料

Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

選擇城市和中心
黑龍江省

吉林省

河北省

貴州省

云南省

廣西省

海南省

a一天堂网,靑靑青草手机版,免费视频,青娛樂,大香蕉,热热色,原网站,窝窝影院 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>