CSS具体的使用

2024-02-23 22:05:16

字体的设置

设置字体种类：font-family。取值例如宋体，隶书等等

设置字体大小：font-size。取值有如下几种：xx-small(极小),x-small（较小）,smaller,small（小）,medium（标准）,large（大）
设置字体的样式：normal（正常显示字体），italic（斜体字），oblique–歪斜体（倾斜角度大一点）

设置字体粗细：font-weight。取值有如下两种格式：

normal（正常显示），bold（粗体，数字700粗细值），bolder（加粗），lighter —细体（比正常字体稍微细一点）；
number（数字型，一般整百设置，有9个级别（100----900）数字取值越大越粗）设置字体阴影：text-shadow:x y z color。x,y,z分别表示水平阴影，垂直阴影，模糊距离，color表示阴影颜色

颜色的设置

color：值为英语单词，例如红色就是red RGB：颜色码，用三个数字表示颜色，数字范围是0~225，常见的颜色取值有，rgb(255,255,255)：白色，rgb(0,0,0)：黑色，rgb(255,0,0)：红色，rgb(0,255,0)：绿色等等

注：一般写值的话，写一个单词，下面会给出提示，常用颜色都有。

background-color 设置背景颜色

background-image 设置背景照片

背景的设置

background-attachment：背景附件的设置，是指设置背景图片是否随着滚动条的移动而移动。有两个取值，分别是scroll和fixed

scroll：表示背景图片随着滚动条的移动而移动
fixed：表示背景图片固定在页面上不动，不随滚动条移动而移动

background-repeat：设置背景照片的重复，其值有以下几个：

repeat：背景图片在水平和垂直方向平铺
repeat-x：背景图片在水平方向平铺
repeat-y：背景图片在垂直方向平铺
no-repeat：背景图片不平铺

background-position：背景图片的位置设置
值有两个分数，分别表示水平方向的百分比和垂直方向的百分比，如
0% 0%表示左上位置，100% 50%表示靠右居中

边框的设置
border-style：添加整个边框
border-top-style：添加上边框
border-bottom-style：添加下边框
border-left-style：添加左边框
border-right-style：添加右边框
对应边框取值的补充：
dotted：点线
dashed：虚线
solid：实线
double：双实线
groove：凹型线
ridge：凸型线
inset：嵌入式
outset：嵌出式

border-width：border的宽度
border-top-width：顶部边框的宽度
border-bottom-width：底部边框的宽度
border-left-width：左部边框的宽度
border-right-width：右部边框的宽度
取值有以下几种：
thin：细边框
medium：中等边框
thick：粗边框

border-color：边框的颜色
同理，也有上下左右四个方向的边框颜色，border-top-color，border-bottom-color，border-left-color，border-right-color
取值的话，直接写英语单词就好啦，或者用RGB数字，和上述颜色取值一样，这里就不赘述了。

border-radius：边框的圆角，值为像素
如果值取边框高度的一半，该边框就变成了圆形了

box-shadow:x y z color设置边框的阴影。x表示水平方向的偏移像素，y表示垂直方向的偏移像素，z表示模糊的像素值，color表示阴影颜色

内间距：

padding-top：上边距

padding-bottom：下边距
padding-left：左边距
padding-right：右边距
padding：复合设置
取值有两种格式，可以直接取像素值，也可以取百分比，就是整个屏幕中的屏占比。

CSS对文字的排版

letter-spacing：调整字符间距。用来控制字符之间的间距，这个间距实际上就是在浏览器中所显示的字符间的空格距离。取值： normal ---表示正常显示（默认）长度--可以使用负数，带上单位px(像素)

text-decoration：为文字添加如下划线，删除线等修饰
取值有如下几种：
underline：添加下划线
overline：添加上划线
line-through：添加删除线
blink：添加闪烁效果（只能在Netscape的浏览器中正常显示）
none：没有任何的修饰

text-align：控制文本的排列和对齐方式
取值有如下四种：
left：左对齐
right：右对齐
center：居中对齐
justify：两端对齐

行高的设置
line-height：用来控制文本内容之间行间距
取值有如下几种：
normal：浏览器默认的行高
数字：设置行高带上单位
百分比：表示行高是该元素字体大小的百分比

下面以一个二级菜单为例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#wai{
				/* 去掉列表前面的 “·” */
				list-style-type: none;
				padding: none;
				/* 使用盒子模型 */
				display: flex;
			}
			#nei{
				padding: 0;
				/* 默认不显示二级菜单 */
				display: none;
			}
			#wai .neili{
				margin: auto;
				height: 50px;	
				width: 100px;
				/* 行高和高度设置一样，就可以使内容垂直居中 */
				line-height: 50px;
				/* 左右排列 */
				float: left;
				/* 内容居中 */
				text-align: center;
				background-color: #FFFF00;
			}
			/* 当鼠标悬浮到主菜单时触发 */
			.neili:hover>#nei{
				/* 显示二级菜单 */
				display: block;
			}
			#nei .item{
				/* 给二级菜单列表不设置点 */
				list-style-type: none;
				border: 1px black solid;
				background-color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<ul id="wai">
			<li class="neili">首页
				<ul id="nei">
					<li class="item">首页</li>
					<li class="item">下载</li>
					<li class="item">了解更多</li>
					<li class="item">关于我们</li>
				</ul>
			</li>
			<li class="neili">下载</li>
			<li class="neili">了解更多</li>
			<li class="neili">关于我们</li>

		</ul>
	</body>
</html>

运行结果：

码农公寓

字体的设置

颜色的设置

背景的设置

内间距：

CSS对文字的排版

相关文章