溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

web開發(fā)第二講美化界面css基礎(chǔ)知識點

發(fā)布時間：2020-07-17 01:47:30 來源：網(wǎng)絡(luò) 閱讀：168 作者：wx5dad8c26324df 欄目：web開發(fā) 
    首先我們已經(jīng)了解過網(wǎng)頁設(shè)計的基礎(chǔ)html，具體怎么美化怎么更加方便的設(shè)計文字的樣式等方面，所涉及的知識點稱為css，在后期網(wǎng)頁美化中非常重要。以下主要分兩個模塊來介紹css。
            第一：常涉及到的三種層疊樣式表，分別是：
            1、行內(nèi)樣式表
            <標(biāo)簽 ></標(biāo)簽>
            該方式不經(jīng)常使用
            2、頁面內(nèi)樣式
            <head>
         <style>
                        標(biāo)簽名{
                                            樣式名：樣式值；
                                                    }
            </style>
            </head>
            首先在<head>里面嵌套一個 <style><style>          然后具體再在里面進行樣式參數(shù)取值。
            3、外部鏈接表
            <head>
             <link rel="stylesheet" type="text/css" href="鏈接樣式表文件.css"/>
            </head>
            首先要在html下的<head>里面加入<link rel="stylesheet" type="text/css" href="鏈接樣式表文件.css"/>其次再新建一個css文件，然后再該文件下編輯樣式界面設(shè)定語句。
            標(biāo)簽名{
                                樣式名：樣式值；
                                }
        此時的標(biāo)簽名可以由三種方式，分別是
        類選擇器
        .name{}
        調(diào)用：
        <any class="name"></any>
        ID選擇器
        命名：
        #name{}
        調(diào)用：
        <any id="name"></any>
        標(biāo)簽選擇器
        標(biāo)簽名{}   
        調(diào)用
        <標(biāo)簽>
            注意：id選擇器以#開始，單詞調(diào)用。而class類選擇器可以多次調(diào)用，以. 開始。
            以上三種層疊樣式表的優(yōu)先級如下：
            行內(nèi)>頁面內(nèi)>外部樣式表
            第二：所涉及常用屬性以及屬性值

color:red; //字體顏色：紅色
text-align:center; //文本居中 left/center/right/justify 左/中/右/兩端對齊
font-weight:bold; //字體加粗 bold/bolder
font-style: italic; //字體傾斜
text-decoration: underline/none; //下劃線/去掉下劃線
font-size:19px; //字體大?。?9像素；
font-family:宋體；
font:19px 宋體; //字體大小 字體；
background:背景顏色 背景圖片 背景是否重復(fù) 背景定位位置
//背景圖片 url(圖片路徑)
// 是否重復(fù) repeat/no-repeat/repeat-x/repeat-y 重復(fù)/不重復(fù)/水平重復(fù)/垂直重復(fù)
//背景定位位置 left/center/right 水平左中右 top/center/bottom 垂直上中下
background-size:精確像素/百分比 /em/rem 背景圖片大小控制
background-attachment: scroll; //背景圖片固定定位 scroll 滾動 fixed 固定
width:400px; 寬度
height:300px; 高度
border:solid 1px #000; 邊框線 ：實線 線粗細 線顏色
線型：solid 實線 double 雙線 dotted 點狀線 dashed 虛線 none無邊框線
填充：
padding-top
padding-left
padding-right
padding-bottom
簡寫：
padding:值
padding:a
一個值表示四邊相同的填充
padding:a b;
兩個值表示上下是a，左右是b
padding:a b c;
三個值表示上是a,左右是b,下是c
padding:a b c d;
四個值表示：上，右，下，左
邊距：margin:值（同上）
*{ //通配符
margin:0;
padding:0;}
行高 ling-height 行間距
一般用行高布局垂直對齊方式
行高和高度一致，內(nèi)容在垂直正中間
行高比高度大，內(nèi)容在偏下
行高比高度小，內(nèi)容偏上
首行縮進
text-indent:2em; 首行縮進兩個字符
浮動：
float:left /right 左浮動、右浮動
margin:0 auto;水平居中
文本轉(zhuǎn)換 text-transform:uppercase/lowercase/capitalize
大寫、小寫、首字母大寫
列表：
list-style-type 列表樣式
list-style-image 列表圖片
list-style
行內(nèi)元素(內(nèi)聯(lián)元素) a span input img label select strong b
塊級元素 div p h2~h7 table ul ol dl form pre
display:block; 轉(zhuǎn)換為塊級元素 （占一行）
display:inline-block; 轉(zhuǎn)換為行內(nèi)塊 （寬高起作用）
display:inline; 轉(zhuǎn)換為行內(nèi)元素 （占內(nèi)容位置）
超鏈接四種狀態(tài)
a:link 訪問前的狀態(tài)
a:hover 鼠標(biāo)懸停時狀態(tài)
a:active 鼠標(biāo)點擊時的狀態(tài)
a:visited 訪問后的狀態(tài)

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手