燕十八_div css教学笔记

导读:自学it网公益it培训PHP,Python,java免费学http://www.zixue.it4:再把布局完毕的页面的hader区域引入背景图。?Ul无序列表,ol有序列表有序列表与无序列表(都是块状元素)这是列表项这是有序列表项通过css能控制列表的3个属性:List-style-type:列表项的显示标志List-style-image:用于替换显示标

燕十八_div css教学笔记

自学it网 公益it培训 PHP ,Python ,java免费学 http://www.zixue.it

4:再把布局完毕的页面的hader区域引入背景图。

? Ul无序列表,ol有序列表

有序列表与无序列表 (都是块状元素)

  • 这是列表项

  1. 这是有序列表项

通过css能控制列表的3个属性: List-style-type : 列表项的显示标志

List-style-image: 用于替换显示标志的图片.

List-style-postion:inside/outside ,显示标志与列表内容的位置关系

注意:

虽然列表有3种属性,可以方便设置,

但是,我们实际使用中,往往把list-style-type 设为 none; 原因是:不同浏览器对于列表的渲染差别很大, 因此要通过css初始化,强制他们保持一致.

作业-------

1:设计一个场景,测试块状元素和内联元素的区别.

2:通过css,控制有序/无序列表的3种属性,分别来做实验. 3:思考我们在实际开发中,对列表样式的处理,为什么? 4:网页头部,引入logo,logo下方,通过ul列表, 增加导航.

作业补充:

1:知道内联元素与块状元素可以相互转换.

2:能够利用第1点的知识,修正导航里,因图片竖直方向的边距带来的误差. 3:今天讲到的css选择器,能自己设计代码进行测试.

4:预习: 文本控制

自学it网 公益it培训 PHP ,Python ,java免费学 http://www.zixue.it

文本控制

段落缩进:text-indent

作用:控制一段首行的缩进距离. 例: css选择器{text-indent:20px;}

水平对齐:text-align

作用:控制文字在水平方向上的对齐方式

例: css选择器{text-aligh:left;} //可选值 left,right,center, 默认是left;

文本装饰:text-decoration

作用:给文字加一些修饰线的效果.

例:css选择器{text-decoration:underline;} // none,underline,overline,line-through,blink

字母间距:letter-spacing

作用:控制单个字符之间的距离 例:css选择器{letter-spacing:20px;} 词间距:word-spacing (对中文无效); 作用:控制单词与单词之间的距离 例: css选择器{word-spacing:20px;} 大小写转换:text-transform

作用:按一定规则转换字母的大小写

例: css选择器{text-transform:uppercase;} // uppercase, lowercase,capitalize; Capitalize: 是把首字母大写,其他字母不受影响.

字体控制:

Font-style : 显示风格

作用:控制文字的是否斜体显示或正常显示. 例: css选择器{font-style:italic;} //normal,oblique

Font-weight: 字体粗细

作用: 控制文字的粗细程度

例:css选择器{font-weight:bold;} //normal/bold

Font-size: 字体大小 作用:控制字体的大小

例:css选择器{font-size:30px;} //则每个字符以30像素的大小显示.

Line-height: 行高

自学it网 公益it培训 PHP ,Python ,java免费学 http://www.zixue.it

作用:设置每行文字所占的高度,(特点:在一行内,文字总是相对于行居中显示,所以可以利用这个特性让文字相对于容器居中)

例: css选择器{line-height:30px;}// 则每一行占据30个像素高.

Font-family: 设置字体

作用:设置显示文字所用的字体.

烟酒专卖 hello 烟酒专卖 Hello 有衬线字体 ------ 笔画拐弯的时候,有尖角的字体 无衬线 ------笔画等宽,拐弯的时候也没有尖角 要点:

? 先英文字体,再中文中体 ? 先特殊字体,再安全字体 ? 先具体字体,再字体大类

注意: 当声明多个字体,如果某个字体名称含多个单词,或者中文字体, 则字体名用双引号包起来.

把所有字体属性写在一行里:

Font: style weight size/line-height family

字的颜色如何控制: Color: red / #EEE;

自学it网 公益it培训 PHP ,Python ,java免费学 http://www.zixue.it

作业:

1: 自己打2段文字,并针对文字

使用所讲的所有所有控制属性, 及属性的可能值, 做一遍实验.

2:完成后, 利用所学知识点+昨天内联与块状的转换,完善导航条. 至如下效果:

1:导航文字水平方向居中显示 2:导航文字竖直方向居中显示 3:导航文字链接的下线线去掉.

自学it网 公益it培训 PHP ,Python ,java免费学 http://www.zixue.it

表格学习

基本语法:(以3行2列为例)

  
  
  

CSS属性控制: 对于table:

Border-collapse: 边框是否融合.

可选值: separate(表格与表格相互独立的边框,默认值) Collapse,(表格之间的边框共用).

Border-spacing: 边框间距

用法: border-spaing: xpx ypx (给两个像素值,分别代表单元格在x,y轴的距离)

Empty-cells: 空表格是否显示. 可选值: hide, show ,默认是hide

注意: 如果border-collapse值为 collapse时, border-spacing,和empty-cells 自动失效.

想让空表格显示的处理方式:

1:在空单元格里加一个空白符\2:让表格边框融合 collapse

表格的适用范围: 显示格式化数据 不适用于页面布局

五星文库wxphp.com包含总结汇报、旅游景点、IT计算机、外语学习、考试资料、办公文档、行业论文、教程攻略以及燕十八_div css教学笔记等内容。

本文共8页1<<345678