CSS引入樣式有哪幾種方法-css教學-PHP中文網

首頁

web前端

css教學

CSS引入樣式有哪幾種方法

清浅

Nov 17, 2018 pm 04:26 PM

css樣式

這篇文章將分享如何引入CSS樣式表以及他們之間的優缺點，有一定的參考價值，希望對大家有所幫助。

CSS中可以透過三種方法引入樣式表：

（1）內嵌樣式

（2）內嵌樣式

（3）外部樣式

這些CSS樣式中的每一種形式都有它們的優點與缺點接下來將詳細的為大家介紹

內嵌樣式

#特點：（1）內聯樣式放在程式碼中的HTML元素中。

（2）使用內嵌樣式時，樣式只會影響你所選擇的元素。

（3）內嵌樣式沒有選擇器

範例：

<div style="width:100px;height:100px;border:1px solid #ccc"><div>

#此CSS內嵌樣式只能改變這個div的寬和高，它不會更改頁面上的任何div或屬性的樣式。這是內聯樣式的限制之一。由於它們只對特定元素進行更改，因此這不是最佳做法，內聯樣式也具有非常高的特異性。這使得很難用其他非內聯樣式覆蓋它們，事實上，我們很少在網頁上使用內聯樣式。

嵌入樣式

特點：（1）被放置在樣式標籤

（2）所寫的樣式將只用於您使用它的網頁。

（3）嵌入樣式也稱為「內部樣式」

範例

<！DOCTYPE html>
<html>
<head>
<meta content =“text / html; charset = utf-8”/>
<title> Document </title>
<style>
div{
width:100px;
height:100px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

嵌入式樣式是嵌入在文件頭部的樣式。嵌入式樣式僅影響它們嵌入的頁面上的標記。再一次，此方法否定了CSS的優勢之一。由於每個頁面都有樣式，如果你想進行全網站更改，例如將連結顏色從紅色更改為綠色，則需要在每個頁面上進行此更改，因為每個頁面都使用嵌入式樣式表。這比內聯樣式更好，但在許多情況下仍然存在問題。

外部樣式表

特點：（1）在單獨的文件中編寫然後附加到各種Web文件中

（2）修改它可以影響所有你所調用的頁面

（3）便於修改操作

<link href=“demo.css”rel=“stylesheet”type=“text/css>
在demo文件下写css样式

如今大多數網站使用外部樣式表，外部樣式是在單獨的文件中編寫然後附加到各種Web文檔的樣式。外部樣式表會影響它們所連接的任何文件，這意味著如果你有一個20頁的網站，每個頁面使用相同的樣式表，當需要改變的話只需編輯該樣式表即可完成這些頁面，這使得長期站點管理變得更加容易。外部樣式表的缺點是它們需要頁面來取得和載入這些外部檔案。並非每個頁面都會使用CSS表格中的每個樣式，因此許多頁面將載入比實際需要的頁面大得多的CSS頁面。

總結：以上就是這篇文章對於CSS引入樣式表的介紹了，希望透過這篇文章能讓大家對CSS樣式有所了解。

以上是CSS引入樣式有哪幾種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

如何使用HTML和CSS创建一个幻灯片布局页面Oct 16, 2023 am 09:07 AM

如何使用HTML和CSS创建一个幻灯片布局页面引言：幻灯片布局在现代web设计中被广泛使用，在展示信息或图片时具有很大的吸引力和交互性。本文将介绍如何使用HTML和CSS创建一个幻灯片布局页面，并提供具体的代码示例。一、HTML布局结构首先，我们需要创建一个HTML布局结构，包含一个幻灯片容器和多个幻灯片项。代码如下所示：<!DOCTYPEhtml&

如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式Nov 20, 2023 am 11:52 AM

如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式在CSS中，伪类选择器是一种强大的工具，可以通过特定的选择方式来选取HTML文档中的某些元素。其中，:nth-child()是一种常用的伪类选择器，可以选择特定位置的子元素。:nth-child(n)可以匹配HTML中的第n个子元素，而:nth-child(-n)可以匹配

如何使用HTML和CSS实现一个简单的聊天页面布局Oct 18, 2023 am 08:42 AM

如何使用HTML和CSS实现一个简单的聊天页面布局随着现代科技的发展，人们越来越依赖于互联网来进行沟通和交流。而在网页中，聊天页面是一种非常常见的布局需求。本文将向大家介绍如何使用HTML和CSS来实现一个简单的聊天页面布局，并给出具体的代码示例。首先，我们需要创建一个HTML文件，可以使用任何文本编辑器。以index.html为例，先创建一个基本的HTML

如何使用HTML和CSS实现一个详细页面布局Oct 20, 2023 am 09:54 AM

如何使用HTML和CSS实现一个详细页面布局HTML和CSS是创建和设计网页的基础技术，通过合理使用这两者，我们可以实现各种复杂的网页布局。本文将介绍如何使用HTML和CSS来实现一个详细页面布局，并提供具体的代码示例。创建HTML结构首先，我们需要创建一个HTML结构来放置我们的页面内容。以下是一个基本的HTML结构：<!DOCTYPEhtml&g

如何使用HTML和CSS创建一个响应式卡片墙布局Oct 25, 2023 am 10:42 AM

如何使用HTML和CSS创建一个响应式卡片墙布局在现代网页设计中，响应式布局是一项非常重要的技术。通过使用HTML和CSS，我们可以创建一个响应式的卡片墙布局，以适应不同屏幕尺寸的设备。下面将详细介绍如何使用HTML和CSS创建一个简单的响应式卡片墙布局。HTML部分：首先，我们需要在HTML文件中设置基本结构。我们可以使用无序列表（<ul>）和

如何使用HTML和CSS创建一个响应式音乐播放器布局Oct 19, 2023 am 10:02 AM

如何使用HTML和CSS创建一个响应式音乐播放器布局在如今信息科技迅速发展的时代，音乐作为娱乐的一种形式，已经深入人们的生活中。为了更好地体验音乐，许多网站和应用程序提供了在线音乐播放器。本文将介绍如何使用HTML和CSS创建一个响应式的音乐播放器布局，并提供具体的代码示例。首先，我们需要使用HTML创建基本结构。以下是一个简单的HTML布局示例：<!

HTML嵌入CSS样式的方法Sep 20, 2023 am 11:37 AM

HTML嵌入CSS样式的方法有内联样式、内部样式表和外部样式表。详细介绍：1、内联样式是指将CSS样式直接写在HTML标签中，通过style属性来设置元素的样式，这种方法的优点是简单、直观，能够快速地为某个特定元素设置样式，但它的缺点也很明显，样式与HTML结构紧密耦合，难以维护和复用，同时当样式需要修改时，需要遍历整个HTML文档，效率较低；2、内部样式表等等。

PHP正则表达式实战：匹配CSS样式Jun 22, 2023 pm 06:31 PM

在Web开发中，CSS样式表是不可或缺的一部分，它可以方便地为HTML元素设置样式。但是，有时候我们需要从一个大型的CSS文件中提取出特定的样式，这时就可以使用PHP的正则表达式功能进行匹配。本篇文章介绍如何使用PHP正则表达式实战匹配CSS样式。我们先看一下CSS样式的基本结构：selector{property:value;pro

See all articles