當(dāng)前位置：首頁 > news >正文

花錢推廣的網(wǎng)絡(luò)平臺(tái)廣州seo和網(wǎng)絡(luò)推廣

news 2025/7/2 10:44:44

花錢推廣的網(wǎng)絡(luò)平臺(tái),廣州seo和網(wǎng)絡(luò)推廣,專門做代工產(chǎn)品的網(wǎng)站,什么程序做網(wǎng)站容易優(yōu)化目錄前言： 1.CSS是什么 1.1CSS基本語法 2.引入樣式 2.1內(nèi)部樣式表 2.2行內(nèi)樣式表 2.3外部樣式 3.選擇器 3.1選擇器的種類 3.1.1基礎(chǔ)選擇器 3.1.2復(fù)合選擇器 4.常用元素屬性 4.1字體屬性 4.2文本屬性 4.3背景屬性 4.4圓角矩形 4.5元素的顯示模式 4…

前言：

1.CSS是什么

1.1CSS基本語法

2.引入樣式

2.1內(nèi)部樣式表

2.2行內(nèi)樣式表

2.3外部樣式

3.選擇器

3.1選擇器的種類

3.1.1基礎(chǔ)選擇器

3.1.2復(fù)合選擇器

4.常用元素屬性

4.1字體屬性

4.2文本屬性

4.3背景屬性

4.4圓角矩形

4.5元素的顯示模式

4.6盒模型

4.7內(nèi)邊距

4.8外邊距

4.9彈性布局

結(jié)束語：

前言：

在上一節(jié)中小編與大家分享了有關(guān)于JavaScript的一些基礎(chǔ)知識(shí)，以及給大家演示了幾個(gè)案例，接下來小編帶著大家一起來看一下有關(guān)于前端中的另一個(gè)技術(shù)CSS，想要讓界面好看，那么就離不開CSS的渲染。話不多說我們一起來看吧。

1.CSS是什么

CSS是層疊樣式表，所謂“層疊”就是針對(duì)html的元素/標(biāo)簽，可以同時(shí)應(yīng)用多組CSS樣式，將多組樣式疊加在一起。“樣式”就是大小、位置、間距、顏色、字體、邊框、背景....統(tǒng)稱為“樣式”，它描述了一個(gè)網(wǎng)頁張啥樣。

CSS能夠?qū)W(wǎng)頁元素的位置的排版進(jìn)行像素精確控制，實(shí)現(xiàn)美化頁面的效果，能夠做到頁面的樣式和結(jié)構(gòu)分離。

1.1CSS基本語法

選擇器 + {一條/N條聲明}

選擇器決定針對(duì)誰修改。
聲明決定修改啥。
聲明的屬性是鍵值對(duì)，使用;區(qū)分鍵值對(duì)，使用：區(qū)分鍵和值。

<body>

? ? <style>

? ? ? ? p{

? ? ? ? ? ? /* 設(shè)置字體顏色 */

? ? ? ? ? ? color: red;

? ? ? ? ? ? /* 設(shè)置字體大小 */

? ? ? ? ? ? font-size: 30px;

? ? ? ? }

? ? </style>

? ? <p>hello</p>

</body>

注意：

CSS要寫到style標(biāo)簽中（后面還會(huì)介紹其他寫法）。
style標(biāo)簽可以放到頁面任意位置，一般是放置在head標(biāo)簽中。
CSS使用/**/作為注釋。

2.引入樣式

2.1內(nèi)部樣式表

內(nèi)部樣式是直接把CSS嵌入到HTML中，放到style標(biāo)簽里。

? ? 

? ? <style>

? ? ? ? div{

? ? ? ? ? ? font-size: 50px;

? ? ? ? ? ? color: red;

? ? ? ? }

? ? </style>

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 在style標(biāo)簽中寫的是css代碼，他可以放置在head中也可以放置在body中 --><style>div{font-size: 50px;color: greenyellow;}</style><div>hello world！</div>
</body>
</html>

結(jié)果展示：

2.2行內(nèi)樣式表

行內(nèi)樣式是將CSS寫到一個(gè)單獨(dú)的.css文件中，有html通過link標(biāo)簽來引進(jìn)來。

首先我們先來創(chuàng)建一個(gè).css文件。

代碼展示：

html代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 通過link標(biāo)簽將css文件引入進(jìn)來 --><link rel="stylesheet" href="style.css">
</head>
<body><div>hello world！</div>
</body>
</html>

css文件代碼展示：

div {font-size: 50px;color: blue;
}

結(jié)果展示：

2.3外部樣式

內(nèi)部樣式也叫內(nèi)聯(lián)樣式，他是直接把CSS屬性寫到元素的style屬性內(nèi)。

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="color: blueviolet; font-size: 60px;"> hello world!</div>
</body>
</html>

結(jié)果展示：

3.選擇器

選擇器就是要我們選中頁面中的元素然后再進(jìn)行操作。只有先選中元素才能生效。下面我們來分別來看一下四種選擇器。

3.1選擇器的種類

3.1.1基礎(chǔ)選擇器

標(biāo)簽選擇器

標(biāo)簽選擇器是用來選中頁面中的所有同名標(biāo)簽的元素，它的缺點(diǎn)也很顯而易見就是很難針對(duì)某個(gè)元素進(jìn)行個(gè)性化制定。

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>標(biāo)簽選擇器</title>
</head>
<body><style>p {color: red;font-size: 30px;}div {color: burlywood;font-size: 20px;}</style><p>hello</p><p>world</p><div>css</div><div>JavaScript</div>
</body>
</html>

結(jié)果展示：

類選擇器

在css中創(chuàng)建一個(gè)“類名”，這個(gè)類名對(duì)應(yīng)一組css屬性，制定讓html元素應(yīng)用這樣的類名即可。

代碼展示：

css文件代碼：

.one {color: rosybrown;font-size: 50px;
}
.tow {color: blueviolet;font-size: 30px;
}

html文件代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>類選擇器</title><link rel="stylesheet" href="Test3.css">
</head>
<body><div class="one">hello</div><div class="tow">hello</div>
</body>
</html>

結(jié)果展示：

id選擇器

一個(gè)html標(biāo)簽中可以有一個(gè)id屬性，這個(gè)屬性的值會(huì)被作為身份標(biāo)識(shí)的唯一值。所以通過id選擇器就可以給制定元素設(shè)置樣式了。

代碼展示：

css代碼展示：

#test {color: brown;font-size: 50px;
}

html代碼展示：
?

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>id選擇器</title><link rel="stylesheet" href="Test4.css">
</head>
<body><div id="test">hello world</div>
</body>
</html>

結(jié)果展示：

通配符選擇器

通配符選擇器就是給所有的都設(shè)置樣式。

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通配符選擇器</title>
</head>
<body><style>* {color: aquamarine;font-size: 40px;}</style><div>hello</div><p>world</p>
</body>
</html>

結(jié)果展示：

3.1.2復(fù)合選擇器

上述都是css中最基礎(chǔ)的選擇器，其實(shí)在css中海油很多復(fù)雜的“復(fù)合選擇器”，下面我們只給大家介紹一種后代選擇器。

后代選擇器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代選擇器</title>
</head>
<body><div class="one"><h3>hello</h3></div><div class="tow"><h3>world</h3></div><style>.one {color: chocolate;}.tow {color: cadetblue;}</style>
</body>
</html>

后代選擇器的效果就是把上述三種基礎(chǔ)選擇器進(jìn)行組合，同時(shí)能夠體現(xiàn)出“標(biāo)簽的層次結(jié)構(gòu)”。

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代選擇器</title>
</head>
<body><div class="one"><h3>hello</h3></div><div class="tow"><h3>world</h3></div><style>.one {color: chocolate;}.tow {color: cadetblue;}</style>
</body>
</html>

結(jié)果展示：

除了后代選擇器之外還有以下這些，小編這里就不給大家一一介紹了。

子選擇器
并集選擇器
偽類選擇器

4.常用元素屬性

4.1字體屬性

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字體屬性</title>
</head>
<body><div class="one">hello</div><style>.one {font-family: '微軟雅黑';font-size: 100px;font-weight: 900;font-style: italic;}</style>
</body>
</html>

結(jié)果展示：

我們也可以在控制臺(tái)中通過勾選下面的條件來看到效果。

4.2文本屬性

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本屬性</title>
</head>
<body><div class="one">hello world</div><style>.one {font-size: 100px;/* 文本顏色 */color: brown;/* 文本對(duì)齊，左對(duì)齊(left)，右對(duì)齊(right)，居中對(duì)齊(center) */text-align: center;/* 文本裝飾，加一個(gè)下劃線... */text-decoration: underline;/* 文本縮進(jìn) */text-indent: 20px;/* 行高(行間距) */line-height: 100px;}</style>
</body>
</html>

結(jié)果展示：

注意：

這里顏色的寫法有很多中，其中可以直接寫表示顏色的單詞，也可使用rgb的方式來表示，還可以使用十六進(jìn)制的方式來表示。

4.3背景屬性

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景設(shè)置</title>
</head>
<body><div class="background">1</div><style>.background {font-size: 100px;width: 200px;height: 160px;color: blueviolet;background-color: gold;/* 導(dǎo)入背景圖 */border-image: url(cat.jpg);/* 禁止平鋪 */background-repeat: no-repeat;/* 設(shè)置背景圖的位置 */background-position: center center;/* 設(shè)置背景圖的大小 */background-size: 2000px 1600px;}      </style>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景設(shè)置</title>
</head>
<body><div class="one"></div><style>.one {background-image: url(cat.jpg);height: 300px;background-repeat: no-repeat;background-position: center center;}</style>
</body>
</html>

結(jié)果展示：

4.4圓角矩形

我們之前生成的邊框都是矩形的，但是如果我們想要讓他變成圓邊的該怎么弄呢？如下代碼所示：

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圓角矩形</title>
</head>
<body><div>111</div><style>div {width: 200px;height: 100px;border: 2px solid green;border-radius: 10px;}</style>
</body>
</html>

結(jié)果展示：

4.5元素的顯示模式

在CSS中，HTML的標(biāo)簽的顯示模式有很多，此處只重點(diǎn)介紹兩個(gè)：

塊級(jí)元素和行內(nèi)元素。

塊級(jí)元素：

????????像我們之前學(xué)習(xí)的h1-h6、p、div、ul、ol...都是塊級(jí)元素。

它的特點(diǎn)：

獨(dú)占一行。
高度、寬度、內(nèi)外邊距、行高都可以控制。
寬度默認(rèn)是父級(jí)元素寬度的100%（和父級(jí)元素一樣框?qū)?#xff09;。
是一個(gè)容器（盒子），里面可以放行內(nèi)和塊級(jí)元素。

行內(nèi)元素/內(nèi)聯(lián)元素：
????????常見的元素有：a、strong、b、em、i、del、s、ins...

特點(diǎn)：

不獨(dú)占一行，一行可以顯示多個(gè)。
設(shè)置高度、寬度、行高無效。
左右外邊距有效（上下無效），內(nèi)邊距有效。
默認(rèn)寬度就是本身的內(nèi)容。
行內(nèi)元素只能容納文本和其他行內(nèi)元素，不能放塊級(jí)元素。

行內(nèi)元素和塊級(jí)元素的區(qū)別：

塊級(jí)元素獨(dú)占一行，行內(nèi)元素不獨(dú)占一行。
塊級(jí)元素可以設(shè)置寬高，行內(nèi)元素不能設(shè)置寬高。
塊級(jí)元素四個(gè)方向都能設(shè)置內(nèi)外邊距，行內(nèi)元素垂直方向不能設(shè)置。

使用display屬性可以修改元素的顯示模式：

display：block；（修改成塊級(jí)元素）。
display：inline；（修改成行內(nèi)元素）。

一般都是修改成塊級(jí)元素，不會(huì)說是把塊級(jí)元素修改成行內(nèi)元素，也可以使用display：none實(shí)現(xiàn)元素隱身的效果。

4.6盒模型

每一個(gè)HTML元素就相當(dāng)于是一個(gè)矩形的“盒子”，這個(gè)盒子是由這幾個(gè)部分組成的。

邊框：border
內(nèi)容：content
內(nèi)邊距：padding
外邊距：margin

如下圖所示：

4.7內(nèi)邊距

padding是設(shè)置內(nèi)容和邊框之間的距離的。

基礎(chǔ)寫法：
默認(rèn)內(nèi)容是頂著邊框來放置的，用padding來控制這個(gè)距離可以給四個(gè)方向都加上邊距。

padding-top?上
padding-bottom?下
padding-left?左
padding-right?右

復(fù)合寫法：

可以把多個(gè)方向的padding合并到一起。

padding：5px;?表示四個(gè)方向都是5px。
padding：5px 10px;?表示上下內(nèi)邊距是5px，左右內(nèi)邊距是10px。
padding：5px 10px 20px;?表示上內(nèi)邊距是5px，左右內(nèi)邊距是10px，下內(nèi)邊距是20px。
padding：5px 10px 20px 30px;?表示上內(nèi)邊距是5px，右內(nèi)邊距是10px，下內(nèi)邊距是20px，左內(nèi)邊距是30px。（順時(shí)針）

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>邊距</title>
</head>
<body><div>設(shè)置內(nèi)邊距</div><style>* {/* 防止撐大盒子 */box-sizing: border-box;}div {padding-top: 20px;padding-bottom: 10px;padding-left: 20px;padding-right: 10px;}</style>
</body>
</html>

結(jié)果展示：

4.8外邊距

基礎(chǔ)寫法：

控制盒子和盒子之間的距離?？梢越o四個(gè)方向都加上外邊距。

margin-top?上
margin-bottom?下
margin-left?左
margin-right?右

復(fù)合寫法：

規(guī)則與padding一樣。

margin：10px;?四個(gè)方向都是10px
margin：10px 20px;?上下外邊距為10px，左右外邊距為20px。
margin：10px 20px 30px;?上外邊距10px，左右外邊距20px，下外邊距30px。
margin：10px 20px 30px 40px;?上外邊距10px，右外邊距20px，下外邊距30px，左外邊距40px。

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外邊距</title>
</head>
<body><div>test</div><style>* {box-sizing: border-box;}div {margin-top: 10px;margin-bottom: 20px;margin-left: 30px;margin-right: 40px;}</style>
</body>
</html>

結(jié)果展示：

4.9彈性布局

我們先來看一下下面的這個(gè)案例。

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彈性布局</title>
</head>
<body><div class="one"><div class="tow">hello1</div><div class="tow">hello2</div><div class="tow">hello3</div><div class="tow">hello4</div></div><style>.one {width: 1000px;height: 300px;background-color: brown;}.tow {width: 150px;height: 100px;background-color: blueviolet;}</style>
</body>
</html>

結(jié)果展示：

通過結(jié)果我們可以看出來里面的元素是垂直方向排列的，那么有的時(shí)候我們希望塊級(jí)元素是可以水平方向排列。此時(shí)我們就可以使用彈性布局了。

如下所示：
代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彈性布局</title>
</head>
<body><div class="one"><div class="tow">hello1</div><div class="tow">hello2</div><div class="tow">hello3</div><div class="tow">hello4</div></div><style>.one {width: 1000px;height: 300px;background-color: brown;/* 開啟彈性布局 *//* 一旦開啟了彈性布局，此時(shí)內(nèi)部的子元素就會(huì)按照水平的方向進(jìn)行排布，子元素里面的子元素是不受影響的 */display: flex;/* justify-content：設(shè)置水平方向的排列規(guī)則 */justify-content: space-between;/* align-items：設(shè)置垂直方向的排列規(guī)則 */align-items: center;}.tow {width: 150px;height: 100px;background-color: blueviolet;}</style>
</body>
</html>

結(jié)果展示：

結(jié)束語：

好了這節(jié)的CSS基礎(chǔ)知識(shí)小編就給大家講解到這里了，有不會(huì)的地方記得給小編留言，希望這節(jié)對(duì)大家了解CSS有一定幫助，想要學(xué)習(xí)的同學(xué)記得關(guān)注小編和小編一起學(xué)習(xí)吧！如果文章中有任何錯(cuò)誤也歡迎各位大佬及時(shí)為小編指點(diǎn)迷津（在此小編先謝過各位大佬啦！）

查看全文

http://www.risenshineclean.com/news/823.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

花錢推廣的網(wǎng)絡(luò)平臺(tái)廣州seo和網(wǎng)絡(luò)推廣

前言：

1.CSS是什么

1.1CSS基本語法

2.引入樣式

2.1內(nèi)部樣式表

2.2行內(nèi)樣式表

2.3外部樣式

3.選擇器

3.1選擇器的種類

3.1.1基礎(chǔ)選擇器

3.1.2復(fù)合選擇器

4.常用元素屬性

4.1字體屬性

4.2文本屬性

4.3背景屬性

4.4圓角矩形

4.5元素的顯示模式

4.6盒模型

4.7內(nèi)邊距

4.8外邊距

4.9彈性布局

結(jié)束語：

相關(guān)文章：