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选择器

四、文字效果

举例：

<span style="font-size:18px;"><style>

h1{ font-style:italic; }			/* 设置斜体 */

h1 span{ font-style:normal; }		/* 设置为标准风格 */

p{ font-size:18px; }

p.one{ font-style:italic; }

p.two{ font-style:oblique; }

</style></span>

关键字

含义

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完全参考手册。

这里举个例子：

<span style="font-size:18px;"><html>

<head>

<title>分别设置4边框</title>

<style>

<!--

img{

	border-left-style:dotted;	/* 左点画线 */

	border-left-color:#FF9900;	/* 左边框颜色 */

	border-left-width:5px;		/* 左边框粗细 */

	border-right-style:dashed;

	border-right-color:#33CC33;

	border-right-width:2px;

	border-top-style:solid;		/* 上实线 */

	border-top-color:#CC00FF;	/* 上边框颜色 */

	border-top-width:10px;		/* 上边框粗细 */

	border-bottom-style:groove;

	border-bottom-color:#666666;

	border-bottom-width:15px;

	width:180px;	/*设置图片宽度*/

	height:150px;/*设置图片高度*/

}

-->

</style>

   </head>

<body>

	<img src="grape.jpg">

</body>

</html></span>

显示效果图

六、背景设置

1、背景颜色

基本语法：

<span style="font-size:18px;">.topbanner{

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

}  </span>

2、背景图片

a、基本语法：

<span style="font-size:18px;"> background-image:url(bg2.jpg);      /* 背景图片 */  </span>

b、背景图片重复

举例：

<span style="font-size:18px;"><html>

<head>

<title>背景重复</title>

<style>

<!--

body{

	padding:0px;

	margin:0px;

	background-image:url(bg1.jpg);		/* 背景图片 */

	background-repeat:repeat-y;			/* 垂直方向重复 */

	background-color:#0066FF;			/* 背景颜色 */

}

-->

</style>

   </head>

<body>

</body>

</html></span>

e、背景图片位置

<span style="font-size:18px;">background-position:bottom right;	/* 背景位置，右下 */

background-position:30% 70%;		/* 背景位置，百分比 */

background-position:300px 25px;		/* 背景位置，具体数值 */</span>

f、固定背景图片

<span style="font-size:18px;">	background-attachment:fixed;		/* 固定背景图片 */</span>

七、链接特效

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

举例：

<span style="font-size:18px;">a:link{							/* 超链接正常状态下的样式 */

	color:#005799;				/* 深蓝 */

	text-decoration:none;		/* 无下划线 */

}

a:visited{						/* 访问过的超链接 */

	color:#000000;				/* 黑色 */

	text-decoration:none;		/* 无下划线 */

}

a:hover{						/* 鼠标经过时的超链接 */

	color:#FFFF00;				/* 黄色 */

	text-decoration:underline;	/* 下划线 */

}</span>

八、鼠标特效

<span style="font-size:18px;">	cursor:se-resize;/* 变幻鼠标形状 */</span>

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

九、滤镜

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

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

css+div网页设计（一）--基础知识的更多相关文章

  1. css+div网页设计（三）--与多种技术的混合应用

    本篇博客将介绍css与多种技术的混合应用,javascript可以为我们的页面更加方便的交互,xml使数据存储跟方便,ajax的异步更新可以加快我们网页的载入速度. 1.css与javascript ...

  2. css+div网页设计（二）--布局与定位

    在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...

  3. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  4. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  5. CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版

    CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...

  6. HTML 5+CSS 3网页设计经典范例 (李俊民,黄盛奎) 随书光盘​

    <html 5+css 3网页设计经典范例(附cd光盘1张)>共分为18章,涵盖了html 5和css3中各方面的技术知识.主要内容包括html 5概述.html 5与html 4的区别. ...

  7. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  8. 精通CSS+DIV网页样式与布局--制作实用菜单

    在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...

  9. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

随机推荐

  1. Codeforces Round #365 (Div. 2) D. Mishka and Interesting sum (离线树状数组+前缀xor)

    题目链接:http://codeforces.com/contest/703/problem/D 给你n个数,m次查询,每次查询问你l到r之间出现偶数次的数字xor和是多少. 我们可以先预处理前缀和X ...

  2. System.Data.SqlTypes.SqlNullValueException: 数据为空。不能对空值调用此方法或

    有可能读出的数据为NULL,可以这样改: 方法一:while (reader.Read()){ for (int i = 0; i < 7; i++) { if (reader.IsDBNull ...

  3. [置顶] 两台一级域名相同二级域名不同的服务器，怎么共享session

    比如www.hongchangfirst.com和video.hongchangfirst.com两个域名,一级域名相同,二级域名不同.每个服务器运行着不同的功能模块或者不同的子系统,他们使用不同的二 ...

  4. JavaScript神一样的变量系统

    话说上一篇介绍了JavaScript故事版的身世之谜.看官你估计也明白JavaScript出生之时,就未曾托于重任.布兰登-艾奇估计也没料到今天的JavaScript变得如此重要.要不然,当年他也不会 ...

  5. junit学习（3.x）

    自动化测试 测试所有测试类 import junit.framework.TestCase; import junit.framework.Assert; /** *测试类必须要继承TestCase类 ...

  6. Linux下安装Android Studio (Centos 7)

    首先去下载一个android studio的包. http://www.android-studio.org/ (友情一个) http://www.cnblogs.com/gssl/p/4963668 ...

  7. 功能强大支持64位操作系统的转Flash软件(doc转swf)：Print2Flash

    Print2Flash是一个虚拟打印机类的文档转换软件,因此只要是可打印的文档,都可以轻松转换为Flash文件,即SWF动画,特别是用于转换PDF.Word.Excel.PowerPoint等文档为S ...

  8. redis-在乌班图下设置自动启动

    一.修改redis.conf 1.打开后台运行选项,默认情况下,Redis不在后台运行: daemonize yes 2.配置log文件地址,默认使用标准输入,即打印在命令行终端 的窗口上 logfi ...

  9. web及移动应用测试知识总结

    发现自己对测试知识的掌握不够系统,在这里整理一下好了. 1. 通用测试点 功能测试 正向:输入一个有效的输入并且期望软件能够完成一些根据说明书规定的行为 逆向:输入一个无效的输入并且期望软件给出合理的 ...

  10. (转)用AGG实现高质量图形输出（四）

    AGG的字符输出 字符输出,对于AGG来说,这个功能可以处于显示流程的 不同位置.比如字体引擎可直接处于“Scanline Rasterizer”层向渲染器提供已处理完毕的扫描线,也可以处于“Vert ...