02 CSS基础 中 CSS样式表的冲突解决
<!DOCTYPE html>
<html lang="zh">
<head>
<title>CSS样式表的冲突解决</title>
<meta charset="utf-8">
<meta name="keywords" content=",,">
<meta name="description" content="">
<link href="ExternalStyle1.css" rel="stylesheet">
<style>
div
{
color: blue;
}
p
{
color: red;
}
span
{
color:blue;
}
.spanClass
{
color: red;
}
.strongClass
{
color: rebeccapurple;
}
#strongId
{
color: orange;
}
</style>
</head>
<script type="text/javascript">
</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>
补充知识: HTML+CSS3 第3阶段:HTML5之CSS3基础与加强 中
64前端开发基础视频-CSS层叠性
所谓层叠性指多种CSS样式的叠加。如:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>CSS样式表的冲突解决</title>
<meta charset="utf-8">
<meta name="keywords" content=",,">
<meta name="description" content="">
<!--<link href="ExternalStyle1.css" rel="stylesheet">-->
<style>
p
{
font-size: 24px;
}
.pClass
{
font-style: italic;
}
</style>
</head>
<script type="text/javascript">
</script>
<body>
<p style="color: red" class="pClass">CSS样式的层叠性</p>
</body>
</html>
显示的斜体、红色、24px大小的字体:
65前端开发基础视频-CSS继承性
所谓继承性是指,子标签会继承父标记的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需要将它应用于父元素即可。
<!DOCTYPE html>
<html lang="zh">
<head>
<title>CSS样式表的冲突解决</title>
<meta charset="utf-8">
<meta name="keywords" content=",,">
<meta name="description" content="">
<!--<link href="ExternalStyle1.css" rel="stylesheet">-->
<style>
div
{
font-size: 24px;
text-indent: 2em;
}
.divClass
{
font-style: italic;
}
</style>
</head>
<script type="text/javascript">
</script>
<body>
<div style="color: red" class="divClass">
CSS样式的继承性
<p>此p标签继承与div标签</p>
<div>
div标签中的div,它继承了父容器的样式
<p>
恰当的使用继承可以简化代码,降低CSS样式的复杂性。但是,如果在网页中所有的元素都大量继承样式,那么判断样式的来源就会很困难,所以对于字体、文本属性等网页中通用的样式可以使用继承。例如,字体、字号、颜色、行距都可以在body元素中统一设置,然后通过继承影响文档中所有的文本。
</p>
<p>
所有字相关的都可以继承,比如:color、text-系列、line-系列、cursor等
</p>
并不是所有的CSS属性都可以继承,比如:边框、外边距、那边距、背景、定位、元素宽高属性。
<p>
</p>
<p>
所有的盒子相关的属性都不能继承。
</p>
</div>
</div>
</body>
</html>
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>
<html lang="zh">
<head>
<title>CSS样式表的冲突解决</title>
<meta charset="utf-8">
<meta name="keywords" content=",,">
<meta name="description" content="">
<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 type="text/javascript">
</script>
<body>
<dl>
<dt>
CSS中的单位,在HTML中只有像素单位,但是在CSS中有很多:
</dt>
<dd style="font-size:1cm">
1:绝对单位:2.54cm = 25.4 mm = 72pt = 6pc;
</dd>
<dd style="50%">
2:相对单位:如font-size:200%,则字体大小是周围字体大小的2倍。
</dd>
<dt>
字体属性:
</dt>
<dd style="font-size:1.5cm">
font-size:1.5cm
</dd>
<dd style="font-family:华文琥珀,苹果-简,楷书,Helvetica">
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>