CSS快速自學教程(W3school MDN精簡)

2021-10-25 11:13:55 字數 1783 閱讀 5384

為了完成學校的綜合設計作業中負責的前端專案,準備拾起八月份看的一點前端知識,接下來是css的部分

在html的學習中,我是用了w3school教程來看,這次發現mdn教程做的也比較不錯,於是想結合著來學習

計畫在這週內就簡單了解css的性質,之後更多的在實踐中應用

全稱cascadingstylesheets 層疊樣式表

基於css,提高html介面的工作效率。

css由兩個部分組成: 選擇器和一條或多條宣告

selector

選擇器一般是html物件

例:將h1元素的文字顏色定義成紅色,字型大小為14px

h1

對於值,可以有不同的寫法

例如顏色red還可以寫作十六進製制顏色#ff0000

或者是rgb顏色值

如果值是若干單詞,要寫引號

多重宣告

多重宣告的常用格式如下

p

background-color元素設定背景色

例:設定背景是灰色

p

background-image元素設定背景

body

background-repeat需要在頁面上對背景影象進行平鋪。repeat-x表示只在水平方向重複,同理,repeat-y是在垂直方向重複

body

background-position改變影象在背景中的位置

常用關鍵字:

centertopbottomrightleft

例如:

body

此時代表著,乙個放在水平2/3位置垂直1/3位置預設數值是0% 0% 就是topleft的位置

元素內邊距左上角偏移

例『:50px 100px,指的是左上角向右移動50px,向下移動100px

效果:不會隨著頁面的其他部分滾動

background-attachment: fixed

會固定在這個位置

web介面段落的每一行縮排,具體屬性是

text-indent屬性方便文字縮排,取值可以是負值,負邊界的情況下,最好加入乙個外邊距和一些內邊距

p

百分比縮排要相對於縮排元素父元素的寬度。若縮排值設定為20%,其影響元素的第一行會縮排其父元素的20%

例如,下例

div

p比例縮排

text-align是乙個基本的屬性,它會影響乙個元素中的文字行互相之間的對其

leftrightcenter代表左對齊,右對齊,居中

>

>

W3school的CSS筆記 基礎篇)

rel stylesheet type text css href mystyle.css head type text css hrp body style head style color sienna margin left 20px this is a paragraph p 當同乙個 ht...

W3school學習筆記之CSS3

border image slice 影象邊界向內偏移 border image width 影象邊界的寬度 border image outset 用於指定在邊框外部繪製border image area 的量 border image repeat 這個例子演示了如何建立乙個border ima...

jQuery 遍歷函式 w3school

jquery 遍歷函式包括了用於篩選 查詢和串聯元素的方法。函式描述 add 將元素新增到匹配元素的集合中。andself 把堆疊中之前的元素集新增到當前集合中。children 獲得匹配元素集合中每個元素的所有子元素。closest 從元素本身開始,逐級向上級元素匹配,並返回最先匹配的祖先元素。c...