CSS学习之样式及优先级、10进制颜色表、度量单位

最新推荐文章于 2023-05-30 17:30:04 发布

zyftest1

最新推荐文章于 2023-05-30 17:30:04 发布

阅读量724

点赞数

分类专栏： WEB前端文章标签： css样式 10进制颜色表样式优先级度量单位

本文链接：https://blog.csdn.net/qq_40084390/article/details/90142793

版权

WEB前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.元素内嵌样式

<p style="color:red;font-size:50px;">这是一段文本</p>

2.文档内嵌样式

在<head>与</head>之间
<style type="text/css">
p {
color: blue;
font-size: 40px;
}
</style>

3.外部引用样式

3.1 link

<link rel="stylesheet" type="text/css" href="style.css">
//style.css
//默认编码方式为utf-8
@charset "utf-8"; 
p {
color: green;
font-size: 30px;
}

3.2、@import语法结构

@import + 空格+ url(CSS文件路径地址);

在html中
<style type="text/css">
@import url(CSS文件路径地址);
</style>

在css中直接使用
@import url(CSS文件路径地址);

4.样式表层叠的优先级

由低到高：
(1).浏览器样式（元素自身携带的样式）（<b>加粗<span>无隐含样式等）
(2).外部引入样式（使用<link>引入的样式）；
(3).文档内嵌样式（使用<style>元素设置）；
(4).元素内嵌样式（使用 style 属性设置）。
虽然元素内嵌样式优先级高，但是其他样式也可以给与其其他的样式。

如果某一个样式被优先级高的给替换掉了，却又想执行这个样式方案，可以将这个方案标记成重要样式（important）。
//强行设置最高优先级
color: green !important;

5.样式继承

如果某一个元素并没有设置父元素相关的样式，那么就会使用继承机制将父元素的样式集成下来。
//<b>元素继承了<p>元素的样式
<p style="color:red;">这是<b>HTML5</b></p>
样式继承只适用于元素的外观（文字、颜色、字体等），而元素在页面上的布局样式则不会被继承。如果继承这种样式，就必须使用强制继承：inherit。
//强制继承布局样式
<p>这是<b>HTML5</b></p>
<style type="text/css">
p {
border: 1px solid red;
}
b {
border : inherit;
}
</style>

6.颜色表方案

在这里插入图片描述

7.度量单位

在这里插入图片描述

//em 相对单位
p {
margin: 0;
padding: 0;
background: silver;
font-size: 15px;
height: 2em;
}
解释：em 是相对单位，与字号大小挂钩，会根据字体大小改变自己的大小，灵活性很
高。
//px 相对单位，绝对特性
p {
margin: 0;
padding: 0;
background: silver;
font-size: 15px;
height: 55px;
}
解释：虽然 px 也是相对单位，但由于和分辨率挂钩，导致他其实就变成一个绝对单位
了，自然灵活性没有 em 高，但是使用难度较低，且大量的开发者习惯性使用它。
//%百分比
p {
margin: 0;
padding: 0;
background: silver;
font-size: 200%;
width: 50%;
}
解释：长度比较好理解，就是挂钩它所在区块的宽度。而 font-size 则是继承到的原
始大小的百分比。

zyftest1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习之样式及优先级、10进制颜色表、度量单位

1.元素内嵌样式<p style="color:red;font-size:50px;">这是一段文本</p>2.文档内嵌样式在与之间写<style type="text/css">p {color: blue;font-size: 40px;}</style>3.外部引用样式3.1 link<link rel="s...
复制链接

扫一扫