【Dongle】【Web】CSS总结

最新推荐文章于 2021-03-14 22:10:07 发布

Dongle_Kevin

最新推荐文章于 2021-03-14 22:10:07 发布

阅读量539

点赞数

分类专栏： Web 文章标签： css web html

本文链接：https://blog.csdn.net/Dongle_74/article/details/52548844

版权

Web 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

通过之前的学习，我们了解到CSS对于改变html标签样式非常方便有效。下面我们来了解一下CSS：

CSS简介

CSS（Cascading Style Sheets）全称为层叠样式表，用于控制页面样式，将页面样式与网页分离的一种标记性语言。

那么什么是标记语言呢？标记语言，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。标记语言不仅仅是一种语言，就像许多语言一样，它需要一个运行时环境，使其有用。提供运行时环境的元素称为用户代理。

故而CSS作为一种标记性语言，只是用来辅助的html显示的，有html才能运行，没有html就不能运行；相反，html有css可以运行，没有css照样可以运行。

那么为什么要使用CSS呢？原因在于html对于修改某一类选择器样式必须找到全部的这类选择器，然后一个一个修改，过于繁琐，所以才有了CSS的使用。

CSS总结

css作用

1.结构与样式分离的方式,便于后期维护与改版;
2.样式定义精确到像素的级别;
3.可以用多套样式,使网页有任意样式切换的效果

4.降低服务器的成本

CSS设计

文字效果

字体font-family

font-family:黑体, 幼圆;

文字大小：font-size

p.inch{ font-size: 0.5in; }
p.cm{ font-size: 0.5cm; }
p.mm{ font-size: 4mm; }
p.pt{ font-size: 12pt; }
p.pc{ font-size: 2pc; }

文字颜色color

color:#333333;

文字粗体font-sty：bold

h1 span{ font-weight:lighter;}
span{ font-size:28px; }
span.one{ font-weight:100; }
span.ten{ font-weight:bold; }
span.eleven{ font-weight:normal; }

文字斜体font-style：italic

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

下划线、顶划线、删除线、闪烁：text-decoration

p.one{ text-decoration:underline; }			/* 下划线 */
p.two{ text-decoration:overline; }			/* 顶划线 */
p.three{ text-decoration:line-through; }	/* 删除线 */
p.four{ text-decoration:blink; }			/* 闪烁 */

字母大小写：text-transform

p.one{ text-transform:capitalize; }		/* 单词首字大写 */
p.two{ text-transform:uppercase; }		/* 全部大写 */
p.three{ text-transform:lowercase; }	/* 全部小写 */

图片效果与盒子模型

图片

如同div，可以设计大小，也可以设置位置，也可以设计边框样式

	width:70%;		/* 相对宽度 */
	height:110px;	/* 绝对高度 */

盒子模型

页面背景

可以加图片，或者也可以直接设置背景颜色等等

<pre name="code" class="css">	background-image:url(03.gif);	/* 页面背景图片 */
	background-color:#FFFF00;		/* 页面背景颜色 */

由于存在div，所以也可以进行页面背景分块。如果加载背景图片，可以设计是否重复，并且可以设置重复类型。repeat-y垂直方向重复，repeat-x水平方向重复，no-repeat不重复。

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

表格和表单

表格标记有caption标题、th列、tr行、td单元格。可以设计表格的颜色和边框，通过将表格奇数行和偶数行的颜色不同来方便使用者查看数据。

body{
	background-color:#ebf5ff;	/* 页面背景色 */
	margin:0px; padding:4px;
	text-align:center;			/* 居中对齐（IE有效） */
}
.datalist{
	color:#0046a6;				/* 表格文字颜色 */
	background-color:#d2e8ff;	/* 表格背景色 */
	font-family:Arial;			/* 表格字体 */
}
.datalist caption{
	font-size:18px;				/* 标题文字大小 */
	font-weight:bold;			/* 标题文字粗体 */
}
.datalist th{
	color:#003e7e;				/* 行、列名称颜色 */
	background-color:#7bb3ff;	/* 行、列名称的背景色 */

表单元素有input(text、radio、checkbox、summit、textarea、...)和Select等。通过设计按钮的样式，可以使按钮像文本一样的显示效果。

.btn{
	background-color:transparent;		/* 背景色透明 */
	border:0px;							/* 边框取消 */
}

页面与浏览器元素

超链接

可以设置未访问时、访问时、访问后的样式

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

可以设置鼠标访问时的变幻效果

a.help:hover{								/* “帮助”按钮的样式 */
	cursor:help;							/* 变幻鼠标形状 */
}

滚动条

同其他元素相同，可以设置大小（限文本）、颜色、背景等等

	background-color:#efe5e2;
	scrollbar-3dlight-color: #B0C4DE;
	scrollbar-arrow-color: #34547E;
	scrollbar-base-color: #FF0000;		/* 基调颜色 */
	scrollbar-darkshadow-color: #1D4272;
	scrollbar-face-color: #CFDFF4;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-shadow-color: #5380BA;

菜单

项目列表的编号可以设置编号方式，也可以选择图片编号

ul{
	font-size:0.9em;
	color:#00458c;
	list-style-type:decimal;		/* 项目编号 */
}<pre name="code" class="css">	list-style-image:url(icon1.jpg);	/* 图片符号 */