CSS 程序员的CSS必知

来源：互联网发布：wps办公软件好用吗编辑：程序博客网时间：2024/06/04 19:45

CSS 美化页面

clear : both 清除浮动,当前一个元素设置了float值时使用

样式的分类

-->行内任意一个标签都有style

语法：

样式种类 : 数据；样式种类 :数据（多样式用分号隔开）

-->内嵌嵌入在head中

<head>

span{

color:#6699ff;

font-family:华文行楷

}

</style>

</head>

-->外部嵌入在head中,将样式写在一个css文件中

-->导入

@import url(样式文件名);

类似模块化编程

样式优先级

行内 >链接（外部） > 内嵌 >导入

就近原则

一般样式格式：具体针对的内容-参数-特定的内容

border - top -color :red;

**********************常用操作*****************

页面居中：在最外层DIV中设置：margin:0px auto;

手形：cursor:pointer;

pading-内边距

margin-外边距

solid 实线

z-index:num 只对relative有效，改变层级显示级别，数字越大越在上

position:absolute

浮动元素后面的元素要添加：clear:both;

图片重复：background-image:repeat:repeat-y/x norepeat

表格细框线（合并边框线）：border-collapse:collapse;

position:relative;在最外层加上相对定位后，其内中的元素用top left等形似进行相对定位，就可不用margin了

*************操作******************

background-image:url(line.gif);//添加背景图片

background-repeat:repeat-x;//图片重复,更改重复方式，no-repeat无重复

background-position:bottom;//位置为靠下 top

padding-bottom:10px;//内边距-向下10px

padding-left:300px;//内边距-距左300px;

border-collapse:collapse;//表格细框线（合并表格线）

cursor:pointer;//手形

***********************************************

选择器：

标签选择器：h1 div 等

id选择器：#id #+ID的名字

类选择器：class = "c1" .c1{}前为点

集合选择器：h1,#id,.c1{……}逗号分隔

嵌套选择器：div h1 .cc {……}空格分隔

标签加类选择器：h1.cc{……}h1下使用了.cc类的

通过选择器：*对所有页面元素都有效

伪类选择器：

a:hover{……} 鼠标移入时

text-decoration:none 去下划线

盒子模型

margin

盒子与盒子之间的关系

-> 水平关系，Margin之和

-> 垂直距离，取Margin大的

-> 内关系(盒子里面还有盒子)