前端之css引入方式和樣式
一,css三種引入方式
1,行間式
(1)在標籤頭部的style屬性內
(2)屬性值滿足的是css語法
(3)屬性值用key:value形式賦值,value具有單位'
(4)屬性值之間用;隔開
<div style="width: 100px; height: 100px; background-color: red"></div>2,內聯式
(1)在style標籤內(style標籤一般作為head的子標籤)
(2)屬性值滿足的是css語法
(3)屬性值用key:value形式賦值,value具有單位'
(4)屬性值之間用;隔開(一般單獨分開賦值)
(5)格式:選擇器{樣式塊}
<style type="text/css"> div { width: 100px; height: 100px; background-color: yellow!important; } </style>3,外聯式
(1)在style標籤內(style標籤一般作為head的子標籤)
(2)屬性值滿足的是css語法
(3)屬性值用key:value形式賦值,value具有單位'
(4)屬性值之間用;隔開(一般單獨分開賦值)
(5)格式:選擇器{樣式塊}
(6)將html與css檔案建立聯絡:html通過link標籤連結外部css(一般head中連結)
<link rel="stylesheet" type="text/css" href="02.css">總結:三種方式的優先順序:
1,三種方式協同佈局
2,不重複的屬性一定為唯一位置的唯一值
3,重複屬性採用覆蓋賦值,保留最後位置的屬性值
4,行間式一定是邏輯上最後被解析的位置(js的正常操作就是行間式)(在網頁上顯示的是行間式的的效果)
5,!important 會影響優先順序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三種引入方式</title> <!-- 內聯式 --> <style> div { width: 200px; height: 100px; background-color: green!important; #表示最優先這個 } </style> <!-- 外聯式 --> <link rel="stylesheet" type="text/css" href="1.css"> </head> <body> <!-- 行間式 --> <div style="width:100px;height:100px;background-color: red"></div> </body> </html>
二,長度單位以及顏色單位
1,長度單位
em:倍數,預設字型大小的倍數
px:pixel,畫素,螢幕上顯示的最小的單位,用於網頁設計,直觀方便
%:百分比
pt:point,是一個標準的長度單位,1pt=1/72英寸,用於印刷業
cm,mm用的少
2,顏色單位
colorname:直接用顏色名稱:例green red blue
RGB十進位制數字表示顏色
數字(1-255) rgb(255,255,0)
百分號(1-100) rgb(100%,100%,0)
rgb十六進位制表示
#rrggbb 簡寫為rgb 就是把兩個挨著的相同的字元簡寫成一個
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>長度以及顏色單位</title> <style type="text/css"> /*body { background-color: tan; }*/ div { width: 100px; /*width: 25cm;*/ /*width: 345mm;*/ /*width: 10em;通常160px 10rem;*/ /*width: 50vw;50% view width;*/ height: 200px; /*color: cyan;*/ /*color: rgb(100,100,100);*/ /*color: rgba(顏色,飽和度,亮度,透明度0-1);*/ /*color: rgba(0,0,0,0.5);*/ /*#後面直接預設是重疊字母*/ color: #dea } </style> </head> <body> <div>生命是盛開的花朵，它綻放得美麗，舒展，絢麗多資；生命是精美的小詩，清新流暢，意蘊悠長；生命是優美的樂曲，音律和諧，宛轉悠揚；生命是流淌的江河，奔流不息，滾滾向前。</div> </body> </html>
三,字型樣式
font:字型風格(加粗) 字型大小 字型族科
font-family:字型族科
例:font-family:"宋體","微軟雅黑" # 如果系統中沒有宋體,則下一個尋找微軟雅黑
補充:襯線字型: 宋體,仿宋 serify 任意襯線字型
非襯線字型:微軟雅黑,黑體,思源黑體 sans-serif任意非襯線字型
font-size字型大小
font-style字型風格 normal | italic 斜體 | oblique斜體 (一般不用)
font-weight字型加粗 normal(500) | bold 加粗(900) | lighter變細(100) #也可以用括號裡面的數字表示
font-variant:small-caps;將文字中英文改成大寫字母,或者normol正常顯示
補充行高設定:
line-height:50px 注意:行高設定大於等於字型大小,字型在行高中垂直居中顯示
coler:字型顏色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字型樣式</title> <style type="text/css"> span { /*大小*/ font-size: 50px; /*字重*/ font-weight: 500; /*行高*/ line-height: 15mm; /*字型風格*/ font-style: normal; /*字型樣式*/ font-family: "微軟雅黑"; /*可以設定字型重量,大小,樣式*/ font: lighter 100px "思源" } </style> </head> <body> <span>生活，就是面對現實微笑，就是越過障礙注視未來；生活，就是用心靈之剪，在人生之路上裁出葉綠的枝頭；生活，就是面對困惑或黑暗時，靈魂深處燃起豆大卻明亮且微笑的燈展。 </span> </body> </html>
四:文字樣式
color:文字樣式
text-align:橫向排列
left 居左| center 居中| right 居右vertical-align:縱向排列
baseline:將支援valign特性的物件內容基線對齊 sub:垂直對齊文字的下標 super:垂直對齊文字上標 top:將支援valign特性的物件內容與物件頂端對齊 text-top:將支援valign特性的物件文字與物件頂端對齊 middle:將支援valign特性的物件內容與物件中部對齊 bottom:將支援valign特性的物件內容與物件底端對齊 text-bottom:將支援valign特性的物件文字與物件底端對齊text-indent:字型縮減
text-decoration:字劃線(underline下劃線,line-through中劃線,overline上劃線 none 取消下劃線)
letter-spacing:字間距
word-spacing:詞間距
word-break:自動換行
normal:預設換行規則 break-all:允許在單詞內換行<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文字樣式</title> <style type="text/css"> span { /*字型顏色*/ color: tan; /*水平居中方式:left center right*/ text-align:center; /*字劃線:underline line-though overline none*/ text-decoration: overline; /*字間距*/ letter-spacing: 3px; /*詞間距*/ word-spacing: 10px } /*應用場景*/ a { text-decoration: none; } div { width: 300px; /*顯示方式*/ display: inline-block; /*垂直排列方式:top baseline bottom*/ vertical-align: baseline; /*縮排*/ text-indent: 2px; } /*遇到連體的英文,html將其解析為一個單詞(作為一個整體)*/ .div { /*按標籤的設定寬度強行換行,可以在單詞(整體)內部換行*/ word-break: break-all; } h1 { /*居中顯示標題*/ text-align: center; } </style> </head> <body> <h1>標題</h1> <span> 裝模裝樣 愣頭愣腦</span> <a href=" ">山勢雄偉 群山簇立</a> <div> 我們在河邊急三火四地脫光衣服，撲進小河裡，立刻開始打水戰，追逐嬉戲了。你看，我們分兩隊，一隊為“敵人”一隊另是“紅軍”。一雙雙小手掌把水往對方潑去，潑得人人臉上滿是晶瑩的水珠。水把眼睛弄模糊了，我們便各自退到一邊，用手拭去，然後再猛烈“進攻”。整個小河立時一片喧譁，叫喊聲，歡笑聲此伏彼起，匯成了快活的交響曲。水仗打累了，就在河裡追逐嬉戲。一個追，一個跑，在水裡穿來鑽去，小身子像條泥鰍一樣滑，怎麼也抓不到。河面上的歡歌笑語，在和兩岸遠遠的盪開了。</div> <div> Whatever is worth doing is worth doing well.</div> <div class="div">The black earthen jar standing on the stove is rustic, but it seems to be very particular. The simple body is equipped with a very curved spout and a very chic pot. </div> </body> </html>
五,背景樣式
background
background:<背景顏色>|<背景影象>|<背景重複>|<背景附件>|<背景位置> 例:background:red url("1.png") no-repeat 100px 10pxbackground-color設定背景顏色,或設定成transparent(透明)
background-image背景圖片url或者none
background-repeat背景重複repead | repeat-x | repead-y | no-repeat (就是把背景圖片平鋪)
background-attachment 背景附件 scroll | fixed
backgroud-position背景位置
background-position:水平方向 垂直方向 background-position:left top; background-position:100px 100px; 橫向:left | center |right 縱向:top | center |bottokm 或者使用百分比或者使用數字都可以