CSS学习笔记

一、css的三种引入方式

（1）外部样式

可以把css写到另一个文本里，后缀为.css

然后在html里

(注意要把这行代码写在head标签里)

（2）内页样式

把css代码直接写在head标签里

把css代码写在style里

（3）行内样式

把css代码写在要修饰的内容的标签里

二、css的基本语法

css由两个注意部分组成：
1、选择器
2、一条或多条声明

css的注释：/**/

三、常用选择器

（1）id选择器

通过给标签加id属性，并给与一个名称（不可重复，这个名称只能让一个标签使用）

（2）类（class）选择器

给标签加class属性，并给与一个名称（可重复，这个名称可以让多个标签使用，也可以让一个标签使用多个类名）

（3）标签选择器

直接用html标签作为选择器

（4）交集选择器

一个标签选择器后面跟一个类选择器或者一个id选择器
(中间不能有空格)

标签选择器.类选择器
标签选择器#id选择器

（5）并集选择器

多个选择器以逗号相连，只要满足其一就会被选中
(上面的几个选择器都可以写入此选择器)

div,p,h3,div.color,div#p 等等

（6）后代选择器

以空格相连的多个选择器，外层的选择器写在内层选择器前面

（7）伪类选择器

（8）通配符选择器

它是一种特殊的选择器，用 * 表示，可以选中所有元素对象

*{
}

四、文本

（注意：以下分号和冒号均为英文符号，并且冒号后不能有空格）

（1）首行缩进

text-indent:值;
(值可以为数字，单位为px，也可以是百分比)

（2）对齐方式

text-align:值;
值可以为：left（左对齐）、 center（居中）、 right（右对齐）

（3）字体行高

line-height:值;
(值可以为数字，单位为px，也可以是百分比，默认值为：nomal)

（4）单词字间距

word-spacing:值;
（值为数字，单位为px，默认值为：nomal，但不可以为百分比）

（5）文字间距

letter-spacing:值;
（值为数字，单位为px，默认值为：nomal，但不可以为百分比）

（6）文字下划线

text-decoration:值;
（常用值：underline（有下划线）或者none（无下滑线））

（7）文字字体

front-family:值;
（值为字体的名称）

多个字体用逗号隔开
front-family:值1,值2,值3;
（值1先显示，如果没有值1这种字体则显示值2，如果值2也没有，那就显示值3）

(8)字体风格

front-style:值;
（值可以为：normal（正常）、italic（斜体）、oblique（倾斜））
（个人觉得斜体和倾斜的效果没有多大的区别）

（9）字体大小

font-size:值;
（值为数字，单位是px）

（10）字体颜色

color:值;
（值可以为颜色对应的英语单词，也可以为颜色代码）

（11）字体加粗

font-weight:值;
（常用值：normal（正常）、bold（加粗））

五、块级元素的构造

(1)块级元素的宽高

width:值;
height:值;
（值可以为数字，单位为px，也可以为百分比）

（2）块级元素的背景
背景颜色：

background-color:值;
（值可以为颜色对应的英语单词，也可以为颜色代码）

背景图片：

background-image:url();
（括号里写要引入图片的路径）

但图片的引入往往伴随着背景图片重复的问题

背景图片重复的问题

background-repeat:值;
（值可以为：repeat-x（x轴有重复现象）、repeat-y（y轴有重复现象）、no-repeat（x轴和y轴都没有重复现象））

背景图片的位置

background-position:值;
1.值可以为关键字：
设置x轴的值：left , right , center
设置y轴的值：top , bottom , center

2.值也可以为数字，单位为px（第一个值表示水平方向，第二个值表示垂直方向）
3.值还可以为百分比（第一个值表示水平方向，第二个值表示垂直方向）
4.最重要的事，值还可以混用

背景关联

background-attachment:fixed;
（使用背景关联后背景图片就会固定）

以上关于背景的设置还可以这样写：
background:#00FF00 url() no-repeat fixed center left

（3）边框

border:值1 值2 值3;
值1一般为数字，单位为px，表示边框宽度。
值2一般为solid（实线）或dashed（虚线）
值3一般为颜色值，表示边框颜色，值可以为英文单词也可以为颜色代码

边框还可以分开设置

左边框：border-left:值1 值2 值3;
右边框：border-right:值1 值2 值3;
上边框：border-top:值1 值2 值3;
下边框：border-bottom:值1 值2 值3;

六、定位

（1）相对定位

相对定位是相对于它原来的位置进行定位
position:relative;

水平方向：left:值;
right:值;
（left和right只能用一个）

垂直方向：top:值;
bottom:值;
（top和bottom只能用一个）

（2）绝对定位

绝对定位是相对于整个页面的左上角进行定位
position:absolute;

水平方向：left:值;
right:值;
（left和right只能用一个）

垂直方向：top:值;
bottom:值;
（top和bottom只能用一个）

（3）固定定位

固定定位是相对于浏览器的窗口进行定位
position:fixed;

水平方向：left:值;
right:值;
（left和right只能用一个）

垂直方向：top:值;
bottom:值;
（top和bottom只能用一个）

（4）重叠元素的堆叠设置

在每个设置了定位的元素里加上z-index:值;
值为数字，可以为负，只要能比较出大小即可，数值大的堆叠在上面