認識學習CSS
1-1 HTML內部添加樣式
添加聲明
<input type='text' placeholder='手機號碼' style=' '>
1-2 字體大小/字體粗細
CSS中,樣式是由屬性 和值< /span> 組成
格式為 屬性:值;
字體大小
格式 font-size:36px;
字體加粗
格式 font-weight:100;
400-->normal(正常粗細) 200-->lighter(細) 700-->bold span>
1-3 字體顏色/文字間對其方式
顏色
1、英文字母
如color: black; color: blue; color: red;
2、十六進制顏色
由# 開頭每個數字範圍為00-FF
如color: #DAE8FC; color: #D5E8D4;
3、reb形式
是由red、green、blue三者決定,每種顏色的範圍為0~255
如color: rgb(253,217,106);
4、rgba形式
比rgbd多了個a,a是透明度Alpha,a在0-1之間 0.4可以寫成.4
如
color: rgba(253,217,106,1.0)
color: rgba(253,217,106,0.3);
注意
建議使用十六進製表達方式
調試時可以用英文字母形式,初期的調試就是隨便設置一個顏色,查看區塊是否存在等,在合模型中我們會遇到
設置文字透明度或者背景透明度,就用到rgba形式
文字居中/居左/居右
設置文字對齊格式
text-align: center; 文字居中對齊
text-align: left;文字左對齊
text-align: right;文字右對齊
1-4 文字行高/字間距/字體
行高
行高的設置格式:line-height: 30px;
作用:1、改變段落中行與行之間的距離
2、使文字上下居中 ,先寫text-align: center; 再將line-height設置與height設置一致
字間距
指的是字母與字母之間,文字與文字之間設置字間距的格式:letter-spacing: 30px;< /span>
字體
如宋體、隸書等
設置字體方式 關鍵字+值
'Goudy Bookletter 1911', sans-serif, 'Gill Sans Extrabold';
電腦加載時會從第一個字體開始找,第一個沒有依次往後找 span>
字體寫法注意事項:
多個字體之間用英文逗號, 隔開
字體名稱見有空格時,要加引號,單引號雙引號都可以
中文字體名稱要用空格:'宋體'
2-1 CSS的三種引入方式
行內樣式
為了減少標籤數量,做到簡潔化,引入內部樣式
內部樣式
將CSS樣式抽出來
在head標籤裡聲明一個< style>< /style> 標籤
將樣式放到 style 標籤裡面
相同的標籤,寫在相同的大括號裡面{},大括號前加上標籤名
<style>
p{
font-size: 16px;
color: #FFFFFF;
}
</style>
外部樣式
當添加樣式標籤較多時,會出現頭重腳輕
引入css存放樣式代碼
建一個index.css文件
寫入< style>
建立HTML和CSS文件的聯繫,即是 link標籤引入CSS文件
<link rel='stylesheet' type='text/css' href ='index.css' />
補充知識
CSS內部註釋為
/* */
外部註釋 直接在.css文件中註釋
link
rel
屬性< code >rel屬性規定了當前文檔與被鏈接文檔之間的關係,但是rel
屬性的stylesheet
值被所有瀏覽器支持,也就是說你只要記住一個值即可。
stylesheet
的意思就是文檔的外部樣式表。
2.type code>
屬性type
屬性規定了被鏈接文檔的MIME(多用途互聯網郵件擴展類型)類型,type< /code>
屬性對應的最常見的值就是text/css
,該類型描述樣式表.
3.href屬性< /code>
href 屬性後跟的要引入的鏈接地址
2-2 相對路徑/絕對路徑
絕對路徑
如一張圖片位置(明確位置)
<img src='E:ook網頁佈局g.jpg' />
相對路徑
定義:所謂相對路徑就是相對於文件自身位置,去尋找要引入的資源文件
text文件下有index.html 和 index.css
當前在index.html引入index.css就要用 ./當前文件夾目錄
../:回到上一級文件夾目錄
../返回上一層,如果有多層就用多個../< /span>
css/表示進入css文件
2-3 常用選擇器
標籤選擇器
即定義一次,多次使用
分為原始樣式內部樣式外部樣式
< /pre>
選擇器的層疊性
在一次標籤後,繼續添加標籤會覆蓋前一個標籤< span md-inline='strong' >類選擇器
給一段文字賦予特定的屬性
定義
<p class='article'>
class是定義類的關鍵字,article是類名,類名可以任意,但是要符合規範
</p> ;使用
.article {
color : red;
font-size: 14px;
}內部樣式要寫在< style> < /style>之間
外部樣式直接寫在.css文件
一個標籤可以添加多個類名,類名間用空格
<p class='common color font-size'>
common設置通用樣式, color設置特殊顏色,font-size設置特殊字體大小
</p>id選擇器
定義
<p id='p-item'>這是一段文字</p >
用法
#p-item {
font-size: 24px;
font-weight: 400;
} pre>注意
1、id選擇器只能出現一次
2、id只能有一個標籤
2-4 高級選擇器
1.後代選擇器
p a ---- 選擇所有p標籤內的所有a標籤
書寫規則:用空格隔開
/* 選擇id名為password的標籤內部所有類名為box的元素內部的所有p標籤*/
#password .box p{}
/* 選擇所有p標籤內部的所有span標籤*/
p span{}
/* 選擇所有p標籤內部的所有類名為spanItem的標籤*/
p .spanItem{}2.交集選擇器
書寫規則
a.special{}
<a href ='#' class='special'>超鏈接</a>
<a href='#'>超鏈接</a>
<a href='#'>超鏈接</a>
<a href='#' >超鏈接</a>選中a中所有類名為special的標籤
3.子選擇器< /span>
後代選擇器突出後代
子選擇器突出是'子'
代碼對比
span {
color: black;
}
p span {
color: orangered;
}
span {
color: black;
}
p> span {
color: orangered;
}
4、並集選擇器
給不同的標籤,或者不同的類名的標籤添加相同的樣式
規則 在標籤名後或者類名後用逗號隔開
.box,p,h3,.phone{}
< p cid='n174' mdtype='paragraph' >box和phone標籤名為p、h3的標籤添加相同的屬性2-5 選擇器的優先級
單個選擇器的優先級
id 選擇器> 類選擇器>標籤選擇器
p {
color: blue;
}
.poem {
color: red;
}
#ch-poem {
color: purple;
}最終顏色為 purple 是因為id 選擇器的優先級較高
文字屬性的繼承性
<ul class='ul-item'>
蒹葭
<li>蒹葭蒼蒼,白露為霜。所謂伊人,在水一方。 </li>
<li>溯洄從之,道阻且長。溯游從之,宛在水中央。 </li>
<li>蒹葭萋萋,白露未晞。所謂伊人,在水之湄。 </li>
</ span>ul>.ul-item {
color: #ff6973;
}< /span>全部變為紅色,體現了文字屬性的繼承性< /span>
高級選擇器的優先級
權重方法
可通過 id 選擇器> 類選擇器> 標籤選擇器
也可假設 id 選擇器 為100 類選擇器為 10 標籤選擇器為 1;進行比較計算
權重的作用
<ul class='ul-item'>
< span>li>
<p>文字的顏色到底是什麼顏色? </p>
</ span>li>
</ul span>>ul li p {< p cid='n192' mdtype='paragraph' >第一個為3 第二個為1
color: blue;
}
p {
color: red;
}有的時候權重不起作用
.ul-item li {
color: blue;
}
p {
color: red;
}由於第一個沒有選中P
文章為用戶上傳,僅供非商業瀏覽。發布者:Lomu,轉轉請註明出處: https://www.daogebangong.com/zh-Hant/articles/detail/css.html
评论列表(196条)
测试