CSS筆記(字型樣式,文字屬性和顏色樣式)
1 字型樣式
1.1 字體系列(font family)
在CSS中,字型劃分為 五組“字體系列”,分別為:
sans-serif
字體系列:沒有襯線的字型,最常用不為過,如 Arial、Verdana,Arial Black,Geneva等serif
字體系列:有襯線的字型,常用於新聞文字排版,如 Times,Times New Roman,Georgia等monospace
字體系列:每個字元都包含固定的寬度,主用於顯示軟體程式碼,如 Courier New,Adale Mono,Couriercursive
字體系列:Comic Sanc,Apple Chanceryfantasy
簡單來說,serif字型高雅傳統;sans-serif字型外觀清晰,可讀性強,最常用;Monospace字型像是列印;而Cursive和fantasy這是一種有趣風格。
CSS使用font-family
去定義字型時,支援候選字型,以防瀏覽器沒有對應的字型,如:
body {
font-family:Verdana,Geneva,Arial,sans-serif;
}
/*
注意的是字型名稱大小寫要區分開來,而且如果字型名稱有空格如:Comic Sanc,就要使用引號了"Comic Sanc",最後要以字體系列作為結尾以防瀏覽器之前的指定字型都不支援
*/
注:
宋體–> “SimSun”
黑體–> “SimHei”
微軟雅黑 –> “Microsoft YaHei”
1.1.1 引用外部字型
如果想要使用外部指定的字型就要使用到CSS的一個內建規則——@font-face
規則。
@font-face {
font-family:Seiei;
scr:url("url1")
url("url2")
}
h1 {
font-family:Seiei;
}
/*
@font-face先是命名了字型名字,然後使用scr呼叫外部字型,注意的是這個scr:url("url")的書寫方法,同樣的這裡也是可以候選,這裡主要是擔心檔案格式,最為廣泛流傳的格式是:".woff" 以及 ".svg"
*/
CSS還有其他的一些內建規則,如
@import
和@media
。
@media
用於建立應對某些使用者客戶端的規則,比方說螢幕小於幾寸,就要使用這個樣式等等。
@import
用於允許匯入其他CSS檔案
1.1.2 使用系統字型
如果希望頁面結合使用者作業系統設定,就可以使用font
來定義(這個可以用來簡寫),其值有:
- cation :用於有標題的控制元件,如按鈕
- icon :用於對圖示加標籤
- menu :用於選單(下拉選單和選單列表)
- message-box :用於對話方塊
- small-caption :用於對小控制元件加標籤
- status-bar :用於視窗狀態條
button {
font:cation;
font-size:1em;
/*
假如此時cation樣式的大小不足,可以自己調節
*/
1.2 字型大小(font-size)
調整字型大小,這裡有幾種方法(其實諸如框架的外邊距,內邊距什麼的,都是類似這樣的方法)
1.2.1 畫素(px)
定義畫素就是準確的告訴瀏覽器要高度多高的字型(這個高度是指平時3條線的英語本中最高那條與最低的之間的距離)
body {
font-size:14px;
}
1.2.2 百分比(%)
用百分比指定字型大小就是基於父元素繼承的字型大小上,得出的結果。如果沒有指定字型大小,那麼預設的<body>
字型大小為16px
body {
font-size:14px;
}
h1 {
font-size:150%;
}
/*
h1的字型為21px
*/
1.2.3 單位(em)
在CSS中,1個em
定義為一種 給定字型 的font-size
值,比方說某個元素的font-size
為14畫素,那麼對於該元素,1em
就等於14畫素。
body {
font-size:14px;
}
p {
font-size:1em;
}
/*
p的字型為14px
*/
1.2.5 單位(rem)
相對於em
,rem
有統一的參考font-size
,那就是html
標籤上的字型大小,這對於響應式佈局有很大的幫助,比如說可以使用JS檢測螢幕大小,從而生成自適應的html
標籤上的font-size
。
以下js外掛用於檢測生成html
標籤字型大小
!function(e){function t(){var t=a.clientWidth,i="}";!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)&&t>1024&&(t=640,i=";max-width:"+t+"px;margin-right:auto!important;margin-left:auto!important;}"),e.rem=t/10,/ZTE U930_TD/.test(navigator.userAgent)&&(e.rem=1.13*e.rem),s.innerHTML="html{font-size:"+e.rem+"px!important;}body{font-size:"+12*(t/320)+"px"+i}var i,n,a=document.documentElement,r=document.querySelector('meta[name="viewport"]'),s=document.createElement("style");if(i=e.devicePixelRatio||1,n=1/i,!r)return void console.warn('請設定預設viewport為:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />');var o=a.clientWidth;a.firstElementChild.appendChild(s),a.setAttribute("data-dpr",i),e.dpr=i,e.addEventListener("resize",function(){t()},!1),e.addEventListener("pageshow",function(e){e.persisted&&t()},!1),t()}(window),function(e,t){var i=[],n={add:function(){i.push({type:"add",args:arguments})},use:function(){i.push({type:"use",args:arguments})},ready:function(){var e=t.KISSY;e&&e.each(i,function(t){e[t.type].apply(null,t.args)})}};t.GL=n}(document,window);
1.2.6 單位(vw)
以視口的寬度大小為標準,分為100份,而1vw
則代表1/100
的視口寬頻大小。
h1 {
font-size: 8vw;
}
/* 如果視口的寬度是200mm,那麼上述程式碼中h1元素的字號將為16mm,即(8x200)/100 */
1.2.7 單位(vh)
單位vh
的用法與單位vw
類似,但vh
適用於高度
1.2.7 關鍵字
這一種指定的方法比較特別,也最推薦使用,這裡把字型得大小指定為
- xx-small
- x-small
- small(最常用,約12px,後一層比前一層大約20%)
- medium(約14px)
- large
- x-large
- xx-large
body {
font-size:small;
}
h1 {
font-size:1.5em;
}
/*
這種定義是最常用的,最推薦的
*/
1.3 字型的粗細以及風格
1.3.1 字型得粗細(font-weight)
字型的粗細可以使用font-weight
表示,可以定義關鍵字:
- lighter
- normal
- bold
- boler
通常只用 normal 和 bold,當然也可以設定數值100~900(只能是100的倍數)
body {
font-weight:normal;
}
1.3.2 字型的風格(font-style)
這裡風格的意思其實就是:是否為斜體(有區分斜體**italic還是傾斜**oblique,不過不重要)
body {
font-style:italic;
}
1.4 文字的裝飾(text-decoration)
文字裝飾允許你為文字增加一些裝飾性的效果,如下劃線、上劃線和刪除線,只需使用text-decoration
/* 刪除線 */
em {
text-decoration:line-through;
}
/* 上劃線 */
em {
text-decoration:overline;
}
/* 下劃線 正常來講文字是不會使用字型下劃線的以防被認為是連結,通常會使用邊框 “border-bottom” */
em {
text-decoration:underline;
}
/* 下劃線與上劃線,只需用空格連線 */
em {
text-decoration:overline underline;
}
/* 最後就是取消裝飾,例如對<a>元素的連結取消下劃線 */
a {。
text-decoration:none;
}
2文字屬性
2.1 文字縮排(text-indent)
text-indent
屬性可以定義——所有元素的第一行縮排的給定長度值,這個值甚至可以為負值,屬性本身可繼承。
當屬性值為百分數時,其相對物件為父類塊元素的寬度。
body {
text-indent:4em;
}
2.2 文字水平對齊(text-align)
text-align
屬性不僅作用於文字,它可以對塊元素中的所有內聯元素內容對齊,text-align
屬性只應用於塊級元素,所以說在內聯元素如<img>
是不起作用的,得把它包圍在塊元素中,後到塊元素上設定text-align
屬性。
屬性值有四個,除了左右中三個之外,還有一個justify
屬性值。justify
屬性值作用是兩端文字對齊。
body {
text-align:justify;
}
2.3 文字垂直對齊(vertical-align)
vertical-align
屬性只能應用於內聯元素和替換元素(如影象和表單元素),不能繼承。
關鍵字屬性值有:
- baseline :基線對齊,如果元素沒有基線(影象或表單),則該元素地段與父元素基線對齊。
- sub :下標,具體距離由瀏覽器決定
- super :上標,具體距離由瀏覽器決定
- bottom :底端對齊,元素行內框底端與行框底端對齊
- top :頂端對齊,注意是行內框與行框
- middle :居中對齊,接近但不是中點對齊,對齊目標是父元素的基線上方0.25處
2.4 行高(line-height)
line-height
屬性允許定義文字行高(注意不是行距)
body {
line-height:20%
}
/*
0.2倍行高
*/
上述值得注意的是20%
,代表的到底是誰的0.2倍?
其實只要沒有設定過數值的元素都是繼承父類元素的。比如來講,當前元素的字型大小屬性是從<body>
元素繼承的,而<body>
預設字型為small
,那麼設定的行距就可以算出來了。
而問題又出來了,假如當前元素下有類如<h1>
,<h2>
這些元素又怎麼辦呢?
因為設定的行距是基於small
字型大小的,那麼這些元素定然會靠得很近,所以這裡就可以直接給line-height
賦予數值,這樣的意義是基於當前元素字型大小的倍數,如:
body {
line-height:1.5;
}
/*
直接賦予數值
*/
一旦給定了內容行已經生成的所有行內框,下來再行框的構造中就會考慮這些行內框。(行內框與行框不是同一種東西)
2.5 字間距(word-spacing)
word-spacing
屬性定義字間距,“字”是任何非空白字元組成的字串。
body {
word-spacing:0.2em;
}
2.6 字母間距(letter-spacing)
字母間距使用lettr-spacing
來定義
body {
letter-spacing:1em;
}
字型屬性簡寫形式:
body {
font:font-style font-weight font-variant font-size/line-height font-family
}
/*
注意斜槓號,不分順序,除字型大小必須填寫外,其它可選,font-family候選時要使用逗號
font屬性屬於簡寫屬性,因此每次定義都會覆蓋先前給定的元素指定值
*/
2.7 word-break
,word-wrap
以及white-space
關於字元轉行,需要了解以上三個屬性。
word-break
,使其容器如<div>
的內容自動換行,屬性值有三個分別是:normal
(使用瀏覽器預設規則),break-all
(允許在單詞內換行)以及keep-all
(只能在半形空格或連字元處換行)word-wrap
,使其容器如<div>
的內容自動換行,屬性值有兩個分別是:normal
(使用瀏覽器預設規則),break-word
(允許長單詞留到下一行,前提是留到下一行時,容器能裝得下,否則還是要換行)white-space
,詳情可看這裡,的屬性值:
normal
: 不保留書寫形式換行,忽略空白符nowrap
:合併空白符序列,不保留書寫形式換行,定義文字不換行,直到遇到<br>
標籤為止pre
:保留空白符與書寫形式換行,段落不會自動換行pre-wrap
:保留空白符序列,保留書寫形式換行,段落會自動換行pre-line
: 合併空白符序列,保留書寫形式換行,段落會自動換行
3 顏色
CSS提供了幾種指定顏色的方法,如:
- 指定顏色名
- 通過百分比指定紅綠藍各自的值
- 通過數值(0~255)指定紅綠藍各自的值
- 通過使用十六進位制(hex)指定紅綠藍各自的值(前面要加
#
號)
十六進位制是制定Web顏色最為常用的方法,不過所有這些指定顏色的方法最終目的都是告訴瀏覽器,這個顏色種紅、綠、藍分量分別是多少。
/* 百分比 255*80%,40%255,0 */
body {
color:rgb(80%,40%,0%);
}
/* 數值 */
body {
color:rgb(204,102,0);
}
/* 十六進位制 12*16+12,6*16+6,0 */
body {
color:#cc6600;
}
/* 十六進位制顏色有簡寫,如上述可寫成:#c60 */
color
屬性實際上控制著一個元素的前景色,所以它會控制文字和邊框的顏色,所以當文字與邊框顏色衝突時,可以使用border-color
屬性指定邊框顏色
相關推薦
CSS筆記(字型樣式,文字屬性和顏色樣式)
1 字型樣式 1.1 字體系列(font family) 在CSS中,字型劃分為 五組“字體系列”,分別為: sans-serif字體系列:沒有襯線的字型,最常用不為過,如 Arial、Verdana,Arial Black,Geneva等 seri
大資料分析學習筆記(Z檢驗,分類器以及Association Rule)
大資料分析學習筆記(Z檢驗,分類器以及Association Rule) Task 1 – Hypothesis Testing To improve student learning performance, a teacher developed two new learning app
題目筆記(閉包,深複製和淺複製,原生js實現Promise)
就面試筆試題的一些筆記: 閉包( 實現add(2)(5) ) 深複製和淺複製 原生js實現Promise △ –>閉包知識: 實現add(2)(5) function add (x) { return functio
建立一棵用二叉樹連結串列方式儲存的二叉樹,並對其進行遍歷(先序,中序和後序),列印輸出遍歷結果
題目如下 程式碼如下 #include<stdio.h> #include<stdlib.h> #include<malloc.h> typedef struct Node//結構體 {
硬碟分割槽備忘(主分割槽,擴充套件分割槽和邏輯分割槽)以及Linux硬碟分割槽工具parted 介紹
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
裝修新 Linux 伺服器(資料遷移,環境配置和埠開放)
Linux 如何變成一個伺服器?如何轉移服務到新的伺服器?且看本篇清單 ☸ 資料遷移 檔案遷移 如果 需要舊伺服器上的一些檔案,就需要進行資料遷移 # 本機 -> 遠端 scp /root [e
三個基本排序演算法執行效率比較(氣泡排序,選擇排序和插入排序)
1、冒泡演算法。 冒泡演算法是最基礎的一個排序演算法,每次使用第一個值和身後相鄰的值進行比較,如果是升序將大數向左邊交換,降序則向右邊交換。最終將大數移動到一邊,最終排成一個序列: public class Sorting { public void Bubble
hadoop初識之三:搭建hadoop環境(配置HDFS,Yarn及mapreduce 執行在yarn)上及三種執行模式(本地模式,偽分散式和分散式介)
--===============安裝jdk(解壓版)================== --root 使用者登入 --建立檔案層級目錄 /opt下分別 建 modules/softwares/datas/tools 資料夾 --檢視是否安裝jdk rpm -
win7設定電腦保護眼睛顏色(終極方法,提供兩種顏色選擇)
整了大半天終於把電腦的保護色設定好了。方法如下: 主要是替換檔案C:\Windows\Resources\Themes\Aero\Shell\NormalColor\shellstyle.dll,按下文件中的步驟替換即可。 具體的方法在下載檔案中有個word文件。請務必按照
《css揭祕》下(偽元素,文字背景,垂直居中技巧,文字環繞)
本篇主要記錄《CSS3揭祕》一書中後面幾章的常用技巧。 1、偽元素換行 先看下HTML程式碼,如下 <div class="demo1"> <div class="text"> <span>當愛的故事剩聽說</span>
專案複習期總結3:CSS引入方式,註釋,命名規範,背景,行高,文字屬性
目錄: 1、CSS註釋的書寫 怎麼寫?好處? 2、CSS引入方式 各種的優缺點 3、選擇器的寫法與選擇器的優先順序 4、CSS命名規範 5、背景,行高 6、文字(text與font開頭)等所有屬
【IOS學習】CoreText學習筆記(二)設定文字屬性和插入圖片
設定文字和圖片的方法: 繪製文字的步驟是:設定NSAttributedString 或NSMutableAttributedString——> 通過attributedString 生成frameSetter ——> 生成CTFrame——>畫出來設定文字
CSS垂直水平居中,display:flex,佈局,文字屬性的一些零碎
1. body的height不可少,如body{height:100%},否則子元素會不認,如果子元素的高直接以百分比寫的話,會不顯示。因為識別不出來。 寬度則不會,因為瀏覽器的寬度是固定的,高度會滾,不固定。 2. border-sizing其實是
第七天-css基礎(行高,盒子模型,邊距)
昨天 固定 整理 .com add 多行 png 居中 lin 摘要: 基礎知識-css第七天,昨天因為同學的婚禮,所以沒有整理,今天繼續,今天是css基礎的最後一天,知識點不多也不難,主要是後期多練習,鞏固前面學習的知識。還有2個案例的時候視頻,下周學習。下周也要開啟js
document--文檔中的操作,操作屬性、操作樣式、操作元素
attr dom lag 直接 var reat chang 內容 setattr ---恢復內容開始--- document操作: 1、找元素 getE.. 2、操作內容 非表單:innerHtml 表單:value 3、操作屬性
python 學習筆記(循環,print的幾種寫法,操作符)
alt 例如 並且 col str .com 判斷 標準 一起 一、循環( for, while) while循環是指在給定的條件成立時(true),執行循環體,否則退出循環。for循環是指重復執行語句。 break 在需要時終止for /while循環 continue
python 筆記(變量,輸入輸出,條件語句,循環語句)
python python3 1.2 break 分享 場景 過程 表達式 一個 首先了解 python支持一下幾種運算符: 算術運算符: 賦值運算符: 復合賦值運算符: 變量 簡單的說,變量就是編程中最基本的存儲單位,變量會暫時性存儲
java筆試題的筆記(手寫,待更新)
方法 更新 ofo illegal const blank private and prot 1、 String str=new String("abc"); 緊接著這段代碼之後的往往是這個問題,那就是這行代碼究竟創建了幾個String對象呢? 2個。 2、
關於多臺虛擬機進行自動化部署的問題匯總(小白做筆記記錄之用,大神請繞路~)
title ssh ide pan col 存在 timeout 文件中 boot.s 首先貼上shell腳本代碼(代碼的前提條件是 1.首先已經在各臺虛擬機上都配置了repo的本地yum軟鏈接,源服務器起名min2 2.通過yum 下載scp軟件 (用於跨機器進行文件傳輸
55_RN筆記12_RN中view標籤的屬性和樣式
2,view標籤的style樣式概況 View 的設計初衷是和 StyleSheet 搭配使用,這樣可以使程式碼更清晰並且獲得更高的效能。儘管內聯樣式也同樣可以使用。 內聯樣式可以使用程式碼聯想,StyleSheet不可用;可以先聯想完,再一併寫到StyleS