CSS 基礎知識初識

weixin_34413357發表於2018-10-10

什麼是CSS

CSS的作用是是：

可以給網頁中的每一個元素設定樣式（化妝，排版佈局），可以讓頁面更加精美
CSS提供可各種各樣豐富多彩的CSS樣式。書寫格式： color：red

如何將CSS樣式應用到元素上

內聯樣式

將樣式直接寫在元素的style屬性上
缺點：多個元素種樣式修改繁瑣

//分號隔開
<div style = "color: red ; background-color:blue"></div>

文件樣式表 | 內嵌樣式表

將樣式寫在head元素中
缺點：無法多個HTML共用是

<style>
        div {
            background: red;
            color: blue;
            font-size: 14px;
        }
</style>

外部樣式表

建立一個CSS檔案

@charset "UTF-8"; 
/*指定字符集*/
div {
    background-color: blueviolet;
    color: darkgreen;
    font-size: 14px;
};

/* 外部樣式表 在HTML中引入 */
<link rel="stylesheet" href="css/page.css" type="text/css">

關鍵字 import，效率比link低，所以不建議使用impor

作用：可以匯入使用其他CSS檔案

/*將當前HTML heade中加入style標籤 內部@import*/
<style>
    @import "css/all.css";
</style>

網頁圖示

/* rel是icon href 可以是網路圖片，也可以是本地圖片，http可以省略 減少載入，節省流量 */
<link rel="icon" href="//www.jd.com/favicon.ico">

div元素

一般作為其他元素的父容器，把其他元素包住，代表一個整體
用於把網頁分割為多個獨立的部分

顏色

顏色標識方式：
1 . redColor 指定顏色
2 . rgb(redValue,greenValue,blueValue) rgb值
3 . 16進製表示法 eg #ffaa98 前兩位ff標識redValue,中間aa 表示 greenValue， 98 表示blueValue ,並且 #345會自動轉換成#334455（#rgb-->#rrggbb）

text-decoration 修飾線

<style>
        a {
            text-decoration: overline; /* 線在頂部 */
            text-decoration: underline; /*下劃線*/
            text-decoration: line-through; /*中間劃線*/
            text-decoration: none;  /*無劃線*/
        }
</style>
<body>
<a href = "http://www.baidu.com">百度一下</a>
</body>

letter-spacing 字元間距離 word-spacing 單詞間距

<style>
div {
            letter-spacing: 10px;
            word-spacing: 20px;
        }
</style>

text-transform

<style>
        div {
            text-transform: capitalize;
            /* capitalize  將每個單詞的首字元變為大寫 */
            /*uppercase 將每個單詞的所有字元變為大寫 */
           /* lowercase   */
            /*none*/
        }
    </style>

text-indent

設定第一行縮排
2em ：相對於font-size進行計算
2em 相當於 font-size * 2 ，所以會縮排2個字元

<style>
        div {
            width: 250px;
            text-indent: 2em;
            font-size: 20px;
            background: #f00;
        }
</style>

text-align

內容對齊方式

<style>
        div {
            text-align: left;
            /*  left: 左對齊 */
            /*  center: 居中對齊*/
            /*  right: 右對齊 */
            /*  adjust: 兩端對齊 */
        }
</style>

font-size

具體數值也可用em

<style>
       body {
            font-size: 10px;
        }
        div {
            font-size: 2em;
        }
       p {
            font-size: 2em;
        }
</style>

<body>
<div>
哈哈哈
<p>呵呵呵</p>
</div>
</body>
/* div的父元素body是10px，所以div的font就是2em就是20pt；p的父元素是div，所以p的font就是div的2em 即 40px */

百分比基於父元素的font-size計算

div {
            font-size: 50%;
        }
/* 父元素的一半 */

font-family

自定義字型名稱

<style>
       body {
            font-family: Consolas,"微軟雅黑",Symbol;
        }
</style>

1.可以設定1個或者多個字型名稱，從左到右依次選擇字型，知道找到可用的字型，否則用預設

一般情況下，英文字型只適用於英文，中文字型同時適用於英文和中文

font-face

自定義字型
下載ttf等檔案格式的字型檔案

<style>
        @font-face {
            src: url("./font/seisou.ttf"); /* 指定路徑檔案 */
            font-family: "迷你字型";  /* 建立字型別稱 */
        }
        div {
            font-family: "迷你字型";
            font-size: 50px;
        }
 </style>
<body>
<div>
12312312aaabbacc
</div>
</body>

font-weight

字型粗細（重量） 100 | 200|300~~~~900

<style>
        div {
            font-weight: 100;
           /* normal : 400 */
           /* bold : 600 */
        }
 </style>

font-style

設定文字的常規斜體顯示

<style>
        div {
            font-style: normal;
           /* normal : 正規字型 */
           /* italic : 字型的傾斜顯示 */
          /* oblique : 文字傾斜顯示，如果該字型沒有斜體時用 */
        }
 </style>

font-variant

<style>
        div {
            font-variant: normal;
           /* normal : 常規顯示 */
           /* small-caps : 將小寫字母大寫後縮小顯示 */
        }
 </style>

CSS選擇器

按照一定的規則選出符合條件的元素，為之新增CSS樣式，種類分為（通用選擇器，型別選擇器，類選擇器，id選擇器，屬性選擇器，組合，偽類，偽元素）

型別選擇器

/* 會選擇內部所有div元素 */
div {
     color : red;
}

通用選擇器

/* 會選擇內部所有元素 ，能不用就不用，效率低下*/
* {
     color : red;
}

id選擇器

/* 會特定元素增加樣式*/
#one {
     color : red;
}
<p id = "one">這是p1</p>

id注意點：

id在當前HTML中唯一。
多個單詞的時候，用中劃線/下劃線/駝峰保證可讀性 main-title /main_title/ mainTitle

class選擇器

會特定多個元素增加樣式，class命名可以重複 ,class包含

.one {
     color : red;
}
<p class = "one">這是p1</p> /* 會變*/
<p class = "one two">這是p1</p> /* 會變*/
<p class = "two">這是p1</p> /* 不會變*/

id注意點：

一個元素可以有多個class，用空格隔開。
多個單詞的時候，用中劃線/下劃線/駝峰保證可讀性 main-title /main_title/ mainTitle
保證了樣式與結構分離
能夠統一修改區域性的某一類的元素，不影響其他

屬性選擇器

改變擁有該屬性的元素 [att = value],跟#選擇器有些類似

/* href屬性中包含one */
[href ~= "one"]{
     color : green;
}
/* href屬性one開頭的元素 並且是整個元素 */
[href |= "one"]{
     color : green;
}
/* href屬性one開頭的元素 */
[href ^= "one"]{
     color : green;
}
/* href屬性one結尾的元素 */
[href $= "one"]{
     color : green;
}
/* href屬性包含one的元素 */
[href *= "one"]{
     color : green;
}

<p href = "one">這是p1</p> /* 會變*/
<p href = "two">這是p1</p> /* 會變*/
<p href = "one two">這是p1</p> /* 會變*/
<p href = "one-other">這是p1</p>

後代（組合）選擇器

1.組合選擇器可以找到父元素包含內的子元素
2.子組合選擇器直接巢狀子元素，不包含間接巢狀
3.不止可以放元素，也可以放class選擇器，型別選擇器

1. div span{
     color : red;
}
<div><span>hahaa</span></div>  /* 會變*/
<span>hahaa</span>  /* 不會變*/
<p><span>hahaa</span></p>  /* 不會變*/
<div><p><span>hahaa</span></p></div>  /* 會變*/

/* 子組合選擇器 直接巢狀子元素，不包含間接巢狀*/
2. div>span {
color : green;
}
<div><span>hahaa</span></div>  /* 會變 */
<div><p><span>hahaa</span></p></div>  /* 不會變 */

3. .name span [title] {
    color : green;
}
<div class = "name"><span><div title = "one">呵呵呵</div></span></div>  /* 會變 */

相鄰(兄弟)選擇器

（+）div元素後面緊挨著的P元素（且div p元素必須是兄弟關係）
（~）div元素後面所有的P元素（且div p元素必須是兄弟關係）

div+p{
     color : red;
}
<div>這是div</div>
<p>這是p1</p> /* 會變*/
<p>這是p2</p> /* 不會變*/
----------------------------------
div~p{
     color : red;
}
<div>這是div</div>
<p>這是p1</p> /* 會變*/
<p>這是p2</p> /* 會變*/

交集選擇器

需要同時滿足兩種情況的元素

div.one[title = "test"]{
     color : red;
}
<div class = "one">這是div</div>  /* 不會變*/
<div class = "one" title = "test">這是div</div> /* 會變*/
<div class = "one" title = "other">這是div</div> /* 不會變*/
----------------------------------
div~p{
     color : red;
}
<div>這是div</div>
<p>這是p1</p> /* 會變*/
<p>這是p2</p> /* 會變*/

並集選擇器

需要滿足任何一種情況的元素,逗號隔開

div, .one, [title = "test"]{
     color : red;
}
<div class = "one">這是div</div>  /* 會變*/
<div class = "one" title = "test">這是div</div> /* 會變*/
<div class = "one" title = "other">這是div</div> /* 會變*/
----------------------------------
div~p{
     color : red;
}
<div>這是div</div>
<p>這是p1</p> /* 會變*/
<p>這是p2</p> /* 會變*/

偽類選擇器

動態偽類選擇器

a:link 未訪問的連結
a:visited 已訪問的連結
a:hover 滑鼠移動到連結上
a:active 啟用的連結（滑鼠在連線上長按未鬆開）

 <style>
        /*未訪問的連結*/
        a:link {
            color: orange;
        }
         /*已訪問的連結*/
        a:visited {
            color: green;
        }
        /*滑鼠移動到連結*/
        a:hover {
            color: aquamarine;
        }
        /*被啟用的連結，滑鼠點選不放*/
        a:active {
            color: red;
        }
</style>
····
<a href="http://www.12306.cn/mormhweb/">百度一下</a>

注意點

除了a元素，hover跟active可以用於其他元素。
:hover必須放在:link跟:visited後面才能完全生效
: active必須放在hover後面

動態偽類：focus 文字框聚焦屬性

獲取焦點，當前有輸入焦點的元素

動態偽類：tabindex 選中索引

tab鍵盤選中的索引值，從1開始，依次選中。
-1表示禁止tab鍵盤選中

結構偽類：nth-child() 父元素中的第多少個子元素，

nth-child(1)
nth-child(2n),3n...nn,表示整倍數，
nth-child(2n+1)
nth-child(an+b) (n可以從0開始,a,b是可以是0 正數，負數)
nth-child(-n +2) 可以表示前兩個元素，n從0開始，-n+2只能是1，2，負數會導致失效

nth-last-child(-n +2) ，從後面開始數第幾個元素跟nth-child位置相反
first-child 等價於 nth-child（1）
last-child 等價於 nth-last--child（1）
first-of-type 等價於 nth-of-type(1)
only-child 等價於父元素中只有一個子元素
:root 根元素
:empty 代表裡面完全空白的元素(空格也沒有)

<style>
      /*表示父元素的第一個子元素是span*/
        span:nth-child(1) {
            color: #f00;
        }
    </style>
<body>

<span>span1</span> /*變色*/
<div>
    <span>span2</span>/*變色*/
    <span>span3</span>
    <span>span4</span>
    <span>span5</span>
    <p>
        <span>span6</span>/*變色*/
    </p>
</div>
</body>

結構偽類：父元素中 nth-of-type(n)第多少個子元素。

nth-of-type(n)

<style>
        span:nth-of-type(2) {
            color: #f00;
        }
    </style>
<body>
<span>span1</span>
<div>
    <span>span2</span>
    <span>span3</span> /*變色*/
    <p>
        <span>span6</span>
    </p>
</div>
<span>span1</span> /*變色*/
</body>

否定偽類：:not(x) x是一個選擇器，表示除了x以外的所有樣式

<style>
        div:not(#text) {
            color: #f00;
        }
    </style>
<body>
<div>asdasd</div> /*變色*/
<div id="text">asdasd</div>
<div>asdasd</div> /*變色*/
<span>span</span> /*變色*/
</body>

偽元素建議使用雙冒號來區分元素

:first-line 或者 ::first-line 可以針對首行設定元素樣式

<style>
        div {
            width: 300px;
            background: #f00;
        }
        div::first-line {
            color: #00f;
        }
</style>

:first-letter 或者 ::first-letter 針對元素首字母來設定樣式
:before 或者 ::before 在內容前面插入樣式
:after 或者 ::after 在內容後面插入樣式

特點：跟div不連結在一起，可以單獨設定樣式

<style>
        div {
            width: 300px;
            background: #f00;
        }
        div::before {
            content: "555";
        }
        div::after {
            content: '777';
        }
      div::after {
             /* 引用圖片 */
             content:url("images/1.png");
        }
       div::after {
             /* 引用屬性名的值 ,會將one放置div之前*/
             content:attr(class);
        }
    </style>
<body>
<div>我是中國人我是中國人我是中國人我是中國人我是中國人我是中國人我是中國人我是中國人我是中國人</div>
<div>div2</div>
<div class = "one">div3</div>
</body>

Emmet 外掛的使用

標籤的使用

div>ul>li

<div>
    <ul>
        <li></li>
    </ul>
</div>

div+p+span

<div></div>
<p></p>
<span></span>

div+div>p>span+em

<div></div>
<div>
   <p>
    <span></span>
    <em></em>
   </p>
</div>

ul>li*5

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

div+div>p>span+em^h1 ^表示跟em的父元素同級，^^表示跟em的父元素的父元素同級，最多不能超過當前的第一個元素

<div></div>
<div>
    <p><span></span><em></em></p>
    <h1></h1>
</div>

小括號的用法 div+(div>em>span)+p

<div></div>
<div>
    <em>
        <span></span>
    </em>
</div>
<p>
</p>

屬性用法

div#header+div.page+div#footer.class1.class2.class3
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
-----------------
td[title="hello world" cosplay=3]
<td title="hello world" cosplay="3"></td>
-----------------
ul>li.item$*3
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>
-----------------
ul>li.item$@-*3
<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

內容用法

a{click}>span{here}
<a href="">click<span>here</span></a>
-----------------
p>{click}+a{here}+{to contune}
<p>click<a href="">here</a>to contune</p>
-----------------
/*隱式標籤*/
<div>.wrap>.content</div>  
<div>
   <div class="wrap">
       <div class="content"></div>
   </div>
</div>
-----------------
/*隱式標籤*/
table>#row$@4*3>[colspan=2]>{$}
<table>
   <tr id="row4">
       <td colspan="2">1</td>
   </tr>
   <tr id="row5">
       <td colspan="2">2</td>
   </tr>
   <tr id="row6">
       <td colspan="2">3</td>
   </tr>
</table>
-----------------

CSS用法

w200+h100+m40
<style>
        div {
            width: 200px;
            height: 100px;
            margin: 40px;
        }

    </style>
-----------------
<style>
        div {
            /* m20-30-40-50 */
            margin: 20px 30px 40px 50px;
            /*fz50p*/
            font-size: 50%;
        }
 </style>-

初識Java Java基礎知識
2020-06-23
Java
CSS基礎知識
2021-01-10
CSS
CSS基礎知識簡介
2020-04-06
CSS
css 入門基礎知識
2015-12-06
CSS
【知識分享】伺服器基礎知識【初學者必看】
2023-02-24
伺服器
前端-html和css基礎知識
2021-10-19
前端HTMLCSS
CSS基礎知識點總結
2018-02-18
CSS
CSS基礎知識總結（4）
2024-07-07
CSS
IdentityServer4系列 | 初識基礎知識點
2020-10-05
IDEServer
【WEB基礎】HTML & CSS 基礎入門（1）初識
2019-05-20
WebHTMLCSS
前端基礎知識複習之CSS
2018-03-15
前端CSS
前端-基礎知識體系（初級-上）
2019-12-18
前端
前端-基礎知識體系（初級-下）
2019-12-18
前端
基礎知識
2018-03-29
前端開發基礎知識整理–css篇
2018-03-09
前端CSS
初觸hibernate--基礎知識盲區
2015-03-16
初識ABP vNext（1）：開篇計劃&基礎知識
2020-08-13
Python基礎初識
2020-07-23
Python
【.net基礎】--初識Struct
2015-04-15
Struct
AI 基礎知識
2020-01-04
AI
Webpack 基礎知識
2019-04-06
Web
Dart基礎知識
2019-05-25
Dart
RabbitMQ基礎知識
2019-05-11
MQ
webpack基礎知識
2019-07-25
Web
javascript基礎知識
2021-09-09
JavaScript
ThinkPHP基礎知識
2021-04-07
PHP
Laravel基礎知識
2021-06-09
Laravel
Redis基礎知識
2021-07-08
Redis
Docker基礎知識
2018-08-08
Docker
程式基礎知識
2018-08-05
Envoy基礎知識
2018-10-29
DockerFile基礎知識
2018-10-21
Docker
Nginx基礎知識
2020-12-17
Nginx
Java基礎知識
2020-09-23
Java
PRML 基礎知識
2022-02-10
BGP基礎知識
2023-02-07
PHP基礎知識
2020-12-25
PHP
React基礎知識
2018-06-03
React

CSS 基礎知識 初識