热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

css+div网页设计

宏观了解css+div的各个方面。

css是网页制作不可缺少的部分,我会用两篇博客为大家展示css的基本用法。

关于css+div的整体结构图总结如下:

本篇博客主要介绍css的基础知识。

一、css概念;

css(级联样式表):它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

二、使用css控制页面方法

css控制页面的方法共有四种,行内样式、内嵌式、链接式、导入式。


a、行内样式


ps:行内样式是最简单的css使用方法,但是由于每一个标记采用了一个style,后期维护成本很高,不推荐。


b、内嵌式


ps:适合于对特殊页面单独设置样式。


c、链接式


ps:链接式是使用频率最高也是最实用的方法。


d、导入式


ps:导入式最大的好处就是可以让一个HTML文件导入多个css样式表。


e、四种页面控制方法的优先级:行内样式>链接式>内嵌式>导入式


三、css选择器

选择器是css中的重要概念,所有的HTML语言中的标记都是通过不同的选择器进行控制的。


a、标记选择器。



b、类别选择器



d、id选择器



四、文字效果

举例:

关键字

含义

Font-family

设置字体样式,例如:宋体,楷体等

Font-size

设置字体大小,单位可以是in,cm,mm,%相对值等

Color

字体样色,可以是red等单词,#******rgb(*%,*%,*%)

Font-weight

字体粗细,可以是数字,normal

Font-style

字体是否为斜体:italic

text-decoration

字体的下划线,顶画线,删除线等

text-transform

英文字母大小写问题

text-align

对齐方式

letter-spacing

字间距

line-height

行间距



五:图片效果

图片属性其实也没有什么特殊的,无非就是边框样式,大小、对其方式等,这里就不一一列举了,有兴趣的同学和自行查看css完全参考手册。

这里举个例子:





   

	


显示效果图


六、背景设置


1、背景颜色

基本语法:

.topbanner{  
    background-color:#fbc9ba;   /* 设置banner类的背景色 */  
}  


2、背景图片

a、基本语法:

 background-image:url(bg2.jpg);      /* 背景图片 */  
b、背景图片重复

举例:





   




e、背景图片位置

background-position:bottom right;	/* 背景位置,右下 */
background-position:30% 70%;		/* 背景位置,百分比 */
background-position:300px 25px;		/* 背景位置,具体数值 */

f、固定背景图片

	background-attachment:fixed;		/* 固定背景图片 */


七、链接特效

属性 说明
a:link 正常浏览时候的样式
a:visited 被点击的超链接样式
a:hover 鼠标经过时候的样式
a:active 单机超链时候的样式


举例:

a:link{							/* 超链接正常状态下的样式 */
	color:#005799;				/* 深蓝 */
	text-decoration:none;		/* 无下划线 */
}
a:visited{						/* 访问过的超链接 */
	color:#000000;				/* 黑色 */
	text-decoration:none;		/* 无下划线 */
}
a:hover{						/* 鼠标经过时的超链接 */
	color:#FFFF00;				/* 黄色 */
	text-decoration:underline;	/* 下划线 */
}

八、鼠标特效

	cursor:se-resize;/* 变幻鼠标形状 */

cursor属性定制了好多鼠标特效大家可以参照这张表


九、滤镜

css中的滤镜只能在IE浏览器中使用,我们以后要做的软件尽量还是要对绝大部分浏览器都支持的,这里就不多说滤镜的知识了。滤镜的标识符为filter,总体上和其他css语句相同,有兴趣的朋友自己再查看相关资料。


今天的内容就讲这么多,下篇博客将为大家介绍css+div的美化布局以及css与Javascript、ajax、jquery的混合应用。



推荐阅读
author-avatar
手机用户2502910651
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有