【靜態頁面架構】CSS之連接和圖像

時間 2019-12-05

原文原文鏈接

CSS架構

一。連接:html

連接元素:經過使用a元素的href屬性設置跳轉到指定頁面地址

<style>
        a{
            color: blue;
            text-decoration: none;
        }
        a:hover{
            cursor:default;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<a href="#">這是個連接</a>
</body>

絕對路徑與相對路徑:

絕對路徑:以域名開頭，到域名後面可指定具體頁面或資源的路徑
相對路徑:在當前頁面與資源處在一個目錄就是相對路徑
當前頁面與資源在子級目錄，就是../目標文件
當前頁面與資源在父級目錄，就是目錄文件名/目標文件名
當前頁面與資源與父級目錄處在同一個目錄，就是..目錄文件名/目標文件名

<body>
<a href="4抖音風格文本.html">這是抖音連接</a>
<br><!--<a>
        target表示當前連接打開方式
        _self：爲默認值，表示打開當前窗口打開頁面
        _blank:表示在新的窗口（頁籤）打開頁面-->
<a href="mailTo:qh52562500@163.com">個人email</a>
<!--用法：配合hrf屬性值是以"mailTo:"開頭的
    問題 - 必須配合當前電腦中的默認的郵箱軟件使用-->
</body>

錨點:經過a元素的href屬性與其餘元素的ID屬性配合，實現錨點效果

<body>
<a id="top">這是頂部</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--目標不必定是<a>元素，也能夠是別的元素-->
<a href="#top">回到頂部</a>
<!--a元素實現錨點
    設置href屬性值爲#id屬性值-->
</body>

下載功能:以a元素的Download屬性連接，用作下載到本地文件

<body>
<a href="imgs/a.jpg" download="小姐姐.jpg">下載圖片</a>
<!--使用href屬性指定下籽文件路徑，調轉到指定文件
    需使用HTML5新增的Download屬性實現下載
    也可本身設置原文件名-->
</body>

動態爲類選擇器:

<style>
        a:link {
            /* 連接元素默認的文本顏色是藍色 */
            color: lightcoral;
        }
        a:hover {
            /* 連接元素默認文本顏色是無變化的 */
            color: lightskyblue;
        }
        a:active {
            /* 連接元素默認的文本顏色是紅色的 */
            color: yellowgreen;
        }
        a:visited {
            /* 連接元素默認的文本顏色是深紫色的 */
            color: darkgreen;
        }

        input:focus {
            border: 1px solid lightcoral;
            outline: none;
        }

    </style>
</head>
<body>
<a href="04_抖音風格文本.html">這是一個連接</a>
<!-- 獲取焦點 -->
<input type="text">
</body>

二。圖像:架構

圖片元素:以SRC引入圖片的路徑

<style>
        img{
            width:560px;
        }
    </style>
</head>
<body><!--img元素爲空元素
           src - 設置引入指定圖片的路徑
      * alt - 設置若是圖片沒有正確顯示時的文本提示內容
    * 改變圖片顯示的大小 - 保持原圖片寬度和高度的比例(只設置寬度或高度)
      * 元素的屬性 - width和height
      * CSS的屬性 - width和height(建議使用這種方式)
 -->
<img src="imgs/a.jpg"<!--引入圖片--> alt="小姐姐">
</body>

背景圖像:以background-image屬性引入一個或多個圖像對頁面進行顯示

<style>
        body{
            background-image: url("imgs/wolongxueyuan.png");
            /*引入背景圖片*/
        }
        /*如裹引入圖片大於頁面，圖片會顯示不完整
          若是引入圖片小於頁面，圖片會重複顯示（鋪滿整個頁面）*/
    </style>
</head>
<body>
<a href="4抖音風格文本.html"><img src="imgs/b.jpg" width="300px"></a>
<!---->
</body>

平鋪方式:background-repeat屬性定義頁面背景圖像的平鋪方式

<style>
        div {
            width: 800px;
            height: 600px;
            border: 1px solid black;
            background-image: url("imgs/wolongxueyuan.png");
            background-repeat: no-repeat;
            /*background-position: top right;*//* 垂直 水平 */
            background-position: 50px 100px;

            background-size: 360px 360px;
        }
        /*背景圖像平鋪方式
        repeat爲默認值；頁面水平和垂直方向平鋪
        repeat-x表示水平方向平鋪
        repeat-y表示垂直方向
        no-repeat表示不平鋪

        背景圖像定位-水平和垂直方向
        水平方向-left(左)center(居中)right(右)
        垂直方向-top(上)center(居中)bottom(下)*/
    </style>
</head>
<body>
    <div></div>
</body>

背景關聯:background-attachment屬性用來設置背景圖像是固定的仍是跟頁面滾輪拖動的

<style>
        body{
            height:2000px;/*設置高*/
            background-image: url("imgs/wolongxueyuan.png");/*引入背景圖片*/
            background-repeat: no-repeat;/*不平鋪引入的背景圖像*/
            background-attachment: fixed;
        }
    </style>
</head>
<body>
<h2>愛新覺羅</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</body>

background屬性:用來設置多個背景屬性的簡寫屬性
精靈圖(雪碧圖):將一些小圖標合成一個圖片，進行移動摳圖

<style>
        div {
            width: 20px;
            height: 20px;
            /*border: 1px solid black;*/
            /*
                
                * 因爲頁面中須要引入多個背景圖像 -> 將HTML頁面加載變慢
                * 將多個背景圖像整合成一張圖片 -> 只須要引入一次
                * background-position屬性
                * 設置背景圖像的定位位置 - 實現現實背景圖像中其中一個小圖標
             */
            /*background-image: url("imgs/toolbars.png");
            background-repeat: no-repeat;
            background-position: 0 -50px;*/

            background: url("imgs/toolbars.png") no-repeat 0 -50px;
        }

    </style>
</head>
<body>
<div></div>
</body>