CSS入門筆記02

2021-08-14 18:47:49 字數 2152 閱讀 7387

塊級元素和行內元素

塊級元素(~,)特點

1.總是從新行開始

2.高度、行高、外邊距、內邊距都可控制

3.預設寬度是容器的100%

4.可容納內聯元素和其他塊元素

行內元素()特點

1.和相鄰行內元素在一行

2.寬、高無效,但水平方向padding和margin可以設定,垂直方向無效

3.預設寬度為本身內容寬度

4.行內元素只能容納文字或其他行內元素

行內塊元素()

1.和相鄰行內元素在一行,但是之間有空隙

2.預設寬度是她本身寬度

3.高度、行高、外邊距、內邊距都可控制

標籤顯示模式轉換display

塊轉行內:display:inline

行內轉塊:display:block

轉為行內塊:display:inline_block

css復合選擇器

交集選擇器

標籤選擇器.類別選擇器(h1.red)

並集選擇器

選擇器之間用逗號隔開

後代選擇器

中間用空格隔開(選擇兒子、孫子、重孫子)

子元素原則器

用">"相連(只選擇兒子)

屬性選擇器

選取標籤帶有某些特殊屬性的選擇器

選擇器含義

e[attr]

存在attr屬性既可

e[atte=val]

屬性值等於val

e[attr*=val]

屬性值包含val在任意位置

e[attr^=val]

屬性值包含val在開始位置

e[attr$=val]

屬性值包含val在結束位置

偽元素選擇器e::first-letter文字中第乙個單詞或字

e::first-line文字第一行

e::selection可改變選中文字的樣式

e::befor  e::after在div內部前面/後面插入

css書寫規範

空格規範

選擇器與"{"之間必須包含空格

屬性名與之後的":"之間不包含空格額,":"與之後的值包含空格

選擇器規範

多個選擇器時,每個選擇器獨佔一行

選擇器巢狀層級不大於**

css背景

background-color

背景顏色

background-image

背景background-repeat

是否平鋪(repeat-x橫向平鋪repeat-y縱向平鋪)

background-position

位置(預設background-position:left top)

background-attachment

固定還是滾動

背景簡寫

背景顏色     平鋪   滾動  位置

background: traparent url repeat-y scroll 0;

背景透明

background: rgba(0,0,0,0.3);

背景縮放

background-size

1.設定長度px或百分比

2.設定為cover時自動調整縮放比例充滿盒子,有溢位部分被隱藏

3.設定為contain時自動調整縮放比例,始終完整顯示在盒子內

多背景

之間","隔開,前面可能覆蓋後面,避免背景覆蓋顏色,通常將背景顏色設定在最後一張

凹凸文字

我是凸起的文字

我是凹下的文字

Flask 入門筆記 02

建議使用 pycharm 開發,便於操作 新建 manage.py 檔案 if name main 執行檔案 在瀏覽器上輸入下方的 url 位址,就能看到返回的內容 匹配 url 127.0.0.1 5000 hello mingming def hello name return hello s ...

css 入門筆記

知識一 巢狀選擇器 知識二 display 顯示 與 visibility 可見性 1.隱藏元素 display none或visibility hidden 2.display 塊和內聯元素 3.如何改變乙個元素顯示 可以更改內聯元素和塊元素,反之亦然,可以使頁面看起來是以一種特定的方式組合,並仍...

CSS入門筆記

按照css樣式書寫的位置 或者引入方式 css樣式表可以分為三大類 行內樣式表 行內式 內部樣式表 嵌入式 外部樣式表 鏈結式 內部樣式表是寫到htnl頁面內部,將所有的css 抽取出來,單獨放到乙個標籤中。divstyle 行內樣式表是在元素標籤內部的style屬性中設定css樣式,適合於修改簡單...