Web前端開發筆記-----6.div和span,css基礎語法和引入方式

文章目錄

• Web前端開發筆記-----6.div和span,css基礎語法和引入方式
• 一、div和span
• 二、css基礎
• • 1.css基礎語法
  • 2.css樣式的引入方式
  • • a.內聯樣式和內部樣式
    • b.外部樣式
• 三、css中的顏色表示法
• 四、背景樣式
• 五、邊框樣式

一、div和span

div (塊):div全稱為division,“分割、分割槽”的意思，<div>標籤用來劃分一個區域，相當於一塊區域容器,可
          以容納段落、標題、表格、影象等各種網頁元素.即HTML中大多數的標籤都可以巢狀在<div>標籤中
          <div>中還可以巢狀多層<div>,用來將網頁分割成獨立的、不同的部分，來實現網頁的規劃和佈局。
span (內聯) :用來修飾文字的，div與span都是沒有任何預設樣式的，需要配合CSS才行。
 

eg:<div>這是<span>這是一個內聯</span>一個塊</div>

二、css基礎

1.css基礎語法

格式：選擇器{屬性1：值1；屬性2：值2}
單位：px ->畫素（pixel），% ->百分比
基本樣式：width，heigh，backgroud-color
css註釋：/*css註釋的內容 */

2.css樣式的引入方式

a.內聯樣式和內部樣式

內聯樣式：style屬性
<div style="width: 100px; height: 100px; background-color: red;">
 
這是一個塊</div>
內部樣式：style標籤
<style>
        div{width: 100px; height: 100px; background-color: red;}
</style>

b.外部樣式

1.引入一個單獨的css檔案
方法：通過<link>標籤引入外部資源
<link rel="stylesheet" href="./css/style.css">
rel屬性指定資源跟頁面的關係，href屬性指定資源的的地址

2.通過@import方式引入外部樣式（這種方法有很多問題，不建議使用！）
    <
 
style>
        @import url(./css/style.css);
    </style>
    

額外知識
link的rel屬性：http://www.w3school.com.cn/tags/att_link_rel.asp
link與@import的區別：https://www.cnblogs.com/my–sunshine/p/6872224.html

三、css中的顏色表示法

1.單詞表示法：red blue green…
2.十六進位制表示法：#000000（黑色） #ffffff（白色）
3.rgb三原色表示法：rgb（255，255，255）rgb（0，0，0）範圍：0-255 黑到白

網頁中提取顏色的方法：
fehelper：https://www.baidufe.com/fehelper/
photoshop：按PrtSc鍵截圖 -> 在ps中開啟 -> 吸管工具 ->調色盤中檢視

四、背景樣式

background-color:背景顏色

background-image：背景圖片
url(背景地址)
預設:會水平垂直都鋪滿背景圖

background-repeat：背景圖片的平鋪方式
repeat-x : x軸平鋪

repeat-y : y軸平鋪

repeat : (x,y都進行平鋪，預設值)
no- repeat : 都不平鋪

background-position:背景圖片的位置（相對於左上角）
x,y x,y可以用數值（px，%）
也可以是left center right
eg：background-position:100px，100px；
background-position:right，center；

background-attachment：背景圖隨滾動條的移動方式
scroll :預設值(背景位置是安照當前元素進行偏移的)
fixed (背景位置是按照瀏覽器進行偏移的)

背景實現視覺差效果
例項網站 http://www.divups.com/

實現方式：背景圖都加上屬性 background-attachment：fixed；

五、邊框樣式

border-style :邊框樣式
solid :實線
dashed :虛線
dotted :點線
border width :邊框大小
border-color :邊框顏色

也可以單獨針對某一條邊進行設定
border-top/right/buttom/left：

利用邊框實現三角形

程式碼：

 div{
            width: 0px; height: 0px;
            border-top: 90px solid transparent ;    /* transparent屬性表示透明顏色  */
            border-right: 90px solid transparent ;
            border-bottom: 90px solid red;
            border-left: 90px solid transparent;
        }

結果：