CSS样式表代码布局基础教程.docx

CSS样式表代码布局基础教程CSS样式表代码布局基础教程CSS样式表代码布局基础教程—课程10：外部样式表(一)十、外部样式表外部样式表是把各种样式单独存在一个文件里，供其他多个网页调用，下面我们来看一个练习；1、文本编辑器1）打开记事本或gedit、leafpad文本编辑器，gedit在查看菜单里选择“HTML”；2）点菜单“文件－保存”命令，以“lx10.html”为文件名，类型所有文件，编码UTF-8，保存到自己的文件夹；3）按照基础02课的方法，输入、和的内容；2、外部样式表1）点菜单“文件－新建”，新建一个空白文档，保存文件名为style.css，位置跟lx10放一起，这是一个单独的文件；2）在里面输入下面的内容；/*byTeliuTe*/body{background-color:#ccffff;font-size:1.2em;span{color:#800000;.myblue{color:blue;3）第一行/*...*/是注释，注明作者版权用途等，根据自己的需要，下面的内容跟内部样式表相同，各个标签和它的样式，保存一下文件；4）回到lx10.html文档中，在head区内加上下面一行外部引用标识；5）然后在body区内，输入下面的内容；1）点菜单“文件－新建”，新建一个空白文档，保存文件名为style.css，位置跟lx10放一起，这是一个单独的文件；6）保存一下文件，回到自己文件夹中，打开lx10网页，看一下效果；7）在多个网页具有相同样式时，使用外部样式表可以节省空间和减小网页大小；本节学习了外部样式表的使用方法，你成功地完成了本教程，欢迎继续学习本站的其他课程！本教程由86团学校TeliuTe制作http://teliute.laxjyj.com（计算机基础知识，电脑知识入门学习，请到http://电脑知识网）CSS标签大全(一)字体属性：(font)大小font-size:x-large;(特大)xx-small;(极小)一般中文用不到，只要用数值就可以，单位：PX、PD样式font-style:oblique;(偏斜体)italic;(斜体)normal;(正常)行高line-height:normal;(正常)单位：PX、PD、EM粗细font-weight:bold;(粗体)lighter;(细体)normal;(正常)变体font-variant:small-caps;(小型大写字母)normal;(正常)大小写text-transform:capitalize;(首字母大写)uppercase;(大写)lowercase;(小写)none;(无)修饰text-decoration:underline;(下划线)overline;(上划线)line-through;(删除线)blink;(闪烁)常用字体：(font-family)"CourierNew",Courier,monospace,"TimesNewRoman",Times,serif,Arial,Helvetica,sans-serif,Verdana背景属性：(background)色彩background-color:#FFFFFF;图片background-image:url();重复background-repeat:no-repeat;滚动background-attachment:fixed;(固定)scroll;(滚动)位置background-position:left(水平)top(垂直);简写方法background:#000url(..)repeatfixe辅助图片一律用背景处理dlefttop;区块属性：(Block)字间距letter-spacing:normal;数值对刘text-align:justify;(两端对齐)left;(左对齐)right;(右对齐)center;(居中)缩进text-indent:数值px;垂直对齐vertical-align:baseline;(基线)sub;(下标)super;(下标)top;text-top;middle;bottom;text-bottom;词间距word-spacing:normal;数值空格white-space:pre;(保留)nowrap;(不换行)显示display:block;(块)inline;(内嵌)list-item;(列表项)run-in;(追加部分)compact;(紧凑)marker;(标记)table;inline-table;table-raw-group;table-header-group;table-footer-group;table-raw;table-column-grou