css样式使用_css

一、css简介

css，层叠样式表(英文全称：Cascading Style Sheets),用于修饰html

 

二、css选择器

1、id选择器：利用标签id属性进行匹配

#id值{样式设置}

2、class选择器：利用标签的class属性进匹配

.class值{样式设置}

3、标签选择器

标签类型{样式设置}

4、层级选择器

.c1 .c2 div{}

5、组合选择器

.c1,.c2,div{}

6、属性选择器(对选择的标签再次通过属性进行筛选)

.c1[n='chen']{}

注：样式使用的优先级：标签上的style优先，然后根据表秀尔顺序，越靠近标签越优先

可在头部直接通过   <link rel="stylesheet" href="css文件">  将css文件引用

 

三、常见css属性

color : #999999; /*文字颜色*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
line-height : 200%; /*设置行高*/ （居中常用）
font-weight:bold; /*文字粗体*/
text-align:center; /*文字中间对齐*/  （居中常用）

padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白

background-image : url(/image/bg.gif); /*背景图片*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*

a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/

border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/  
border-right : 1px solid #6699cc; /*右框线*/
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/

solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/

margin-top:10px; /*上边界*/
margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/
margin-left:10px; /*左边界值*/

position：relative|absolute|fixed 定位
opacity：透明度级别
z-index:层级顺序

display：none|inline|block|inline-block 显示与否以及块级和行内标签转换

float ：right|left 让标签飘起来