css 层叠样式表

1in(英寸)=96px(像素)=6em=2.54cm(厘米)

代码书写顺序  1.位置属性(position(定位),top,right,z-index(值越小越底层),disply(适用xml难点),float(浮动)) 2.大小(width(宽度),height(高),padding,margin)3.文字系列(font,line-hieght,letter-spacing,color-text-align)4.背景(background,border)5.其他(animation,transition)

4角顺序 顺势针 3角顺序 上,左右,下 2角顺序 上下,左右.

记住加";"

颜色值 可选 1.颜色命名 border-color: blue 2.RGB rgb(25%,35%,45%) 3.十六进制 #909090


padding (填充=内边距)

理解含义,你与房子内墙的距离。如果填充为0,将被背景取代。

注意事项:百分比数值是相对于其父元素的width(宽度)计算的.

值…

padding-bottom 下边距  可选单位px,em,百分比.代码样式padding-top: 10px;

padding-left 左边距

padding-right 右边距

padding-top 上边距

length(长度)单位cm,pt(像素…pixel)pixel       %继承父的距离


Font (字体)

注意事项: IE无法调整文本,使用EM单位,设置百分比

body {font-size:100%}

值…

font-family 字体系列  {font-family: Georgia;} 错误的格式   {font-family: Georgia,serif;} 正确 具体的字体 "times"-"courier"-"arial" 通用字体"serif"-"sans-serif"-"cursive"-"fantasy"-"monospace"

font-size 字体尺寸 通过像素设置文本,属于绝对,推荐使用em

body {font-size:100%;}

h1 {font-size:3.75em;}

font-style 字体风格  p.normal {font-style:normal;} 正常  p.italic {font-style:italic;} 倾斜

font-variant 小型大写字体或者正常那个字体显示文本

font-weiqht 设置字体的粗细 p.normal {font-weight:normal;} 关键字100到900 100最细,400等于normal 700等于bold


Border (边框)

房子的墙体

注意事项:由于border-style的默认值是none,如果希望边框出现,就必须声明一个边框样式.

如果想边框有宽度,可以选用透明代码 border-color: transparent

border-style 边框样式 可选上下左右 {border-style: 上 右 下 左;}

10种可选属性 1.none无边框  2.hidden 等同none 3. dotted点线 大多浏览器呈现实线 4.dashed 虚线 大多浏览器呈现实线 5.solid 实线 6.double 双线 线宽等于border-width的值7.groove 3D凹槽 效果取决于 border-color的值 8.ridge 3d脊边 效果同上 9.inset 3d嵌入 效果同上 10.outset 3D突起 效果同上 11.inherit 从父元素继承边框样式

border-width 边框宽度 p {border-style: 实线 虚线 双线 none;border-width: 4个;}

border-color 颜色 p{border-color: blue;} 颜色无法单独使用

radius (圆角)

...不熟 border-radius

Float(浮动)

左右移动,直到边缘碰到包含框或另一个浮动框的边框为止.

你可能感兴趣的:(css 层叠样式表)