css编程

                                             **CSS入门**        

1 .1引入
html：复杂网页的结构
css：负责网页的美观（样式）
1.2体验

超链接
超链接
超链接
超链接
1.3定义 css（cascading style sheet 层叠样式表）简称，样式。 主要负责网页的美观

1.4css的使用方式
1）行内样式
注意：
1）使用一个标签的style属性进行css控制，css写在style属性值中
2）弊端：只能控制一个标签的样式
超链接
2）内部样式
注意：
1）使用styl的标签进行css控制，css内容写在style标签体内
2）一次控制多个标签的样式
3）弊端：和htm标签混杂在一起，不好维护。css内容无法在多个html页面中重用

3）外部样式（推荐使用）
注意：
1)建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件

2.1选择器
标签选择器
作用：选择同名的标签
div{
font-size:24px;
color:#F00;
}
注意：*
1）选择到所有同名的标签

类选择器
作用：选择同一类的标签
.c1{
font-size: 234px;
color:#f00;
}
注意：
1）选择的标签必须有class属性。同类的标签使用同名
2）当一个标签同时被标签选择器和类选择器选中，那么一定是类选择器优先

id选择器
作用：选择一个标签
#d1{
font-size:24px;
color:#0f0;
}
注意：
1）选择的标签必须有id属性。
2）在同一个html的界面中，建议不要出现两个同名的id标签，后面使用javascript代码选getElementByid（“id属性值”）
3）id选择器的优先级最高！

并集选择器
.c1,#d1{
font-size:24px;
color:#0f0;
}
作用：当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容

交集选择器
div里面的span标签*/
.c1 span{
font-size:24px;
color:#0f0;
}
作用：选择某个选择器中的子标签。

通用选择器
*{
font-size:24px;
color:#0f0;
}
作用：选择到所有的标签

伪类选择器
作用：控制标签在不同状态下的样式。
标签有四种状态：
link：没用访问过的状态
hover：鼠标经过的状态
active：鼠标激活（按下但没有松开）的状态
visited：已经被访问过的状态（鼠标点下且松开）
提示：在css定义中，a:hover必须被置于a:link和a:visited之后，才是有效的。
提示：在css定义中，a:acyive必须被置于a:active和a:hover之后，才是有效的。
正确的顺序：link visited hover active
提示：伪类名称对大小写不敏感。

2.2常用的css属性和值
css文本

今天 天气 不错！

css字体

湖北商贸

css背景

css列表

系统菜单

• 学生管理
• 教室管理
• 课程管理

css表格

css边框

div1

3.盒子模型
3.1定义
可以把html页面上的每个标签看做是一个盒子。
盒子相关属性：
宽度和高度（width和height）：决定这个盒子的容量
内边距（padding）：边框和内容的距离
边框（border）：盒子的厚度
外边距（margin）：盒子与盒子之间的距离

div1

div2

css布局
定位属性（posiyion）
相对定位（relative）：相对于元素原来的位置移动
绝对定位（absoult）：对于副标签而言，当前的位置发生移动
固定定位（fixed）：对于浏览器而言，当前位置发生移动
（不会随着滚动条的滚动，位置发生改变）

div1

div2

div3

网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容

李娇娇李娇娇李娇娇李娇娇李娇娇李娇娇李娇娇李娇娇

                  src:表示框架内包含的页面

框架：

1.一个页面就包含在一个frame标签中 2.有两个或两个以上的frame就需要放在frame（框架集）中