本文详细介绍了网页设计的四大要素，重点探讨了CSS在网页设计中的应用，包括内容、格式、标记和动作。内容强调了CSS作为扩展HTML语法的重要角色，详细讲解了CSS的样式设计基础、选择器、属性和值。此外，还涵盖了文本和段落样式、图片和背景样式、列表样式、表单样式、表格样式、链接样式以及滤镜效果的设置方法。通过实例和技巧，帮助读者掌握网页设计中的CSS实战技巧。
一、简介
对于网页设计，其一是内容，其二是格式，其三则是标记，其四则是动作。
具体而言，网页设计是对内容的设计，因此内容是根本的内在。其次，对于网页设计而言，格式是设计的表现，没有优秀的格式，则意味着设计的失败。最后，对于网页设计而言，标记是表现设计痕迹的记录。如果没有标记，那么再好的设计也是没有基础的空中花园。至于最后的动作，则是由一种便于人机交互的脚本语言编写的一些指令代码，来实现动态的一些小动作的执行，展现更加丰富的内容形式。
二、内容
CSS（Cascading Style Sheets，层叠式样表），可以与HTML或XHTML超文本标记语言配合来定义网页的外观。
CSS用于扩展HTML的语法功能。CSS是网页设计的一个突破，解决了网页布局的问题。
目录
章 CSS样式设计基础
初始CSS
CSS选择器
CSS属性和属性值
章 使用CSS设置文本和段落样式
字体属性
段落属性
实例应用
章 使用CSS设置图片和背景样式
图片样式设置
背景样式设置
实例应用
章 使用CSS控制列表样式
有序列表
无序列表
实例应用
章 使用CSS设计表单样式
表单form
插入表单对象
菜单和列表
表单样式实例
章 使用CSS设计表格样式
创建表格
设置表格基本属性
设置表格的属性
实例应用
章 使用CSS定义链接样式
链接样式设计基础
实例应用
章 CSS中的滤镜
滤镜概述
动感模糊
对颜色进行透明处理
设置阴影
对象的翻转
发光效果
X光片效果
波形滤镜
滤罩效果
章 CSS样式设计基础
初始CSS
CSS被广泛用于网页设计之中，拓展HTML的语法效果。
CSS基本语法
CSS 的语法结构仅由三部分组成：选择符、样式属性和值。其基本语法如下：
选择符{
样式属性:取值;
样式属性:取值;
……
}
选择符用于选择这组样式的适用对象；属性是CSS样式控制的核心，对于每一个标签，CSS都规定了丰富的属性，如颜色、大小、定位等；值是指属性的值，分为范围值和数值两种，分别对应一个范围和一个精确的数字。
添加CSS的方法有四种：链接外部样式表、内部样式表、导入外部样式表和内嵌样式。
链接外部样式表如下：
<head>
...
<link rel=stylesheet type=text/css href=slstyle.css>
...
</head>
内部样式表如下：
<head>
<style type="text/css">
<!-
body{
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
}
-->
</style>
</head>
导入外部样式表如下：
<head>
...
<style type=text/css>
<!-
@import style.css
其他样式表声明
->
</style>
...
</head>
在链接的形式上，导入外部样式表与链接外部样式表差不多，但是在实际上，导入意味着将链接指向的样式表并入到内部，类似于内部样式表的存在方式。
内嵌样式如下：
<table style=color:red; margin-right:220px>
CSS选择器
知道在何种情况下选择何种选择器，无疑是一种十分重要的技巧。
选择器概述
选择器是CSS中重要的一部分，也是CSS的根基。选择器用于寻找作用对象。
使用选择器原则如下：
一、准确地选择需要控制的标签；
二、使用最合理优先级的选择器；
三、HTML和CSS要尽量美观；
注意事项为：
一、最常用的选择器是类选择器；
二、样式相同或类似的标签应采用类选择器与标签选择器相结合的方式；
三、少数情况下会使用到ID选择器，按照习惯而定。
标签选择器：顾名思义，是将HTML中的标签作为选择器；
类选择器：类选择器的前面需要增加.号。但是类选择器是可以根据自己的想法定义的。
ID选择器：ID选择器与类选择器的使用方法基本相同，不同之处是ID选择器只能在页面中使用一次，即id属性是唯一的，需要指示符#在前面。
伪类选择器和伪元素：伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类选择器的最大作用就是可以对链接的不同状态定义不同的效果通常与锚标记<a>一起应用，表示动态的链接的四种不同的状态：link,visited,active,hover 。
selector:link{}
群组选择器：在好几个地方要使用到相同的设置时，需要一起写。基本语法如下：
e1,e2,e3{}
相邻选择器：相邻选择器可以选择紧接在另一个元素后的元素，它们具有一个相同的父元素。
通用选择器：*表示通用，可以进行全局设置。
CSS属性和附属值
CSS属性的一些元素可以增强样式表的功能。这些功能提供不同的及计量单位给我们，也提供不同的颜色等。
章 使用CSS设置文本和段落样式
网页中的大量文字信息，称为文本。文本由文本样式和段落样式构成。使用CSS定义的文字样式更加具有表现力。
字体属性
字体font-=family
说明：该字体必须预装在计算机上；
字号:font-size
字体风格：font-style
nomral是正常的字体,italic是斜体的字体,oblique为偏中间的表现形式。
字体加粗：font-weight
字体变形：font-variant
段落属性
CSS控制的段落的属性，主要包括词间距、文字修饰、纵向排列、文本转换、文本排列、文本缩进和行高等。
单词间隔word-spacing
字符间隔letter-spacing
文字修饰text-dexoration
垂直对齐方式vertical-align
文本转换text-transform
水平对齐方式text-align
文本缩进text-indent
文本行高line-height
处理空白white-apace
文本反排unicode-bidi、direction
章 使用CSS设置图片和背景样式
对于一个网站而言，精美的图片和背景是设计过程中十分重要的事情，可以提高用户的审美感受。
图片样式设置
在网页中适当地使用图片，能够充分地展现网页的主题和增强网页的美感。
定义图片边框
文字环绕图片
背景样式设置
设置页面背景颜色
定义背景图片
背景图片的重复
background-repeat：取值
背景关联
backgroud-attachment:scroll/fixed
定义背景图片位置
background-position:位置取值
鼠标经过图片显示文字
鼠标移上改变图片透明度
将正方形图片显示为圆形图片
多图排列显示放大特效
章 使用CSS控制列表样式
有序列表
语序列表标签<ol>
有序列表序号类型type
在默认的情况下，有序列表的序号是数字，通过type属性可以改变序号的类型
有序列表起始数值start
无序列表
无序列表标签<ul>
无序列表的类型type
目录列表标签<dir>
目录列表一般用来创建多列的目录列表。
定义列表标签<dl>
菜单列表标签<menu>
实例应用
设计背景变换的导航栏目
设计横向导航菜单
竖排导航
设计网页下拉菜单
章 使用CSS设计表单样式
表单form
程序提交action
表单名称name
传送方法method
编码方式enctype
目标显示方式target
插入表单对象
文字 字段text密码域password
单选按钮radio
复选框checkbox
普通按钮button
提交按钮submit
重置按钮reset
图像域image
隐藏域hidden
文件域file
菜单和列表
下拉菜单
列选项
设置输入文本的样式
下画横线代替文本框特效
随鼠标单击换色的输入框
章 使用CSS设计表格样式
创建表格
表格的基本构成table\tr\td
设置表格标题caption
设置表格基本属性
设置表格宽度width
设置表格高度height
设置表格对齐方式align
设置表格的属性
表格的边框宽度border
表格边框颜色bordercolor
设置表格阴影
设置表格的渐变背景
实例应用
变换背景色的表格
表格隔行换色特效
dl\dt\dd实现表格布局
鼠标经过时改变表格的颜色
CSS用虚线美化表格的边框
章 使用CSS定义链接样式
链接样式的设置基础
光标属性cursor
定义下划线样式text-decoration
为访问过的链接a:link
鼠标悬停状态a:hover
已访问过的链接a:visited
超链接的激活样式a:active
实例应用
不同的鼠标显示样式
向链接添加不同的样式
按钮式超链接
翻转式超链接
设计导航菜单
章 CSS中的滤镜
滤镜概述
使用简单的方法对网页中的对象进行特效处理，类似PS。
动感模糊
对颜色进行透明处理
设置阴影
对象的翻转
发光效果
X光片效果
遮罩效果
扫一扫
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
