1.如果想要設置字體樣式可以使用font-family
創(chuàng)新互聯(lián)公司一直在為企業(yè)提供服務,多年的磨煉,使我們在創(chuàng)意設計,成都營銷網(wǎng)站建設到技術研發(fā)擁有了開發(fā)經(jīng)驗。我們擅長傾聽企業(yè)需求,挖掘用戶對產(chǎn)品需求服務價值,為企業(yè)制作有用的創(chuàng)意設計體驗。核心團隊擁有超過十年以上行業(yè)經(jīng)驗,涵蓋創(chuàng)意,策化,開發(fā)等專業(yè)領域,公司涉及領域有基礎互聯(lián)網(wǎng)服務達州托管服務器、app軟件開發(fā)公司、手機移動建站、網(wǎng)頁設計、網(wǎng)絡整合營銷。
2.如果想要設置加粗可以使用font-weight
3.如果想要設置傾斜可以使用font-style
4.如果想要設置字體大小可以使用font-size
上述樣式如果想要在一個選擇器中使用的話,一下寫4個會顯得比較冗余,那么我們可以簡化綜合復合如下的樣式
選擇器 {font :font-style font-weight font-size/line-height font-family}順序不可顛倒 其中? font-size和font-family必須保留? 否則不會起作用
CSS即使設置了其他字體,也要看別的電腦里有沒有,一般系統(tǒng)自帶有宋體,黑體等字體,但是如果你電腦上有好看的字體,可以顯示,在別的電腦沒有你的字體,就顯示不了,所以一般只會設置系統(tǒng)自帶的字體。
設置方法:
html
head
style type="text/css"
p.ziti{font-family:"Times New Roman",Georgia,Serif}
/style
/head
body
h1CSS font-family/h1
p class="ziti"要更改的字體內(nèi)容/p
/body
/html
CSS定義可以是:font-family:sans-serif
也就是CSS用 p{font-family:"Times New Roman",Georgia,Serif}
為什么我這里設置了三個,分別用","隔開呢,因為不同版本的操作系統(tǒng),對字體的支持不同解釋如下:
例如微軟雅黑不同操作系統(tǒng)不同版本需要如下設置:
Windows XP及以前版本的Windows
font-family: Arial, 宋體, sans-serif;
Windows Vista和Windows 7
font-family: 'Microsoft Yahei', sans-serif;
Sorry,英文就無法設置字體了,因為中文字體都包含了英文字體。好在雅黑顯示英文還湊合。
Mac及其它操作系統(tǒng)
font-family: sans-serif;
系統(tǒng)自帶中文字體編碼:
宋體SimSun黑體SimHei微軟雅黑Microsoft YaHei微軟正黑體Microsoft JhengHei新宋體NSimSun新細明體PMingLiU細明體MingLiU標楷體DFKai-SB仿宋FangSong楷體KaiTi仿宋_GB2312FangSong_GB2312楷體_GB2312KaiTi_GB2312
1、先給想要改字體樣式的div加一個class或者id
2、用選擇器找到中國div(.class或者#id)
2、在style標簽里給這個div寫css樣式,
!doctype html
html
head
meta charset="UTF-8"
titleDIV+CSS怎么樣改字體樣式/title
style
.one{
font-family:"微軟雅黑";? //把?font-family: "設置字體名稱" 里的字體名稱改成你需要
font-size:12px;? //字體大小
color:red;? //字體顏色
font-weight:normal; //加粗 normal默認值?bold粗體 數(shù)值100-900
}
/style
/head
body
div class="one"DIV+CSS怎么樣改字體樣式/div
/body
/html
擴展資料
br換行
bb標簽設置加粗/b
ii標簽設置斜體/i
uu設置下劃線/u
h1最重要的標題H1/h1
h2次要欄目或標題-小標題H2/h2
h3再次要欄目或分類小標題H3/h3
h4文中分類小標題H4/h4
pre定義預格式化文本,空格和換行會保留,常常應用于表示計算機的源代碼。/pre
學習導航
1、css中的長度與顏色
2、css中的文字屬性
3、css中的文本屬性
1、文字樣式屬性
font-family 字體屬性
作用:元素內(nèi)文字以什么字體來顯示
語法:font-family:[字體1],[字體2],[......];
說明:含空格字體名和中文,用英文引號(")括起;多個字體用英文逗號隔開;引號嵌套,外使用雙引號,內(nèi)使用單引號。
font-size 文字大小
作用:元素內(nèi)文字大小
語法:font-size:絕對單單位,相相對單位
color 文字顏色
語法:顏色名|十六進制|RGB
font-weight 文字粗細
語法:font-weight:normal 正常 | bold 加粗 | bolder 加粗 | lighter 細體 | 100-900
說明:默認值:normal 400等同于normal,而700等同于bold
font-style 文字樣式
作用:為元素內(nèi)文字設置樣式
語法:font-style:normal 正常顯示 | italic 文字傾斜 | oblique 文字傾斜(基本不用)
font-variant 字體變形
作用:設置元素中文本為小型大寫字母
語法:font-variant:normal 正常顯示| small-caps 將英文大小寫字母調(diào)成為同寬
font 屬性簡寫
語法:font:font-style font-variant ?font-weight font-size/line-height font-family;
說明:值之間空格隔開,注意書寫順序。
2、CSS文本樣式
text-align
作用:設置元素內(nèi)文本的水平對齊方式
語法:tex-align:left 左對齊?| right 右對齊 | center 居中對齊 | justify 兩端對齊
注意:該屬性對塊級元素設置有效
line-height
作用:設置元素中文本行高
語法:line-height:長度值 | 百分比
說明:一行文字的高度,行高指文本行的基線間的距離
文字基線
注意:基線并不是漢字文字的下沿,看圖理解自行理解
行高和行距
行高:基線到基線的距離
行距:底線到頂線的距離
注意:看圖自行理解
行框和行內(nèi)框
注意:看圖自行理解
vertical-align
作用:設置元素內(nèi)容的垂直方式
語法:vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom |?長度 | 百分比
注意:看圖自行理解
text-indent 首行縮進
3、文本樣式屬性
text-transform:?capitzlize?首字母大寫 |?uppercase?字母大寫?|?lowercase? 字母小寫 |?none 正常
text-decoration:?underline?下劃線 |?overline 上劃線?|?line-through?刪除線 | none 正常
綜合實操案例
如果您覺得有用,記得在下方點贊、關注、留言,我會定期奉 上更多的驚喜哦,您的打賞支持才是我繼續(xù)努力的動力,么么噠。
每日分享在學習過程中總結的學習經(jīng)驗,學習筆記,筆試題,HTML,CSS,JavaScript,jQuery教程,Vue教程,PHP教程,TinkPHP教程等,望大家能以學習為目的,每天閱讀一篇文章,了解身邊的技術。陪有夢想的人一起成長!
CSS最基礎的問題
我因為興趣,正在自學asp,現(xiàn)在剛接觸到CSS。
這幾天在修改創(chuàng)力3.1,想做一個網(wǎng)站。
我想用css來控制一些標題欄的文字。請問在CSS中應該么寫,在asp中如何調(diào)用。
比如字體是宋體,大小9號,紅色。
我對ASP有一定了解,但對CSS一竅不通。但我想只要入了門,就容易了。
問題補充:在ASP中代碼如下:
table class=title_main cellSpacing=0 cellPadding=0 width="100%" align=center border=0
tr
td img src="{%picurl%}title_ico.gif" width=11 align=absMiddle
最新文章/td
td align=right
p align="center"a href="{%webdir%}Article/ShowUpdate.asp" target=_blankfont color=#666666
more.../font/a/td
/tr
/table
在CSS中對應代碼:
.title_main /*中間標題*/
{
font-size: 12px;
background-image: url({%picurl%}title_bg.gif);
height: 30px;
例:把12px修改成9px或再大一些如28px,在前臺顯示無變化。請問這是什么原因?如想把字體變成紅色,該怎么寫?
方法有以下幾種
1.沒有變化,可能是因為樣式是應用表格上的緣故,如果是應用在td class=title_main最新文章/td 應該即可;
2.單獨給標題設置樣式, 采用span calss="title_1"標題/span
CSS的樣式代碼如:
.title_main{font-size:12px; color:#f00; line-height:20px;}
樣式解釋:
font-size 表示字體大小, color 顏色, line-height表示行高,我這里設了20px, 這樣就顯得比較開闊,容易閱讀,就和WORD 里面1.5倍行距比1倍行距容易閱讀的道理一樣. 因為瀏覽器默認字體是 宋體, 所以font-family:宋體 可以省略,如果是其他字體則需要這條.
如果是比較大的標題: 可以采用以下樣式:
.title_main{font-size:20px; color:#f00; line-height:30px; font-weight:bold}
和上面的樣式相比,這個字體擴大,行距加大,字體加粗.
3.給標題設置樣式,其實還可以用h1標簽
h1文章標題/h1
說明:
h1(除了h1,還有h2h3h4h5h6) 這些是專門用于設置不同大小的代碼, 其中這些代碼默認值都是有加粗的,字體大小由h1到h6逐漸變小,字體顏色默認為黑色,當然,大小/粗細/顏色都能修改的.
比如設置h1樣式,css樣式代碼如:
h1{font-size:12px; color:#f00; line-height:20px;}
注意,h1前面沒有任何標點,這樣的話,整張網(wǎng)頁里面所有用過h1標簽的都會應用這個樣式. 和 .title_main 只有加了class="title_main" 才應用樣式不同.
而且和 CLASS 類相比, h1更加簡潔,如果樣式設置一樣
span calss="title_1"標題/span 和 h1文章標題/h1 效果是一樣的.
CSS 還有其他許多功能, 你可以在DreamWeaver里一個個添加 嘗試 /對比 ,很快就能基本掌握CSS 基礎的設置了,當然,有些設置還是需要經(jīng)驗和實踐才能運用的比較嫻熟和簡練的.
}
如果你想你網(wǎng)站上的文字看起來更加不一樣,就必須要給網(wǎng)頁中的標題、段落和其他頁面元素應用不同的字體。你可以用font-family屬性在CSS樣式里設置字體,如: font-family:Arial; 但是設置的這種字體,你電腦上必須裝有該字體,否則將按原字體樣式顯示。當然,也可以寫上多種字體,當對方瀏覽你的網(wǎng)站,沒有安裝第一種字體時,瀏覽器就會在列表中繼續(xù)往上搜尋,直到找到有適合的字 體為止,像這樣: font-family:Arial,Helvetica,sans-serif; 在上例中,Web瀏覽器會先看看是否安裝了Arial字體。如果安裝了,那么就用Arial字體顯示;如果沒有安裝,瀏覽器就會繼續(xù)尋找Helvetica字體;如果還是沒有找到,最后它就會指定一種通用的字體--sans-serif。如果字體的名稱中包含多個單詞時,則必須用雙引號(“”)將它們括起來,如: font-family:"Times New Roman",Times,serif; 以下就介紹幾種常用的font-family字體類型組合,每一列的最后都包含一種通用的字體。 1、Serif字體:最適用于冗長的文字信息,因為讀者都會覺得這種字體使字母主筆劃的結尾處會有一些細小的“足”,能夠比較有效地引導人們的視線從一個字母一到到下一個字母,閱讀起來感覺更加輕松。serif字體包括:Times,Times New Roman、Georgia。 2、Sans-serif字體:它看起來干凈而簡潔,所有經(jīng)常被用在標題上。Sans-serif字體包括:Arial、Helvetica、Verdana和Formata。 3、Monospaced字體:它經(jīng)常用于顯示計算機代碼,它每個字母都是等寬的。