举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > css级联样式表 CSS 样式级联

css级联样式表 CSS 样式级联

2023-03-27 06:18 CSS教程

css级联样式表 CSS 样式级联

css级联样式表

CSS级联样式表(Cascading Style Sheets,简称CSS)是一种用来定义HTML文档的外观和格式的语言。它可以控制文本大小、颜色、字体、图片位置和其他多种元素。CSS可以使HTML文档更加丰富多彩,并且能够使页面的内容更加有条理。

CSS是一种层叠样式表语言,它允许用户将不同的样式应用于不同的HTML元素。这意味着用户可以在一个文件中定义所有的样式,而不必在每个HTML文件中重复定义相同的样式。这使得CSS非常有效,因为用户只需要在一个地方修改样式就能影响整个站点。

body { 
    font-family: Arial, sans-serif; 
    font-size: 14px; 
    color: #333333; 
} 
h1 { 
    font-size: 24px; 
    color: #0099cc; 
} 
a { 
    color: #0099cc; 
    text-decoration: none; 
}  												   

CSS 样式级联

浏览器使用以下顺序查找属性值。

  • 内联样式 - 使用元素上的style全局属性定义的样式
  • 嵌入式样式 - 在样式元素中定义的样式
  • 外部样式 - 使用链接元素导入的样式
  • 用户样式 - 已由用户定义的样式
  • 浏览器样式 - 浏览器应用的默认样式

例如,为一个元素选择文本的颜色。

浏览器将需要为CSS颜色属性找到一个值。

首先,它将检查它试图渲染的元素是否具有定义颜色值的内联样式,如下所示:

<a style="color:red" href="https://www..cn">Visit the website</a>

如果没有内联样式,浏览器将查找包含适用于元素的样式的样式元素,如下所示:

<style type="text/css">
a  {
   color: red;
}
</style>

如果没有这样的样式元素,浏览器会查看通过链接元素加载的样式表。
如果仍然找不到颜色属性,则使用默认的浏览器样式。

注意

属性的前三个来源(内联样式,嵌入样式和样式表)统称为作者样式。

用户样式表中定义的样式称为用户样式,浏览器定义的样式称为浏览器样式。

重要样式

您可以通过将属性值标记为重要来覆盖正常的级联顺序。

通过对声明附加!important ,可以将单个值标记为重要。

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a  {
   color:  black !important;
}
</style>
</head>
<body>
    <a style="color:red" href="https://www..cn">Visit the website</a>
    <p>This is a text.</p>
    <a href="https://www.w3.org" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>

浏览器优先选择重要的样式,无论它们在何处定义。

你可以看到属性重要性的影响。 color属性的嵌入值将覆盖内联值。

特异性和顺序评估

如果有两个样式应用于在同一级别定义的元素,并且它们都包含浏览器正在寻找的CSS属性的值。

要决定使用哪个值,浏览器会评估每个样式的特异性,并选择最具体的值。

浏览器通过计算三个不同的特征来确定样式的特异性:

  • 样式选择器中的id值的数量
  • 选择器中的其他属性和伪类的数量
  • 选择器中元素名称和伪元素的数量

浏览器合并来自每个评估的值,并应用来自最特定样式的属性值。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a  {
   color: black;
}
a.myclass  {
    color:white;
    background:grey;
}
</style>
</head>
<body>
    <a href="https://www..cn">Visit the website</a>
    <p>The is a test.</p>
    <a class="myclass" href="https://www.w3.org" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>

当评估特异性时,您以a-b-c的形式创建一个数字,其中每个字母是三个特征之一的总和。

只有a值相等,浏览器才会比较b值。

只有当a和b的值相同时,浏览器才会考虑c值。

1-0-0的特异性得分比0-2-2更特异。

在上面的代码中,selector a.myclass包含一个类属性,这意味着样式的特殊性是0-1-0。 0用于id值,1用于其他属性,0用于元素名称。

当呈现已分配给myclass类的元素时,浏览器会为color属性找到一个值。对于所有其他的元素,将使用另一个样式的值。

当在具有相同特定性的样式中定义值时,浏览器根据顺序选择值。

例子

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a.myclass1 {
   color: black;
}
a.myclass2  {
    color:white;
    background:grey;
}
</style>
</head>
<body>
    <a href="https://www..cn">website</a>
    <p>This is a paragraph.</p>
    <a class="myclass1  myclass2" href="https://www.w3.org" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >W3C</a>
</body>
</html>


继承

如果浏览器找不到一个可用样式中的值,它将使用继承。

继承意味着获取由父元素定义的属性的值。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p  {
    color:white;
    background:grey;
    border: medium solid black;

}
</style>
</head>
<body>
    <a href="https://www..cn">website</a>
    <p>This is a <span>test</span>.</p>
    <a href="https://www.w3.org" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >W3C</a>
</body>
</html>

span 元素的父代是 p 元素。

span元素从父p元素继承color属性。

不是所有的CSS属性都是​​继承的。

只有与外观相关的是继承的,包括文本颜色,字体详细信息等。

与布局相关的不是继承。

inherit关键字

你可以通过使用inherit在样式中强制继承,

inherit 显式地告诉浏览器对属性使用父元素的值。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p  {
    color:white;
    background:grey;
    border: medium solid black;
}
span  {
    border: inherit;
}
</style>
</head>
<body>
    <a href="https://www..cn">website</a>
    <p>This is a <span>test</span> from www..cn.</p>
    <a href="https://www.w3.org" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >W3C</a>
</body>
</html>



阅读全文
以上是编程学为你收集整理的css级联样式表 CSS 样式级联全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部