css 尺寸、邊框、內邊距、背景以及css Sprite

上節課回顧：

HTML標簽： 格式排版　

p 段落 雙
br 換行 單
hr 分隔線 單
h1~h6 標題 雙
pre 原樣格式化輸出 雙
div 標簽，無任何特殊意義

 

HTML標簽 ：文本

<em> 強調 傾斜 雙
<ruby></ruby> 加拼音
<rt></rt>
<strong> 加粗 強調 雙
<mark></mark> 標記 選中 雙
 下標
 上標
<ins></ins> 插入的內容
<del></del> 刪除的內容

 

CSS： 在html中的使用

link 外部css 單 href type rel
<style> </style>
style屬性

 

CSS選擇器以及優先級

#id
.className
tagName

*

組合 selector1 selector2
組合 selector1>selector2
群組 selector1,selecotr2
and p.item .item.first-item p#nav <div class="item first-item">

選擇器優先級

 

id > class > tagName

 

CSS屬性： 字體 文本 顏色

font:[bold|style] size family
font-family:
font-size:2em
font-weight bold
font-style italic
font-variant: small-caps

color

word-spacing 詞的間距，通過空格來識別。
letter-spacing  字母間隔，值為長度，可以是負值。
text-align left/right/center  橫向排列
vertical-align: middle/top/bottom 垂直對齊
line-height 設置行間距離
word-wrap: break-word / overflow-wrap 允許長單詞或url地址換到下一行
white-space: pre / pre-wrap
text-decoration: underline / overline / line-through / none
text-indent

 

CSS顏色和長度

 顏色
colorName
rgb(100，80，60)  rgb(100%,50%,80%)
十六進制    #fff  # c1c1c1

長度單位

px 像素

em  font-size:2em 字體大小原尺寸的2倍
百分比

 

CSS 尺寸 、內邊距、 邊框、 背景

尺寸

• width: max-width   min-width 設置最大寬度和設置最小寬度

• height max-height min-height

邊框

• border-style 邊框風格 solid 實線 / dotted 點線 / dashed 虛線 / double 雙層 / none 設置邊框：無邊框

• border-width 邊框寬度

• border-color 邊框顏色 后面可以根rgb 也可以直接#f90

• border 復合屬性 border: 1px solid #ccc 

 

內邊距

• padding-left：20px；  距離左邊框20px

• padding-top

• padding-right

• padding-bottom

• padding 使用注意點如下：

　　padding: 值; 上下左右
　　padding: 值1 值2； 上下 左右
　　padding: 值1 值2 值3; 上 左右 下
　　padding: 值2 值2 值3 值4； 上 右 下 左  后面要加單位px。

 

背景屬性

• background-color 背景顏色 transparent（透明）

• background-image 背景圖片 url()

• background-repeat 背景圖片平鋪 repeat no-repeat（不重復平鋪）repeat-x（水平方向重復平鋪） repeat-y（豎直方向重復平鋪）

• background-position 背景圖片位置 10px,10px 根據坐標圖片位置

• background-position : right center(右中)  center center 居中 

• background-attachment 背景圖片固定 scroll / fixed  scroll---滾動  fixed --固定

• background 復合屬性

• background: #ccc url('../../dist/images_two/bg02.jpg') no-repeat 10px 10px

CSS Sprite 精靈圖

• 利用 background-position 設置背景圖片的位置

• 把很多小的圖片 集成到一張大圖上

• 好處： 減少網絡請求數量

2 超級鏈接

2.1 a 元素

屬性

• href  后面跟着要跳轉的連接

• target =  _blank / _self  -blank指向一個新的網頁

• title  單純的一個圖片標題

• download H5新增的  下載

特殊用法

• 跳轉網頁

• 發短信

• 打電話

• 發郵件

2.2 路徑

• 相對路徑 ./ ../

• 絕對路徑 URL http://www.biadu.com/index.html

• 特殊的相對路徑 /lesson/path/index.html

 

2.3 cursor css屬性

pointer /  move / no-drop

 

2.4 錨點

設置錨點

第一種方式
<a name="錨點名字"></a>

第二種方式
隨便一個元素
<tagname id="錨點名字"></tagname>

 

跳轉到指定錨點

<a href="#錨點名"></a>  注意：# 是在當前頁面跳轉，不加#會跳到另外一個頁面。

 

2.5 完整URL

http://www.badiu.com/path/demo/contents/index.php?a=100&b=300#mao1

協議protocol http
主機名hostname www.baidu.com / IP
路徑 path /path/demo/contents/
文件名filename index.php
查詢內容query ?a=100&b=300
錨點 #mao1

 

3圖 片

img元素

屬性

• src  后面跟圖片地址

• title  圖片的標題

• alt  圖片丟失也能看到圖片顯示的名字，img元素后最好跟上，好的習慣。

• usemap 將圖像定義為客戶端圖像映射。圖像映射指的是帶有可點擊區域的圖像。

圖片映射

map元素

　　usemap屬性與map中的name或id相關聯，以建立img與map之間的關系。

• name  

• id

area元素

• shape rect（矩形） /circle（圓形） /poly（聚？？？）

• coords 坐標  矩形取對角兩個點，四個值 圓取圓心加半徑三個值 poly取三個點，六個值

• target 指向的頁面，如果需要跳到新頁面，要指定_blank，不然可以不寫或者等於_self

• href 后面跟着url地址

• title  單純的圖片標題