:CSS-圖片素材模板推薦免费ppt模版下载-道格办公
投稿
  1. JustNews首頁
  2. 圖片素材模板推薦
  3. CSS

CSS

作者: 道格資源 • • 圖片素材模板推薦 • 瀏覽量 977

To add CSS styles inside an HTML document, you can use the `style` attribute. In your example, you want to add some styles to an input element:```html```Within the `style` attribute, you can specify CSS decl

認識學習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


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);

注意

  1. 建議使用十六進製表達方式

  2. 調試時可以用英文字母形式，初期的調試就是隨便設置一個顏色，查看區塊是否存在等，在合模型中我們會遇到

  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';

電腦加載時會從第一個字體開始找，第一個沒有依次往後找


字體寫法注意事項：

  • 多個字體之間用英文逗號, 隔開

  • 字體名稱見有空格時，要加引號，單引號雙引號都可以

  • 中文字體名稱要用空格：'宋體'


2-1 CSS的三種引入方式

行內樣式

為了減少標籤數量，做到簡潔化，引入內部樣式

內部樣式

  1. 將CSS樣式抽出來

  2. 在head標籤裡聲明一個< style>< /style> 標籤

  3. 將樣式放到 style 標籤裡面

  4. 相同的標籤，寫在相同的大括號裡面{},大括號前加上標籤名


<style>
 p{
    font-size: 16px;
    color: #FFFFFF;
}
</style>


外部樣式

當添加樣式標籤較多時，會出現頭重腳輕

引入css存放樣式代碼

  1. 建一個index.css文件

  2. 寫入< style>

  3. 建立HTML和CSS文件的聯繫，即是 link標籤引入CSS文件

<link rel='stylesheet' type='text/css' href ='index.css' />

補充知識

CSS內部註釋為

/*   */

外部註釋 直接在.css文件中註釋

link

  1. rel屬性< code >rel屬性規定了當前文檔與被鏈接文檔之間的關係，但是rel屬性的stylesheet值被所有瀏覽器支持，也就是說你只要記住一個值即可。

stylesheet的意思就是文檔的外部樣式表。

  2.type屬性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;
}
注意
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>
</ul>
 .ul-item {
  color: #ff6973;
}< /span>
全部變為紅色，體現了文字屬性的繼承性< /span>

高級選擇器的優先級
 權重方法
可通過 id 選擇器> 類選擇器> 標籤選擇器
也可假設 id 選擇器 為100 類選擇器為 10 標籤選擇器為 1；進行比較計算
權重的作用
<ul class='ul-item'>
  <li>
    <p>文字的顏色到底是什麼顏色？ </p>
  </li>
</ul>
 ul li p {
  color: blue;
}
p {
  color: red;
}
< p cid='n192' mdtype='paragraph' >第一個為3 第二個為1
有的時候權重不起作用
.ul-item li {
  color: blue;
}
p {
  color: red;
}
由於第一個沒有選中P

文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/css.html

贊 (810)
打賞 支付宝扫一扫 支付宝扫一扫
Lomu Mr.Ding 專欄作者
48 196
single-end

相關推薦