前端學習-基礎部分-css（一）
阿新 • • 發佈：2019-03-30
技術分享 bbc utf-8 one doctype nbsp itl 拆分 基本應用 
開始今日份整理
1.CSS的導入方式
CSS的導入方式主要是有內聯模式，行內模式，外部樣式表
1.1 內聯模式
內聯模式：直接在<head>中直接寫css，例如
p{ color:rgb(166, 226, 226); } #設置P標簽的顏色
1.2 行內模式
行內模式：在html中對應元素直接書寫
<p style="color:cadetblue">第一段 世界大勢，合久必分，分久必合</p>
1.3 外部樣式表
外部樣式表，主要是有倆種，一種為鏈接式，一種為外聯樣式表
<linkrel="stylesheet" href="index.css"> <!-- CSS2.1的樣式 --> @import.url()
倆者的區別如下
- 一個是全部導入後，才開始編譯，包括css，<link>方式
- 一個是先導入html進行編譯，然後在將css文件加載到網頁中 <@import>方式
2.CSS選擇器
css的選擇器主要分基本選擇器以及高級選擇器
2.1 基本選擇器
- 通用元素選擇器 *: 匹配任意元素，一般用於清楚網頁的默認樣式
- 標簽選擇器：匹配所有指定標簽的樣式，不管樣式有多深，都可以匹配，選中既所有，並不是單一的一個
- id選擇器：根據指定的id匹配標簽 ，id在網頁中全局唯一，一般留給後面js中調用，獲取到標簽
- class類選擇器：根據指定的class匹配標簽
註：一定要有公共類的概念，不要試圖用一個類完整一個網頁，盡量把類拆分出來，每個類盡量的小，讓更多的標簽去使用，同一個標簽可以攜帶多個類，類與類之間用空格隔開即可。
基本應用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基礎選擇器</title>基本應用<style> /*標簽選擇器*/ body{ background: #b6bbb2; } div{ background: #747F8C; color: red; } /*id選擇器*/ #h1{ color: #501c56; } /*class選擇器*/ .c1{ background: #2d4ca2; color: #41db50; } </style> </head> <body> <h1 id="h1">id</h1> <div> <p>內容1</p> </div> <span class="c1">class1</span> <div> <p>內容2</p> </div> <span class="c1">class1</span> <span class="c1">class1</span> </body> </html>
2.2 高級選擇器
2.2.1 後代選擇器
2.2.2 兒子選擇器
2.2.3 並集選擇器
2.2.4 交集選擇器
2.2.5 屬性選擇器
a
前端學習-基礎部分-css（一）