21xrx.com
2024-03-29 14:27:30 Friday
登录
  

CSS如何添加

当浏览器读取样式表时,它将根据样式表中的信息格式化HTML文档.

插入CSS的三种方法

插入样式表的方法有三种:

  • 外部样式表
  • 内部样式表
  • 内联样式表

外部样式表

使用外部样式表,只需更改一个文件即可更改整个网站的外观!

每个页面必须在<link>元素中包含对外部样式表文件的引用.<link>元素位于<head>部分中:

例子

外部样式表可以在任何文本编辑器中编写.该文件不应包含任何html标记.必须使用.css扩展名保存样式表文件。

以下是"myStyle.css"文件里的内容:

不要在属性值和单位之间添加空格(例如 margin-left:20 px;).正确的应该是:margin-left:20px;

内部样式表

如果单个页面具有唯一的样式,则可以使用内部样式表.

内部样式在<style>元素中定义,并且在HTML页面的<head>部分中:

例子

内联样式

内联样式可用于为单个元素应用唯一的样式.

若要使用内联样式,请将样式属性添加到相关元素中.样式属性可以包含任何CSS属性.

下面的示例显示如何更改<h1>元素的颜色和左边距:

例子

内联样式失去了样式表的许多优点(通过将内容与样式混合).少用这种方法!

多样式表

如果在不同样式表中给相同选择器(元素)定义了某些属性,将使用最后读取样式表的值.

例子

假设外部样式表的样式如下:<h1>元素:

然后,假设内部样式表对于<h1>元素也具有以下样式:

如果内部样式是在指向外部样式表的链接之后定义的,则<h1>元素将为"orange":

试一试

但是,如果在链接到外部样式表之前定义了内部样式,则<h1>元素颜色将为"navy":

试一试

层叠顺序

在为HTML元素指定了多个样式时会使用哪个样式?

一般来说,所有样式都将通过以下层叠规则成为新的虚拟样式表,其中一个具有最高优先级:

  1. 内联样式(在HTML元素中).
  2. 外部和内部样式表(在头部分)
  3. 浏览器默认样式

因此,内联样式(在特定HTML元素内部)具有最高优先级,这意味着它将覆盖在<head>标签内部或外部样式表中定义的样式,或浏览器默认值.

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复
21技术    www.21xrx.com 备案号:蜀ICP备17043188号-2