CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。
每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
注释是代码之母。--摘自哪吒语录
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:
外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可。推荐使用此方式。
注意:
样式类名不要用数字开头(有的浏览器不认)。
标签中的class属性如果有多个,要用空格分隔。
当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如:
上面的代码为div标签和p标签统一设置字体为红色。
通常,我们会分两行来写,更清晰:
多种选择器可以混合起来使用,比如:
常用的给首字母设置特殊样式:
before和after多用于清除浮动。
继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。
此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。
我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。
此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。
我们上面学了很多的选择器,也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式,那浏览器根据什么来决定应该应用哪个样式呢?
其实是按照不同选择器的权重来决定的,具体的选择器权重计算方式如下图:
除此之外还可以通过添加 !important方式来强制让样式生效,但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。
万不得已可以使用!important
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度,内联标签的宽度由内容来决定。
简单实例:
如果设置成
font-weight用来设置字体的字重(粗细)。
值描述
normal
默认值,标准粗细
bold
粗体
bolder
更粗
lighter
更细
100——900
设置具体粗细,400等同于normal,而700等同于bold
inherit
继承父元素字体的粗细值
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定:
十六进制值 - 如: #FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
还有rgba(255,0,0,0.3),第四个值为alpha, 指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间。
text-align 属性规定元素中的文本的水平对齐方式。
值描述
left
左边对齐 默认值
right
右对齐
center
居中对齐
justify
两端对齐
text-decoration 属性用来给文字添加特殊效果。
值描述
none
默认。定义标准的文本。
underline
定义文本下的一条线。
overline
定义文本上的一条线。
line-through
定义穿过文本下的一条线。
inherit
继承父元素的text-decoration属性的值。
常用的为去掉a标签默认的自划线:
将段落的第一行缩进 32像素:
支持简写:
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上,然后根据位置去显示图片。减少频繁的图片请求。
如果您觉得本文的内容对您的学习有所帮助:
关键字:
jquery