css標籤總結

2021-10-09 09:46:17 字數 3773 閱讀 2841

#一、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...