繁星CSS3之旅 CSS基本樣式 CSS文字

2022-07-27 04:54:11 字數 1936 閱讀 9701

css文字

1、css文字屬性可定義文字外觀

通過文字屬性,可以改變文字的顏色、字元間距、對齊文字、裝飾文字、對文字縮排。

例:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>document

title

>

<

link

rel="stylesheet"

type

="text/css"

href

="style.css"

>

head

>

<

body

>

<

h1h1

>

<

p id

="p1"

p>

<

p id

="p2"

p>

<

p id

="p3"

p>

body

>

html

>

ph1#p1#p2#p3
效果圖

備註:text-transfrom有三個屬性值:capitalize(將單詞首字母全部變為大寫,其餘變小寫);lowercase(將所有字母變成小寫);uppercase(將所有字母變成大寫),以此來規範文字顯得特別方便。

2、css3文字效果

text-shadow:向文字新增陰影

word-wrap:規定文字的換行規則

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>document

title

>

<

link

rel="stylesheet"

type

="text/css"

href

="style.css"

>

head

>

<

body

>

<

h1h1

>

<

p id

="p1"

p>

<

p id

="p2"

p>

<

p id

="p3"

p>

body

>

html

>

ph1#p1#p2#p3
效果圖:

備註:2px指的是背景效果的清晰度,越低越清晰。

word-wrap:規定文字的換行規則,屬性值:normal

p

繁星CSS3之旅 CSS入門基礎知識

css介紹 概述 css指層疊樣式表,極大提高了工作效率 好處 使我們的ui看起來更加完美 css基礎語法 語法 屬性選擇器 selector 例 h1 p css高階語法 1 選擇器分組 h1,h2,h3,h4,h5,h6 2 繼承 body 例 doctype html html lang en...

CSS3布局樣式

css3多列布局columns 為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局,w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面,這種布局在報紙和雜誌上都使用了幾十年了,但要在web頁面上實現這樣的...

CSS3布局樣式

1.多列布局 columns 為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局,w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面。columns column width column count 引...