html伪类选择器hov,CSS(示例代码)

CSS的语法

位置

//CSS代码

语法

选择器{

属性名1：属性值1；

属性名2：属性2；

}

列：

h1{z

font-size; --字体大小

color: blue; --字体颜色

}

注意：多个属性用分号分隔

类选择器

语法：

.Class属性值{

。。。。。

}

步骤：

第一步：给指定的html标签加上class属性

第二步：在style中写

.class属性值{

。。。。。

}

ID选择器

语法:

#ID属性值{

XXXXX

}

步骤:

第一步：给指定的html标签加上ID属性

第二步：在style中写

#ID属性值{

XXXXXXX

}

行内样式

使用style属性引入样式。

列：

XXX

内部样式

在html中写style

列h1{

XXXXX

}

外部样式表表

把CSS代码保存在以CSS结尾的文件中(层叠样式文件)

把CSS文件引入html中；

引入方式两种：

第一种：链接方式

第二钟:导入方式

@import url("文件路径")；

优先级

行内样式>内部样式>外部样式(就近原则)

ID选择器>class选择器>标签选择器

高级选择器

后代选择器

父标签 子标签{

xxxxx

}

交集选择器

标签选择器(class选择器或者ID选择器){

XXXX

}

并集选择器

选择器1，选择器2，选择器3，。。。选择器n{

XXXXXXXXXXXXX

}

字体样式

font-family:字体类型

font-size:字体大小

font-weight:字体的粗细(bold)

font-style:字体的倾斜(italic)

font:倾斜 粗细 大小 类型

文本样式

color:颜色

text-align：文本水平对齐方式(left丨center丨right)

text-indent:首行缩进

line-height:行高

text-decoration:修饰线(underline丨overline丨line-through)

vertical-align:垂直对齐方式(top丨middle丨bottom)

注意:vertical-align:用于td中。

超链接伪类

a:link：表示没有访问

a:visited：表示被访问后

a:hover:鼠标悬浮

a:active:鼠标按下未松开

编写顺序：link>visite>hpver>active

背景样式

background-color：背景颜色

background-image:url(图片地址)背景图片

background-repeat:图片平铺方式(no-repeat,repeat,repeat-X,repeat-Y)

background-position:图片的位置(X,Y丨X%,Y%丨center,left,right丨top,center,bottom)

简单写法:background:颜色,图片,位置,平铺方式

列表样式

list-stype-type：列表样式

list-stype-image:url(图片样式)

list-stype-position:位置(inside丨outside)

简单写法：list-stype:图片样式 位置

盒子模型

width:宽

height:宽

border:边框

padding:内边框

margin:外边距

边框

border:简写

border-color:颜色

border-width:边框宽度

border-style:边框的风格

注意：边框分为上右下左，可以分别设置值

border-color:red blue green yellow;

外边距

margin:外边距

margin-top:上外边距

margin-left:左外边距

margin-right:右外边距

margin-bottom:底外边距

内边距

padding:内边距

padding-top:上内边距

padding-left:左内边距

padding-right:右内边距

padding-bottom:底内边距

display属性

display:none;表示的隐藏元素

display:block;块级元素(显示)

display:inline;内联元素(显示)

浮动

float:left,right,none;

注意:a.浮动元素会把当前的块级元素变成内联元素

b.不在标准文档流中.(不会按普通元素排版)

清除浮动

clear:both(清除左右浮动)；

left(清除左浮动)；

right(清除右浮动)；

溢出处理

overflow:none(默认)

hidden(隐藏)

scroll(滚动)

auto(自动滚动)

注意:可以通过overflow:hidden设置浮动元素的父元素的高度，使它包裹整个浮动元

元素定位(position)

static:默认

relative:相对定位

absolute:绝对定位

fixed:固定定位(建议不要使用 部分浏览器不兼容)

注意：a.相对布局的和决定布局如果它的直接父标签是body，那么相对位置和绝对位置

的起始点不相同，如果他们的直接父标签的div，那么他们的起始点都在父标签的左上角。

注意：b.绝对布局都是从父标签的左上角开始，相对布局遵从标准文档流格式。

注意：c.绝对布局一定要设置top或者left才会生效。

重叠关系(z-index)

默认值为0，

值可以是任何数，

值越大，位置在越前面。

透明度

opacity:0-1 值越小越透明