CSS 基礎知識 初識
什麼是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基礎知識Java
- CSS基礎知識CSS
- CSS基礎知識簡介CSS
- css 入門基礎知識CSS
- 【知識分享】 伺服器基礎知識【初學者必看】伺服器
- IdentityServer4系列 | 初識基礎知識點IDEServer
- 前端-html和css基礎知識前端HTMLCSS
- CSS基礎知識點總結CSS
- 【WEB基礎】HTML & CSS 基礎入門（1）初識WebHTMLCSS
- 前端基礎知識複習之CSS前端CSS
- 前端-基礎知識體系（初級-上）前端
- 前端-基礎知識體系（初級-下）前端
- 基礎知識
- 前端開發基礎知識整理–css篇前端CSS
- 初觸hibernate--基礎知識盲區
- 初識ABP vNext（1）：開篇計劃&基礎知識
- Python基礎初識Python
- 【.net基礎】--初識StructStruct
- AI 基礎知識AI
- Webpack 基礎知識Web
- Dart基礎知識Dart
- RabbitMQ基礎知識MQ
- webpack基礎知識Web
- javascript基礎知識JavaScript
- ThinkPHP基礎知識PHP
- Laravel基礎知識Laravel
- Redis基礎知識Redis
- Docker基礎知識Docker
- 程式基礎知識
- Envoy基礎知識
- DockerFile基礎知識Docker
- Nginx基礎知識Nginx
- Java基礎知識Java
- PRML 基礎知識
- BGP基礎知識
- PHP基礎知識PHP
- React基礎知識React
- httpclient基礎知識HTTPclient