燕十八_div css教学笔记

导读:4:再把布局完毕的页面的hader区域引入背景图。Ul无序列表,ol有序列表有序列表与无序列表(都是块状元素)<ul><li>这是列表项</li></ul><ol><li>这是有序列表项</li></ol>通过css能控制列表的3个属性:List-style-ty

燕十八_div css教学笔记

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

Ul无序列表,ol有序列表

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

<ul>

<li>这是列表项</li>

</ul>

<ol>

<li>这是有序列表项</li>

</ol>

通过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:预习: 文本控制

文本控制

段落缩进: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: 行高

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

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

Font-family: 设置字体

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

要点: ? 先英文字体,再中文中体

? 先特殊字体,再安全字体

? 先具体字体,再字体大类

注意: 当声明多个字体,如果某个字体名称含多个单词,或者中文字体,

则字体名用双引号包起来.

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

Font: style weight size/line-height family

字的颜色如何控制:

Color: red / #EEE;

作业:

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

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

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

至如下效果:

1:导航文字水平方向居中显示

2:导航文字竖直方向居中显示

3:导航文字链接的下线线去掉.

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

本文共10页1<<345678910