一篇:Java 0基礎入門(初識Html)
1.文本相關標簽--標題標簽
<h#></h#>:一般用來創建各級不同的標題,其中#的值可以為1-6中的值
代碼<h1>Hello Java</h1>
<h2>Hello Java</h2>
<h3>Hello Java</h3>
<h4>Hello Java</h4>
<h5>Hello Java</h5>
<h6>Hello Java</h6>
<h7>Hello Java</h7>
代碼請放在body中,然后再運行。
還不清楚Html結構的,請看上一篇文章。
運行結果如下:
標題標簽運行結果
字體大小隨著#值變大而變小
h標簽會自動換行
當#的值超過6以后,就直接顯示成了普通文本。
2.文本相關標簽--特殊符號
空格
小于(<) <
大于(>) >
版權號(? ) ?
注冊符(?) ?
3.文本相關標簽--行的控制
段落標簽<p>xxx</p>
相當于在頁面中預留了一行空行,xxx是你在這個空行中填寫的內容
換行標簽<br>
ps:注意標簽分為成對出現的和自閉合標簽,書寫時要注意規范
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<h1>是一級標題
</p>
<p>
<h2>是二級標題
</p>
<h3>是三級標題
<br>
<h4>是四級標題
</body>
</html>
3.圖像標簽
基本用法:
<img src="img1.jpg" width="100px" height="200px" alt=”” title=””/>
src--圖片的路徑(相對路徑的寫法../)
width--圖片顯示時的寬度(不一定是實際),像素為單位,px可以不寫
height--圖片顯示時的高度(不一定是實際),像素為單位,px可以不寫
alt,title--鼠標放在圖片上顯示的文字,幾乎每個標簽都可以加這兩個屬性,圖片不存在時,圖片位置顯示設定的文字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
src屬性:當前圖片的路徑
路徑:
(1)絕對路徑:一個完整的路徑,從ip開始到文件名結束
(2)相對路徑:要引用的圖片資源相對于當前頁面的路徑
width屬性:顯示的寬度
heigth屬性:顯示的高度
1.如果只給定寬度或高度,那么另外一個高度或寬度的值
會根據原圖的寬高比進行自動計算
2.如果同時給定了寬度和高度,并且不符合原圖的比例,
那么就會失真
-->
<!--絕對路徑-->
<img src="http://zt.tgbus.com/ff15coming/assets/images/bg_02.jpg" width="500px"/>
<!--相對路徑,圖片和文件在同一目錄下-->
<img src="001.jpg" height="300px"/>
<!--相對路徑,圖片所在的目錄和頁面同一級-->
<img src="img/002.jpg" width="100px" height="500px"/>
<!--
alt/title:
(1)鼠標放在對應圖片上時能夠顯示出對應的說明性文字
(2)當圖片不存在時,會在原來顯示圖片的地方加上說明性文字
(3)alt/title在不同瀏覽器中可能有兼容性問題,所以一起寫,作用是一樣的
(4)后面學習的標簽中都可以加上這兩個屬性,來作為鼠標放上去時的說明
-->
<img src="img/002.jpg" alt="圖片002" title="圖片002"/>
<img src="img1111/002.jpg" alt="圖片002" title="圖片002"/>
</body>
</html>
4.文字布局--內容分隔標簽
用于在頁面上繪制水平線
<hr size="5" color="red" width="300" align="left">
<hr size="10" color="black" width="200">
<hr size="5" color="#0000FF" width="50%" align="right">
size--線的厚度
color--線的顏色,顏色的寫法支持多種形式
width--線的寬度
align--對齊方式(盡可能使用后面學習的CSS樣式來對齊)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
第一行
<!--分隔標簽-->
<hr/>
第二行
<!--
size:線的厚度
color:線的顏色
align:對齊方式 left right
width:線的寬度(像素,相對于外部元素寬度的百分比)
-->
<hr size="5" color="red" width="300" align="left"/>
<hr size="5" color="#FF1493" width="30%" align="right"/>
<hr color="#D84D2A" />
</body>
</html>
5.文字布局--項目列表和編號(有序列表)
<ol type="1">
<li>填寫信息</li>
<li>收電子郵件</li>
<li>注冊成功</li>
</ol>
type值:(改變序號類型)
1:效果1,2,3,4……
a:效果a,b,c,d
A:效果A,B,C,D
i:效果i,ii,iii,iv,v
I:效果I,II,III,IV,V
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
type屬性:
1 阿拉伯數字作為序號
a 小寫字母作為序號
A 大寫字母作為序號
i 羅馬數字的小寫形式
I 羅馬數字的大寫形式
-->
<ol type="I">
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
<li>第四項</li>
<li>第五項</li>
<li>第六項</li>
</ol>
</body>
</html>
6.文字布局--項目列表和編號(無序列表)
<ul type="circle">
<li>如何激活會員名?</li>
<li>如何注冊淘寶會員?</li>
<li>注冊時密碼設置有什么要求?</li>
<li>支付寶認證</li>
</ul>
type值:
disc:效果——實心黑色小圓點
square:效果——實心黑色小方塊
circle:效果——空心小圓點
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
type屬性取值:
circle:空心圈
disc:實心圓
square:正方形
-->
<ul type="circle">
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
<li>第四項</li>
<li>第五項</li>
<li>第六項</li>
</ul>
</body>
</html>
7.預格式文本標簽
pre:pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。
<pre> 標簽的一個常見應用就是用來表示計算機的源代碼
8.頁面鏈接
<a> 標簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。最重要的是href屬性,用于指定要跳轉的頁面的路徑。
相對路徑:指定從根目錄到文件的完整路徑。
絕對路徑:指定相對于當前文件的文件位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
<a></a>:頁面鏈接
如果沒有給定href屬性,那么a標簽之間的內容以普通文本方式顯示
href:用來指定當前鏈接要跳轉的路徑
路徑可以是相對路徑也可以是絕對路徑
-->
<a href="http://www.baidu.com" >百度</a>
<a href="圖像標簽.html">圖像標簽</a>
<!--圖片鏈接-->
<a href="http://zt.tgbus.com/ff15coming/">
<img src="http://zt.tgbus.com/ff15coming/assets/images/bg_02.jpg" width="500px"/>
</a>
<!--
阻止鏈接的跳轉行為
-->
<a href="#">淘寶</a>
<!--了解-->
<a href="javascript:void(0);">京東</a>
</body>
</html>
使用a標簽制作錨點,實現跳轉到頁面指定位置
(1)本頁跳轉(頁面很長,內容很多,點擊a標簽內容,迅速定位到你要找的內容)
<!--定義a標簽,跳轉到指定錨點-->
<a href="#helpme">[新人上路]</a>
<!--定義一個錨點,給定name屬性-->
<a name="helpme">新人上路指南</a>
(2)其它頁跳轉(定位到1.html這種不是本頁面的,a標簽name值為t2的內容處)
<a href="1.html#t2">[新人上路]</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.定義要進行點擊的鏈接
-->
<a href="#position1">位置1</a>
<a href="#position2">位置2</a>
<a href="#position3">位置3</a>
<!--
2.要跳轉的位置
-->
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="position1">位置1</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="position2">位置2</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="position3">位置3</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
使用a標簽打開電子郵件發送窗口
這個方法是調用outlook客戶端,現在已經很少用了!
在href前面加上mailto前綴,后面跟合法的郵箱地址
<a href="mailto:429661318@qq.com">
發送郵件
</a>
指定超鏈接在何處打開目標 URL
在href屬性存在的情況下,指定target屬性
_blank:在空白頁打開
_self:直接在本頁打開
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
target屬性:指定頁面的打開的地方
_self:在當前頁打開
_blank:在空白頁打開
-->
<a href="http://www.baidu.com" target="_self">在當前頁打開</a>
<a href="http://www.baidu.com" target="_blank">在空白頁打開</a>
</body>
</html>
標簽的學習就到這,下一篇會介紹表單、表單元素的寫法。喜歡的可以關注下,謝謝!!
下一篇:Java 0基礎入門 (Html表單、表單元素)
CSS 是什么?
CSS是Cascading Style Sheets的簡稱,中文稱為層疊樣式表。
屬性和屬性值用冒號隔開,以分號結尾。
CSS 四種引入方式:
1.行內式
行內式是在標簽的style屬性中設定CSS樣式。
<div style="..."></div>
2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head>標簽的<style></style>標簽對中。
<head>
...
<style type="text/css">
...此處寫CSS樣式
</style>
</head>
3.導入式
將一個獨立的.css文件引入HTML文件中,導入式使用@import 引入外部CSS文件,<style>標記也是寫在<head>標記中。
導入式會在整個網頁裝載完后再裝載CSS文件。
<head>
...
<style type="text/css">
@import "My.css"; 此處注意.css文件的路徑
</style>
</head>
4.鏈接式
將一個獨立的.css文件引入到HTML文件中,使用<link>標記寫在<head>標記中。
鏈接式會以網頁文件主體裝載前裝載CSS文件。
<head>
...
<link href="My.css" rel="stylesheet" type="text/css">
</head>
樣式應用順序:
.nick {
color: yellow !important;
}
基本選擇器:
1.通用元素選擇器
* 表示應用到所有的標簽。
* {color: yellow}
2.標簽選擇器
匹配所有使用 div 標簽的元素(可以匹配所有標簽)
div {color: yellow}
3.類選擇器
匹配所有class屬性中包含info的元素。
語法:.類名{樣式}(類名不能以數字開頭,類名要區分大小寫。)
.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>
4.ID選擇器
使用id屬性來調用樣式,在一個網頁中id的值都是唯一的(是W3C規范而不是規則,所以不會報錯)。
語法:#ID名{樣式}(ID名不能以數字開頭)
#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>
組合選擇器:
1.多元素選擇器
同時匹配h3,h4標簽,之間用逗號分隔。
h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>
2.后代元素選擇器
匹配所有div標簽里嵌套的P標簽,之間用空格分隔。
div p {color: yellow;}
<div>
<p>Nick</p>
<div>
<p>Nick</p>
</div>
</div>
3.子元素選擇器
匹配所有div標簽里嵌套的子P標簽,之間用>分隔。
div > p {color: yellow;}
<div>
<p>Nick</p>
<p>Nick</p>
</div>
4.毗鄰元素選擇器
匹配所有緊隨div標簽之后的同級標簽P,之間用+分隔(只能匹配一個)。
div + p {color: yellow;}
<div>Nick</div>
<p>Nick</p>
屬性選擇器:
1.[title] & P[title]
設置所有具有title屬性的標簽元素;
設置所有具有title屬性的P標簽元素。
[title]
{
color: yellow;
}
p[title]
{
color: yellow;
}
<div title>Nick</div>
<p title>Nick</p>
2.[title=Nick]
設置所有title屬性等于“Nick”的標簽元素。
[title="Nick"]
{
color: yellow;
}
<p title="Nick">Nick</p>
3.[title~=Nick]
設置所有title屬性具有多個空格分隔的值、其中一個值等于“Nick”的標簽元素。
[title~="Nick"]
{
color: yellow;
}
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>
4.[title|=Nick]
設置所有title屬性具有多個連字號分隔(hyphen-separated)的值、其中一個值以"Nick"開頭的標簽元素。
例:lang屬性:"en"、"en-us"、"en-gb"等等
[title|="Nick"]
{
color: yellow;
}
<p title="Nick-Jenny">Nick</p>
5.[title^=Nick]
設置屬性值以指定值開頭的每個標簽元素。
[title^="Nick"]
{
color: yellow;
}
<p title="NickJenny">Nick</p>
6.[title$=Nick]
設置屬性值以指定值結尾的每個標簽元素。
[title$="Nick"]
{
color: yellow;
}
<p title="JennyNick">Nick</p>
7.[title*=Nick]
設置屬性值中包含指定值的每個元素
[title*="Nick"]
{
color: yellow;
}
<p title="SNickJenny">Nick</p>
偽類選擇器:
1. link、hover、active、visited
a:link{color: black}
a:hover{color: yellow}
a:active{color: blue}
a:visited{color: red}
<a href="#">Nick</a>
2. before、after
p {
color: yellow;
}
p:before{
content: "before...";
}
p:after{
content: "after...";
}
<p> Nick </p>
1. 顏色屬性:
color
transparent
opacity
2. 字體屬性:
font-style: 用于規定斜體文本
font-weight: 設置文本的粗細
font-size: 設置字體的大小
font-family:字體名稱
font:簡寫屬性
3. 文本屬性:
white-space: 設置元素中空白的處理方式
direction: 規定文本的方向
text-align: 文本的水平對齊方式
line-height: 文本行高
vertical-align: 文本所在行高的垂直對齊方式
text-indent: 文本縮進
letter-spacing: 添加字母之間的空白
word-spacing: 添加每個單詞之間的空白
text-transform: 屬性控制文本的大小寫
text-overflow: 文本溢出樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
<style>
div {
width: 100px;
height: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧</div>
</body>
</html>
text-decoration: 文本的裝飾
text-shadow:文本陰影
word-wrap:自動換行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
width: 150px;
height: 160px;
background-color: #FFA500;
/*邊框陰影*/
box-shadow: 10px 10px 5px #888;
/*自動換行*/
word-wrap: break-word;
}
h1 {
text-shadow: 5px 5px 5px #888;
}
</style>
</head>
<body>
<p>
When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
</p>
<h1>索寧</h1>
</body>
</html>
a {
text-decoration: none;
/*去除a標簽下劃線*/
}
4. 背景屬性
background-color: 背景顏色
background-image 設置圖像為背景
background-position 設置背景圖像的位置坐標
background-repeat 設置背景圖像不重復平鋪
background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動
background 簡寫
5. 列表屬性
list-style-type: 列表項標志的類型
list-style-image:將圖象設置為列表項標志
list-style-position:列表項標志的位置
list-style:縮寫
1. 邊框
border-style:邊框樣式
border-color:邊框顏色
border-width:邊框寬度
border-radius:圓角
border: 簡寫
box-shadow:邊框陰影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border:2px solid;
border-radius:25px;
width: 140px;
}
</style>
</head>
<body>
<div>
點贊哦!dear.
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.radius1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 20px;
}
.radius2 {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
border-radius: 20px 35px;
}
.radius3 {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 20px 35px 50px;
}
.radius4 {
display: inline-block;
width: 100px;
height: 100px;
background-color: green;
border-radius: 20px 35px 50px 60px;
}
</style>
</head>
<body>
<div>
<span class="radius1"></span>
<span class="radius2"></span>
<span class="radius3"></span>
<span class="radius4"></span>
</div>
</body>
</html>
邊框實現各種三角符號:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.triangle-one {
display: inline-block;
border-top: 50px red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-two {
display: inline-block;
border-top: 0 red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-stree {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-four {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 0 yellow solid;
border-left: 50px blue solid;
}
.triangle-five {
display: inline-block;
border: 50px transparent solid;
border-top: 50px red solid;
}
.triangle-six {
display: inline-block;
border: 50px transparent solid;
border-bottom: 50px yellow solid;
}
.triangle-seven {
display: inline-block;
border: 50px transparent solid;
border-top: 60px red solid;
border-right: 0;
}
.triangle-eight {
display: inline-block;
border: 50px transparent solid;
border-left: 30px yellow solid;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="triangle-one"></div>
<div class="triangle-two"></div>
<div class="triangle-stree"></div>
<div class="triangle-four"></div>
<div class="triangle-five"></div>
<div class="triangle-six"></div>
<div class="triangle-seven"></div>
<div class="triangle-eight"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back {
width: 1000px;
height: 1000px;
margin: 0 auto;
background-color: #ddd;
position: relative;
}
.back-in {
position: absolute;
width: 1020px;
height: 45px;
left: -20px;
top: 50px;
background-color: #2F4F4F;
}
.back-img {
border: 20px solid transparent;
border-top: 10px solid dimgrey;
border-right: 0;
display: inline-block;
position: absolute;
top: 95px;
left: -20px;
}
.back-font {
line-height: 9px;
margin-left: 30px;
color: white;
}
</style>
</head>
<body>
<div class="back">
<div class="back-in"><h3 class="back-font">妹子求關注 ^.^</h3></div>
<div class="back-img"></div>
</div>
</body>
</html>
2.★ 盒子模型
一個標準的盒子模型:
padding:用于控制內容與邊框之間的距離;
margin: 用于控制元素與元素之間的距離;
一個參數,應用于四邊。
兩個參數,第一個用于上、下,第二個用于左、右。
三個參數,第一個用于上,第二個用于左、右,第三個用于下。
邊框在默認情況下會定位于瀏覽器窗口的左上角,但是并沒有緊貼著瀏覽器的窗口的邊框,這是因為body本身也是一個盒子,外層還有html,
在默認情況下,body距離html會有若干像素的margin,所以body中的盒子不會緊貼瀏覽器窗口的邊框了。
解決方法:
body {
margin: 0;
}
3.★ display
4. visibility
5.★ float 浮動
讓一行顯示兩個塊級標簽,會脫離文檔流
clear 清除浮動:
6. clip 剪裁圖像
rect 剪裁定位元素:
7. overflow 設置當對象的內容超過其指定高度及寬度時如何顯示內容
8.★ position 規定元素的定位類型
9. z-index 元素層疊順序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.z-index1 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
z-index: -1;
}
.z-index2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 20px;
left: 20px;
z-index: 5;
}
</style>
</head>
<body>
<div class="z-index1"></div>
<div class="z-index2"></div>
</body>
</html>
10. outline 邊框輪廓
11. zoom 縮放比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.zoom1 {
zoom: 100%;
}
.zoom2 {
zoom: 150%;
}
.zoom3 {
zoom: 200%;
}
</style>
</head>
<body>
<div class="zoom1">Nick 100%</div>
<div class="zoom2">Nick 200%</div>
<div class="zoom3">Nick 300%</div>
</body>
</html>
12. cursor 鼠標的類型形狀
鼠標放在以下單詞上,There will be a miracle:
url: 自定義光標
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
<style>
body {
cursor: url("mouse.png"), auto;
/*圖片地址:http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
}
</style>
</head>
<body>
<div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div>
</body>
</html>
Auto: 默認
Default: 默認
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Crosshair
Pointer
Move
text
wait
help
not-allowed
13. transform、transition 動畫效果
transform 轉換,變形
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nick</title>
<meta charset="utf-8" />
<style type="text/css">
div {
border: 1px solid black;
height: 30px;
width: 30px;
background-color: yellow;
/*transform-origin: 50px 50px;*/
transform-origin: left;
transform: rotate(50deg);
/*transform: skew(50deg,50deg);*/
/*transform: translate(50px,50px);*/
/*transform: scale(2);*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Transition 平滑過渡
#property 指定屬性對應類型
1、color: 通過紅、綠、藍和透明度組件變換(每個數值單獨處理),如:background-color,border-color,color,outline-color等CSS屬性;
2、length:真實的數字,如:word-spacing,width,vertical- align,top,right,bottom,left,padding,outline-width,margin,min-width,min- height,max-width,max-height,line-height,height,border-width,border- spacing,background-position等屬性;
3、percentage:真實的數字,如:word-spacing,width,vertical- align,top,right,bottom,left,min-width,min- height,max-width,max-height,line-height,height,background-position等屬性;
4、integer 離散步驟(整個數字),在真實的數字空間,以及使用floor()轉換為整數時發生,如:outline-offset,z-index等屬性;
5、number真實的(浮點型)數值,如:zoom,opacity,font-weight等屬性;
6、transform list。
7、rectangle:通過x、 y、 width和height(轉為數值)變換,如:crop;
8、visibility:離散步驟,在0到1數字范圍之內,0表示“隱藏”,1表示完全“顯示”,如:visibility;
9、shadow:作用于color、x、y、和blur(模糊)屬性,如:text-shadow;
10、gradient:通過每次停止時的位置和顏色進行變化。它們必須有相同的類型(放射狀的或是線性的)和相同的停止數值以便執行動畫,如:background-image;
11、paint server (SVG):只支持下面的情況:從gradient到gradient以及color到color,然后工作與上面類似;
12、space-separated list of above:如果列表有相同的項目數值,則列表每一項按照上面的規則進行變化,否則無變化;
13、a shorthand property:如果縮寫的所有部分都可以實現動畫,則會像所有單個屬性變化一樣變化。
#支持執行transition效果的屬性
Property Name Type
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer
鼠標放在以下圖片上,There will be a miracle:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nick</title>
<meta charset="utf-8" />
<style type="text/css">
.img-see-2016-7-2 {
background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
background-size: 660px;
background-repeat: no-repeat;
height: 300px;
width: 600px;
transition-duration: 30s;
transition-timing-function: ease;
transition-property: background-size;
}
.img-see-2016-7-2:hover {
background-size: 2000px;
}
</style>
</head>
<body>
<div class="img-see-2016-7-2"></div>
</body>
</html>
作者:suoning
原文鏈接:https://www.cnblogs.com/suoning/p/5625582.html
文是站在一個網頁設計師的角度,所寫的關于最佳字體排版實踐的手冊,包括字體排版設計、Web 字體、Web 樣式指導等四個方面,而且每一章后都有擴展閱讀幫你深入了解細節,全程高能干貨,建議閱讀。
目錄
簡介
字體排版絕不僅僅是使用字體那么簡單,它包括了關于文字”看上去會是怎么樣?”的所有事情——例如文字的大小,行高,顏色甚至文字間留白這樣的細枝末節的小事。一個好的文字排版會為你所寫的內容定下情感基調,并且可以幫助讀者更好的理解其內容和語境。
為了讓你使用起來更像是在看一本參考書而不是說明書,本文將會非常精簡清晰,如果你想進一步的了解更多細節,可以點擊查看在每一章中的”擴展閱讀”去深入了解。
這本手冊將會在GitHub上開源,并且會持續更新一些最佳實踐的范例,希望你們喜歡!
字體排版設計
視覺層次
視覺層次是一種理念,它意在傳達頁面中的元素應該依照其重要性進行組織排版,以便讀者可以很容易的通覽整個頁面,找到相關的內容。一個好的視覺層次可以引導讀者在閱讀時候的視覺流向。視覺層次被廣泛運用于文字排版中,它構成了文字排版設計的理論基石。
請看下圖的”愛麗絲夢游仙境”的字體排版設計,它展現了一個清晰的視覺層次:
點擊這里 查看網頁上的實際效果
視覺層次可以被分成以下4個部分:
擴展閱讀:
字體排版中的格式塔原則
格式塔原則, 或格式塔法則, 是一種構建感性認知的規律。當我們觀察這個世界的時候,我們通常會意識到,一個復雜的場景是由多個在某些背景之上的物體構成的,而這些物體則是由更小的一些物體構成的,依此循環下去。
在字體排版中我們需要理解的兩個很重要的格式塔原則就是”距離原則”和”相似原則”。.
距離原則
為了更好地掌握元素定位的方法,了解距離原則是很重要的。距離原則表明,人們會將靠得近的物體視為有關聯的物體,反之,隔得比較遠的物體將會被看成屬于不同類別。
點擊此處查看原圖
在字體排版設計中,”距離”指的是通過設置行高、內間距和外間距所制造出來的留白空間。在兩段不同的段落之間應該留有明顯的并且易于區分的留白間隔,請看下面的例子:
注意啦,你覺得應該把內容相關的部分都擠到一個很小的空間中去嗎?當然不是這樣,自由隨意的留白也是很重要的。距離原則告訴我們,只需要為那些沒有關系的段落之間額外的加上一些易于區分的留白就可以了
相似原則
格式塔的相似原則告訴大家,看起來很像的東西會被認為是一類的東西。舉個例子,如果所有可點擊的文字被設置為天藍色,那么讀者就會認為文章中所有天藍色的文字內容都是可以點擊的。
在字體排版中,相似原則就意味著,擁有同樣功能的元素應該在樣式上保持一致。如果兩組元素的功能相似的話,那么它們也應該看起來很像才對。例如,兩篇同為博客帖子的文章應該看起來很像。而相反的,兩個功能不相同的元素也應該看起來不像。
擴展閱讀:
字體
選擇字體
選擇字體是一個具有創造性和情感的過程。不同的字體可以傳達不同的情感,你可以盡情挑選一個合適的字體讓你的文字感情變得豐沛起來。
擴展閱讀:
使用web字體
我們使用以下的格式來聲明引入的web字體文件:
@font-face { font-family: 'Helvetica Neue'; src: url('/assets/fonts/HelveticaNeue-Light.eot'); src: url('/assets/fonts/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/HelveticaNeue-Light.woff2') format('woff2'), url('/assets/fonts/HelveticaNeue-Light.woff') format('woff'), url('/assets/fonts/HelveticaNeue-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Helvetica Neue'; src: url('/assets/fonts/HelveticaNeue-Bold.eot'); src: url('/assets/fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/HelveticaNeue-Bold.woff2') format('woff2'), url('/assets/fonts/HelveticaNeue-Bold.woff') format('woff'), url('/assets/fonts/HelveticaNeue-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Helvetica Neue'; src: url('/assets/fonts/HelveticaNeue.eot'); src: url('/assets/fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/HelveticaNeue.woff2') format('woff2'), url('/assets/fonts/HelveticaNeue.woff') format('woff'), url('/assets/fonts/HelveticaNeue.ttf') format('truetype'); font-weight: normal; font-style: normal; }
為了達到最大程度上的兼容,我們建議使用上面列出的格式。或者,只使用 woff2 和 woff也會支持大部分的現代瀏覽器。
你需要為每個列出來的格式提供一個相應的字體文件。推薦使用 Transfonter 或者FontSquirrel’s Web Font Generator,這樣你就可以在只有一個字體文件的情況下,將其轉換成不同的文件格式。
盡可能的壓縮你的字體文件。 點擊這里 查看更多信息。
將多個同源字體文件(細體、常規、半粗體、粗體等等)合并成一個font-family, 盡量不要為每個字體都起一個新的font-family的名字。
或者,你也可以通過線上字體資源服務,如Google Fonts 或者 Typekit引入你想要的字體。
擴展閱讀:
加載字體
在你引入的字體被渲染出來之前,他們需要先進行加載。下面是三種在加載的時候可能會發生的事情:
場景1只發生在你嘗試使用一個不存在的字體,或者聲明時候的src指向了一個壞鏈, 這種情況可以并且應該徹底避免。接著我們跳到場景3,這種情況通常在字體被正確的緩存的時候發生,也是我們喜聞樂見的。場景2中包含著字體加載的過程,字體加載通常是難以避免的(至少是在第一次請求的時候),下面是幾種處理方式:
1. 文檔樣式閃爍方案 (FOUT)
FOUT是指網頁會在切換到合適的網頁字體之前,使用默認或者備選字體顯示文字。這種情況的出現是因為只有當HTML和CSS都被下載完成之后,字體請求才會發出。這就意味著,在HTML被顯示出來而字體文件沒有被完全下載下來中間存在著一段”空檔”時間。 FOUT 算是對大部分的網頁而言的最佳選擇,主要是其他的選擇也許更糟。如果使用得到的話,FOUT 很難被用戶察覺出來。
2. 不可見文本閃爍方案(FOIT)
很多年前,一些現代瀏覽器開始使用一種新的技術來處理字體加載的問題 — FOIT. FOIT是指當瀏覽器檢測到字體正在加載的時候,隱藏應用這段字體的文字,直到字體完全下載完才將其顯示出來。 然而我們應該避免這種做法雖然這樣做從理論上看起來還不錯,但是這會帶給那些網絡速度比較差的用戶十分糟糕的體驗。有可能會在最初的FOIT后出現FOUT, 最壞的情況可能會是這段文字將永遠看不到了。
3. 白屏方案
即在字體加載完成之前,整個網頁都處于不可見的狀態,或者也可以采用顯示一個進度條.我們只推薦當FOUT 嚴重影響用戶體驗的時候使用這種方法。 我們通常在一個網頁需要大面積顯示一個特定的字體的時候使用該方法,否則,FOUT 總會我們的第一選擇,因為”內容至上”。白屏方案與 FOIT很相似, 但對于你來說,你擁有控制在什么時候給用戶展示你的內容的自由,這種感覺會似乎更棒一些,不是嗎?而且在FOIT方案中, 不可見的文本有時候會給讀者帶來困惑,而徹底的白屏(或者一個進度條)會讓人很自然的覺得是一個正在加載的信號。
不管你是打算使用 FOUT 方案或者白屏方案, 我們都推薦您使用Web Font Loader這個JavaScript庫. Web Font Loader 可以讓你對 @font-face加以控制, 而且你也為字體加載的體驗添加控制事件。
注意: 有一個W3C 字體加載 API也會實現同樣的功能,但是它現在的 支持不是很好_
FOUT 方案
下面是一個使用 Web Font Loader 實現了 FOUT的例子:
<script type="text/javascript"> WebFontConfig = { google: { families: [ 'Lora:400,700,400italic,700italic:latin' ] } }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script> <noscript> <link rel='stylesheet' type='text/css'> </noscript> <style> p { /* use fallback fonts */ } .wf-active p { /* styles for custom fonts */ } </style>
異步地使用 Web Font Loader 很重要,只有這樣做才不會延誤頁面其他部位的渲染。
寫樣式的時候,讓你的備用字體盡可能近的靠近你的實際字體,這樣才能最大程度的減少 FOUT造成的影響.點擊 這里你將會看到一系列的備選字體. 使用 這個工具你將很容易的看到備選字體和你引入的字體的對比效果.
白屏方案
下面是一個使用 Web Font Loader 實現了白屏方案的例子:
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script> <script> WebFont.load({ google: { families: ['Raleway', 'Oswald'] } }); </script> <noscript> <link rel='stylesheet' type='text/css'> </noscript> <style></style>
在這個例子里面,備選字體不需要和你引入的字體看起來很像,因為我們不會用到 FOUT. 依照你自己的喜好去選擇備選字體吧。
如果你想要用一個進度條取代白屏,你可以使用Pace。這種方法在用戶體驗上效果會更好一些,特別是當字體文件很大的時候。
擴展閱讀:
OpenType 的特性
OpenType 的特性可以被視為文字進行字體排版時的可選項,它們被用來加強文字的表現和易讀性。
p { font-kerning: normal; font-variant-ligatures: common-ligatures contextual; -moz-font-feature-settings: "kern", "liga", "clig", "calt"; -ms-font-feature-settings: "kern", "liga", "clig", "alt"; -webkit-font-feature-settings: "kern", "liga", "clig", "calt"; font-feature-settings: "kern", "liga", "clig", "calt"; }
OpenType 特性被放置于字體之中,這就意味著對于不同的字體,會有不同的特性,在使用這些特性之前,我們需要看一看我們的字體是否支持這些特性。
使用 font-feature-settings來激活 OpenType 特性. 由于目前對于這個屬性的支持不好,我們需要在屬性之前加上前綴。
Kerning kern, ligatures liga, contextual ligatures clig, 和 contextual alternatives calt這四種適用于所有字體中 ######( 譯者注:font-feature-settings這種屬性僅支持拉丁文語系的字體使用,并不支持中文哦! )
擴展閱讀:
Web Style Guide
相對大小
盡可能的使用相對大小。
html { font-size: 100% } p { font-size: 1em } @media (min-width: 64em) { html { font-size: 112.5%; } }
擴展閱讀:
容器
容器,或者稱為包裝,指的是用來包裹一個或者多個元素的HTML元素。它將元素分組,從而更好進行語義化、修飾以及布局。
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .container { max-width: 67rem; padding-left: 1.5rem; padding-right: 1.5rem; }
擴展閱讀:
字體大小
使用 縮放模塊 可以幫助你決定在你的元素上面應用怎樣的font-size .縮放模塊指的是依照其內容安排的一系列比較合適的字體大小的數值。
縮放模塊的說明. 點擊此處
響應式的縮放模塊
只使用單獨的一個縮放模塊方案并不一定適合所有分辨率的設備,為了解決這個問題,你可以依據用戶的設備的分辨率的不同提供不同的縮放方案
//Sass responsive modular scale /* * Modular scale * http://www.modularscale.com/?1.25&em&1.33&web&text */ $type-scale-large: ( h1: 3.911rem, h2: 2.941rem, h3: 2.211rem, h4: 1.663rem, p: 1.25rem ); /* * Modular scale * http://www.modularscale.com/?1.25&em&1.25&web&text */ $type-scale-medium: ( h1: 3.052rem, h2: 2.441rem, h3: 1.953em, h4: 1.563rem, p: 1.25rem, ); /* * Modular scale * http://www.modularscale.com/?1.1&em&1.25&web&text */ $type-scale-small: ( h1: 2.686rem, h2: 2.148rem, h3: 1.719rem, h4: 1.375rem, p: 1.1rem ); $breakpoint-medium: 75em; $breakpoint-small: 45em; @mixin size($level) { font-size: map-get($type-scale-large, $level); @media (max-width: $breakpoint-medium) { font-size: map-get($type-scale-medium, $level); } @media (max-width: $breakpoint-small) { font-size: map-get($type-scale-small, $level); } } // Example .title { @include size(h1); }
擴展閱讀:
垂直距離
文字間的垂直距離是由 line-height, margin, 和padding構建出來的.
垂直節律
垂直節律是指元素之間的垂直間隔要保持一致性。這一點十分重要,它可以帶給讀者視覺上放松的享受,給他們一種親近的感覺。
Image source建立垂直節律很簡單。首先,確定你使用的基礎垂直內間距和基礎垂直外間距的數值。然后,為你的容器,文字性元素或者其他相關元素的單方向的外邊距(或者內邊距)應用這個數值。如果你需要制制造更大的間隔的話,應用這個數值的倍數就好啦!
將基礎間距的數值設置成與行高相同的數值,這樣你的文字就像寫在一個條格紙上那樣整齊,就像我們傳統的印刷字體設計的那樣。然而,想要文字擁有垂直節律不一定需要按照上面的方法來做,只要你設置了一個基礎間距,并且使得其他間距都是由這個間距成倍的得來的,那樣就可以了。
body { line-height: 1.4; // Base line height } p { font-size: 1.25em; // Base font size margin-bottom: 1.75rem; // Base vertical spacing: (1.4 * 1.25) = 1.75 } h1 { font-size: 3em; margin-bottom: 3.5rem; // Double the base value for a larger gap (1.75 * 2) = 3.5 } h2 { font-size: 2em; margin-bottom: 1.75rem; } h3 { font-size: 1.5em; margin-bottom: 1.75rem; } .page-container { padding: 3.5rem 2rem; // 3.5 is double the base value } /* Simple Sass Implementation */ $base-line-height: 1.4; $base-font-size: 1.25rem; $vertical-rhythm: $base-line-height * $base-font-size; body { line-height: $base-line-height; } p { font-size: $base-font-size; margin-bottom: $vertical-rhythm; } h1 { font-size: 3em; margin-bottom: $vertical-rhythm * 2; } h2 { font-size: 2em; margin-bottom: $vertical-rhythm; } h3 { font-size: 1.5em; margin-bottom: $vertical-rhythm; } .page-container { padding: ($vertical-rhythm * 2) 2rem; }
文字底部對齊基線網格
文字底部對齊基線是垂直節律的一個更為嚴格的實現。在網頁中,文字通常在line-height間居中對齊.但對于較大的文字來說會比較討厭,因為這樣做會導致在頂部和底部留有太多的空間。在傳統印刷的時候,這個問題一般會通過讓文字對齊基線網格的底部得以解決。
我們也可以通過為較大的文字添加一個負的margin-top和一個較小的margin-bottom,不需要使用基線網格而解決這個問題。
圖片資源為不同的字體樣式、字體大小和分辨率添加一個底部對齊的基線網格并不是一個很容易的方式,所以強烈建議你使用一個字體排版基線庫例如 Sassline 或者 MegaType.
注意,垂直節律只是一個建議,而且基線網格也只是想象出來的。所以我們不需要在每個使用場合都遵循這個規律,也不用在每個元素中都去追求像素級別的完美。
擴展閱讀:
顏色
顏色可以很大程度上的增加視覺辨識度,是字體排版中一個重要的組成部分。
####擴展閱讀:
下劃線
在印刷品里,永遠都不要使用到下劃線,因為這樣做會影響文字的閱讀,重點是,它很丑!Practical Typography
一般的來說,在網頁中下劃線也會看起來并不美好!幸運的是, background-image 就包含一個方法,它可以使得下劃線變得好看一點。 下面是Adam Schwartz使用Sass實現的下劃線的例子 :
@mixin text-underline-crop($background) { text-shadow: .03em 0 $background, -.03em 0 $background, 0 .03em $background, 0 -.03em $background, .06em 0 $background, -.06em 0 $background, .09em 0 $background, -.09em 0 $background, .12em 0 $background, -.12em 0 $background, .15em 0 $background, -.15em 0 $background; } @mixin text-background($color-bg, $color-text) { background-image: linear-gradient($color-text, $color-text); background-size: 1px 1px; background-repeat: repeat-x; background-position: 0% 95%; } @mixin text-selection($selection) { &::selection { @include text-underline-crop($selection); background: $selection; } &::-moz-selection { @include text-underline-crop($selection); background: $selection; } } @mixin link-underline($background, $text, $selection){ @include text-underline-crop($background); @include text-background($background, $text); @include text-selection($selection); color: $text; text-decoration: none; *, *:after, &:after, *:before, &:before { text-shadow: none; } &:visited { color: $text; } } /* Example usage */ a { @include link-underline(#fff, #333, #0CBF); }
SmartUnderline 是一個簡化這個工作的庫。建議你只在有鏈接的地方使用下劃線,這是大多是網站都遵循的規律,如果不這么做的話,可能會引起誤解。
擴展閱讀:
總結
恭喜你,你已經快讀完這篇手冊了。在web,這種用戶可以在任何分辨率的設備上使用的媒介上進行字體排版是及其困難的。在很多年前,當我第一次開始設計網頁的時候,我發現幾乎找不到最新的關于最佳WEB字體排版實踐的信息。很多專家發表的博客文章內容相互矛盾,而且很多市面上的web字體排版的書籍也很少談及具體技術應用的細節。字體排版手冊希望可以解決這個問題,并且為菜鳥們提供應該了解的關于如何創建符合字體排版工業標準的全部知識。我希望這個成果可以令你滿意。
請私信我回復“666”,為嚴哥打Call~,還有更多驚喜哦~
.............................................................
UI嚴選—越努力,越幸運
*請認真填寫需求信息,我們會在24小時內與您取得聯系。