1. CSS介紹
現在的互聯網前端分三層：
HTML：超文本標記語言，從語意的角度描述頁面結構，
CSS：層疊樣式表，從審美的角度負責頁面樣式，
JS：JavaScript ，從互動的角度描述頁面行為
CSS：Cascading Style Sheet，層疊樣式表，CSS的作用就是給HTML頁面標簽添加各種樣式，定義網頁的顯示效果，簡單一句話：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能，
接下來我們要講一下為什么要使用CSS，
1.1 HTML的缺陷
不能夠適應多種設備
要求瀏覽器必須智能化足夠龐大
資料和顯示沒有分開
功能不夠強大
1.2 CSS優點
使資料和顯示分開
降低網路流量
使整個網站視覺效果一致
使開發效率提高了（耦合性降低，一個人負責寫html，一個人負責寫css）
比如說，有一個樣式需要在一百個頁面上顯示，如果是html來實作，那要寫一百遍，現在有了css，只要寫一遍，現在，html只提供資料和一些控制元件，完全交給css提供各種各樣的樣式，
2. CSS的引入方式
2.1 行內樣式
<div> <p style="color: green">我是一個段落</p> </div>
2.2 內接樣式
<style type="text/css"> /*寫我們的css代碼*/ span{ color: yellow; } </style>
2.3 外接樣式-鏈接式
<link rel="stylesheet" href="./index.css">
2.4 外接樣式-匯入式
<style type="text/css"> @import url('./index.css'); </style>
3. CSS選擇器
3.1 基本選擇器
標簽選擇器
類選擇器
id選擇器
3.1.1 標簽選擇器(標簽名)
標簽選擇器可以選中所有的標簽元素，比如div，ul，li ，p等等，不管標簽藏的多深，都能選中，選中的是所有的，而不是某一個，所以說 "共性" 而不是 ”特性“，
body{ color:gray; font-size: 12px; } /*標簽選擇器*/ p{ color: red; font-size: 20px; } span{ color: yellow; }
3.1.2 類選擇器(.)
所謂類：就是class . class與id非常相似，任何的標簽都可以加類，但是類是可以重復,屬于歸類的概念，同一個標簽中可以攜帶多個類，用空格隔開，
類的使用，能夠決定前端工程師的css水平到底有多牛逼？在這里一定要有”公共類“的概念，
.lv{ color: green; } .big{ font-size: 40px; } .line{ text-decoration: underline; }
html：
<!-- 公共類 共有的屬性 -->
<div>
<p >段落1</p>
<p >段落2</p>
<p >段落3</p>
</div>
3.1.3 id選擇器(#)
同一個頁面中id不能重復，
任何的標簽都可以設定id ，id命名規范 要以字母 可以有數字 下劃線 - 大小寫嚴格區分 aa和AA是兩個不一樣的屬性值，
#box{ background:green; } #s1{ color: red; } #s2{ font-size: 30px; }
html：
<body> <div id="box">娃哈哈</div> <div id="s1">爽歪歪</div> <div id="s2">QQ星</div> </body>
3.2 高級選擇器
后代選擇器
子代選擇器
并集選擇器(組合選擇器)
交集選擇器
3.2.1 后代選擇器
使用 空格 表示后代選擇器，顧名思義，父元素的后代（包括兒子，孫子，重孫子），
.container p{ color: red; } .container .item p{ color: yellow; }
3.2.2 子代選擇器
使用 > 表示子代選擇器，比如div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p，
.container>p{ color: yellowgreen; }
3.2.3 并集選擇器
多個選擇器之間使用 逗號 隔開，表示選中的頁面中的多個標簽，一些共性的元素，可以使用并集選擇器，
/*并集選擇器*/ h3,a{ color: #008000; text-decoration: none; }
3.2.4 交集選擇器
使用 . 表示交集選擇器，第一個標簽必須是標簽選擇器，第二個標簽必須是類選擇器 語法：div.active
比如有一個<h4 class='active'></h4>這樣的標簽，那么它表示兩者選中之后元素共有的特性，
h4{ width: 100px; font-size: 14px; } .active{ color: red; text-decoration: underline; } /* 交集選擇器 */ h4.active{ background: #00BFFF; }
3.3 其他選擇器
偽類選擇器
偽標簽選擇器
屬性選擇器
3.3.1 偽類選擇器
偽類選擇器一般會用在超鏈接a標簽中，使用a標簽的偽類選擇器，
/*link表示沒有被訪問的a標簽的樣式*/ .box ul li.item1 a:link{ color: #666; } /*visited表示訪問過后的a標簽的樣式*/ .box ul li.item2 a:visited{ color: yellow; } /*hover表示滑鼠懸停時a標簽的樣式*/ .box ul li.item3 a:hover{ color: green; } /*active表示滑鼠摁住的時候a標簽的樣式*/ .box ul li.item4 a:active{ color: yellowgreen; }
3.3.2 偽標簽選擇器
/*設定第一個首字母的樣式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加內容 這個屬性使用不是很頻繁 了解 使用此偽元素選擇器一定要結合content屬性*/ p:before{ content:'alex'; } /*在....之后 添加內容，使用非常頻繁 通常與咱們后面要講到布局 有很大的關聯（清除浮動）*/ p:after{ content:'&'; color: red; font-size: 40px; }
3.3.3 屬性選擇器
屬性選擇器，字面意思就是根據標簽中的屬性，選中當前的標簽，
/*根據for屬性查找，找到所有又for屬性的，設定字體顏色為紅色*/ [for]{ color: red; } /*找到for屬性的值等于username的元素 字體顏色設為黃色*/ [for='username']{ color: yellow; } /*以....開頭^ */ [for^='user']{ color: #008000; } /*以....結尾$ */ [for$='vvip']{ color: red; } /*包含某元素的標簽*/ [for*="vip"]{ color: #00BFFF; } /*指定標簽的for屬性 其中for屬性的值是以空格隔開的值串列， user1是值串列中的一個獨立值*/ label[for~='user1']{ color: red; } input[type='text']{ background: red; }
3.4 選擇器的權重
有些時候我們可能會給同一個標簽設定多個樣式，遇到了重疊項的設定又該聽誰的呢？這里就要用到選擇器的權重，
行內樣式 1000> id選擇器 100 > 類選擇器 10 > 標簽選擇器 1 > 繼承樣式 0
3.4.1 css的兩大特性：基礎性和層疊性
繼承性：給父級設定一些屬性，子級繼承了父級的該屬性，這就是我們的css中的繼承，
面向物件語言都會存在繼承的概念，在面向物件語言中，繼承的特點：繼承了父類的屬性和方法，那么我們現在主要研究css，css就是在設定屬性的，不會牽扯到方法的層面，
記住：有一些屬性是可以繼承下來 ： color 、 font-*、 text-*、line-* ，主要是文本級的標簽元素，
但是像一些盒子元素屬性，定位的元素（浮動，絕對定位，固定定位）不能繼承，
層疊性：權重大的標簽覆寫掉了權重小的標簽，誰的權重大，瀏覽器就會顯示誰的屬性，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/102363.html
標籤：Html/Css
下一篇：記錄一些小技巧-CSS篇