#一、css
駝峰命名法
headertitle phonenumber
##1.css基礎樣式
基礎樣式 img行內可設寬高(特殊)
其他行內元素都不能設定寬高
##塊級元素與行內元素之間的轉換
屬性:display
屬性值:
block 《塊級元素》
inline 《行內元素》 無法設定寬高
inline-block 《行內塊元素》 可設定寬高且不換行
注意:寬高帶上單位:px
##2.背景屬性
background-color 背景預設不覆蓋自提
###背景影象
background-img:url("位置");加引號
body
小,背景大,平鋪
###背景平鋪
屬性:background-repeat
屬性值:repeat-x 橫向平鋪
repeat-y 縱向平鋪
no-repeat 不平鋪原大小
repeat x,y平鋪(預設)
###背景定位
屬性:background-position
屬性值:center 的位置
right
left
topbottom
40% 50% 需要x,y兩個值,橫縱向移動
50px 100px 同上,移動px個單位
###背景關聯
屬性:background-attachment
屬性值:scroll 不隨網頁滾動條移動
fixed 隨網頁滾動條移動
位置為相對於可視區域
###背景尺寸
屬性:background-size: 大小
屬性值:長度值 100px 100px;
100% 100% 百分比 顯示充滿背景框
cover 放大或縮小鋪滿父集,不顯示完整,不留空,超出部分裁剪
contain 鋪滿合適面積,顯示完整,不鋪滿邊框,有留空
cover和contain:本身的寬高比例保持不變
若只設乙個值,另乙個值為auto
##規定背景定位 p標籤自帶外邊距
屬性:background-origin 是否與邊框重合
屬性值:padding-box 與邊框不重合(預設)
border-box 與邊框重合
content-box 契合文字
邊框:solid實線 dotted虛線
##背景繪製區域
屬性:background-clip
屬性值:border-box 將邊框外的裁剪
padding-box 裁剪與邊框重合部分
content-box 講文字內容外的裁剪
簡寫:background:red url(「」) ;
順序:color image repeat attachment position/size origin clip
#3.字型屬性
font-family(字型):「arial」、「宋體」、「黑體」
font-style(樣式):normal、italic(斜體)或oblique(傾斜)
font-variant(字型變化):normal、small-caps(小寫字母轉小型大寫字母)
font-weight(字型粗細):normal、bold(加粗)、bolder 數字900通同加粗
font-size(字型大小):20px(一般為偶數防失幀) 單位px
自帶傾斜的標籤;行內元素
font 簡寫順序
font-style font-variant font-weight font-size font-family
簡寫中必含font-size和font-family
常用:body
font-family:**,**;
#4文字屬性
##文字顏色
屬性:color 只作用於文字
##縮排文字
屬性:text-indent
屬性值:2em(常用) 縮排兩個字元
正數負數
百分比注意:只對塊級元素有效
##水平對齊
屬 性: text-align 行內效果不計
屬性值: left 需要相應的寬高
center
right
##垂直對齊
屬 性: vertical-align 相對於當行
屬性值: baseline img除外,可使改行內元素對齊
top
middle
bottom
長度值##詞間隔
屬 性: word-spacing 單詞之間空格
屬性值: 正長度值 調整距離
負長度值 數字+px
##字間距
屬 性: letter-spacing
屬性值: 正長度值 30px
負長度值
##字元轉換
屬 性: text-transform
屬性值: none( 預設)
uppercase 大寫
lowercase 小寫
capitalize 首字母大寫
##文字裝飾
屬 性: text-decoration
屬性值: none 無裝飾 可去掉標籤a的下劃線
underline 下劃線 配合a:hover{}懸停下劃線
overline 上劃線
line-through 貫穿線
##文字換行
屬 性: word-wrap
屬性值: normal 不自動換行 單個英文單詞
break-word
disc
circle
square
decimal
##列表項影象標記
屬 性: list-style-image
屬性值: url("路徑")
##列表項標記位
屬 性: list-style-position
屬性值: outside
inside
dotted
solid
double
dashed
border-style:上 右 下 左 矩形框內分別設定線
三個值:上 左右 下
兩個值:上下 左右
##邊框寬度
屬 性: border-width
屬性值: thin
medium
thick
長度值 單位px
##邊框顏色
屬 性: border-color
屬性值: 各種型別的顏色值
同style一樣 可設定四個方向,方法相同
##單方向邊框
屬 性: border-top
border-right
border-bottom
border-left
屬性:width style color( 三個值的順序可以打亂)
#7 輪廓屬性
屬 性: outline
不佔位置,與其他元素重合
#8 **屬性
##**邊框
屬性: border
table, th, td
##摺疊邊框
屬 性: border-collapse
屬性值: collapse
table框變成單線框
css標籤和html標籤
一,html 標題標籤 h1,h2,h3,h4,h5,h6 段落標籤 水平線標籤 換行標籤 水平線標籤 size 水平粗細線 width 水平線寬度 align 水平線對齊方式 color 水平線顏色 字型標籤 funt size 文字大小 color 字型顏色 face 文字的字型 標籤 src ...
CSS動畫標籤
keyframes 規則用於建立動畫。它的三個必要的值如下 animationname 定義動畫的名稱 keyframes selector 必需。動畫時長的百分比 css styles 乙個或多個合法的 css 樣式屬性 animation name 規定需要繫結到選擇器的 keyframe 名稱...
CSS基礎標籤
css基礎知識 1.1基本概念 css層疊樣式表 cascadingstyle sheets html描述了要呈現的內容,而css則定義了這些內容的呈現形式,比如字型 顏色等。使用css能夠將頁面內容和呈現形式有效分離,有利於分工合作,也有利於快速更換不同的呈現形式 使用樣式表可以有3種方式 同過c...