網(wǎng)頁設(shè)計(jì)必學(xué)：CSS四種樣式引入方式及常用樣式

這里是云端源想IT，幫你輕松學(xué)IT”

嗨~ 今天的你過得還好嗎？

睡眠等同于希望

每次醒來都是一個(gè)新的開始

一個(gè)新的希望

- 2024.03.22 -

在Web開發(fā)的世界中，CSS（層疊樣式表）是構(gòu)建視覺吸引力和定義網(wǎng)頁布局的不可或缺的工具。

掌握如何恰當(dāng)?shù)匾隒SS樣式以及理解它們的優(yōu)先級(jí)規(guī)則，對(duì)于前端開發(fā)者來說至關(guān)重要。今天，我們就來深入探討CSS的四種引入方式，以及選擇器的優(yōu)先級(jí)之謎，了解常用的CSS樣式及使用方法！

一、CSS四種樣式引入方式

CSS（層疊樣式表）為網(wǎng)頁提供了豐富的樣式定義，允許開發(fā)者通過多種方式將樣式應(yīng)用到HTML文檔中。以下是四種主要的CSS引入方式：

1.1 行內(nèi)樣式

這是最直接也最簡(jiǎn)單的方法，通過在HTML元素的style屬性中直接編寫CSS規(guī)則。

示例：

<p style="color: red; font-size: 20px;">這是一段紅色的文字。</p>

這種方式的優(yōu)點(diǎn)是簡(jiǎn)單快捷，但缺點(diǎn)是它使得HTML代碼與樣式混合，不夠純凈，且不利于樣式的復(fù)用和維護(hù)。

1.2 內(nèi)嵌樣式

在一個(gè)HTML文檔中使用<style>標(biāo)簽將CSS規(guī)則嵌入到HTML的head部分。這種方式適用于定義特定于某一頁面的樣式。

示例：

<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

1.3 外部樣式

這是最常用的方法，它通過<link>標(biāo)簽將外部的CSS文件鏈接到HTML文檔中。這種方法的優(yōu)勢(shì)在于可以在多個(gè)頁面間共享同一個(gè)樣式文件，有助于保持代碼的整潔和一致性。

示例：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
其中，mystyle.css的內(nèi)容可能如下：
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}

1.4 導(dǎo)入樣式

使用@import語句在CSS文件中導(dǎo)入另一個(gè)CSS文件。盡管這種方法可以分離樣式表，但它通常不被推薦使用，因?yàn)槠浼虞d時(shí)序可能會(huì)影響頁面渲染效率。

示例：

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
font-family: 'Roboto', sans-serif;
}

1.5 樣式單優(yōu)先級(jí)

作用域范圍：外部樣式表>內(nèi)部樣式表>行內(nèi)樣式表

優(yōu)先級(jí)：

行內(nèi)樣式表>內(nèi)部樣式表>外部樣式表
相同的樣式作用在同一個(gè)標(biāo)簽上：就近原則；不同的樣式作用在同一個(gè)標(biāo)簽上：疊加。

加載外部樣式表或者內(nèi)部樣式表時(shí)候，需要注意加載順序：加載html文件是從上向下加載的，也就是后面加載的樣式會(huì)覆蓋前面的樣式。

二、CSS常用樣式

2.1 字體樣式

normal - 文字正常顯示

italic - 文本以斜體顯示

oblique - 文本為“傾斜”（傾斜與斜體非常相似，但支持較少）

font-weight 屬性指定字體的粗細(xì)

示例：

<!DOCTYPE html>
<html>
<head>
<style>
.sp1{
color: darkorange;
font-size: 20px;
font-weight: bolder; /* bolder 字體是否加粗*/

font-style: italic; /* italic 字體是否傾斜*/

font-family: "宋體"; /* 設(shè)置字體樣式*/
}

.sp2{
/* 簡(jiǎn)寫 */
/* 順序不能能變：style-weigth-size-family */
font:italic bolder 15px 宋體 ;
color:rgb(28, 235, 97);
}
</style>
<body>
<span>
編程學(xué)習(xí)，從云端源想開始！
</span><br>
<span>
讓知識(shí)觸手可及
</span>
<p>讓知識(shí)觸手可及</p>
</body>
</html>

2.2 文本樣式

color: 字體顏色

text-align: center; - - 文本對(duì)齊方式

text-decoration:none; - - 文本的線

text-shadow: pink 5px 5px 2px; - - 文本的陰影【陰影顏色-水平方向的偏移量-垂直方向的偏移量-模糊距離】

line-height: - - 行高（文本在標(biāo)簽內(nèi)所占的高度）

width:

height:

border: 1px #ffffff solid; - - 盒子邊框【邊框粗細(xì)-顏色-邊框線樣式】

示例：

<style>
.p{
color: rgb(0, 255, 21); /* 字體顏色 */
text-align: center; /* 文本對(duì)齊方式 */
text-decoration:none; /* 文本的線 */
text-shadow: pink 5px 5px 2px; /* 文本的陰影 【陰影顏色-水平方向的偏移量-垂直方向的偏移量-模糊距離】*/
line-height: 400px; /* 行高 （文本在標(biāo)簽內(nèi)所占的高度）*/
width: 400px;
height: 300px;
border: 1px rgb(76, 14, 223) solid; /* 盒子邊框【邊框粗細(xì)-顏色-邊框線樣式】 */
}
</style>
</head>

<body>
<p>歡迎來到云端源想！</p>
<a href="https://www.baidu.com"></a>
</body>

2.3 背景樣式

width: 500px;

height: 1200px;

background-color: pink; - - 背景顏色

background-image: url(…/img/background.jpg); - - 背景圖片

background-repeat: no-repeat; - - 背景圖片是否平鋪

background-position: left top; - - 指定背景圖片的位置

background-attachment: fixed; - - 背景圖片是否隨著標(biāo)簽滾動(dòng) 【fixed-固定 scroll-滾動(dòng)】

示例：

<style>
.d{
width: 500px;
height: 1200px;
background-color: pink; /* 背景顏色 */
background-image: url(../img/background.jpg); /* 背景圖片 */
background-repeat: no-repeat; /* 背景圖片是否平鋪 */
background-position: left top; /* 指定背景圖片的位置 */
background-attachment: fixed; /* 背景圖片是否隨著標(biāo)簽滾動(dòng) 【fixed-固定 scroll-滾動(dòng)】 */
}
</style>
</head>
<body>
<div>

</div>

2.4 列表樣式

<!DOCTYPE html>
<html>
<head>
<style>
li{
background-color: lemonchiffon;
/*列表樣式：常用取值：none-無樣式 square-正方形 circle-空心圓 decimal-數(shù)字*/
list-style-type: circle;
/*列表樣式為自定義圖片*/
list-style-image: url(../img/2.jpg);
/*列表樣式的放置位置*/
list-style-position: inside;
/*列表樣式縮寫*/
list-style: square url(../img/2.jpg) inside;
/*常用的列表樣式*/
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ul>
</body>
</html>

2.5 邊框樣式

<!DOCTYPE html>
<html>
<head>
<style>
.border{
/*邊框?qū)挾?/
border-width: 2px;
/*邊框顏色*/
border-color: red;
/*邊框樣式：solid 實(shí)線 dotted 點(diǎn)線 dashed 虛線*/
border-style: dashed;
/*邊框樣式縮寫：樣式 顏色 寬度*/
border:solid green 5px;
/*邊框可以為4個(gè)方向分別設(shè)置*/
border-top: dashed black 4px;
border-right: dashed #FF00FF 4px;
border-bottom: dotted darkblue 4px;
border-left: solid fuchsia 5px;
/*沒有邊框*/
border: none;
/*常用的細(xì)邊框樣式*/
border: solid 1px #ccc;
}
</style>
</head>
<body>
<div class="border">這是一個(gè)帶有邊框的元素</div>
</body>
</html>

2.6 盒子模型

所有的html元素可以看做是盒子，在css中，"box model"是用來設(shè)計(jì)和布局時(shí)使用。

CSS盒子模型本質(zhì)是一個(gè)盒子，封裝周圍的html元素，它包括：邊框、邊距、填充、實(shí)際內(nèi)容。

盒子模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。

margin：外邊距，清除邊框外區(qū)域，外邊距是透明的。
border：邊框，圍繞在內(nèi)邊距和內(nèi)容外的邊框。
padding：內(nèi)邊距，清除內(nèi)容周圍區(qū)域內(nèi)邊距是透明的。
content：內(nèi)容，顯示文字和圖像。

想要快速入門前端開發(fā)嗎？推薦一個(gè)前端開發(fā)基礎(chǔ)課程，這個(gè)老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識(shí)點(diǎn)結(jié)合代碼，邊學(xué)邊練，可以免費(fèi)試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點(diǎn)這里前往學(xué)習(xí)哦！云端源想

示例：

<head>
<meta charset="UTF-8">
<title></title>
<style>
/* border:邊框，分4個(gè)方向，同理margin、padding也分為四個(gè)方向
* margin:元素與元素之間對(duì)的距離
* padding:內(nèi)容與邊框之間的距離
* 設(shè)置的時(shí)候順序：上 右 下 左
*/
.div{
border: solid red 10px;
/*四個(gè)方向上的元素與元素之間的距離都是50px*/
margin: 50px;
/*兩個(gè)值的時(shí)候：第一個(gè)參數(shù)表示上下距離都是50px,第二個(gè)參數(shù)表示左右距離都是100px*/
margin: 50px 100px;
padding: 50px;
/*
一個(gè)元素真正的寬度=width+左右padding值+左右的border值
一個(gè)元素的真正高度=height+上下的padding值+上下的border值
* */
}
</style>
</head>
<body>
<div>111111111112222222222223333333333333333</div>
</body>

1）盒子的寬高

元素的實(shí)際寬度和高度：

計(jì)算一個(gè)元素在實(shí)際在頁面占據(jù)的總寬度=元素寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素實(shí)際在頁面占據(jù)的總高度=元素高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

2）設(shè)置寬度=元素實(shí)際寬度，box-sizing屬性。

<head>
<meta charset="UTF-8">
<title></title>
<style>
/* box-sizing:確認(rèn)元素的大小
content-box: 實(shí)際寬度=width+左右的psdding值+上下的border值
實(shí)際高度=height+上下的padding值+上下的border值
border-box:實(shí)際寬度=width;實(shí)際高度=height
padding和border不會(huì)影響元素的實(shí)際寬高
* */
.box{
width: 100px;
height: 200px;
border: 5px solid;
padding: 5px;
box-sizing: content-box;
}
</style>
</head>
<body>
<div>你好中國</div>
</body>

CSS的世界博大精深，以上只是冰山一角，希望通過這些基礎(chǔ)的常用樣式可以幫助你快速進(jìn)入CSS世界的大門。

掌握CSS的引入方式和選擇器優(yōu)先級(jí)是構(gòu)建高效、可維護(hù)網(wǎng)站的關(guān)鍵。通過這些知識(shí)，你可以更好地管理和優(yōu)化你的樣式代碼，創(chuàng)造出既美觀又專業(yè)的網(wǎng)頁設(shè)計(jì)?，F(xiàn)在，準(zhǔn)備好邁入CSS的世界，開啟你的創(chuàng)意之旅吧！

我們下期再見！

END

文案編輯|云端學(xué)長(zhǎng)

文案配圖|云端學(xué)長(zhǎng)

內(nèi)容由：云端源想分享

在html中要引入css，才能對(duì)其html元素內(nèi)容進(jìn)行修飾，html是網(wǎng)頁的結(jié)構(gòu)部分，css是在html中起修飾也就像房子裝修類似的意思，css樣式表可以對(duì)html里的元素內(nèi)容進(jìn)行控制它的大小，顏色，字體等等，html加css就是目前的div+css布局（表格布局的時(shí)代過去了），下面講下引入css的4種方法，不知道你全用過沒，請(qǐng)看：

1.行內(nèi)式，即直接寫在標(biāo)簽里，如：

<p style="font-size:16px;color:#000;">引入css的這4種方法你全用過嗎？</p>

2.內(nèi)鏈?zhǔn)?，即在寫head標(biāo)簽里，如：

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>引入css的這4種方法</title>
<style type="text/css">
p{font-size:16px;color:#000;}
</style>
</head>
<body>
<p>引入css的這4種方法</p>
</body>

3.【推薦】外鏈?zhǔn)?，即引用外部css樣式表，如：

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>引入css的這4種方法</title>
<link href="css/css.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>引入css的這4種方法</p>
</body>
</html>

4.使用@import，即引用外部css樣式表，如：

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>通過@import引用外部css樣式表</title>
<style type="text/css">
@import url(css.css);/*這里是通過@import引用外部css樣式表*/
</style>
</head>
<body>
<p>通過@import引用外部css樣式表</p>
</body>
</html>

總結(jié)：引入css的這4種方法中，第1種行內(nèi)式和第4種使用@import引入，用的很少而且第4種我做前端這么多年幾乎沒用過它，行內(nèi)式爾爾用下，推薦使用第3種外鏈?zhǔn)?，利于網(wǎng)站優(yōu)化，即seo，搜索引擎喜歡，也便于我們自己的工作。

除注明外的文章,均為來源:湯久生博客(QQ:1917843637),轉(zhuǎn)載請(qǐng)保留本文地址！

原文地址：http://tangjiusheng.com/divcss/111.html

享興趣，傳播快樂，增長(zhǎng)見聞，留下美好！親愛的您，這里是Learning yard新學(xué)苑。今天小編為大家?guī)碓捳f前端（5）|css的引入。

Share interest, spread happiness, increase knowledge, and leave behind beauty! Dear you, this is Learning yard New Academy. Today, Xiaobian brings you the introduction of front-end (5)|css.

前面咱們學(xué)過html，那現(xiàn)在就開始學(xué)習(xí)css，css是用來美化html的樣式，可以是我們的頁面更加美觀，現(xiàn)在講一講css的引入方法。

We have learned html before, so let's start learning css now. css is a style used to beautify html, which can make our pages more beautiful. Now let's talk about the introduction method of css.

首先，css的引入有兩種方式，一種是在標(biāo)簽內(nèi)部寫入樣式，例如<font color=”red”></font>，這里的color=“red”就是css樣式，引用方式是內(nèi)聯(lián)式的。但是這種方法的耦合程度太高，不利于我們后續(xù)的增刪改和維護(hù)，所以不太容易采用。

First of all, there are two ways to introduce css. One way is to write styles inside the tags, such as < font color = "red" > </font >. Here, color = "red" is css style, and the quotation method is inline. However, the coupling degree of this method is too high, which is not conducive to our subsequent addition, deletion and maintenance, so it is not easy to adopt.

第二種就是外聯(lián)式，大家知道，寫代碼的時(shí)候要寫三部分<html><head></head><body></body></html>,外聯(lián)式的css就寫在< head ></ head >中間，要在其中寫<style></style>然后就可以寫css的樣式，然后直接寫標(biāo)簽的名字即可，例如<style>li{color:red;}</style>,就可以使li的字體變成紅色，其他的選擇器我們下次再學(xué)。

The second one is outreach. As we all know, when writing code, you have to write three parts < html > < head ></ head > < body > </html >. Outreach css is written in the middle of < head > </head >. You should write < style></style > in it, then you can write the style of css, and then write the label directly. }</style >, you can turn li's font into red, and we'll learn other selectors next time.

今天的分享就到這里了。如果您對(duì)今天的文章有什么獨(dú)特的想法，歡迎評(píng)論留言，讓我們相約明天，祝您今天過得開心快樂！

That's all for today's sharing. If you have any unique ideas about today's article, please comment and leave a message. Let's make an appointment tomorrow and wish you a happy day!

在線咨詢

上一篇：html元素水平居中
下一篇：HTML5 日常使用

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

網(wǎng)頁設(shè)計(jì)必學(xué)：CSS四種樣式引入方式及常用樣式

一、CSS四種樣式引入方式

二、CSS常用樣式

您的項(xiàng)目需求

二、CSS常用樣式