CSS自定义样式

CSS自定义样式

1. 自定义字体

先将字体文件放到web服务器上,需要时自动下载到用户计算机上

属性:@font-face
例: @font-face{
font-family:myFont;
src:url("自定义字体路径");
} p{font-family:myFont;}

注意:一次只能引入一种字体,引入多种字体需要写多个@font-face。

2. sprite雪碧图

CSS雪碧,即CSS Sprite,是将小图标和背景合成到一张图片上,利用CSS背景定位来显示需要显示的图片部分。使用CSS的background和background-position属性渲染。图片是在CSS中定位,不是<img>标签。

CSS优先级和权重值

1. 优先级:即层叠顺序

2. 权重值

权重值 a b c d
内嵌样式 1 0 0 0
ID选择器 0 1 0 0
类、伪类、属性 0 0 1 0
元素选择器 0 0 0 1

通用选择器(*),子选择器(>)和兄弟选择器(+,~)权重值均为0000

!important可以使其他选择器均失效
写法:{color:red!important}

CSS盒模型

1.1 一个独立盒子的内部结构

1.内容: 2.padding:内边距 3.border:边框 4:margin:外边框

1.1.1 padding外边距

元素边框与元素内容之间的空白区域(同border用法类似,没有负值,负值不起作用)

padding-top       上
padding-right 右
padding-bottom 下
padding-left 左

1.1.2 margin外边距(同padding用法类似,值可以为负)

margin的居中属性:
margin:o auto; 可以让块级元素水平居中,需设置宽度

1.1.3 border边框

透明边框:  border-color:transparent

1.1.4 两种盒模型的区别

W3C标准盒子模型:
元素空间高度:content+padding+border+margin
IE盒子模型:
元素空间高度:content+margin

1.2 多个盒子之间的相互关系

1.2.1 DOM树

1.2.2 常规流布局,即文档流。

1.2.3浮动

属性:float:left,right,none,inherit
说明:left,right常用;inherit表示从父元素继承浮动属性的值

浮动的特性:
1.会造成父级元素高度的崩塌(前提父级元素没有设置高度);父级元素崩塌后,后面的元素自动排列到上面去,但是文字不会(即不会被浮动的块元素覆盖),文字会自动环绕在四周。
2.对兄弟元素的位置影响

1.2.4 清除浮动

1 overflow:hidden
2 清除浮动 clear 属性(both,left,right,none)
3 :after{
content:"";
display:block;
clear:both;
}

说明:第二种是先在父元素里设置一个新标签,再给新添加的标签设置一个样式。

上一篇:如何在Eclipse中创建Web服务器


下一篇:linkin大话数据结构--Collections类