网页设计与制作实例教程1css基础.ppt

13.CSS 基础 网页设计与制作实例教程 Cascading Style Sheet 层叠样式表 ? ? 网页包括的 内容 和 样式 。 CSS 就是让 内容和样式分离开来 ， HTML 只控 制网页的内容，内容的样式由 CSS 来控制。 网页设计与制作实例教程 CSS 的优点 ? ? ? ? 可以更加精细的控制网页的内容。 比 HTML 更加丰富。 便于重用、修改 基于 Web 标准的网页设计方法的设计基础 网页设计与制作实例教程 CSS 样式的优点： ? ? ? ? 只修改一个 .css 文件就可以改变页数不定的外观和格式 （避免了一个一个网页的修改，大大减少了重复劳动的 工作量。） 可以“随心所欲”地控制页面布局和外观； 在所有浏览器和平台之间具有较好的兼容性； 精简网页，提高下载速度（简化了网页的格式代码，外 部的样式表还会被浏览器保存在缓存里，加快了下载显 示的速度，也减少了需要上传的代码数量（因为重复设 置的格式将被只保存一次））。 网页设计与制作实例教程 第一个 CSS ? ? ? ? ? ? ? ? ? ? ? ? ? ? html head title 第一个 CSS/title style type=text/css !-- .s1 {font-size: 57px;color: green;} .s2 {color: red;} -- /style /head body p class=s1 应用了 s1 样式 , 绿色，字体大小 57px /p span class=s2 应用了 s2 样式，字体为红色 /span /body 网页设计与制作实例教程 CSS 属性与属性值 固定简化语法如下： style type=“text/css” !-- . 样式名 1{ 样式属性 1: 属性值 ; 样式属性 2: 属性值 ; } . 样式名 2{ 样式属性 1: 属性值 ; 样式属性 2: 属性值 ; } -- /style 网页设计与制作实例教程 常用属性 网页设计与制作实例教程 文本对齐属性 (text-align) 这个属性用来设定文本的对齐方式。有以下值： left ( 居左，缺省值 ) right ( 居右 ) center ( 居中 ) justify ( 两端对齐 ) 示例代码如下： .p2 {text-align:right} 网页设计与制作实例教程 文本修饰属性 (text-decoration) 这个属性主要设定文本划线的属性。有以下值： none ( 无，缺省值 ) underline ( 下划线 ) overline ( 上划线 ) line-through ( 当中划线 ) 示例代码如下： .p2 {text-decoration: underline} 网页设计与制作实例教程 文本缩进属性 (text-indent) 这个属性设定文本首行缩进。其值有以下设定方 法： length ( 长度，可以用绝对单位 (cm, mm, in, pt, pc) 或者相对单位 (em, ex, px)) percentage ( 百分比，相当于父对象宽度的百分 比 ) 示例代码如下： .p1 {text-indent: 8mm} 网页设计与制作实例教程 行高属性 (line-height) 这个属性设定每行之间的距离。其值有以下设定方法： normal ( 缺省值 ) length ( 长度，可以用绝对单位 (cm, mm, in, pt,pc) 或者 相对单位 (em, ex, px)) percentage ( 百分比，相当于父对象高度的百分比 ) 示例代码如下： .p1 {line-height:1cm} 网页设计与制作实例教程 颜色属性 (color) 用颜色属性 (color) 可以改变文本的字体颜色。示 例代码如下： .p1{color:gray} 网页设计与制作实例教程