JavaScript--02 CSS基础中 CSS样式表的冲突解决

最新推荐文章于 2023-07-15 21:25:49 发布

静静燃烧的雪

最新推荐文章于 2023-07-15 21:25:49 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： CSS样式冲突字体背景文本属性

本文链接：https://blog.csdn.net/u014222687/article/details/51816877

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

02 CSS基础中 CSS样式表的冲突解决

<!DOCTYPE html>

<head>

<title>CSS样式表的冲突解决</title>

<style>

div

{

color: blue;

}

{

color: red;

}

span

{

color:blue;

}

.spanClass

{

color: red;

}

.strongClass

{

color: rebeccapurple;

}

#strongId

{

color: orange;

}

</style>

</head>

</script>

<body>

<div style="color:red">div：行内样式表和内部样式表冲突，行内样式表优先级更高</div>

<p>内部样式表和外部样式表冲突，内部样式表优先级更高</p>

<span class="spanClass">标签选择器与类选择器冲突，类选择器优先级较高</span>

<br>

<strong class="strongClass" id="strongId">类选择器与id选择器冲突，id优先级较高</strong>

<br>

<u>1:行内>内部>外部（相同类型的选择器）;2:ID选择器>类选择器>标签选择器（外部样式的id选择器>行内样式表的标签选择器）；3:就近原则，想同级别的选择器都是内部或者外部时采用就近原则</u>

<h1>class="one two",同时指定两个类，若有one和two两个类选择器，此时就近原则指的是定义的位置，谁在后面定义则使用谁</h1>

</body>

</html>

Pasted Graphic.tiff

补充知识： HTML+CSS3 第3阶段：HTML5之CSS3基础与加强中

64前端开发基础视频-CSS层叠性

所谓层叠性指多种CSS样式的叠加。如：

<!DOCTYPE html>

<head>

<title>CSS样式表的冲突解决</title>

<style>

{

font-size: 24px;

}

.pClass

{

font-style: italic;

}

</style>

</head>

</script>

<body>

<p style="color: red" class="pClass">CSS样式的层叠性</p>

</body>

</html>

显示的斜体、红色、24px大小的字体：

Pasted Graphic 1.tiff

65前端开发基础视频-CSS继承性

所谓继承性是指，子标签会继承父标记的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需要将它应用于父元素即可。

<!DOCTYPE html>

<head>

<title>CSS样式表的冲突解决</title>

<style>

div

{

font-size: 24px;

text-indent: 2em;

}

.divClass

{

font-style: italic;

}

</style>

</head>

</script>

<body>

CSS样式的继承性

<p>此p标签继承与div标签</p>

<div>

div标签中的div，它继承了父容器的样式

<p>

恰当的使用继承可以简化代码，降低CSS样式的复杂性。但是，如果在网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难，所以对于字体、文本属性等网页中通用的样式可以使用继承。例如，字体、字号、颜色、行距都可以在body元素中统一设置，然后通过继承影响文档中所有的文本。

</p>

<p>

所有字相关的都可以继承，比如：color、text－系列、line－系列、cursor等

</p>

并不是所有的CSS属性都可以继承，比如：边框、外边距、那边距、背景、定位、元素宽高属性。

<p>

</p>

<p>

所有的盒子相关的属性都不能继承。

</p>

</div>

</body>

</html>

Pasted Graphic 2.tiff

66前端开发基础视频-CSS特殊性即CSS优先级（上）

1：内联样式最大，内联样式的优先级最高。

2：ID选择器的优先级，仅次于内联样式。

3：类选择器优先级低于ID选择器。

4：标签选择器低于类选择器。

5：256个标签选择器相加，则权限大于一个类选择器

6：256个类选择器相加，则权限大于一个ID选择器

67前端开发基础视频-CSS特殊性即CSS优先级（中）

行内样式、id选择器、类选择器、标签选择器

68前端开发基础视频-CSS特殊性即CSS优先级（下）

定义CSS样式时，经常出现两个或更多规则应用在同一个元素上，这时就会出现优先级问题。在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

1：继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承的样式。

2：行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解远大于100。总之，他拥有比上面提到的选择器都大的优先级。

CSS基础－08 link 标签的rel属性

rel属性：

1.stylesheet：定义样式表

2.alternate stylesheet：候选样式表，可在历览器的查看－》样式中进行选择（样式的名字通过title属性设置）

CSS基础字体、文本、背景属性

<!DOCTYPE html>

<head>

<title>CSS样式表的冲突解决</title>

<style>

body{

border-style: dotted;

border-width: 5px;

border-color: red;

margin:50px;

}

dl{

padding: 10px;

border-style: dotted;

border-width: 3px;

border-color: blue;

}

dt{

padding: 10px;

border-style: dotted;

border-width: 3px;

border-color: green;

}

dd{

padding: 10px;

border-style: dotted;

border-width: 3px;

border-color: purple;

}

.weightClass{

font-weight:800;

}

</style>

</head>

</script>

<body>

<dl>

<dt>

CSS中的单位，在HTML中只有像素单位，但是在CSS中有很多：

</dt>

1：绝对单位：2.54cm = 25.4 mm = 72pt = 6pc；

</dd>

2：相对单位：如font－size：200％，则字体大小是周围字体大小的2倍。

</dd>

<dt>

字体属性：

</dt>

font-size:1.5cm

</dd>

font-family:华文琥珀,苹果-简,楷书。

<br>

font-family:候选字体以逗号隔开。

</dd>

<dd>

<p class="weightClass">font-weight:bolder/bold等。</p>

</dd>

</dl>

<p>

font-variant:small-caps;小写变大写

<br>

font:复合属性

</p>

<p>

文本属性

<br>

<pre>

color:

direction:

letter-spacing:

text-align:

text-decoration:overline

text-indent:

text-transform:uppercase/capitalize(每个单词的首字母大写);

</pre>

</p>

背景属性：

background-attachment:scroll/fixed，设置设置背景图像是否随页面滚动的属性。

background-color:设置背景的颜色

background-image:url("");设置背景图片

background-repeat:设置图片是否重复no-repeat/repeat-x(横向平铺)

background-position:center;

列表属性：

list-image:url("");

</body>

</html>

静静燃烧的雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript--02 CSS基础中 CSS样式表的冲突解决

02 CSS基础中 CSS样式表的冲突解决 CSS样式表的冲突解决 div { color: blue;
复制链接

扫一扫

专栏目录

JavaScript--02 CSS基础 中 CSS样式表的冲突解决

“相关推荐”对你有帮助么？

JavaScript--02 CSS基础中 CSS样式表的冲突解决