css排版經常使用樣式、三種不一樣html類型、css佈局盒模型介紹

時間 2020-03-07

標籤 css 排版經常使用樣式三種不一樣 html 類型佈局模型介紹欄目 CSS 简体版

原文原文鏈接

把CSS樣式與網頁編排經過網頁排版中主要格式化要素實現網頁實用性與欣賞性相結合，實現出設計效果。css

字體：div{font-family: "Microsoft Yahei";}爲網頁中的文字設置字體爲微軟雅黑,這裏注意不要設置不經常使用的字體，由於若是用戶本地電腦上若是沒有安裝你設置的字體，就會顯示瀏覽器默認的字體。（由於用戶是否能夠看到你設置的字體樣式取決於用戶本地電腦上是否安裝你設置的字體。）如今通常網頁喜歡設置「微軟雅黑」，以下代碼：body{font-family:"Microsoft Yahei";}或body{font-family:"微軟雅黑";}注意：第一種方法比第二種方法兼容性更好一些。固然了若是你想用特殊字體怎麼辦了？經過css3的自定義字體實現@font-face{ font-family:dhnblog;src:url('images/fzm.ttf');}/*自定義字體類型*/
字號、顏色：div.box{font-size: 14px;color: #f90;} 設置網頁中文字的字號爲14像素，並把字體顏色設置爲#f90；此外顏色分爲3種表現形式：a.rgb（255,255,255）b.英文單詞c.16進制，如#f90，具體參考css基本概念與css核心語法介紹中有關顏色介紹
粗體：若是想爲文字設置粗體除了使用h1-h6或strong標籤，還能夠經過css樣式font-weight: bold;對文本加粗
斜體：經過css樣式font-style:italic;實現文字斜體功能，效果等同於<em></em>標籤，文本正常font-weight:normal;
下劃線：text-decoration: underline;/*下劃線*/
刪除線：淘寶京東等電商購物網站常見的字體刪除線經過text-decoration: line-through;/*刪除線*/效果等同於<del></del>
縮進：書寫習慣段落前空2格，這個經過text-indent: 2em;/*首行縮進*/實現這個特殊樣式，其中2em的意思就是文字的2倍大小。
行間距（行高）：line-height/*行間距（行高）屬性*/，以下代碼line-height: 2em;實現設置段落行間距爲2倍。
中文字間距、字母間距：其中letter-spacing是/*字間距，單詞與單詞間距*/word-spacing爲/*字母間距*/
對齊：經過text-align能夠設置塊狀元素中的文本、圖片2端對齊，居中，左右展現等

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>CSS格式化排版</title>
 6         <style type="text/css">
 7             div{
 8                 font-family: "Microsoft Yahei";/*字體*/
 9                 line-height: 2em;/*行間距*/
10                 text-align: justify;/*2端對齊*/
11             }
12             div.box{
13                 font-size: 14px;/*文字大小*/
14                 color: #f90;/*字體顏色*/
15                 text-indent: 2em;/*首行縮進*/
16             }
17             .box>span{
18                 font-weight: bold;/*文本加粗*/
19                 font-style: italic;/*斜體*/
20                 text-decoration: underline;/*下劃線*/
21                 text-decoration: line-through;/*刪除線*/
22             }
23             em{
24                 letter-spacing: 10px;/*字間距，單詞與單詞間距*/
25                 word-spacing: 5px;/*字母間距*/
26             }
27         </style>
28     </head>
29     <body>
30         <div class="box">首先應該知道爲何學習，而不要盲目地爲了學習而學習。 學習最重要的就是態度，態度和方式決定結果。 須要從根本上認爲學習是一件值得的事情，從思想上端正纔會有學習的勁頭。 <span>不少實例代表不一樣的心態會有不同的學習效果，要以健康樂觀的心態去學習，能成爲怎樣的學生都是由本身決定的。 行爲決定命運，有的人學習是爲了充實本身或者找工做，因此須要明白本身到底是爲何學習。</span><del>The first thing to know is why you should learn, not blindly to learn. The most imdelortant thing to learn is attitude. Attitude and method determine the outcome. </del><em>You need to fundamentally think that learning is a worthwhile thing. Only when you are ideologically correct can you have the motivation to learn.</em></div>
31     </body>
32 </html>

經過CSS格式化排版實現網頁設計效果，學習盒模型爲網頁設計奠基紮實的基礎，它是CSS佈局的基石，下面總結盒模型的概念、結構、尺寸：html

在瞭解CSS佈局以前，咱們須要提早知道一些知識，html中的標籤元素大致被分爲三種不一樣的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。html中的標籤元素大致被分爲三種不一樣的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
☆塊狀元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<li>、<dl>、<table>、<address>、<blockquote>、<form>
☆內聯元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
☆內聯塊狀元素：<img>、<input>
總結：什麼是塊級元素？在html中<div>、<p>、<h1>、<form>、<ul>和<li>就是塊級元素。設置display:block就是將元素顯示爲塊級元素。如a{display:block;}就是將內聯元素a轉換爲塊狀元素，從而使a元素具備塊狀元素特色。
塊級元素特色：一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。二、元素的高度、寬度、行高以及頂和底邊距均可設置。三、元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。
在html中，<span>、<a>、<label>、<strong>和<em>就是典型的內聯元素（行內元素）（inline）元素。固然塊狀元素也能夠經過代碼display:inline將元素設置爲內聯元素。如div{display:inline;}就是將塊狀元素div轉換爲內聯元素，從而使div元素具備內聯元素特色。
內聯元素特色：一、和其餘元素都在一行上；二、元素的高度、寬度及頂部和底部邊距不可設置；三、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
內聯塊狀元素（inline-block）就是同時具有內聯元素、塊狀元素的特色，代碼display:inline-block就是將元素設置爲內聯塊狀元素。(css2.1新增)，<img>、<input>標籤就是這種內聯塊狀標籤。
inline-block元素特色：一、和其餘元素都在一行上；二、元素的高度、寬度、行高以及頂和底邊距均可設置。css3

舉例盒模型：一個朋友送你一個禮物，包裝盒子看起來高端大氣上檔次，打開后里面卻只有2個小禮品盒，禮品盒裏面放的是誘人可口的月餅，那麼這個月餅就屬於小禮品盒的內容，同時這個小禮品盒能夠看作一個"頁面元素div(只要是塊級元素均可以)",月餅到小禮品盒的距離屬於"內邊距padding"，月餅到小禮品盒有4個方位「top-right-left-bottom」小禮品盒外邊的包裝屬於"邊框border"，那麼這個小禮品盒的寬度（盒子的寬度）=左邊框+左填充+內容寬度+右填充+右邊框，小禮品盒的高度同理;瀏覽器

盒子模型邊框/* border: 1px solid #f90;*/寫法等同於=>border-width: 1px;border-style: solid;border-color: #f90;ide

注意：一、border-style（邊框樣式）常見樣式有：dashed（虛線）|dotted（點線）|solid（實線）。二、border-color（邊框顏色）中的顏色可設置爲十六進制顏色，如: border-color:#888;//前面的井號不要忘掉。三、border-width（邊框寬度）中的寬度也能夠設置爲： thin|medium|thick（但不是很經常使用），最常仍是用像素（px）。佈局

盒模型寬度和高度和咱們日常所說的物體的寬度和高度理解是不同的，css內定義的寬（width）和高（height），指的是填充以裏的內容範圍。
所以一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。學習

元素內容與邊框之間是能夠設置距離的，稱之爲填充(padding);元素與其它元素之間的距離可使用邊界（margin）來設置,方向都是(順時針)：上、右、下、左；總結一下：padding和margin的區別，padding在邊框裏，margin在邊框外。字體

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>CSS盒模型</title>
 6         <style type="text/css">
 7             div{
 8                 /* border: 1px solid #f90; */
 9                 border-width: 1px;/* thin|medium|thick*/
10                 border-style: solid;/*dashed（虛線）|dotted（點線）|solid（實線）*/
11                 border-color: #f90;
12             }
13             p{
14                 border-bottom: 1px dotted red;/*border-top|border-left|border-right*/
15                 letter-spacing: 5px;/*字間距*/
16                 word-spacing: 2px;/*字母間距*/
17                 direction: rtl;
18                 text-transform: uppercase
19             }
20             div.box{
21                 padding: 10px 20px 30px 40px;/*上10px右20px下30px左40px*/
22                 padding: 10px 20px 30px;/*上10px 左右20px 下30px*/
23                 padding: 10px 20px;/*上下10px 左右20px*/
24                 padding: 10px;/*上下左右10px*/
25             }
26             /*內邊框padding和外邊距margin都是順時針*/
27             p#box{
28                 /* margin: 10px 20px 30px 40px; */
29                 margin-top: 10px;
30                 margin-right: 20px;
31                 margin-bottom: 30px;
32                 margin-left: 40px;
33             }
34         </style>
35     </head>
36     <body>
37         <div class="box">對於將來的定位，是卯足了力氣，在本身喜歡的領域生根發芽圓夢，而後還能養活本身。其實咱們每一個人最初的職業夢想，大概都是這樣的完滿，但走着走着，就向現實作出了妥協。倒不是說如今的生活就很差，而是在大浪淘沙的過程當中，每一個人都找到了適合本身的沙灘。若不是生活所迫，誰願意把本身弄得一身才華。乍聽這話，像是牢騷，咀嚼一遍，就成了傲嬌。</div>
38         <p id="box">If not for life, who wants to be covered with scars</p>
39     </body>
40 </html>