文本屬性和字體屬性,超連接導航欄案例 background

時間 2019-12-08

標籤文本屬性字體連接導航案例 background 简体版

原文原文鏈接

文本屬性

介紹幾個經常使用的。css

文本對齊

text-align 屬性規定元素中的文本的水平對齊方式。html

屬性值：none | center | left | right | justify

python

文本顏色

color屬性瀏覽器

文本首行縮進

text-indent 屬性規定元素首行縮進的距離，單位建議使用em佈局

文本修飾

text-decoration屬性規定文本修飾的樣式性能

屬性值：none(默認) | underline(下劃線) | overline(定義文本上的一條線) | line-through (定義穿過文本下的一條線) | inherit(繼承父元素的text-decoration屬性的值。)字體

行高

line-height就是行高的意思，指的就是一行的高度。網站

字體屬性

字體大小

font-size表示設置字體大小，若是設置成inherit表示繼承父元素的字體大小值。url

字體粗細

font-weight表示設置字體的粗細spa

字體系列

font-family

font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif

若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。若是都不支持則顯示宋體。　　

行高 line-height

針對單行文本垂直居中

公式：行高的高度等於盒子的高度，可使當行文本垂直居中，注意只適用單行文本。

針對多行文本垂直居中

行高的高度不能小於字體的大小，否則上下字之間會緊挨一塊兒。

第一步，一個寬度300*300的盒子，看盒子中一共顯示了幾行文字，假如是5行，再看一下行高，若是行高是line-height:30px; 那麼就知道行高*5=150px

第二步，讓(盒子的高度-150px)/2=75;那麼設置盒子的padding-top:75px;同時保證盒子的高度爲300px,那麼高度改成225px;

font-family介紹

使用font-family注意幾點：

1.網頁中不是全部字體都能用哦，由於這個字體要看用戶的電腦裏面裝沒裝，
好比你設置： font-family: "華文彩雲"; 若是用戶電腦裏面沒有這個字體，
那麼就會變成宋體
頁面中，中文咱們只使用：微軟雅黑、宋體、黑體。
若是頁面中，須要其餘的字體，那麼須要切圖。英語：Arial 、 Times New Roman

2.爲了防止用戶電腦裏面，沒有微軟雅黑這個字體。
就要用英語的逗號，隔開備選字體，就是說若是用戶電腦裏面，
沒有安裝微軟雅黑字體，那麼就是宋體：
font-family: "微軟雅黑","宋體"; 備選字體能夠有無數個，用逗號隔開。
3.咱們要將英語字體，放在最前面，這樣全部的中文，就不能匹配英語字體，
就自動的變爲後面的中文字體：
font-family: "Times New Roman","微軟雅黑","宋體";

4.全部的中文字體，都有英語別名，
咱們也要知道：微軟雅黑的英語別名：
font-family: "Microsoft YaHei";
宋體的英語別名： font-family: "SimSun";
font屬性可以將font-size、line-height、font-family合三爲一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高能夠用百分比，表示字號的百分之多少。
通常來講，都是大於100%的，由於行高必定要大於字號。
font:12px/200% 「宋體」等價於 font:12px/24px 「宋體」;
反過來，好比： font:16px/48px 「宋體」;
等價於 font:16px/300% 「宋體」

超連接導航欄案例

直接上代碼了

html結構

<div class="nav">
        <ul>
            <li>
                <a href="">路飛學城</a>
            </li>
            <li>
                <a href="">老男孩</a>
            </li>
            <li>
                <a href="">網站導航</a>
            </li>
            <li>
                <a href="">網站導航</a>
            </li>
            <li>
                <a href="">網站導航</a>
            </li>
            <li>
                <a href="">網站導航</a>
            </li>
        </ul>
    </div>

寫好上面的結構代碼以後，也就是將咱們頁面展現的內容顯示了，可是咱們此時要利用咱們學過的知識點來佈局頁面

首先咱們要作導航欄，並排顯示元素，第一想浮動，想到使用浮動以後，必定記得清除浮動元素。

css代碼以下:

      *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .nav{
            width: 960px;
            /*height: 40px;*/
            overflow: hidden;
            margin: 100px auto ;
            background-color: purple;
            /*設置圓角*/
            border-radius: 5px;
        }
        .nav ul li{
            float: left;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .nav ul li a{
            display: block;
            width: 160px;
            height: 40px;
            color: white;
            font-size: 20px;
            text-decoration: none;
            font-family: 'Hanzipen SC';
        }
        /*a標籤除外，不繼承父元素的color*/


        .nav ul li a:hover{
            background-color: red;
            font-size: 22px;
        }

background　　

白guang特

一、顏色表示法

　　顏色一共有三種表示方法：單詞、rgb表示法、十六進制表示法。

　　rgb表示法：

　　rgb：紅色綠色藍色三原色。

　　光學顯示器，每一個像素都是由三原色的發光原件組成的，靠明亮度不一樣調成不一樣的顏色的。

　　用法：rgb(111,234,123); r、g、b的每一個值的取值範圍0~255。

　　十六進制表示法：

　　全部用#開頭的值，都是十六進制的。

　　用法：#a0a0a0; #112233;能夠簡寫成#123;

二、background-color 屬性表示設置背景顏色

　　用法：

三、background-image 表示設置該元素的背景圖片

　　用法：background-image:url('paper.gif');

四、background-repeat 表示設置該元素的平鋪方式

　　用法：background-repeat:repeat（默認）|repeat-x|repeat-y|no-repeat|inherit;

五、background-position 表示設置背景圖片的位置

　　background-position: x% y%|Xpx Ypx; /*第一個值是水平位置，第二個值是垂直位置*/

六、圖片精靈技術

　　CSS雪碧，即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分。

CSS 精靈圖應用原理：

　　只有一張大的合併圖，每一個小圖標節點如何顯示單獨的小圖標呢？其實就是截取大圖一部分顯示，而這部分就是一個小圖標。

使用精靈圖的好處：

　　1）利用CSS Sprites能很好地減小網頁的http請求，從而大大的提升頁面的性能，這也是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由；

　　2）CSS Sprites能減小圖片的字節，曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和；

　　3）解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率；

　　4）更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便；

使用精靈圖的不足：

　　1）CSS精靈圖的最大問題是內存使用；

　　2）拼圖維護比較麻煩；

　　3）使CSS的編寫變得困難；

　　4）CSS精靈圖調用的圖片不能被打印；

七、應用：咱們可使用background綜合屬性製做通天banner，什麼是通天banner呢，就是通常咱們電腦的屏幕都是1439，可是設計師給咱們的banner圖都會比這個大，那麼咱們能夠此屬性製做通天banner，以下：background: red url(images/banner.jpg) no-repeat center top;

______________________________________________________________________________

1、文本屬性和字體屬性（經常使用的）

一、文本屬性

　　text-align:left|right|center|justify（兩端對齊，只適用於英文）; /*對齊方式*/

　　color:色值; /*文本顏色*/

　　text-indent:2em; /*首行縮進，建議單位用em*/

　　text-decoration:none|underline|overline|line-through|inherit;

　　line-height:高度值;

二、字體屬性

　　font-weight:normal|bold|border|lighter|100~900|inherit; /*100~300沒區別*/

　　font-family:字體;

　　a、網頁中不是全部字體都能顯示，由於這個字體要看用戶的電腦裏面裝沒裝，好比你設置：font-family:」華文彩雲」;若是用戶電腦裏面沒有這個字體，那麼就會變成宋體 ;