php1 基础知识讲解

课程回顾

Css(cascading style sheet)层叠样式表

Css目的：给html元素加各种各样的样式，html的结构和css表现分离，便于维护更新Css的语法：

选择器{属性:属性值;属性:属性值;}

?一个css样式，是由选择器和格式声明语句构成

?选择器就是选择给那个html元素加样式

?格式声明语句是由属性：属性值;构成

?属性是w3c指定好的，直接拿过来用

?Css样式单位通常使用的是px

Html如何引入css样式

行内样式表：

语法:<标签style=”属性:属性值” >内容

例如:

文字的大小

描述：样式只能用于当前的html元素，

内嵌样式表

语法:

例如：

只能用于到当前的文档

外部样式表

语法:

描述：外部样式表可以被多个文档使用，

导入样式表

语法：@import url(另外一个css文件)

描述：管理css样式用的，通常不用，是css的标签,放的时候，要放css样式中，必须放到css样式中的最上面

选择器

基本选择器

1.标签选择器：给某个html元素加样式

语法：标签选择器名{属性：属性值; }

标签选择器名就是标签名

例如body{ } div{ } table{ }

例如：ul{font-size:12px; }

给当前页面中的所有无序列表价样式

2.类选择器:给一类html元素加样式

语法:类选择器名{属性：属性值; }

类用点. 来表示

选择器名称，要自定义，字母或下划线，起的要有意义

例如：.myclass{ } .box{ }

可以多次引用，那个html元素想用，每一个标签都有这样的一个属性

Class=”选择器名称”

3.Id选择器:给特定html元素加特定的样式

语法：id选择器名称{属性：属性值; }

Id用#来表示

选择器名称，要自定义，字母或下划线，起的要有意义

那个标签想用，就引用，每一个标签都有一个属性id=”选择器名称”

注意：只能引用一次，通常给javascript用，是作为一个地址

4.通用选择器

*所有的意思

语法*{属性：属性值; }

*{color:red; }

Ie6不支持

复合选择器

1.多元素选择器：把共有的属性和属性值放到一起来声明

语法：选择器，选择器，选择器{属性:属性值; }

Body,dl,dt,dd,table,td,tr,div,p,ul,ol,li,h1,h2,h3,h4,h5,h6,span{属性: 属性值; } *{属性: 属性值; }

2.后代元素选择器：给html元素的里面的元素加样式

语法选择器1 选择器2 {属性:属性值; }

选择器1里面的选择器2

例如：.content .c_left h2{color:blue; }

例如在body标签里面输入

php学院

• html
• php

ios学院

3.子元素选择器：给里面的html元素加样式，里面的第一层元素

语法选择器>选择器{ ….}

.c_left>h2{color:blue; }

Css文本的属性

1.文本的大小font-size:14px;

2.文本的字体font-family:字体;

3.文本的颜色color:blue；

4.文本的是否加粗font-weight:是否加粗;取值bold 加粗normal 正常

5.文本是否倾斜font-style:是否倾斜;取值italic 倾斜，normal正常

6.文本居中text-align:对齐方式;取值left center right

7.行和行之间的间距line-height:输入数值line-height:24px;

今天的教学目标

伪类（锚的伪类a）

名称，定义好了，直接拿过来用

?a:link 未访问过的链接

?a:visited访问过的链接

?a:hover鼠标移到链接上

?a:active 单击鼠标左键不放的状态

例如：

背景图片

?背景颜色background-color:颜色; 例如background-color:gray;

?背景图片background-image:url(背景图片的路径);

?背景图片是否平铺background-repeat:是否平铺;

取值repeat(横向和纵向都平铺) no-repeat(不平铺) repeat-x (横向平铺) repeat-y(纵向平

铺)

?背景图片的展开的位置background-position:水平位置垂直位置;

位置用英文background-position:left/center/right top/center/bottom;

数值background-position:10px 20px; 距左侧的距离是10像素，距顶端的距离20像素，

的位置开始展开图片

简写方式：

Background: 颜色背景图片是否平铺水平位置垂直位置;

注意：背景可以放html元素中，如果背景颜色又有背景图片，背景图片的优先级高于颜色

表格的属性

合并表格边框线

Border-collapse:collapse;

作业：

列表的属性

●List-style-type:none;去掉有序或无序前面的符号

●List-style-image:url(图片的路径);用一张图片代替前面的列表符号

去掉前面的符号简写为

List-style:none; 去掉列表前面的符号

边框线属性

1.上边框线

?Border-top-width: 数值；上边框线的宽度

?Border-top-color:颜色值; 上边框线的颜色

?Border-top-style:线型; 上边框的线型；

取值：solid 实现dotted 点画线

可以简写为

Border-top:粗细线型颜色;属性值的顺序可以相互颠倒，当通常这样的顺序例如: border-top:2px solid #00ccff;

2.右边框线

?Border-right-width:数值;右边线的宽度

?Border-right-color:颜色;右边线的颜色

?Border-right-style:线型; 右边线的线型

取值：solid 实现dotted 点画线

可以简写为

Border-right:粗细线型颜色;

例如:

效果

3.下边框线

?Border-bottom-width:数值;下边框的粗细

?Border-bottom-color:颜色；下边框的颜色

?Border-bottom-style:线型;下边框的线型

简写为

Border-bottom:粗细线型颜色;

例如：border-bottom:1px dashed #ccc;下面的边框粗细为1px，虚线颜色为灰色4.左边框线

?Border-left-width: 粗细;左边框的宽度

?Border-left-color:颜色;左边框的颜色

?Border-left-style:线型;左边框的线型

简写为

Border-left:粗细线型颜色;

上右下左四条边线的样式一样

可简写为border:粗细线型颜色; 注意：上右下左四条边线

盒子模型

内边距（内填充）：内容和边框之间的距离

?Padding-top:数值;内容和上边框之间的距离

?Padding-right:数值;内容和右边框之间的距离

?Padding-bottom:数值;内容和下边框之间的距离

?Padding-left:数值;内容和左边框之间的距离

简写为

?Padding:10px 20px 30px 40px; 内容和边框上为10px 右为20px 下30px 左40px;

?Padding:10px 20px 30px; 内容和边框之间的距离上为10px 左右为20px 下为30px ?Padding:20px 10px;内容和边框之间的距离上下为20px, 左右为10px;

?Padding：30px；内容和边框之间的距离上右下左四条边线和内容之间的距离为30px

Padding-left:20px;

Padding:0 0 0 20px;

外边距边线往外的部分

?Margin-top:上边线往外的部分

?Margin-right：右边线往外的部分

?Margin-bottom: 下边线往外的部分

?Margin-left:左边线往外的部分

可以简写为

?Margin:10px 20px 30px 40px;上为10px 右为20px 下30px 左40px

?Margin:10px 20px 30px; 上为10px 左右为20px 下为30px;

?Margin：10px 20px; 上下为10px 左右为20px

?Margin：10px ;上右下左都是10px;

网页布局思想

当前的版面如果划分的话就划分一下两种结构（纵向排列，横向排列）

如果是纵向的，就依次使用块元素排列就可以

如果是横向使用浮动排列就可以

内容和边框之间的距离，盒子和盒子之间的距离通过padding或margin设定就可以

盒子结构的深入

Content就是内容区包括宽度和高度width和height

整个盒子的宽度和高度如何计算

整个盒子的总的宽度=外边距margin+内边距padding+边框border+width

Div里面还有div （外面的div叫父元素）里面的div中的宽度不能超出父元素的内容宽

父盒子的宽度为Div 1000px