字体属性
font-family
设置字体系列,像font-family:"微软雅黑";
font-size
设置字体大小,标题标签比较特殊,需要单独指定文字大小
font-weigh
设置字体粗细,也可以用<b>标签和<strong>标签来加粗,很重要的用<strong>
粗体:bold。特粗体:bolder。lighter:细体。正常字体:normal。
也可以用数字:700相当于bold,400相当于normal,数字后面不加单位
font-style
设置字体样式,
斜体:italic。也可以用<em>标签。 正常字体:normal。
font 复合属性
font: font-style font-weight font-size/line-height font-family;
有严格的顺序,不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
文本属性
color
可以用预定义的颜色值(red等)还可以用十六进制(#000000)也可以用RGB代码(rgb(200,0,0)意思是红色)
text-align
设置元素内文本内容的水平对齐方式.
left(默认值) right center
text-decoration
规定添加到文本的修饰
下划线:underline。删除线:line-through。上划线:overline。没有装饰线:none。
text-indent
指定文本的第一行的缩进,单位可以是px也可以是em。
em是一个相对单位,就是当前元素的font-size的一个文字大小如果当前元素没有设置大小,则会按照父元素的一个文字大小
line-height
设置行间距的距离(行高),
css的三种样式表
内部样式表用<style>写在html页面中
行内样式表直接加在标签中如:<div style="color:red; font-size:12px;">这个样式权重最重。
外部样式表优点完全实现结构和样式相分离
元素的显示模式
块级元素:比如:<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等
特点:独占一行。高度,宽度,外边距以及内边框都可以控制。宽度默认是容器(父级宽度)的100%。是一个容器及盒子,里面可以放行内或者块级元素
注意:文字类的元素内不能使用块级元素。<p>标签主要用于存放文字,因此<p>里面不能放块级元素,如果放了,会在里面的块级元素上下都生成一个<p>标签。<h1>~<h6>等也是文字类块级标签,里面也不能放其他块级元素。
行内元素:<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等,行内元素也叫内联元素。
特点:相邻行内元素在一行上,一行可以显示多个。高,宽直接设置是无效的。默认宽度就是它本身内容的宽度。行内元素只能容纳文本或者其他行内元素。
注意:链接里面不能再放链接。特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全。
行内块元素:行内元素有几个特殊的标签<img/>,<input/>,<td>,它们同时具有块元素和行内元素的特点。
特点:和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点)。默认宽度就是它本身内容的宽度(行内元素特点)。高度,行高,外边距以及内边距都可以控制(块级元素特点)。
显示模式的转换:转换成块级元素:display:block;转换成行内元素:display:inline;转换成行内块元素:display:inline-block;
单行文字垂直居中
令行高等于盒子的高度比如:line-height:16px;height:16px;
原理是:
背景
background-color
transparent:背景色透明
color:指定颜色
背景色半透明
background:rgba(0,0,0,0.3)
最后一个参数是alpha透明度,取值范围在0~1之间。0.3可以把0省略。
background-image
一般用于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置。(精灵图也是一种运用场景)
none|url(图片url地址)
background-repeat
对背景图像进行平铺
repeat:背景图像在纵向和横向上平铺
no-repeat:背景图像不平铺
repeat-x:背景图像在横向上平铺
repeat-y:背景图像在纵向平铺
页面元素既可以添加背景颜色也可以添加背景图片,只不过背景图片会压住背景颜色
background-position
改变图片在背景中的位置
background-position:x y;
x,y可以是方位名词也可以是精确单位
方位名词:top right button left center 方位名词的顺序不会有影响。如果只指定一个方位名词,则第二个值默认居中对齐。
精确单位:第一个是x坐标,第二个是y坐标。如果只指定一个数值,该数值一定是x坐标,另一个默认垂直居中。
混合单位:方位名词和精确单位混合使用。第一个一定是x,第二个一定是y。
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。后期可以制作视差滚动的效果。
scroll:背景图像是随对象内容滚动(默认)
fixed:背景图像固定
背景属性复合写法
没有特定的书写顺序,一般习惯约定顺序为:
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
css的三大特性
层叠性
样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式。样式不冲突,不会层叠。
继承性
子标签会继承父标签的某些样式,如文本颜色和字号。恰当的使用可以简化代码,降低css样式的复杂性
行高的继承font:12px/1.5;之后的子元素继承的行高是当前子元素本身的字体大小的1.5倍。
优先级
选择器相同,则执行层叠性,选择器不同,则根据选择器权重执行。
注意:权重是有4组数字组成,但不会有进位。可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推。
如果是复合选择器,则会有权重叠加,需计算权重。