CSS

最新推荐文章于 2026-01-05 11:04:12 发布

原创最新推荐文章于 2026-01-05 11:04:12 发布 · 348 阅读

CC 4.0 BY-SA版权

文章标签：

版本信息：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
元配置：
<meta http-equiv="refresh" content="10"/>
<meta http-equiv="content-type" content="text/html";charset="utf-8"/>

区元素：
<span></span>单独一行
<div></div>一个区域

CSS定义

一、伪类选择器：
focus 获得焦点
link 未访问过的链接
active 激活
hover 悬停，鼠标移入
visited 访问过的
选择器：状态
如：#aaa:hover{ }
p.first:hover{ }
二、各种样式声明
1.迟寸相关
width:为里边的元素定义的尺寸，增加内边距
height
overflow: 内容溢出时如何处理
visible/hidden/scroll（总是显示滚动条）
2.框模型 box modal
padding:填充
margin：外边距
多种写法：
padding:30px;
padding-left/top/right/bottom;
padding:10px 20px;上下左右
padding:10px 20px 30px 40px;上下左右
margin:0px auto;----居中

3.背景的设置
背景色：
background-color:颜色;
背景图像：
background-image:url()
background-repeat:repeat/repeat-x/repeat-y
background-position:left top（center 50%）
background-attachment:scroll/fixed;
scroll：背景和内容一起滚动
fixed:背景固定，类似于水印的效果
4.文本格式化
指定字休：font-family:
指定颜色：color:
字体大小：font-size:
字体加粗：font-weight:normal/bold;
文本排列：text-align:left/right/center;
行高：line-height:
文字修饰:text-decoration:none/underline;
文本缩进：text-indent:
5.表格模式：表格特有的
border-collapse:collapse;单元格边框的合并
vertica-align:center;单元格中垂直方向上位置
6.浮动
float:left/right;
clear:left/right/both;
7.display----设置元素的显示方式

html元素行内元素和块级元素
行内元素：位于一行中，高和宽--自适应
块级元素：独占一行，自定义高和宽
有些时候，希望改变元素的显示方式
display:inline/block/none
8.列表的样式---特定于列表元素
list-style-type:none/disc/circle;---列表项前面的标识
list-style-image:url();