Web前端学习（2）_css

Web前端学习（2）_css

1.CSS入门

1.1 引入

html：负责网页的结构

css： 负责网页的样式

1.2 定义

CSS（Cascading Style Sheet 层叠样式表） 简称，样式。主要负责网页的美观

1.3 css的三种使用方式

1.3.1行内样式

注意：

1）使用标签的style属性进行css控制，css写在style属性值中

弊端：只能控制一个标签的样式，如果对于多个标签的样式进行设计，过于麻烦

<a href="" style="color:#0F3">超链接</a><br />
<a href="" style="color:#0F3">超链接</a><br />
<a href="" style="color:#0F3">超链接</a><br />

1.3.2内部样式

注意：

1）使用style的标签进行css控制，css内容写在style标签体内

2）一次控制多个标签的样式

3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用

<style type="text/css">
a{
color:#F30;
font-size:36px;
}
</style>

分析：把style标签写在haed标签里面，使用如上语法选中对应标签，进行样式设置

1.3.3外部样式（推荐使用）

注意：

1）建立独立后缀为css的文件，css内容写在该文件中

2）在使用css的html页面中，导入外部css文件

使用方法：

<!-- 导入外部css文件  href  : 表示外部css文件的位置 rel: 表示关联的是样式表 -->

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

<link href="css示例.css" rel="stylesheet" />

分析：在一个css文件里面写好样式代码，使用上面的句子进行导入

2 CSS语法

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

2.1.1 标签选择器

作用：选择同名的标签

注意：这种方法会选择到该文件里面的所有同名的标签

分析：如下，会选中所有的div标签

<style type="text/css">
div{
color:#963;
}

</style>

2.1.2 类选择器

作用： 选择同类的标签

注意：

1）选择的标签必须有class的属性。同类的标签使用同名

2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先

分析：.加类名，会选中标签中类的属性为该名字的所有标签

.class1{
color:#36F;
}

2.1.3 id选择器

作用： 选择一个标签

分析：同上述类选择器，但是使用
# 开头的

#id1{
color:#00C;
}

注意：

1）选择的标签必须有id属性。

2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById("id属性值")

3）id选择器的优先级最高！

2.1.4 并集选择器

作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容

/*当两个类css代码相同的时可以使用并集选择器将两个选择其中的代码进行抽取,形     成一个并集选择器*/
.c1,.c2{
color:#00F;
}

2.1.5 交集选择器

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

分析：选中div标签中的span标签

div span{
color:#006;
}

2.1.6 通用选择器

作用； 选择所有的标签

2.1.7伪类选择器

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

标签有四种状态：

（1）link: 没有访问过的状态

（2）hover: 鼠标经过的状态

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

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

注意：

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

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

正确顺序： link visited hover active

<style type="text/css">
a:link{
color:#3F0;
}
a:visited{
color:#3FF;
}
a:hover{
color:#9C0;
}
a:active{
color:#00F;
}

</style>

2.2 常用的CSS属性和值

2.2.1 文本属性

/*设置字符间距*/
letter-spacing:4px;

/*设置文本的位置*/
text-align:center;

/*给文本设置上划/下划/中划线*/
text-decoration:underline;

/*设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开*/
word-spacing:10px;

2.2.2 设置字体

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

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

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

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

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

2.2.3 设置背景

/*给标签设置背景颜色*/
/*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) no-repeat top right;

2.2.4 设置列表

ul{
/*设置列表选项前面的样式*/
/*list-style-type:circle;*/

/*将图片设置为列表选项的一个标记*/
/*list-style-image:url(05.%E7%B4%A0%E6%9D%90/start.jpg);*/

/*列表样式的简写属性*/
list-style:url(05.%E7%B4%A0%E6%9D%90/start.jpg);
}

2.2.5 设置表格

table{
/*合并表格的边框*/
border-collapse:collapse;}

2.2.6设置边框

div{
width:300px;
height:200px;

/*必须首先设置边框的样式之后,边框的颜色才可以显示*/
/*border-color:#F00;*/

/*给四个边框非别设置不同的颜色*/
/*
border-top-color:#0F0;
border-bottom-color:#063;
border-left-color:#9C0;
border-right-color:#F00;*/

/*设置边框的样式*/
/*border-style:solid;*/
/*实线:solid*/
/*border-left-style:solid;*/

/*点划线:dotted*/
/*border-top-style:dotted;*/

/*双实线:double*/
/*border-right-style:double;*/

/*虚线:dashed*/
/*border-bottom-style:dashed;*/

/*设置边框的宽度*/
/*border-width:5px;*/
/*border-left-width:1px;
border-top-width:3px;
border-right-width:6px;
border-bottom-width:9px;*/

/*使用简写属性,设置边框样式:booder:border-width border-style border-color*/
/*这个简写属性必须牢记*/
border:2px solid #F00;
}

3 盒子模型

3.1 定义

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

3.2 盒子相关的属性：

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

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

边框（border）： 盒子的厚度

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

div{
width:100px;
height:100px;
border:6px solid #900;}

#d1{
width:200px;
height:200px;
padding-top:10px;
padding-left:10px;
margin-bottom:10px;}

4 CSS定位

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

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

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

/*相对定位,相对于自己之前的位置*/
/*
position:relative;
top:20px;
left:20px;*/

/*绝对定位:相对于自己的父标签而言的*/
/*
position:absolute;
top:20px;
left:20px;*/

/*固定定位:相对于浏览器而言*/
position:fixed;
left:500px;
top:300px;