Css的分類，屬性與選擇器-js教程-PHP中文網

Css的分類，屬性與選擇器

php中世界最好的语言

發布： 2018-03-19 13:51:08

原創

1418 人瀏覽過

這次帶給大家Css的分類，屬性與選擇器，使用Css的分類，屬性與選擇器的注意事項有哪些，下面就是實戰案例，一起來看一下。

Css 層疊樣式表美化頁面的小工具

#分類：

　　內嵌（行內）在標籤內部以屬性的形式呈現，屬性名稱style

內嵌head標籤內以標籤形式呈現，標籤名稱style

外部head標籤內加上link標籤引入外部檔案」為外部檔案

#.css

##.

<link rel="stylesheet" type="text/css" href="file:///D|/SSs/作业/3.12/图标.css" />

登入後複製

link標籤

　　插入icon圖標(加icon圖標，路徑必須絕對路徑)

<link rel="shortcut icon" href="xxx.ico" type="image/x-icon"/>

登入後複製

icon圖示

選擇器：

#　　用來找元素，將樣式用在標籤上。

　　　　標籤選擇器 .p{}

　　　　id選擇器#id{}

##　　　　class選擇器.class{}

　　　　並列（加逗號）選擇器1，選擇器2

　　　　父子（加空格）#選擇器 ##　　　　父子（加空格）#1

#　　　 *{}全頁

#屬性：

　　#文字：

#ex

t-decoration 文字修飾（底線什麼的）　　　

##　　　　text-shadow 陰影1px（水平陰影的位置）1px（垂直） 1px（模糊的距離） # （陰影顏色）

　　　　font-weight　

#　em-weight　表一個字大小

　　背景：

background-position：屬性定義p內圖片在p的位置可以寫兩個值左右上下

<head>
    <style>        
        #p{ 
        width:100%;
        height:111px;
        background-image:url();
            background-position:34% 0        }
    </style></head><body>
    <p id="p"></p></body>

登入後複製

bg-position#　　　　

　　　　# 縮放

　　　　background：顏色圖片平鋪位置大小總結問題：

#########　　###1. text-indent 縮排屬性，只能用在區塊標籤上，span之類的行標籤不能用#########

　　　　解決方法：為span加上display:inline-block;屬性，變成行內區塊標籤。

　　2.大p套小p，若父p不設寬高，則他會隨著子p的位置移動而改變。

　　　　如margin float屬性，寫在子p，父p也會移動。

　　　　解決方法：為父p設定邊框或定義寬高。

　　3.改變

的顏色

　　取消邊框，設背景色設高。