CSS学习笔记--基础(二)

CSS学习笔记--基础(一)中我们认识了什么是CSS, 以及CSS样式设置的一些基本操作和概念, 下面我们继续学习CSS的相关的基础知识和概念。


CSS的继承

CSS的某些样式是具有继承性的。CSS的继承是一种规则,它允许样式不仅应用于某个特定的html标签,而且应用于其后代标签及元素。比如以下的代码:

<!DOCTYPE html>
<html>
<head>
<title>CSS的继承</title>
<meta charset="utf-8">
<style type="text/css">
p{
color: red;
}
</style>
</head>
<body>
<p>CSS的某些样式是<span>具有继承性的</span>。CSS的继承是一种规则,它允许样式不仅应用于某个特定的html标签,而且应用于其后代标签及元素。
</p>
</body>
</html>

样式如下:


通过以上效果,我们可以看到,将红色应用于p标签时, 这个颜色不仅应用于p标签, 还应用于它的子元素文本, 即这里的span元素标签。


需要注意的是:不是所有的CSS样式都是具有继承性的,如border: 1px solid red; 就不具有继承性

如下代码及效果:

<!DOCTYPE html>
<html>
<head>
<title>CSS的继承</title>
<meta charset="utf-8">
<style type="text/css">
p{
border: 1px solid red;
}
</style>
</head>
<body>
<p>CSS的某些样式是<span>具有继承性的</span>。CSS的继承是一种规则,它允许样式不仅应用于某个特定的html标签,而且应用于其后代标签及元素。
</p>
</body>
</html>


如上图所示, p标签具有的红色边框, 在被span标记的某些文字中, 则不会表现出边框的样式, 因此它不具有继承性。



CSS样式的权值

有的时候我们为同一个元素设置了不用的CSS样式代码, 元素会启用哪个CSS样式呢?浏览器会根据权值来判断使用哪种CSS样式,权值高的就会被优先使用。下面是权值的规则:

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。

下面简单看看权值的计算方法:



注意: 继承也是有权值的, 但是它比较特殊, 权值很低, 有的文献提出它只有0.1的权限, 所以可以直接理解为继承的权值最低。


层叠

我们说了CSS样式是有权值的, 浏览器会根据权值的高低选择显示CSS样式, 那么如果我们遇到CSS样式的权值相同时, 但它们又作用于同一个元素时,怎么办呢?层叠可以解决这个问题。

层叠就是在html文件中对于同一个元素可以有多个CSS样式存在, 当有相通权重的样式存在时,会根据这些CSS样式的前后顺序来决定使用哪个CSS样式, 处于最后面的CSS样式会被应用(覆盖前面的样式)。

如下代码:

<!DOCTYPE html>
<html>
<head>
<title>CSS的继承</title>
<meta charset="utf-8">
<style type="text/css">
p{
color: red;
}

p{
color: green;
}
</style>
</head>
<body>
<p>CSS的某些样式是<span>具有继承性的</span>。CSS的继承是一种规则,它允许样式不仅应用于某个特定的html标签,而且应用于其后代标签及元素。
</p>
</body>
</html>




上面我们设置了两个CSS样式, 一个是红色, 一个是绿色, 绿色的CSS样式设置在红色之后, 所以最后应用了后面绿色的CSS样式。

从上面, 我们不难总结出CSS样式优先级:

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)


就上面的例子, 我们需要显示的是绿色, 但是由于需要,我们必须显示为红色的CSS样式怎么办呢? 这时使用important来解决。

如下代码:

<!DOCTYPE html>
<html>
<head>
<title>CSS的继承</title>
<meta charset="utf-8">
<style type="text/css">
p{
color: red !important;
}

p{
color: green;
}
</style>
</head>
<body>
<p>CSS的某些样式是<span>具有继承性的</span>。CSS的继承是一种规则,它允许样式不仅应用于某个特定的html标签,而且应用于其后代标签及元素。
</p>
</body>
</html>


这时显示的就是红色的文本。


注意: !important 要写在分号之前, 也不要忘记写叹号(!).  另外需要注意的是: 当网页制作者不设置CSS样式时, 浏览器会按照自己的一套样式来显示网页。 并且用户也可以在浏览器中设置自己习惯的样式。  当我们设置样式时, 我们需要注意样式的一个优先级顺序: 浏览器默认样式 < 网页制作者样式 < 用户自己设置的样式, 但 !important是个例外,权值高于用户自己设置的样式。



文字排版-字体

我们可以使用CSS样式为网页中的文字设置字体、字号、颜色等样式属性。 如下代码,设置网页中文字的字体:

body{
font-family:"宋体";
}

注意: 设置字体时, 不要设置不常用的字体, 如果用户本地电脑上没有安装设置的不常用字体, 会显示为浏览器默认的字体。 一般网页喜欢设置微软雅黑的字体,代码如下:

body{
font-family:"微软雅黑";
}

 
或者 

body{
font-family:"Microsoft Yahei";
}


注意:一般情形下, 我们使用第二种方法, 因为第二种方法设置比第一种方法设置兼容性更好。



文字排版-字号和颜色

没什么可说的, 直接上代码:

body{
font-size:12px;
color:red;
}



文字排版-粗体

可以通过设置CSS样式, 使文字显示粗体、斜体、下划线、删除线等。下面我们看看粗体的设置,代码如下:

body span{
font-weight:bold;
}



文字排版-斜体

p a{
font-style:italic;
}



文字排版-下划线

有时需要从视觉上强调文章的某段或某几段文字,可以使用下划线。

p a{
text-decoration:underline;
}


文字排版-删除线

经常浏览电商网站时,看见原价灰色标示, 并使用删除线从中间划过。代码如下:

.oldPrice{
 text-decroation:line-through;
}


段落排版-缩进

中文文字的段落前都有空两格文字的习惯,这个特殊的样式可以使用text-indent属性来显示

p{
text-indent:2em;
}


注意: 2em的意思是文字的2倍大小。



段落排版-行间距(行高)

一段文字,我们希望它文字与文字的上下间的距离隔的远一点, 则可以设置它的行间距来实现

p{
line-height:1.5em
}



段落排版-中文文字间距、字母间距

中文文字间隔、字母间隔, 都是指单个字或字母之间的间距,使用letter-spacing实现

h1{
letter-spacing:30px;
}

单词间距: 完整单词之间的间距

h1{
word-spacing:30px;
}



段落排版-对齐方式

为块状元素的文本、图片设置居中、巨左、居右的样式。

居中显示:

h1{
text-align:center;
}

居左设置:

h1{
text-align:left;
}

居右设置:

h1{
text-align:right;
}




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值