HTML，css和JavaScript的基础学习—css篇

1.css是什么？由什么组成？

层叠样式表，定制html元素的显示样式，美化页面，对于前端页面的搭建十分重要。
由三部分组成：选择器，属性，值。

2.css的作用

（1）CSS 指层叠样式表 (Cascading Style Sheets)
（2）样式定义如何显示 HTML 元素
（3）样式通常存储在样式表中
（4）把样式添加到 HTML 中，是为了解决内容与表现分离的问题
（5）外部样式表可以极大提高工作效率
（6）外部样式表通常存储在 CSS 文件中
（7）多个样式定义可层叠为一个

3.选择器的种类

元素选择器
直接写元素标签名加{}，在{}中写属性，body中所有的这种元素的属性都会改变
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。
类选择器
类选择器可以为标有特定 class 的 HTML 元素指定特定的样式。可以用于区分不同的HTML元素。
类选择器以 “.” 来定义
派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。比如你希望div下的p标签的字体为蓝色：

<div><p>才能的火花，常常在勤奋的磨石上迸发。</p>
</div>
css:div p{ color: blue; }

选择器继承
根据 CSS，子元素从父元素继承属
选择器联合使用
同时对多个元素设置同一个样式：
h1,h2,h3,h4,h5,h6 { color: green; }

4.背景样式

属性为元素设置背景色。div{background-color: gray;}
设置背景图像：要把图像放入背景，需要使用 background-image 属性。
body{ background-image: url('图片的路径') }
设置背景图像重复：background-repeat 属性设置是否及如何重复背景图像。
对应的值为：
repeat：重复
no-repeat：不重复
repeat-x：水平方向重复
repeat-y：垂直方向重复
背景图像定位：以利用 background-position 属性改变图像在背景中的位置。
top left
top center
top right
center left
center center center right
bottom left
bottom center
bottom right
也可以使用百分比 background-position: 0% 10%;
也可以使用像素 background-position: 50px 50px;
防止背景图像随着页面滚动 background-attachment: fixed;

5.文本样式

文字颜色
使用属性color来指定文字颜色，其属性取值是CSS颜色。
文本缩进
CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。
缩进可以使用下面三种值：
em 长度单位，一般而言 1em = 16px
px 像素
% 百分比
文本装饰
text-decoration属性规定添加到文本的修饰，如加下划线、上划线、删除线等。
none 无装饰
underline 下划线
overline 上划线
line-through 删除线
水平对齐
text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
left 左对齐
right 右对齐
center 居中
行间距
p{line-height: 130px;}
130px是字体+到上一行的距离+到下一行的距离

6.字体样式

指定字体
指定字体: font-family
p {font-family: sans-serif;}      不常用
字体尺寸
font-size设置字体的尺寸
p{ font-size: 100px; }
字体粗细
font-weight设置字体的粗细。
   normal 默认值。定义标准的字符。
    bold 定义粗体字符。
    bolder 定义更粗的字符。
    lighter 定义更细的字符。
   100-900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
字体样式简写
p{ font: bolder 50px sans-serif; } 粗细尺寸指定字体

7.框模型

由内边距，边框，外边距组成。

元素框的最内部分是实际的内容，直接包围内容的是内边距。
内边距的边缘是边框。
边框以外是外边距。

1.内边距
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
p{padding:30px 0px 60px 0px;}
单边内边距

padding-top
padding-right
padding-bottom
padding-left

2.边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
边框样式

dotted 点状边框
dashed 虚线
double 双线
solid 实线

也可以设置单边框样式：

border-top-style
border-right-style
border-bottom-style
border-left-style

简写形式： border-style: dotted dashed double solid;
可以通过 border-width 属性为边框指定宽度。
可以通过border-color属性设置边框的颜色 border-color: red;
3.外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
设置此元素上下左右居中： margin:0 auto;
简写设置外边距margin，依次是上右下左： margin:30px 0 0 50px;
单边外边距属性

margin-top
margin-right
margin-bottom
margin-left

8.css定位

1.relative 相对定位
相对定位元素的定位是相对其正常位置。就是相对于它原来的位置
2.absolute 绝对定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
3.fixed 固定定位
格式：自身属性中加上：position:absolute
父级属性中加上：position：relative

9.浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响
如果图像（块级标签）是右浮动，下面的文本流将环绕在它左边：float:right;
如果图像（块级标签）是上下居中浮动，下面的文本流将从图像中间开：float:top;

扩展点
去除a标签的下划线：text-decoration : none；
去除列表的符号前缀：list-style-type : none;