css基础笔记2（自用）

字体属性

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选择器永远大于类选择器，以此类推。

如果是复合选择器，则会有权重叠加，需计算权重。