CSS基礎學習 簡單的CSS語句

2021-10-23 03:18:38 字數 3021 閱讀 3469

用處語法

注意設定字型大小

font-size

新增的內容和買衣服大小一樣,xl大於l,大於s,也可以使用數值設定字型大小,選擇需要的單位

字型是否加粗

font-weight

新增內容為bold加粗,bolder(比加粗稍微粗一點)lighter(比加粗細一點)或者加粗數值,為有幾個選項可供選擇

字型是否傾斜

font-style

如果是新增italic

設定字元字型

font-family

需要用什麼字型就新增什麼字型就行了,如果字型為多個單詞拼寫,需要單引號括起來,可以直接寫中文字型名字,可以新增多個,按照就近原則

小型大寫字母

font-variant

把小寫的字母轉換成大寫字母,但是個頭不變,如果存在小寫字母。後面加入small-caps就可以

設定文字縮排

text-indent

新增縮排字元,一般設定首行縮排兩個字元2em

設定文字對齊

text-align

center居中對齊\left左對齊\right右對齊\justy兩端對齊

設定行間距

text-align

可以新增數值,最好是用em形式的,em和word裡面的倍數一樣,比如1.5em就是1.5倍行間距

修飾文字

text-decoration

可以給文字增加線條,overline上劃線,underline下劃線,line-through刪除線。還可以設定樣式和顏色,去掉超連結的下劃線需要加none

大小寫轉換

text-transform

capitalize首字母大寫,lowercase字母小寫,uppercase字母大寫

修改顏色

color

後面可以直接新增顏色的英文名稱,還可以使用rgb形式,或者16進製制的形式

字元間距

letter-spacing

新增數值即可

英文單詞間距

word-spacing

新增數值即可,只對英文單詞才有用

設定文字方向

direction

ltr預設。文字方向從左到右,rtl文字方向從右到左。

新增背景,對body進行新增

background-color

新增需要新增的顏色即可

新增背景

background-image:url(位址)

位址中加入自己的位址即可

背景平鋪

background-repeat

repeat水平和垂直都平鋪, repeat-x水平方向平鋪,repeat-y垂直方向平鋪,no-repeat不平鋪

背景位置

background-position

center居中平鋪\left左平鋪\right右平鋪\right top右上角\right bottom右下角\left top左上角\left bottom左下角,也可以使用數值的方式,相對方式50% 50%代表位於寬百分之50的與長百分之50的地方,60px 30px代表寬60px與長30px的地方

設定背景大小

background-size

100% 100%代表水平100%垂直100%,contain代表不失真的情況下佔比最大,cover也是最大,只不過不管失真不失真

背景靜止

background-attachment: fixed;

這樣的話,就不會隨著齒輪滑動而動,會固定

lang

="en"

>

>

charset

="utf-8"

/>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

/>

>

documenttitle

>

>

body

h1.c0

.c1style

>

head

>

>

>

日 志h1

>

/>

class

="c0"

>

分類:心情點滴p

>

class

="c1"

>

女性的美麗p

>

/>

/>

class

="c2"

>

style

="text-decoration

:none

" href

="">

收藏a>

>

class

="c0"

>

分類:情感驛站p

>

class

="c1"

>

情感解析:寫給三十左右男人的一些密語p

>

/>

/>

class

="c2"

>

style

="text-decoration

:none

" href

="">

收藏a>

>

class

="c0"

>

分類:精品賞析p

>

class

="c1"

>

美麗如畫!世界海洋攝影佳作揭曉(**) p

>

class

="c2"

>

style

="text-decoration

:none

" href

="">

收藏a>

>

body

>

html

>

css學習 css基礎

子選擇器 parent child 子選擇器是指選擇parent的範圍內的第乙個子元素。這裡parent和child均是偽 可以是class用.classname,也可以是標籤ul li,也可以是id pid cid 後代選擇器 parent child 後代選擇器是指 選擇parent範圍內的所欲...

CSS簡單學習

什麼html 超文字標記語言 p標籤 段落標籤 br標籤 簡單換行 h1 h6 標題標籤 hr標籤 水平分割線,華麗的分割線 font標籤 color屬性改變顏色 size b標籤 加粗 i標籤 斜體 strong標籤 帶語義的加粗 em標籤 斜體標籤,帶語義 img標籤 標籤 顯示 src 指定路...

CSS的基礎學習

css css 指層疊樣式表 cascading style sheets 層疊的意思是 多重樣式定義被層疊為一。層疊樣式表 他的作用,就是設定我們的html標籤的展示樣式,因為html自帶的屬性,比較匱乏,不能滿足我們對樣式的要求,另一方面,我們想要解耦,html標籤,他既要定義網頁元素,又要展示...