CSS入門知識

2021-08-21 16:43:50 字數 3468 閱讀 1169

###簡介

###語法

選擇器

宣告一宣告二

h1

p #十六進製制的演示

p #十六進製制的縮寫,即對於#rrggbb的顏色,可以用#rgb來表示

p #rgb方式

p #rgb的百分百方式,一定得寫成0%

id選擇器:css 中 id 選擇器以 「#」 來定義

class選擇器:css 中,類選擇器以乙個點"."號顯示

外部樣式表:在外部以css結尾的檔案中定義,然後在head之間用引入

內部樣式表:在head之間,用標籤定義

內聯樣式:在標籤內使用style屬性定義

通用選擇器(*)

元素(型別)選擇器

類選擇器

屬性選擇器

偽類id選擇器

內聯樣式

!important 規則例外:使用!important的樣式,該樣式會覆蓋css中任何其他的樣式宣告。不建議使用

權重規則:內聯樣式=1000,id選擇器=100,class類選擇器=10,html標籤選擇器=1

選擇器選用優先順序規則:

background-color 不能繼承,其預設值是 transparent

background的多個屬性可以簡寫,順序如下

background-color

background-image

background-position

color: 顏色

text-align: 對齊方式

text-decoration: 文字修飾,引數值有:uderline(下劃線),overline(上劃線),line-through(刪除線),blink(使文字閃爍),none

text-transform: 字母大小寫轉換,引數值有:uppercase(全大寫),lowercase(全小寫),capitalize(單詞首字母大寫),none(預設),inherit(從父元素繼承)

text-indent: 首行縮排

word-spacing: 文字間隔

letter-spacing: 字元間隔

font-family: 字型系列

font-style: 字型樣式,引數值有:normal(預設),italic(斜體),oblique(傾斜),inherit(從父元素繼承)

font-size: 字型大小,有px,em之分,

詳見:font-weight: 字型粗細

四種狀態(a:hover 必須跟在 a:link 和 a:visited後面;a:active 必須跟在 a:hover後面):

color: 顏色修飾

text-decoration: 文字修飾

background-color: 背景顏色修飾

ul: 無需列表

ol: 有序列表

list-style-type: 列表項標記(無序的為形狀,有序的為字母)

list-style-image: 列表項標記的圖示

屬性縮寫順序:

border-collapse: 摺疊邊框(即把兩行邊框變成一行邊框)

text-align: **文字水平對齊

vertical-align: **文字垂直對齊

css 盒模型本質上是乙個盒子,封裝周圍的html元素,它包括:邊距,邊框,填充,和實際內容

總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

盒模型是區分方向的,順序為上右下左

輪廓(outline)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用

outline-color: 外邊框顏色

outline-style: 外邊框樣式

outline-width: 外邊框寬度

屬性簡寫順序:outline-color,outline-style,outline-width

分組可以將具有相同樣式的選擇器進行分組,減少**量

巢狀適用於選擇器內部的選擇器的樣式

display(顯示):其隱藏某個元素,且隱藏的元素不會占用任何空間

visibility(可見性):其隱藏某個元素,但隱藏的元素仍需占用與未隱藏之前一樣的空間

position: 定位型別

z-index: 元素的堆疊順序,數值大的在前面

overflow: 當元素的內容溢位其區域時發生的事情,引數值有:auto, hidden, scroll, visible, inherit

clear: 清除浮動

float: 指定乙個盒子(元素)是否可以浮動

使用組合選擇符可以讓你直觀的明白選擇器與選擇器之間的關係

語法:selector:pseudo-class ,即 選擇器:偽類名

偽類與偽元素的區別:

導航欄=鏈結列表,使用 ul , li 表示

樣式:.dropdown, .dropdown-content, .dropdown:hover .dropdown-content

opacity屬性:不透明度,從0.0(完全透明)到1.0(完全不透明)

#home

no-repeat後面的兩個數值,代表背景移動的方向。

引數一:為負,表示背景影象向左移動;為正,表示背景影象向右移動

引數二:為負,表示背景影象向上移動;為正,表示背景影象向下移動

屬性選擇器:[title]{}

屬性和值選擇器:[title=w3cschool]{}

屬性和值的選擇器 - 多值

CSS入門知識

1 css定義 css是層疊樣式表的縮寫 cascading style sheets 其主要作用是解決如何顯示html元素。2 css分類 a 瀏覽器預設設定 b 外部樣式表 c 內部樣式表 d 內聯樣式表 3 css語法 css規則主要由兩部分組成 選擇器與一條或多條宣告 selector se...

關於css的入門知識

css 疊層樣式表,給html新增樣式的 接下來說一說,在網頁中如何巢狀style樣式 1.行間樣式 把style 權重1000 作為屬性解除安裝標籤裡 eg 111 2.行內樣式 把style作為標籤寫在head裡面 head meta charset utf8 title title style...

CSS相關知識及入門

修飾html頁面,美化 放置規範 格式規範 規範 類名 id值對選擇器進行組合,表現出層級關係,從而更加針對性把樣式作用於某些標籤上 選擇器1下的選擇器2 選擇器1 選擇器2.浮動 居右 選擇器常用屬性值 none 元素不浮動 left 元素向左浮動 right 元素向右浮動 注意 設定浮動屬性後,...