當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS快速入门

發布時間：2024/3/7 CSS 49 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS快速入门小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS

什么是CSS

Cascading Style Sheet 層疊級聯樣式表

CSS：表現（美化網頁）就比如給一只小鳥上顏色

字體，顏色，邊距，高度，寬度，背景圖片，網頁定位，網頁浮動…

發展史

CSS 1.0

CSS 2.0 DIV+CSS，HTML與CSS分離的思想，網頁變得簡單，SEO搜索引擎優化

CSS 2.1 浮動，定位

CSS 3.0 圓角邊框，陰影，動畫… 瀏覽器兼容性。

快速入門

<style>h1{color: rgb(154, 190, 86);}

外部引入CSS文件，強烈建議使用這種規范

CSS的優勢：
1.內容和表現分離

2.網頁結構表現統一，可以實現復用

3.樣式十分豐富

4.建議使用獨一與html的css文件

5.利用SEO，容易被搜索引擎收錄！

擴展SEO

seo是什么意思

SEO是指搜索引擎優化。全稱為(Search Engine Optimization)，是一種利用搜索引擎的規則提高網站在有關搜索引擎內自然排名的方式。目的是讓其在行業內占據領先地位，獲得品牌收益。很大程度上是網站經營者的一種商業行為，將自己或自己公司的排名前移。

搜索引擎優化的技術手段主要有黑帽(black hat)、白帽(white hat)兩大類。通過作弊手法欺騙搜索引擎和訪問者，最終將遭到搜索引擎懲罰的手段被稱為黑帽，比如隱藏關鍵字、制造大量的meta字、alt標簽等。而通過正規技術和方式，且被搜索引擎所接受的SEO技術，稱為白帽。

擴展資料：

搜索引擎主要特點：

1、信息抓取迅速。

在大數據時代，網絡產生的信息浩如煙海，令人無所適從，難以得到自己需要的信息資源。在搜索引擎技術的幫助下，利用關鍵詞、高級語法等檢索方式就可以快速捕捉到相關度極高的匹配信息。

2、深入開展信息挖掘。

搜索引擎在捕獲用戶需求的信息的同時，還能對檢索的信息加以一定維度的分析，以引導其對信息的使用與認識。例如，用戶可以根據檢索到的信息條目判斷檢索對象的熱度，還可以根據檢索到的信息分布給出高相關性的同類對象，還可以利用檢索到的信息智能化給出用戶解決方案，等等。

3、檢索內容的多樣化和廣泛性。

隨著搜索引擎技術的日益成熟，當代搜索引擎技術幾乎可以支持各種數據類型的檢索，例如自然語言、智能語言、機器語言等各種語言。目前，不僅視頻、音頻、圖像可以被檢索，而且人類面部特征、指紋、特定動作等也可以被檢索到。可以想象，在未來幾乎一切數據類型都可能成為搜索引擎的檢索對象。

CSS的導入方式

行內樣式，在標簽元素中編寫一個style屬性，編寫樣式即可
在文件內部style中寫
外部文件直接寫scc

優先級：就近原則，肯定是行內樣式優先級最大，而內部樣式和外部樣式就近原則，誰離標簽近，誰的優先級高；

擴展：

外部樣式兩種寫法

鏈接式：

屬于html標簽
<link rel="stylesheet" href="../CSS/1.css">
導入式：
<style>@import url(../CSS/1.css); </style>
導入式比較慢，假如看到一個大的網頁，會先看到框架，就是html，然后才會看到css的渲染效果。屬于CSS2.1特有的。

選擇器

作用：選擇頁面上的某一個或某一類元素

標簽選擇器

會選擇頁面上所有的這個標簽。

類選擇器

選擇所有class的標簽，可以跨標簽

ID選擇器

ID是唯一的，只能選擇一個標簽。

優先級：不遵循就近原則，id選擇器>類選擇器>標簽選擇器

層次選擇器

1、后代選擇器：在某個元素的后面

/* 后代選擇器 */body p{background-color: blue;}

2、子選擇器

/* 子選擇器 */body>p{background-color: blue;}

3、相鄰兄弟選擇器

/* 相鄰兄弟選擇器：只有一個，相鄰（向下相鄰，對下不對上） */.a + p{background-color: blue;}

4、通用選擇器

/* 通用兄弟選擇器，當前元素中的向下所有同級的選擇器 */ .a~p{ background-color: blue; }

結構偽類選擇器

偽類：帶冒號的就是偽類，有的帶動作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* ul 的第一個子元素 */ ul li:first-child{ background-color: blue; } /* ul 的最后一個子元素 */ ul li:last-child{ background-color: red; } /* 選中p1 :定位到父元素，選擇當前的第一個元素選擇當前p元素的父類元素，選父類的第一個，并且是當前元素才生效！*/ p:nth-child(1){ background-color: rosybrown; } /* 選中父元素，下的p元素的第二個，類型一樣的 */ p:nth-of-type(2){ background-color: yellow; } </style></head><body> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul></body></html>

屬性選擇器（常用）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: yellow;text-align: center;color: red;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/* 屬性名屬性名= 屬性值（正則）= 絕對等于*= 包含這個元素^= 以這個開頭$= 以這個結尾*//* 格式a[]{}a[id=first] a[class="links"]a[href^=http]a[href$=com]*/</style></head> <body><a href="http://www.baidu.com" class="links item first" id="first">1</a><a href="http://www.wangyi.com" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item">3</a><a href="images/123.png" class="links item">4</a><a href="images/123.jpg" class="links item">5</a><a href="abc" class="links item">6</a><a href="/a.pdf" class="links item">7</a><a href="/abc.pdf" class="links item">8</a><a href="abc.doc" class="links item">9</a><a href="abc.doc" class="links item">10</a> </body> </html>

美化網頁元素

為什么要美化網頁

1、有效的傳遞頁面信息

2、美化網頁，頁面漂亮才能吸引用戶

3、凸顯頁面的主題

4、提高用戶的體驗

重點元素用span包起來

字體

字體樣式

font-style 屬性主要用于指定斜體文本。

此屬性可設置三個值：

normal - 文字正常顯示
italic - 文本以斜體顯示
oblique - 文本為“傾斜”（傾斜與斜體非常相似，但支持較少）

font-weight 屬性指定字體的粗細

font-variant 屬性指定是否以 small-caps 字體（小型大寫字母）顯示文本。

在 small-caps 字體中，所有小寫字母都將轉換為大寫字母。但是，轉換后的大寫字母的字體大小小于文本中原始大寫字母的字體大小。

font-size 屬性設置文本的大小。

顏色：color

文本對齊的方式 text-align=center;

首行縮進 text-indet:2em;

行高 line-height

裝飾 text-decoration

文本圖片水平對齊：vertical-align:middle

陰影

/* text-shadow 陰影顏色水平偏移垂直偏移陰影半徑*/#links item{text-shadow: red 10px -10px 2px;}

超鏈接偽類

/* 鼠標懸浮時狀態 */a:hover{color: red;}

列表

/* list-style: none沒有小圓點circle空心的圓decimal數字square正方形*/ul li{list-style: none;}

背景圖片

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 1000px;height: 800px;border: 1px solid red;background-image: url(".//images/a.jpg");/* 默認是全部平鋪的 */}.div1{background-repeat: repeat-x;/* x軸平鋪 */}.div2{background-repeat: repeat-y;/* y軸平鋪 */}.div3{background-repeat: no-repeat;/* 不平鋪 */}.div4{/* 顏色圖片圖片位置平鋪方式*/background: red url(.//images/a.jpg) 10px 10px no-repeat;}</style> </head> <body><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div> </body> </html>

漸變

https://www.grabient.com/

在這調試，復制粘貼css的代碼比較方便。

盒子模型

什么是盒子模型

marhin: 外邊距

padding: 內邊距

border: 邊框

邊框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* body總有一個默認的外邊距，所以要手動的設置成0 */ body{ margin: 0; } #box{ /* border: 粗細樣式 solid實線dashed虛線顏色 */ width: 300px; border: 1px solid red; } form{ background: yellow; } div:nth-of-type(1) input{ border: 3px solid black; } div:nth-of-type(2) input{ border: 3px dashed rgb(46, 42, 107); } h2{ font-size: 16px; background-color: cadetblue; line-height: 30px; } </style></head><body> <div id="box"> <h2>用戶登錄</h2> <form action="#"> <div> <span>用戶名：</span> <input type="text"> </div> <div> <span>密碼：</span> <input type="text"> </div> <div> <span>郵箱：</span> <input type="text"> </div> </form> </div></body></html>

外邊距

#box{ /* border: 粗細樣式 solid實線dashed虛線顏色 */ width: 300px; border: 1px solid red; margin: 0 auto; }

margin: 0 auto;居中對齊前提要在一個塊元素當中

參數是順時針旋轉

盒子大小計算方式：margin+border+padding+內容寬度

圓角邊框

/* 左上右上右下左下 */ /* 上下左右 */ /* 左上右下右上左下 */ /* 圓圈 border-radius=半徑 */ div{ width: 100px; height: 100px; border: 10px solid red; border-radius: 100px; }

盒子陰影

div{ width: 100px; height: 100px; border: 10px solid red; box-shadow: 10px 10px 100px yellow; }

浮動

display

block 變成塊元素

inline-block 是塊元素，可以內聯在一起，可以在一行

inline 變成行內元素

none 隱藏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 100px; height: 100px; display: inline-block; } span{ width: 100px; height: 100px; display: block; } </style></head><body> <div>aa</div> <span>aa</span></body></html>

float

float浮動，就像一個氣球

clear: both; 清除浮動

標準文檔流

就是網頁布局不穩定，網頁里的元素隨著網頁的大小而改變，不在一個固定的位置

父級邊框塌陷的問題

/* clear: right;右側不允許有浮動元素 clear: left;左側不允許有浮動元素 clear: both;兩側不允許有浮動元素 clear: none;四周不能有浮動元素 */

解決方案：

1、增加父級元素的高度

2、增加一個空的div標簽，清除浮動，內外邊距設置成0

3、overflow，設置為hidden的時候自動隱藏多余內容，設置為scroll添加滾動條

overflow屬性要在父級元素中設置

4、父類添加一個偽類:after

#father::after{ content: ''; display: block; clear: both; }

小結：

1.浮動元素后面增加空的div

? 簡單，空的div不舒服，盡量避免空的div

2.設置父元素的高度

? 萬一新增的元素超過了父元素的高度，就會被限制

3.overflow

? 簡單，下拉的一些場景避免使用

4.父類添加偽類，推薦使用

? 雖然寫法稍微復雜，但是沒有副作用，非常推薦使用

對比

display

方向不可以控制
float

浮動起來的話會脫離標準文檔流，所以要解決父級邊框塌陷的問題

定位

相對定位

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>div{margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father{border: 1px solid #666}#first{border: 1px dashed red;position: relative;/*定位，上下左右*/top: 10px;/*向下10px*/top: -10px;/*向上10px*/}#second{border: 1px dashed blue;left: 10px;/*向右10px*/right: 10px;/*向左10px*/}#third{border: 1px dashed black;bottom: 10px;/*向上10px*/bottom: -10px;/*向下10px*/}</style> </head> <body><div id="father"><div id="first">1</div><div id="second">2</div><div id="third">3</div></div> </body> </html>

相對于原來的位置進行指定偏移，還在相對文檔流中，原來的位置會被保留

絕對定位

基于xxxx定位，上下左右

1、沒有父級元素定位的前提下，相對于瀏覽器定位

2、假設父級元素存在定位，我們通常會相對于父級元素進行偏移

3、在父級元素范圍內移動

相對于父級或瀏覽器的位置，進行指定的偏移，絕對定位的話，它不在標準文檔流中，原來的位置不會被保留

position: absolute;

固定定位fixed

顧名思義

z-index

相當于一個圖層，有立體的結構

一層一層疊加，0層1層2層…

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#div{width: 1000px;padding: 0px;margin: 0px;overflow: hidden;line-height: 25px;border: 1px black solid;font-size: 12px;}ul,li{padding: 0px;margin: 0px;list-style: none;}/*父級元素相對定位*/#father ul{position: relative;}.text,.bj{position: absolute;width: 380px;height: 25px;top: 222px;}.text{color: red;z-index: 0;/*讓他在第幾層，可以進行覆蓋*/}</style> </head> <body><div id="father"><ul><li><img src="images/a.jpg" alt=""></li><li class="text">忽有故人</li><li class="bj"></li><li>心頭過</li><li>回首山河</li></ul></div> </body> </html>

z-index:默認是0層

.bj{opacity: 0.5;/*透明度*/}

總結

以上是生活随笔為你收集整理的CSS快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python 爬取当当网商品价格并写入数
下一篇：研究数字基带信号功率谱的意义