网页编程5

1第5章CSS基础2CSS初步CSS的概念•CSS，通常称之为层叠样式表。样式，就是指网页中的内容（文字、图片）该以什么样子（大小、颜色、背景、插入位置）显示出来。层叠是指当CSS定义的样式发生了冲突，将依据层次的先后顺序来处理网页中的内容。•HTML既能显示网页内容，又能控制网页样式；而CSS就是让网页的样式独立出来，以方便批量处理我们上面提到的样式变更问题。•现在CSS已经广泛应用于各种网页的制作当中，在CSS的配合下，HTML如虎添翼，发挥出了更大的作用。优点：•制作管理网页非常方便•可以更加精细的控制网页的样式•样式丰富多彩•样式灵活多样，可以根据不同的情况选用不同的定义方法。34CSS初步CSS初体验hrmlheadstyletype=“text/css”!--h1{font-style:italic}H2{color:red}--/style/headbodyh1这是斜体标题/h1h1这是红色标题/h1/body/html•style用来说明定义哪类语法的样式，通常放在head/head之间•Type属性指定使用CSS语法来定义网页内容的样式•!----防止代码泄露56文字设置尺度单位和排版尺度单位：相对类型、绝对类型相对类型：相对于一个参考基础而设立的尺度单位px：像素Em：以目前自负的高度为单位绝对类型：与分辨率无关尺度单位说明in（英寸）不是国际标准单位，极少用。cm（厘米）国际标准单位，较少用。mm（毫米）国际标准单位，较少用。pt（点数）最基本的显示单位，较少用。pc（印刷单位）应用在印刷行业中，1pc=12pt7文字设置尺度单位和排版段落的首行缩进：控制首行缩进{text-indent:30}8文字设置尺度单位和排版段落的首行缩进：控制首行凸出{text-indent:-30}9文字设置尺度单位和排版字符间距和段落行距：字符间距{letter-spacing:10}10文字设置尺度单位和排版字符间距和段落行距：段落行距{line-height:2}段落的水平位置{text-align:center}段落的垂直位置{vertical-align：top}11文字设置尺度单位和排版化学方程式和数学式：{vertical-align:sub;font-size:6}{vertical-align:super;font-size:6}12文字设置背景设置文字的字体设置：{font-family:timesnewroman}13文字设置背景设置文字的字体效果：{font-style:oblique}14文字设置背景设置文字的粗细控制：{font-weight:900}15文字设置背景设置文字的大小控制：{font-size:10px}16文字设置背景设置文字的加线效果：{text-decoration:overline}17文字设置背景设置英文字母的大小写转换：英文字母的大小写转换{text-transform:capitialize}18文字设置背景设置英文字母的大小写转换：小写字母转换为大写{font-variant:small-caps}19文字设置背景设置列表中的符号：图像符号{list-style:url(001.jpg)inside}{list-style:url(001.jpg)outside}20文字设置背景设置列表中的符号：各种序列符号{list-style-type:lower-roman}{list-style-image:url(001.jpg)}{list-style-position:outside}21文字设置矩形模块化模块边界的设置：{Margin-top:30;Margin-right:30;Margin-left:30;Margin-bottom:30}22文字设置矩形模块化模块边框的设置：控制模块的边框宽度{border-top-width:10}{border-right-width:20}{border-bottom-width:15}{border-left-width:5}{border-width:5}23文字设置矩形模块化模块边框的设置：控制模块的边框颜色{border-corlor:red}{border-left-corlor:red}24文字设置矩形模块化模块边框的设置：控制模块的边框样式{border-style:dotted}25文字设置矩形模块化模块内边界的设置：{padding-top:30}{padding:30201020}26背景设置背景颜色的设置红色的文字：27背景设置背景颜色的设置红色的网页背景，黄色的文字背景：{background-color:red}28背景设置背景图片的设置网页以及文字的图片背景设置：{background-image:url(002.jpg)}29背景设置背景图片的设置背景图片的并排设置：背景图片的横向平铺{background-image:url(001.jpg);background-repeat:repeat-x}30背景设置背景图片的设置图片的固定设置：{background-attachment:fixed}31背景设置背景图片的设置图片的定位设置：{background-position:50%50%}32总结回顾•CSS概念•尺度单位、排版•文字、列表符号的设置•矩形模块化•背景颜色、图片的设置重点：3、533更多信息•列出可扩展内容。。。•列出参考资源（书籍、文章、网址等）。•请求学员反馈、回答问题。•作业问题讲解。。。34作业与预习•作业。。。•预习。。。•回顾安排。。。•实验安排。。。