css+div网页设计(一)–基础知识

css+div网页设计(一)–基础知识

大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。

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

关于css+div的总体结构图总结例如以下:
css+div网页设计(一)--基础知识

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

一、css概念;

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

二、使用css控制页面方法

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


a、行内样式

css+div网页设计(一)--基础知识

ps:行内样式是最简单的css用法,可是因为每个标记採用了一个style,后期维护成本非常高,不推荐。


b、内嵌式

css+div网页设计(一)--基础知识

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


c、链接式

css+div网页设计(一)--基础知识

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


d、导入式

css+div网页设计(一)--基础知识

ps:导入式最大的优点就是能够让一个HTML文件导入多个css样式表。


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


三、css选择器

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


a、标记选择器。

css+div网页设计(一)--基础知识


b、类别选择器

css+div网页设计(一)--基础知识


d、id选择器

css+div网页设计(一)--基础知识


四、文字效果

举例:

<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>

keyword

含义

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>


显示效果图

css+div网页设计(一)--基础知识

六、背景设置


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>


css+div网页设计(一)--基础知识

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+div网页设计(一)--基础知识

九、滤镜

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


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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118100.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • android跨平台开发_手机游戏跨平台开发

    android跨平台开发_手机游戏跨平台开发安卓跨平台开发实践

  • mysql分页的limit参数「建议收藏」

    Mysql的分页的两个参数select*fromuserlimit1,21表示从第几条数据开始查(默认索引是0,如果写1,从第二条开始查)2,表示这页显示几条数据

  • show java吧_求助【java吧】_百度贴吧

    show java吧_求助【java吧】_百度贴吧该楼层疑似违规已被系统折叠隐藏此楼查看此楼packageworker2;importjava.io.BufferedReader;importjava.io.BufferedWriter;importjava.io.FileInputStream;importjava.io.FileNotFoundException;importjava.io.FileOutputStream;im…

  • 腾讯云ssl证书_腾讯云认证证书

    腾讯云ssl证书_腾讯云认证证书如今在网站使用https已经是非常普遍的事情,对于站长来说,https证书似乎已经成为了必备,今天我们为大家介绍申请腾讯云https证书的方法与过程首先打开腾讯云的管理控制台,进入证书管理页面,我们可以看到这里有一个叫做申请证书的按钮,点击它腾讯云会让你选择证书的类型,因为我们要申请免费的,选择左边的亚洲诚信免费版DVSSL证书即可,右边的为收费证书填入自己的域名以及申请邮箱,注意域名的格式为你需…

  • Linux下LDAP统一认证解决方案「建议收藏」

    企业内部需要认证的服务很多,员工需要记住很多的密码,即使对这些服务进行相同的密码设置,也存在很大的安全隐患。笔者目前工作的企业就是如此,每一个新员工的到来管理员都要初始化很多密码,而这些密码都被设置成了“888888”等弱密码,由于各种软件的认证机制之间没有使用一个统一的标准,员工无法一次性修改所有服务的密码,这导致很多即使是入职很久的员工都还在使用这个“众所周知”的密码。另外—个比较严

  • for while循环语句举例python_for循环高级用法

    for while循环语句举例python_for循环高级用法程序在一般情况下是按顺序执行的。编程语言提供了各种控制结构,允许更复杂的执行路径。循环语句允许我们执行一个语句或语句组多次,下面是在大多数编程语言中的循环语句的一般形式1.循环控制语句在了解循环语句的使用方法之前,我们先来了解几个循环控制语句:1)…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号