在標籤的 style 屬性上設定」key:value value;」,修改標籤樣式。
需求 1:分別定義兩個 div、span 標籤,分別修改每個 div 標籤的樣式為:邊框 1 個畫素,實線,紅色。
>
style
="border
: 1px solid red;
">
div 標籤 1div
>
style
="border
: 1px solid red;
">
div 標籤 2div
>
style
="border
: 1px solid red;
">
span 標籤 1span
>
style
="border
: 1px solid red;
">
span 標籤 2span
>
body
>
在 head 標籤中,使用 style 標籤來定義各種自己需要的 css 樣式。 格式如下:
***
多個宣告:如果要定義不止乙個宣告,則需要用分號將每個宣告分開。
雖然最後一條宣告的 最後可以不加分號(但盡量在每條宣告的末尾都加上分號)
需求 2:分別定義兩個 div、span 標籤,分別修改每個 div 標籤的樣式為:邊框 1 個畫素,實線,紅色
lang
="en"
>
>
charset
="utf-8"
>
>
titletitle
>
type
="text/css"
>
divspan
style
>
head
>
>
>
div 標籤 1div
>
>
div 標籤 2div
>
>
span 標籤 1span
>
>
span 標籤 2span
>
body
>
html
>
把 css 樣式寫成乙個單獨的 css 檔案,再通過 link 標籤引入即可復用。
使用 html 的標籤 匯入 css 樣 式檔案。
1.css檔案
建立乙個.css檔案,不再需要標籤。
div
span
2.html 檔案**:
lang
="en"
>
>
charset
="utf-8"
>
>
titletitle
>
link 標籤專門用來引入 css 樣式**
rel=
"stylesheet"
type
="text/css"
href
="1.css"
/>
head
>
>
>
div 標籤 1div
>
>
div 標籤 2div
>
>
span 標籤 1span
>
>
span 標籤 2span
>
body
>
html
>
標籤名選擇器的格式是:
標籤名
type
="text/css"
>
divspan
style
>
div 標籤 1
加乙個 # ,後面表示id的屬性值
type
="text/css"
>
#id001
#username
style
>
div 標籤 1
div 標籤 2
加乙個 .,後面表示類的屬性值
type
="text/css"
>
.class01
.username
style
>
div 標籤 class01
div 標籤
組合選擇器的格式是:
選擇器 1,選擇器 2,選擇器 n
組合選擇器可以讓多個選擇器共用同乙個 css 樣式**。
type
="text/css"
>
.class01 , #id01
style
>
case1:只有div標籤才能使用class01樣式
div.class01
case2: 當乙個標籤,其有兒子標籤div,兒子標籤div又有兒子標籤span時,則此標籤才可使用class01樣式
.class01 div span
id相當於人的身份證,不可以重複
class相當於人的名稱可以重複
乙個html標籤只能繫結乙個id名稱
乙個html標籤可以繫結多個class名稱
id選擇器是以#開頭
class選擇器是以.開頭
字型顏色 color:red;
顏色可以寫顏色名如:black, blue, red, green 等
顏色也可以寫 rgb 值和十六進製制表示值:如 rgb(255,0,0),#00f6de,如果寫十六進製制值必 須加#
寬度width:19px;
寬度可以寫畫素值:19px;
也可以寫百分比值:20%;
高度height:20px;
高度可以寫畫素值:19px;
也可以寫百分比值:20%;
背景顏色
background-color:#0f2d4c
字型樣式
color:#ff0000;字型顏色紅色
font-size:20px; 字型大小
紅色 ,1 畫素,實線邊框
border:1px solid red;
div 居中
margin-left: auto;
margin-right: auto;
文字居中
text-align: center;
超連線去下劃線
text-decoration: none;
**細線
table
td,th
列表去除修飾
ul
初學CSS 學習筆記
常用選擇器 css指的是層疊樣式表 cascading style sheets 通過樣式 style 來修飾html元素,使元素樣式的定義更加簡潔高效,從逐條修改元素樣式中解放出來。例 style background color green 好好學習,天天向上0 div 例 divstyle 例...
CSS技術學習小計
css cascading style sheet 層疊樣式表單 是用於 增強 控制網頁樣式並允許樣式資訊於網頁內容分離的一種標記語言。css定義的規則具體如下 選擇器在上述的樣式規則種,選擇器用於指定css樣式作用的html物件,花括號內的屬性是對該物件設定的具體樣式。其中,屬性和值以 鍵值對 的...
初學CSS樣式
今天學了三個樣式表,邊學邊練正好給了我喘息的時間,這樣的節奏我還是挺適應的,學會使用這些方法等,內部樣式表 內嵌式是將css 集中寫在html文件的head頭部標籤中,並且用style標籤定義,其基本語法格式如下 行內式 內聯樣式 標籤名 style 屬性1 屬性值1 屬性2 屬性值2 屬性3 屬性...