php1 基础知识讲解.docx

课程回顾 Css(cascading style sheet)层叠样式表 Css目的：给html元素加各种各样的样式，html的结构和css表现分离，便于维护更新Css的语法： 选择器属性:属性值;属性:属性值; 一个css样式，是由选择器和格式声明语句构成 选择器就是选择给那个html元素加样式 格式声明语句是由属性：属性值;构成 属性是 w3c指定好的，直接拿过来用 Css样式单位通常使用的是pxHtml如何引入css样式行内样式表： 语法:内容 例如:文字的大小 描述：样式只能用于当前的html元素，内嵌样式表语法: 选择器属性:属性值; 例如： Div Color:red; 只能用于到当前的文档外部样式表 语法: 描述：外部样式表可以被多个文档使用，导入样式表语法：import url(另外一个css文件) 描述：管理css样式用的，通常不用，是css的标签 ,放的时候，要放css样式中，必须放到css样式中的最上面 选择器 基本选择器1. 标签选择器 ：给某个html元素加样式 语法：标签选择器名属性：属性值; 标签选择器名就是标签名 例如 body div table 例如：ulfont-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 h2color:blue; 例如在body标签里面输入 php学院 htmlphp ios学院3. 子元素选择器：给里面的html元素加样式，里面的第一层元素 语法 选择器选择器 .c_lefth2color: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 right7. 行和行之间的间距 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; 作业：列表的属性l List-style-type:none;去掉有序或无序前面的符号 l 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+widthDiv里面还有div （外面的div叫 父元素）里面