属性
CSS属性有很多,不过常用的并不多,大概30个左右。请注意区别CSS属性和HTML属性。
按照功能大致分为以下几类:
字体有关属性
font-size: 设置字体大小,单位是px(像素);一些不常用的大小:small medium large x-large……,字体大小默认16px
font-style: 设置字体的样式,是否倾斜,normal正常,italic倾斜,oblique更加倾斜……
font-weight: 设置字体是否加粗,normal正常,bold加粗,lighter更瘦更细……
font-family: 设置字体的格式,设置字体格式,微软雅黑,宋体,黑体……注意:用户会看到什么样的字体,取决于用户的设备上安装的是什么字体,有的字体仅支持某种语言,可以设置多个字体,如果第一个字体没用,那么就用第二个……如果不设置字体,则是默认宋体。
注意:针对中文字体进行设置,需要加引号,针对英文的(单个单词),不需要加引号。如果英文是多个单词,那也需要加引号
font-family可以自定义字体,在style中使用@font-face,比如UI设计师给的字体,或者去网上找字体。
font,这个是集成了上面样式(font-style)、粗细(font-weight)、大小(font-size)、格式(font-family)的一个属性,一般这个比较常用。
注意:样式style和粗细weight,二者可以换位置,也可以不写,但是大小size和格式family必须写,且不能换位置
<style>
@font-face{
/* 给自定义的字体起一个名字 */
font-family: "appleFont";
/* 自定义字体的路径 */
src: url("font/PingFang\ Medium.ttf");
}
p{
/* 使用这个自定义字体 */
font: normal normal 24px "appleFont";
}
</style>
<body>
<p>这是一个尝试</p>
</body>
文本有关属性
text-decoration,overline(上划线),underline(下划线),line-through(删除线),none(文本默认,没有线)。
注意:上中下三条线可以同时使用,这样一段文字三条线都有了。
注意2:超链接 a 下面默认有underline,这时可以使用none来消除掉下划线。
注意3:color改变文字颜色的同时,也会改变线的颜色。
<style>
.p1 {
text-decoration: overline;
}
.p2 {
text-decoration: line-through;
}
.p3 {
text-decoration: underline;
}
.p4 {
text-decoration: underline overline line-through;
}
.p5 {
text-decoration: line-through;
color: red;
}
</style>
<body>
<p class="p1">这是上划线</p>
<p class="p2">这是下划线</p>
<p class="p3">这是删除线</p>
<p class="p4">这是三线全有</p>
<p class="p5">这是红色删除线</p>
</body>
text-align ,对齐,有right、left、center三种对齐方式,一般情况下用于块级元素。因为行级元素没效果。
对齐操作是针对于这个元素内所有子元素而言的,也就是将可以进行对齐操作的子元素整体对齐。
注意,使用对齐,必须保证有富余空间,比如span就不行,因为span只有其内容大小的空间,这样就没有对齐效果了。
vertical-align: middle;这是竖直居中,只适用于行级元素。
text-indent,文本缩进,可以使用px,还可以使用em等。
经典应用(1):text-indent:2em,就是首行缩进2个字符,em是代表着字体大小的单位,2em就是两个文字的大小。
经典应用(2):text-indent:-99999px,就是向前缩进99999px,这就相当于跑到屏幕外边了。
line-height
主要是对块级元素内的内容来进行行高设置(其实主要是p标签),设置每行的高度。
经典应用1:使用line-height将一行文本竖直居中。
经典应用2:line-height配合vertical-middle可以实现图片竖直居中。前提是line-height高度大于等于图片高度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; } div{ background-color: gray; text-align: center; height: 300px; line-height: 300px; } img{ vertical-align: middle; height: 200px; } </style> </head> <body> <div> <img src="img/2017-08-30_122538_03.jpg" alt=""> </div> </body> </html>
litter-spacing,每个字符中间的间距。对中英文都有效。
word-spacing,每个单词之间的间隔。只对英文有效。
text-shadow,文本阴影。text-shadow:水平阴影位置 垂直阴影位置 模糊程度 阴影颜色。
text-shadow 中可以有很多个阴影,中间用逗号隔开,每个阴影都有上面的那4个属性值可以写。
注意1:水平阴影位置 和 数值阴影位置可以为负数,这样就有了上下方之分,可以制造凹凸效果
注意2:如果一个shadow后面有多个阴影的话,那么这个阴影是按照从前往后的顺序依次刷出来。
CSS的继承性
继承性就是对父元素设置的一些属性,子元素会继承这些属性。关于字体相关的设置、关于文本相关的设置都有继承性。
经典应用1:给body设置一个字体相关、或者文本相关的属性,子元素会继承。
注意:对于 a 标签来讲,color没法继承,必须对 a 进行单独设置
CSS的层叠性(优先级)
什么是层叠性?
对同一个元素,通过不同途径,设置了多种样式,哪一种样式有作用。
如果一个元素有id、class,那么优先级排序 id > class > 标签。如果一个元素有多种样式设置方案,那就看使用选择器的时候,用到的id、class、标签的数量,id数量多的优先,id一样看class,class数量多的优先,class也一样的话,那就看标签。可以将他们的id的值看作100,class看作10,标签为1,然后根据数量相加,计算大小。
对于不同的CSS引入方式,优先级排序是,行内样式 > 内部样式 = 外部样式,内部和外部优先级相同,代码自上而下执行,下方的样式(之后执行的CSS样式),会覆盖之前的样式,也就是就近原则。
如果使用谷歌浏览器,那么在网页上按F12,会弹出调试窗口(别的浏览器也有类似的功能),在这里可以看到,对于一个元素来说,他的样式分为三块——1、继承父元素的;2、默认样式。3、开发者写的样式。这三块样式的优先级是3>2>1。