第四章-CSS样式表.ppt

第四章CSS样式表第一节CSS简介1．CSS的作用CSS是Cascadingstylesheets（层叠样式表单）的简称，通常称作样式表；CSS最大的特点是它把网页上的内容结构和格式控制相分离，从而给网页设计带来以下几方面的优点：减少重复代码的工作量；提高网络运行速度；增加网页设计的灵活性。第一节CSS简介2．CSS的编辑CSS的基本语句结构是：选择符{属性：属性值}如：div{width:200;filter:blur(add=true,direction=135,strengh=20);}第一节CSS简介有三种方法可以将独立编辑好的CSS文档怎样加入到HTML文档中。一种是把CSS文档放到head标记结构中：styletype=text/css……/style?如：styletype=text/cssdiv{width:200;filter:blur(add=true,direction=90,strength=30)}/style第一节CSS简介另一种方法是把CSS样式表写在HTML的行内：pstyle=font-size:14pt;color:blue蓝色14号文字/p?如：divstyle=width:200;filter:blur(add=true,direction=90,strength=30)imgsrc=image/sweet.jpg/div第一节CSS简介还有一种方法是把编辑好的CSS文档保存成“.CSS”文件，然后在head中定义引用：headlinkrel=stylesheethref=lj.css/head?lj.css的内容为：div{width:200;filter:blur(add=true,direction=0,strength=30)}第二节图文排版属性1．字体属性font-family：定义字体，其属性值为字体名称；font-style：定义是否斜体，其属性值Normal、italic（斜体）、oblique（歪斜体）；font-variant：是否大写小体，其属性值Normal、small-caps(小写的英文字体转化为大写且较小的英文）；font-weight字体粗细，其属性值Normal、bold（粗体）、bolder（粗体加粗）、lighter（比默认字体还细）font-size字体大小，其属性值Absolute-size、relative-size、length、percentage等；第二节图文排版属性2．颜色和背景属性Color：定义前景色，其属性值为颜色background-color：定义背景色，其属性值为颜色background-image：定义背景图案，其属性值为图片路径background-repeat：图案重复方式，其属性值为repeat-x（背景图片以X轴并排延伸）、repeat-y（背景图片以Y轴并排延伸）、no-repeat（背景图片不以并排方式延伸）background-attachment：背景图案滚动，其属性值为scroll、fixedbackground-position：背景图初始位置，其属性值为percentage、length、top、left、right、bootom等第二节图文排版属性3．文本属性word-spacing：词间距，其属性值为Normal、长度letter-spacing：字母间距，其属性值为Normal、长度text-decoration：文字装饰，其属性值为None、underline（文字下加下划线）、overline（文字上加顶线）、line-through（文字中间加删除线）、blink（文字闪烁，但浏览器不支持）vertical-align：垂直位置，其属性值为baseline（默认）、sub（下标）、super（上标）、text-top（垂直向上对齐）、middle（垂直居中对齐）、bottom（垂直向下对齐）、text-bottom（垂直向下对齐，同bottom）第二节图文排版属性text-transform：文本转换，其属性值为capitalize（首字母大写）、uppercase（字母转换为大写）、lowercase（字母转换为小写）、none；text-align：对齐方式，其属性值为left、right、center、justify（两端对齐）text-indent：首行缩进，其属性值为长度、百分比