Css样式冲突的示例分析

这篇文章主要介绍了CSS样式冲突的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

CSS样式的冲突:

1.ID选择器 > 类选择器 > 标签选择器

2.行级样式表 > 内嵌样式表 > 外部样式表

外部样式表的ID选择器 > 内嵌样式表的标签选择器

原则： 就近原则

CSS的各种属性(掌握)

CSS中尺度单位的介绍

CSS的单位:

a. 绝对单位 1in=2.54cm=25.4mm=72pt=6pc , pt是点或者磅，pc是派卡

b. 相对单位：px, em(印刷单位相当于12个点), %(相对周围的文字)

*字体设置

p{

font-size:50px;

font-style:italic ;

font-weight:bold;

font-family:幼圆;

font-variant:small-caps;

}

*文本设置

p{

letter-spacing:0.5cm ;

Word-spacing:1cm;

text-align:center;

text-decoration:overline;

text-transfORM:lowercase;

color:red ;

}

*背景设置

body{

background-color:#ff99ff ;

background-image:url(images/2.gif) ;

background-repeat: no-repeat;

background-position:center right;

background-attachment: scroll ;

}

*列表设置

ul li{

list-style:none;

list-style-image:url(images/2.gif) ;

margin-left:80px;

}

*盒子模型(border margin padding)

padding:是内容到边的距离

border: 是边的粗细

margin:是控件到控件的距离

*定位设置(position,float,clear,z-index)

#d{

position: absolute;

left:100px;

top:100px;

border:1px solid red ;

width:100px;

height:100px;

background-color:#ff66ff;

}

#d1{

position: relative;

left:100px;

top:100px;

border:1px solid green ;

width:100px;

height:100px;

background-color:#339900;

}

span{

position: relative;

left:20px;

top:20px;

}

z-index:值任意，值越大离我们越近

float : 浮动

overflow: 超出范围怎么办

鼠标样式设置(cursor)

感谢你能够认真阅读完这篇文章，希望小编分享的“Css样式冲突的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网node.js频道，更多相关知识等着你来学习!