CSS的基礎學習

2021-09-26 05:16:25 字數 2745 閱讀 2303

css:css 指層疊樣式表(cascading style sheets),層疊的意思是:多重樣式定義被層疊為一。

層疊樣式表

他的作用,就是設定我們的html標籤的展示樣式,因為html自帶的屬性,比較匱乏,不能滿足我們對樣式的要求,

另一方面,我們想要解耦,html標籤,他既要定義網頁元素,又要展示樣式,但是html標籤提供的屬性,比較少,很多時候不能滿足我們的要求

這個時候,css出現了,他給我們提供了,非常豐富的樣式,能夠滿足我們的要求,那麼以後,html標籤只需要定義網頁元素即可,至於這個標籤展示成什麼樣子,交給css來做 ,也就是說,我們學了css 那麼html標籤自帶屬性 ,基本上就不用了 ,就用csss

那css怎麼跟html標籤配合使用呢?有三種方式

要是使用內部樣式:得來學乙個概念叫做選擇器

方式3:外部樣式:復用度更高,開發首選

內聯樣式:每個html標籤 ,都有乙個style屬性,style屬性值,就可以書寫css**,那麼書寫的css**就會對這個標籤起作用,一次只能控制這個乙個標籤

css**的語法風格:屬性名:屬性值;屬性名2:值2

div標籤:

div 標籤是乙個純淨的塊標籤,所謂的純淨,就是這個標籤,不帶有任何樣式(沒有寬高,沒有背景等)

塊標籤:這個標籤會預設佔據一行

行標籤:不會佔據一行

選擇器的介紹

asdfasdf

asdfasdf

asdfasdf

aaaaaa

dddd

一行文字

一行文字

常用的選擇器的優先順序

內聯樣式》id選擇器》class選擇器》標籤名選擇器

還有其他型別的選擇器:

跳到首頁

相鄰比較器

div +p{}

意思是選擇跟我 div 同級的下乙個挨著的p元素(單個的p 後面在跟p是選不中的) 如果在div 和p

之間隔著乙個元素 那是選不中的

相鄰所有比較器

div ~p

邊框的陰影

box-shadow:10px 10px 10px red;(x方向 y方向 模糊的畫素值 陰影的顏色)

填充

用來設定邊框和內部元素的距離

padding-top 上邊距

padding-bottom 下邊距

padding-lift 左邊距

padding-right 右邊距

css對文字的排版

letter-spacing

控制字型之間的間距,這個間距實際上就是瀏覽器中顯示字元間的空格距離

引數:normal 正常顯示(預設)

長度 可以使用負數,帶上單位(px)

文字對應的操作

文字的修飾:text-decoration

引數:underline 下劃線

overline 上劃線

line-through 刪除線

blink 新增閃爍效果(只能在netscape的瀏覽器中正常顯示)

none 沒有任何的修飾

文字的對齊方式:

text-align 控制文字的排列和對齊的方式

引數:left 左對齊

right 右對齊

center 居中

justify 兩端對齊

段落的縮排

text-indent 用來控制每個段落的首行縮排的距離

行高的設定

line-height 控制文字內容之間的間距

引數:normal 瀏覽器預設的行高

畫素值百分比 表示行高是該元素字型大小的百分比

實現動態變化

放大和縮小位移

transform

transform:rotate(30deg)//旋轉30度

transform:translate(50px,100px)把元素從左側50畫素,從頂端移動100畫素

transform:scale(2,4)把寬度轉化為原來的2倍,把高度轉化為原來的4倍

transform:skew(30deg,20deg)圍繞x軸把元素翻轉30度,圍繞y軸翻轉20度

動畫

animation

格式animation:myfirst 5s;(myfirst動畫名,5s的動畫時間)

@keyframes myfirst

25%50%

100%}

@keyframes myfirst

to}過度動畫

transition

格式:transition:width 2s;(應用於寬度,時間兩秒)

divdiv:hover先定義乙個層hover滑鼠進入後把寬度改為從100畫素變為300畫素的過渡過程

css學習 css基礎

子選擇器 parent child 子選擇器是指選擇parent的範圍內的第乙個子元素。這裡parent和child均是偽 可以是class用.classname,也可以是標籤ul li,也可以是id pid cid 後代選擇器 parent child 後代選擇器是指 選擇parent範圍內的所欲...

CSS的基礎學習

css學習 學習資源 css語法檢查 配置css的方法 1.行內式 行內式通過直接設定元素的style屬性來引入css 行內式優點 元素的樣式簡單明瞭 缺點 不易維護 2.內嵌式 通過在head標籤中加入style標籤來引入css 缺點 不能被多個頁面重複使用 3.鏈結式 通過link標籤來引入cs...

css基礎學習

1.class和id 1 同一id在乙個頁面內只能應用一次,而class則是 用於描述多次出現的元素。2 class的定義方法 指定標籤 類名 id的定義方法 指定標籤 id名 class的應用方法 指定標籤 class 類名 id的應用方法 指定標籤id id名 2.css的引用 1 內部樣式 段...