了解css技术基础之用css控制样式

CSS样式一般指CSS（层叠样式表），层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

用css控制超链接样式

超链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置。还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。在网页中能成为超链接的元素可以是一段文本或者是一个图片。当浏览者选择已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型打开或运行。

1、改变超链接的基本样式

网页上使用的超链接通常是文字或者图片，以下是在网页中实现文字超链接和图片超链接的代码：
< a href ="https://www.31fabu.com" >浙江网盛生意宝股份有限公司< /a >
< a href ="" >< img src="picture.jpg" / >< /a>
A:link：设置超链接在未被访问前的样式
A:active：设置超链接在被用户激活（在鼠标单击与释放之间发生的事件）时的样式。
A:vistited：设置超链接在其链接地址已被访问过时的样式。
A:hover：设置超链接在其鼠标悬停时的样式。
分别为超链接的每个状态设置样式：
A:link{color:green}设置超链接未被访问前文字颜色为绿色
A:vistited{color:orange}设置超链接已访问过时文字颜色为橘色
A:hover：{color:blue}设置超链接在其鼠标悬停时文字的颜色为蓝色
A:active：{color:red}设置超链接在被用户激活时文字颜色为红色。
若对超链接的四种状态都设置为同一种样式，则只需设置a标签的样式即可。
A{color:#000000}设置超链接在任何状态下都是黑色。
若设置a标签的css属性后，再设置其伪类属性，则可以改写该状态下超链接的属性。举例：
设置a标签的文字颜色为黑色后，再设置a：hover的文字颜色为蓝色，则可以使鼠标滑过超链接时，文字为蓝色，其余三个状态仍为黑色。
在默认情况下，文字作为超链接时会带有下划线，用于提示该文字可链接。若要消除该超链接的下划线，就要将text-decoration属性设置为none。
A{text-decoration:none}

2、丰富超链接的表现形式

网页中的超链接往往具有非常丰富的表现形式，综合应用文字和图片能使超链接的样式产生多种变化。
超链接背景图的巧妙运用：为了提高用户的注意，提高点击率，在网页中的超链接常使用一些引人瞩目的图片来修饰。通常将这些图片作为背景插入到超链接中。
超链接翻转效果：除了能给a标签设置背景图也能给超链接的伪类设置背景图。若给a:hover设置背景图，那么当鼠标滑过该超链接就能使图片产生翻转效果。

用css控制列表样式

网页中的列表是一个非常有用的元素。列表通常是带圆点或者编号的短句，用于列出条款、说明等。列表用于包含内容相同或者相近的元素。使用css样式能改变列表的排列方式、列表符的形式和位置等属性。使用css样式设置列表后，能使列表发生很多变化。在实际应用中，列表常被用于设置导航菜单、相册和文章标题等。列表在制作标准HTML页面时使用频率非常高。

1、列表的类型

列表包含三种类型，分别是无序列表、有序列表和定义列表。在实际运用中，常使用无序列表来实现导航和新闻列表的设置。使用有序列表实现条文款项的表示。使用定义列表来制作图文混排的排版模式。列表对于制作有于义的HTML文档非常重要。
无序列表是指列表为圆点或者其他图形，而非数字的列表。无序列表由< ul >< /ul >标签包含多个< li >< /li >标签。标签ul的作用是说明其包含的列表是无序的，每组li标签用于包含一个列表项目。
有序列表是指列表符为数字的列表。有序列表由< ol >< /ol >标签包含多个< li >< /li >标签。标签< ol >的作用是说明其包含的列表是有序的。每组li标签用于包含一个列表项目。
定义列表有别于有序列表和无序列表。定义列表由< dl >< /dl >标签包含< dt >< /dt >和< dd >< /dd >标签。标签< dl >的作用是说明其包含的列表是一个定义列表。标签dt包含的内容是一个概念。标签dd包含的内容是该概念的解释。

2、改变列表符的样式

css中提供了list-style-type、list-style-images、list-style-position属性来改变列表符的样式。由于定义列表在默认情况下没有列表符。所以上述三个属性对定义列表来说是无效的。
使用自带的列表符：有序列表和无序列表都有默认的列表符。Css中的list-style-type属性中包含多个值可用于改变默认的列表符。以下是使用list-style-type属性的通用语法：
list-style-type：type
用背景图片改变列表符：很多网页的新闻列表或者文章列表都带有非常小的列表符。使用css中的list-style-images属性能将一张小图片替换默认的列表符。
改变列表符的位置：css提供的list-style-position属性用于改变列表符和列表的相对位置。该属性包含两个值，分别是inside和outside。默认情况下，list-style-position的属性为outside，这两个值分别表示：outside：列表项目标记放置在文本外，且环绕文本不根据标记对齐。
Inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。

用css控制表单样式

表单用于网页中发送数据。常见的表单应用有用户注册、用户登录和提交报名表格等。以前设计师通常用表格来设计表单。表单样式单调。现在配合css控制表单元素能制作出样式外观非常精美的表单。使用css样式能控制表单的边框、背景色和背景图，适当运用这些元素能创建出多种样式的表单。

1、了解表单元素

一个表单由三个基本元素组成：第一个是表单标签< form >< /form >，它包含了处理表单数据所用CGI程序的URL以及数据提交到副武器的方法；第二个是表单域，它包含了文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉选择框和文件上传框等；第三个是表单按钮框，它包含提交按钮、复位按钮和一般按钮，表单按钮用于将数据传送到服务器上或者取消输入。
form标签和fieldset标签：表单标签就是form标签。Form标签的功能是用于申明标单，定义采集数据范围，里面包含的数据将被提交到副武器或者电子邮件里。通常，网页设计师会将form标签作为一个容器来安放表单域。但在标准HTML文档里，应该使用语义明晰的< fieldset >< /fieldset >标签来安放整个表单。
使用< fieldset >< /fieldset >标签能对表单的相关信息进行分类。fieldset标签中可以包含legend标签，用于插入表单的标题为表单进行分类。
表单域和表单按钮：常用的表单域有文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉选择框和文件上传框等。

2、使用css美化表单元素

css中没有对表格元素特定的属性，但是使用css的其他属性也能够美化表单元素。