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选择器
四、文字效果
举例：
<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>显示效果图
六、背景设置
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的混合应用。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/118100.html原文链接：https://javaforall.cn