CSS入门

一、HTML+CSS+JavaScript

HTML：负责网页的结构

CSS：负责网页的美观

JavaScript：负责用户与浏览器的交互

二、CSS入门

1、定义

CSS（Cascading Style Sheet）中文叫层叠样式表，简称样式。

2、使用方式（3种）：

（1）行内样式

使用方法：利用标签的style属性进行css控制，css写在stylr属性值中

弊端：一次只能控制一个标签的样式

举例：<a href="xxxx" style="font-size:19px;color:#090">超链接</a>

（2）内部样式

使用方法：使用style标签进行css控制，css内容写在style标签体内，一次可以控制多个标签的样式

弊端：和HTML标签混杂在一起，不好维护，css内容无法在多个HTML页面重用

举例：

<style type="text/css">

a{

font-size:24px;

color:#0F0;

}

</style>

（3）外部样式（推荐使用）

使用方法：建立一个后缀为css的文件，css内容都写在该文件中，在使用css的页面的HTML页面中，导入外部文件

举例：

<link href="01.css" rel="stylesheet"/>

href  : 表示外部css文件的位置

rel: 表示关联的是样式表

三、语法

1、css中的内容使用规则：

选择器（selector）：使用选择器来选择需要添加样式的标签

css属性（property）：给选择的标签添加什么样式。例如：字体大小、颜色、背景等。

css值（value）：添加的样式的具体值，例如：字体的大小可以设置为12px，颜色可以设置为红色等。

2、选择器

（1）标签选择器：

作用：选择到所有同名的标签

举例：

p{

font-size:20px;

color:#FFF;

}

（2）类选择器

作用：选择同类的标签

注意：选择的标签必须具有class属性，同类的标签使用同名，当一个标签同时被标签选择器和类选择器选择的时候，类选择器优先

举例：

.c2{

font-size:20px;

color:#FFF;

}

（3）id选择器

作用：选择一个标签

注意：选择的标签必须具有id属性，在同一个页面中不要出现两个同名的id属性的标签，会对JavaScript代码选择标签的时候有影响，id选择器的优先级最高

举例：

#d2{

font-size:20px;

color:#FFF;

}

（4）并集选择器

作用：选择某个选择器中的子标签

举例：

选择div里面的span标签

div span{

font-size:20px;

color:#FFF;

}

（5）通用选择器

作用：选择所有的标签

举例：

*{

ont-size:20px;

color:#FFF;

}

（6）伪类选择器

作用：控制标签在不同状态下的样式

标签拥有4种状态：

link: 没有访问过的状态

hover: 鼠标经过的状态

active:鼠标激活（按下但没有松开）的状态

visited: 已经被访问过的状态（鼠标点下且松开）

注意：

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

所以：正确顺序： link visited hover active

举例：

<style type="text/css">

a:link{

font-size:24px;

color:#F00;

}

a:visited{

font-size:24px;

color:#CCC;

text-decoration:none;

}

a:hover{

font-size:24px;

color:#00F;

text-decoration:none; 

}

a:active{

font-size:24px;

color:#0F0;

text-decoration:underline;

}

</style>

2、常用CSS属性和值

（1）文本属性和值：

文本颜色：color:颜色

字符间距：letter-spacing:10px

对齐方式：text-align:center

文本修饰：下划线：text-underline，中划线：text-line-through，上划线：text-overline，没有:text-decoration：none，单词间距：word-spacing:10px

（2）字体的属性和值：

字体类型：font-family:"宋体";（这里的字体类型是读取系统的默认字体库，尽量使用通用的字体，如果你设置的字体用户的系统上没有，就使用默认的宋体显示）

字体大小：font-size:24px;

字体样式：font-style:itaic;正（normal默认）斜（italic）

字体加粗：font-weight:bold;

这几种属性和值得简写属性：font: italic bold 36px "黑体";

属性值得排序方式为：

font-style 

font-variant 

font-weight 

font-size/line-height 

font-family

（3）背景属性和值

背景颜色：background-color：#FFF;

背景图片：background-image:url();

设置背景图片是否重复或者如何重复：no-repeat; 值：not-repeat: 不重复，repeat-x: x轴重复，repeat-y: y轴重复，repeat: x和y轴重复(默认)

设置背景图片的起始位置：background-position:top center;

简写属性：background:#FFF url(mm.jpg) no-repeat top center;

排序方式：

background-color

background-position

background-size

background-repeat

background-origin

background-clip

background-attachment

background-image

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

（4）列表属性和值：

列表符号类型：list-style-type:none;

设置列表符号的图片：list-style-image:url();

（5）表格属性和值

合并表格的边框：border-collapse:collapse;

（6）边框的属性和值

边框颜色：

左边框：border-left-color:#F00;

右边框：border-right-color:#0F0;

上边框：border-top-color:#00F;

下边框：border-bottom-color:#C90;

简写属性：border-color：

默认值排序：上右下左（如果当前方向没有设置颜色，那么取对面的颜色）

边框宽度：

border-left-width:10px;

border-right-width:20px;

border-top-width:30px;

border-bottom-width:40px;

简写属性：border-width:

默认值排序：上右下左（如果当前方向没有设置边框，那么取对面的边框宽度）

边框样式：

border-left-style:solid;

border-right-style:dashed;

border-top-style:dotted;

border-bottom-style:double;

简写属性：border-style:

默认值排序：上右下左（如果当前方向没有设置样式，那么取对面的边框样式）

所有边框样属性简写：border：

border-width

border-style

border-color

四、盒子模型

可以把html页面上每一个标签看做是一个盒子。

宽度和高度（width和height）： 决定这个盒子的容量

内边距（padding）： 盒子边框与内容的距离

边框（border）： 盒子的厚度

外边距（margin）： 盒子与盒子之间的距离

五、CSS定位

相对定位：relative（相对自己之前的位置）

绝对定位：abosolute（相对父标签的位置）

固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变)