CSS如何添加
当浏览器读取样式表时,它将根据样式表中的信息格式化HTML文档.
插入CSS的三种方法
插入样式表的方法有三种:
- 外部样式表
- 内部样式表
- 内联样式表
外部样式表
使用外部样式表,只需更改一个文件即可更改整个网站的外观!
每个页面必须在<link>元素中包含对外部样式表文件的引用.<link>元素位于<head>部分中:
外部样式表可以在任何文本编辑器中编写.该文件不应包含任何html标记.必须使用.css扩展名保存样式表文件。
以下是"myStyle.css"文件里的内容:
内联样式
内联样式可用于为单个元素应用唯一的样式.
若要使用内联样式,请将样式属性添加到相关元素中.样式属性可以包含任何CSS属性.
下面的示例显示如何更改<h1>元素的颜色和左边距:
多样式表
如果在不同样式表中给相同选择器(元素)定义了某些属性,将使用最后读取样式表的值.
例子
假设外部样式表的样式如下:<h1>元素:
然后,假设内部样式表对于<h1>元素也具有以下样式:
如果内部样式是在指向外部样式表的链接之后定义的,则<h1>元素将为"orange":
但是,如果在链接到外部样式表之前定义了内部样式，则<h1>元素颜色将为"navy":
层叠顺序
在为HTML元素指定了多个样式时会使用哪个样式?
一般来说,所有样式都将通过以下层叠规则成为新的虚拟样式表,其中一个具有最高优先级:
- 内联样式(在HTML元素中).
- 外部和内部样式表(在头部分)
- 浏览器默认样式
因此,内联样式(在特定HTML元素内部)具有最高优先级,这意味着它将覆盖在<head>标签内部或外部样式表中定义的样式,或浏览器默认值.
评论区