CSS 基礎選擇器與三種引入方式

時間  2019-11-19
標籤 css 基礎 選擇器 三種 引入 方式 欄目 CSS 简体版
原文   原文鏈接

基礎選擇器

  • 選擇器：css 選擇 html 標籤的一個工具，是將 css 與 html 創建起聯繫，那麼 css 就能夠控制 html 樣式
  • 選擇器其實就是給 html 標籤起名字

標籤選擇器

  • 做用：根據指定的標籤名稱，在當前界面中找到全部該名稱的標籤，而後設置屬性css

  • 格式：html

    標籤名稱 {
    屬性: 值;
}

  • 注意點：前端

    • 標籤選擇器選中的是當前界面中全部的標籤，而不能單獨選中某一個標籤
    • 標籤選擇器不管標籤藏得多深都能選中

id選擇器

  • 做用：根據指定的 id 名稱找到對應的標籤，而後設置屬性工具

  • 格式：code

    #id名稱 {
    屬性: 值;
}

  • 注意點：htm

    • 每一個 HTML 標籤都有一個屬性叫作 id，也就是說每一個標籤均可以設置 id
    • 在同一個界面中 id 的名稱是不能夠重複的
    • 在編寫 id 選擇器時必定要在 id 名稱前面加上 #
    • id 的名稱是有必定的規範的
    • id 的名稱只能由字母、數字、下劃線組成（a-z 0-9 _）
    • id 名稱不能以數字開頭
    • id 名稱不能是 HTML 標籤的名稱，不能是（a h1 img input ...）
    • 在企業開發中通常狀況下若是僅僅是爲了設置樣式，咱們不會使用id，由於在前端開發中 id 通常留給 js 使用的

類選擇器

  • 做用：根據指定的類名稱找到對應的標籤，而後設置屬性開發

  • 格式：input

    .類名 {
    屬性: 值;
}

  • 注意點：class

    • 每一個 HTML 標籤都有一個屬性叫作 class，也就是說每一個標籤均可以設置類名
    • 在同一個界面中 class 的名稱是能夠重複的
    • 在編寫 class 選擇器時必定要在 class 名稱前面加上.
    • 類名的命名規範和 id 名稱的命名規範同樣
    • 類名就是專門用來給 CSS 設置樣式的
    • 在 HTML 中每一個標籤能夠同時綁定多個類名

CSS三種引入方式

行間式

<div style="width: 100px; height: 100px">

</div>
<!-- 簡單直接,針對性強 -->
  • 樣式書寫在標籤的 style 全局屬性中
  • 樣式格式爲key: value(單位)
  • 以;隔開多個樣式，最後的;能夠省略

內聯式

<head>
    <style>
        選擇器 {
            width: 100px; 
            height: 100px;
        }
    </style>
</head>
<!-- 解耦合了,可讀性強 -->
  • 樣式書寫在 head 標籤內的 style 標籤中
  • 樣式格式爲選擇器 { 樣式塊 }
  • 樣式塊key: value(單位)

外聯式

/* index.css文件 */
選擇器 {
    width: 100px; 
    height: 100px;
}
/* 適合團隊高效率開發, 耦合性低, 複用性強 */
<!-- index.html -->
<link rel='stylesheet' type='text/css' href='./index.css'>
  • 樣式書寫在外部 css 文件中，不須要寫任何標籤
  • 樣式格式爲選擇器 { 樣式塊 }
  • 樣式塊key: value(單位)
  • 以;隔開多個樣式，最後的;能夠省略

三種引入"優先級"分析

1. 沒有優先級
2. 不一樣的屬性樣式協同操做,相同的樣式採用覆蓋機制,選擇邏輯最下方的
3. 行間式必定是邏輯最下方的樣式
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程