css基础

css在使用时可以查询w3school教程，一下为一些常用的内容

一.css的使用方式：

1.行内样式:使用标签内部的style属性给每一个标签设置样式
缺点:一次只能给一个标签设置样式,如果标签比较多,工作量比较大,而且更改起来比较麻烦

2.内部样式:使用style标签,给style标签中写css的样式代码
缺点:css代码和html代码混杂在了一起,管理起来比较麻烦

3.外部样式(推荐):在html代码的外部,创建一个css文件,css文件中写独立的css代码,使用的时候,直接将css文件导入到html文件中即可
<link href="1.css" rel="stylesheet" />
href  : 表示外部css文件的位置
rel: 表示关联的是样式表

二：css语法及选择器

主要包含以下三部分内容:
选择器
css样式属性
css样式属性的值

css中的选择器:
1.标签选择器:选中同名的所有标签    
语法:标签名称{ css代码}

2.类选择器:选中所有同名的类的标签
使用规则:标签内部必须有class属性
使用语法:
.类名{css代码}
注意:当一个标签同时被标签选择器和类选择器同时选中的时候,类选择器起作用,类选择器相对于标签选择器的优先级更高

3.id选择器
使用规则:标签内必须有id属性,选中对应的id的值的标签进行样式的设定
语法:#id值{css样式}
注意:
1.当一个标签同时被标签选择器,类选择器,id选择器同时选中的时候,id选择器起作用,此时id选择器的优先级最高
2.在一个网页中不允许存在同名的id值,以后我们在我们js中经常会通过标签的id属性去点对点的找到对应的标签

4.并集选择器
当多个选择器中的css代码相同的时候,我们可以使用并集选择器,对这些css代码进行抽取

5.交集选择器:作用是选中某一个标签中的子标签(外标签 内标签)
语法:
    外部选择器 内部标签选择器{css代码}（<div><span>div中的span标签</span></div><br />）

三：伪类选择器

伪类选择器:可以控制标签在不同的状态下展示出的不同的样式
link:没有访问过的状态
hover:鼠标划过的状态
active:鼠标按下没有松开的状态
visited:已经访问过的状态

设置伪类选择器的时候,设置不同状态是有一定的顺序的(link-visited-hover-active)
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

四：设置文本属性值

设置字符间距*/
letter-spacing:4px;
/*设置文本的位置*/
text-align:center;
/*给文本设置上划/下划/中划线*/
text-decoration:underline;
/*设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开*/
word-spacing:10px;
}

五：字体（font）

/*设置字体*/
/*font-family:"黑体";*/

/*设置字体大小*/
/*font-size:36px;*/

/*设置字体样式*/
/*font-style:italic;*/

/*设置字体的粗细*/
/*font-weight:bold;*/

/*字体设置的简写属性,一定要注意属性的顺序*/
font:italic bold 36px "黑体";

六：背景（关键字background）

/*给标签设置背景颜色*/
/*background-color:#006;*/

/*将背景设置为图片*/
/*background-image:url(05.%E7%B4%A0%E6%9D%90/mm.jpg);*/

/*设置背景图片的重复规则
repeat:默认显示的重复方式,x,y方向都重复
repeat-x:设置图片仅在x方向上重复
repeat-y:设置图片仅在y轴方向上进行重复
no-repeat:图片不重复
*/
/*background-repeat:no-repeat;*/

/*设置图片的位置*/
/*background-position:top right ;*/

/*设置图片背景的简写样式*/
background:#006 url(05.%E7%B4%A0%E6%9D%90/mm.jpg) repeat top center;

盒子模型等通过作业体现：