前端筆記之CSS（上）

番茄西紅柿發(fā)布于2019-04-23 11:45 / 1117人閱讀

摘要：宋體注意使用某種特定的字體系列宋體完全取決于用戶機器上該字體系列是否可用這個屬性沒有指示任何字體下載。但是記住，最終選擇上的是最后的那個后代元素。

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標準通用標記語言的一個應(yīng)用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。

基本語法

在head標簽里面，寫入一下標簽：　　

<html>
    <head>
        <style type="text/css">
             css代碼
        style>
    head>
    <body>body>
html>

CSS 代碼規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明。

選擇器{屬性:屬性值;屬性:屬性值;···},我們稱這種形式叫做鍵(key)值(value)對形式。

注釋：

/*css注釋內(nèi)容*/

文本屬性

文本屬性	文本屬性值	意義
color	英文,16進制,rgb	文本顏色
text-align	left,center,right	對齊元素中的文本
text-indent	px,em	縮進元素中文本的首行
line-height	px	設(shè)置行高
font-size	px	字體大小
font-weight	100-900,bold,normal,lighter	文本的粗細
font-style	normal,italic,oblique,inherit	字體的風格。
font-family	字體	字體

文本屬性之color：

color 屬性規(guī)定文本的顏色。

①英文字母：red,green,blue,yellow,orange,pink,gray···

②16進制：

③rgb：r-red,g-green,b-blue

16進制和rgb我們不需要記憶會通過ps或者識色工具取色就可以了。

文本屬性之text-align：

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

實現(xiàn)text-align屬性特效元素必須具備寬度。

最后一個水平對齊屬性是 justify，它會帶來自己的一些問題。慎重使用。

文本屬性之font-weight：

font-weight 屬性設(shè)置文本的粗細。

文本屬性之font-style：

文本屬性之font-family：

c盤->windows->fonts文件夾

font-family 規(guī)定元素的字體系列。

font-family 可以把多個字體名稱作為一個“回退”系統(tǒng)來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。也就是說，font-family 屬性的值是用于某個元素的字體族名稱或/及類族名稱的一個優(yōu)先表。瀏覽器會使用它可識別的第一個值。

有兩種類型的字體系列名稱：

指定的系列名稱：具體字體的名稱，比如："times"、"courier"、"arial"。

通常字體系列名稱：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

提示：使用逗號分割每個值，并始終提供一個類族名稱作為最后的選擇。

注意：使用某種特定的字體系列（Geneva）完全取決于用戶機器上該字體系列是否可用；這個屬性沒有指示任何字體下載。因此，強烈推薦使用一個通用字體系列名作為后路。

復合屬性

可以按順序設(shè)置如下屬性：

font-style （使用斜體、傾斜或正常字體）

font-variant （設(shè)置小型大寫字母的字體顯示文本）

font-weight （設(shè)置文本的粗細）

font-size/line-height （設(shè)置字體的尺寸和行高）

font-family （規(guī)定元素的字體系列）

可以不設(shè)置其中的某個值，比如 font:100% verdana; 也是允許的。未設(shè)置的屬性會使用其默認值。

如：

body{ font: italic small-caps bold 14px/24px "microsoft yahei";}

字體：斜體小型大寫字母粗體 14號大小/24像素行高微軟雅黑

可以不需要每個都寫，但是順序還是要的

塊元素和行內(nèi)元素

標簽元素標記都是一回事。

	塊元素	行內(nèi)元素	行內(nèi)塊元素
標簽	div h1-h6 ul ol p	span a b i	img
特性	①多帶帶占用一整行	①不多帶帶占用一整行	①不占用一整行
特性	默認寬度100% ②可以設(shè)置寬高	②不可以設(shè)置寬高	②可以設(shè)置寬高

相互轉(zhuǎn)換

使用以下CSS屬性可以將任意的標簽元素（塊級、行內(nèi)、行內(nèi)塊）轉(zhuǎn)換為任何的顯示模式。

display:block; 轉(zhuǎn)換為塊級元素

display:inline; 轉(zhuǎn)換為行內(nèi)元素

display:inline-block; 轉(zhuǎn)換為行內(nèi)塊元素

display的特殊值

隱藏顯示元素

display:none;->display:block/inline/inlin-block;

visibility: hidden;->visible

二者區(qū)別：

1.display:none是徹底消失，不在文檔流中占位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文檔流中占位，瀏覽器會解析該元素；

2.使用visibility:hidden比display:none性能上要好，display:none切換顯示時visibility，頁面產(chǎn)生回流（當頁面中的一部分元素需要改變規(guī)模尺寸、布局、顯示隱藏等，頁面重新構(gòu)建，此時就是回流。所有頁面第一次加載時需要產(chǎn)生一次回流），而visibility切換是否顯示時則不會引起回流。(后面我們闡述)

基礎(chǔ)選擇器

標簽選擇器

標簽選擇器是標簽名稱命名的，讓頁面中所有的指定標簽都具備一個樣式，不管有多少個，不管嵌套多深，一定會被選中。

標簽名{屬性名:屬性值;}

h2{color:red;}

<div>
    文字1
    <div>
        文字2
        <div>
            文字3
            <div>
                文字4
                <h2>h2標簽h2>
            div>
        div>
        div>
div>

因為標簽選擇器會選中所有的標簽，實際工作中，不會多帶帶用標簽選擇器，因為會影響其他同名的標簽。

類選擇器（class）

使用方法：

1、用“.”來定義類選擇器

2、在需要調(diào)用的標簽上添加class屬性即可（class="類選擇器名稱"）

示例：

定義：.box{color:red;}

調(diào)用：

class="box">div3

一個標簽可以添加多個類選擇器，用空格隔開。

正確寫法：

用原子類最方便的，所謂的原子類，就是一些簡單的屬性做成一個類，然后執(zhí)行選擇所需的樣式即可。

各取所需：

div1

類選擇器是工作中最常用的，原因：

1、頁面上可以有無數(shù)個標簽，用一樣的類樣式

2、一個標簽可以同時使用多個類樣式

id選擇器:

要求以“#”開頭，后面緊跟id選擇器的名字，名稱自定義，要遵循命名規(guī)范

#id名稱{color:red;}

實例：

定義：#box{}

調(diào)用：div1

id選擇器好比人的身份證，同一個id名，只能使用一次，不能重復。

實際工作中寫CSS，id選擇器是個不太常用的選擇器，因為：

1、id太珍貴，一次只能給一個元素添加樣式

2、寫樣式的時候，大部分可以用類選擇器，極少用id，而且id選擇器權(quán)重太高

3、JavaScript通過id來獲取元素

總結(jié)：id選擇器其實是留給JS用的。

**通配符選擇器（*）**

“*”指的是所有。

作用：選中網(wǎng)頁所有的標簽。

經(jīng)驗：由于通配符選擇器可以選中所有標簽，權(quán)重最低，工作中不使用，一般用來做測試，寫demo。

*{color:red;} 代表當前網(wǎng)頁中所有標簽都變紅

優(yōu)先級關(guān)系

權(quán)重： id選擇器>class選擇器>標簽選擇器>通配符選擇器 　　

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        *{
            color:red;
        }
        h1{
            color: green;
        }
        #h1{
            color: orange;
        }
        .h1{
            color: blue;
        }
        /* 
        
        id選擇器>class選擇器>標簽選擇器>通配符選擇器
        
         */
    style>
head>
<body>
    <h1 id="h1" class="h1">基本選擇器的優(yōu)先級關(guān)系h1>
body>
html>

高級（復合）選擇器

描述：前面學習的都是基礎(chǔ)選擇器，復合選擇器就是將基礎(chǔ)選擇器綜合在一起使用。

并集選擇器：

作用：將頁面中相同樣式放到一起寫CSS屬性，集體聲明樣式，簡化代碼。

逗號“，”表示合并關(guān)系

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Documenttitle>
    <style type="text/css">
        h1,h2,h3,.box,p,span,li{
            color:red;
            font-size:30px;
        }
    style>
head>
<body>
    <h1>文字1h1>
    <h2>文字2h2>
    <h3>文字3h3>
    <div class="box">div標簽div>
    <p>p標簽p>
    <span>span標簽span>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
    ul>
body>
html>

交集選擇器：

有些教材稱為“指定選擇器”

即滿足條件1，也要滿足條件2

兩種或以上選擇器同時存在一個標簽上。

寫法：選擇器之間直接連接，沒有任何符號

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Documenttitle>
    <style type="text/css">
        p.red{color:red;}
        #box.box{
            color:blue;
        }
    style>
head>
<body>
    <p class="red">p1p>
    <p class="red">p2p>
    <p>p3p>
    <div class="red">div1div>
    <div class="box" id="box">div2div>
    <div class="box">div3div>
    <div class="box" id="box">div4div>
body>
html>

交集選擇器使用的是基礎(chǔ)選擇器，可以是都是類選擇器，也可以是標簽和類混寫，也可以是id。

后代選擇器：

有些教材稱為“包含選擇器”，“派生選擇器”

描述：后代選擇器用來選擇元素的后代，用“空格”隔開。當標簽發(fā)生嵌套時，就存在后代關(guān)系。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Documenttitle>
    <style type="text/css">
       div p{color:red;}
       .box1 p{color:blue;font-weight:bold;}
       .bigBox ul li a{color:red;}
      .father .son{color:red;}
    style>
head>
<body>
    <p>外面的p標簽p>
    <div class="box1">
        <p>p1p>
        <p>p2p>
        <p>p3p>
    div>

    <div class="box2">
        <p>p1p>
        <p>p2p>
        <p>p3p>
    div>

    <div class="bigBox">
        <ul>
            <li><a href="##">li01a>li>
            <li><a href="##">li02a>li>
            <li><a href="##">li03a>li>
            <li><a href="##">li04a>li>
        ul>
    div>

    <div class="father">
        <a href="##" class="son">文字1a>
    div>
    <div class="father">
        <a href="##">文字2a>
    div>
body>
html>

注意：后代選擇器，選擇的是后代的元素，不一定是兒子，還是孫子、曾孫子、重孫子...都行。但是記住，最終選擇上的是最后的那個后代元素。

CSS引入方式

內(nèi)嵌式：

內(nèi)嵌式優(yōu)點：加載速度快，因為不用再多一個HTTP請求，結(jié)構(gòu)和樣式半分離。

將CSS嵌入到HTML頁面head標簽對中：

行內(nèi)式：

寫法：在標簽身上添加style屬性

div1

注意：行內(nèi)式?jīng)]有實現(xiàn)結(jié)構(gòu)和樣式分離，不推薦使用，一般后臺程序員比較習慣使用這種方式。

外鏈式：

1、新建一個.css擴展名的文件，直接在文件內(nèi)部寫CSS（注意：不要寫上

導入式會在整個網(wǎng)頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網(wǎng)頁比較大則會兒出現(xiàn)先顯示無樣式的頁面，閃爍一下之后，再出現(xiàn)網(wǎng)頁的樣式。這是導入式固有的一個缺陷。

引入方式總結(jié)

CSS屬性

字體

font-style:

font-style 屬性可定義字體的風格。該屬性設(shè)置使用斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個多帶帶的字體。

p{
    font-style: normal;
    font-style: italic;
    font-style: oblique;
}

font-weight:

font-weight 屬性設(shè)置文本的粗細。該屬性用于設(shè)置顯示元素的文本中所用的字體加粗。數(shù)字值 400 相當于關(guān)鍵字 normal，700 等價于 bold。

p{ 
    font-weight: 100;/*lighter*/
    font-weight: 400;/*normal*/
    font-weight: 700;/*bold*/
 }

font-size:

font-size 屬性可設(shè)置字體的尺寸。該屬性設(shè)置元素的字體大小。注意，實際上它設(shè)置的是字體中字符框的高度；實際的字符字形可能比這些框高或矮（通常會矮）。

我們通常使用如下代碼：

font-size: 15px;

}

注意：在PC端默認字體大小是16px,最小字體大小是12px.

font-family:

font-family 屬性是用于某個元素的字體族名稱或/及類族名稱的一個優(yōu)先表。瀏覽器會使用它可識別的第一個值。

注釋：使用逗號分割每個值，并始終提供一個類族名稱作為最后的選擇。

font-family: 我想要的1,我想要的2,我想要的3,···保底字體。

那么我們電腦中的字體在哪里？

C:WindowsFonts

注意：①我們多寫幾個字體作為備用字體②注意版權(quán)問題(微軟雅黑收費了)③我們建議把中文字體改寫為unicode編碼

復合屬性font：

上述單一屬性我們可以通過font這個復合屬性一起寫出來：

語法：

font-style，font-variant ， font-weight，font-size/line-height，font-family

上述屬性值不一定都要寫，但是如何你要寫必須按

云服務(wù)器 GPU云服務(wù)器前端css css前端前端css框架浮動-前端-css

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1100.html

發(fā)表評論

登陸后可評論

0條評論

番茄西紅柿

男|高級講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 769·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 4022·2021-11-30 14:52
Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

閱讀 3855·2021-11-30 14:52
VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區(qū)

閱讀 3909·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3838·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3949·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3613·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6310·2021-11-29 11:00

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！