CSS语法手

发布 2021-05-11 04:58:28 阅读 6386

css语法手册(三)文本填充,边框,边界和位置属性(一)

一、框填充属性。

1、padding-bottom

padding-left

padding-top

padding-right

功能:毎个容器都有边框,这些属性设置边框与框內元素间的距离。

数值:长度 - 设置相对或绝对值。在数字后指定度量单位如下:mm, cm, in, pt, px, pc, ex, em。em 和 ex 设置产生相对于父字体的字体尺寸。

百分比 - 以父元素的百分比设置边框。

说明:填充值不能使用负值,但可以是小数。

2、padding

功能:是个简写属性,用于设置上,下,左,右各个方向边框和内容元素的间距。

数值:同前。

说明:用单一值可以让毎边等距填充;如果用两个值,则第一个值用于上下填充,第二个值用于左右填充;如果用三个值,则赋于上边填充,左右填充和下边填充;如果用四个值,则分别用于上,右,下,左填充。可以混合数值类型。

二、框边框属性。

1、border-top

border-bottom

border-right

border-left

功能:这四个属性都是简写属性,分别设置上,下,右,左的边框属性。缺省情况下,边框没有样式设置。

数值:共有三个边框属性。

border-width: 取值为 thin, medium, thick或指定长度。

border-style: 设置用于修饰边框的底纹。可以设置下列样式:

none, dotted,doshed, solid, double, groove, ridge, inset, outset。

border-color: 设置边框颜色。

2、border-top-width

border-bottom-width

border-right=width

border-left-width

功能:分别设置各个边框的厚度。

数值:thin - 细边框。

medium - 中等线宽。

thick - 粗线。

长度 - 用相对或绝对单位设置边框宽度。

3、border-width

功能:简写属性,可同时设置四个边框的宽度。

数值:thin - 细边框。

medium - 中等线宽。

thick - 粗线。

长度 - 用相对或绝对单位设置边框宽度。

说明:见 padding 说明。

例子:边框属性。

4、border-color

功能:简写属性,设置四个边框的颜色值。

数值:可以用颜色名或rgb值。如果指定单个颜色,则四个边框都显示为这个颜色;如果指定两个颜色,则顺序为上下,左右;如果指定三种颜色,则顺序为上,左右,下;如果指定四种颜色,则顺序为上,右,下,左。

说明:颜色名如下。

aqua, black, blue, fuchsia, gray, green, lime, maroon, n**y, olive, purple, red, silver, teal, white, yellow.

对于rgb值,可用三种方法指定。

#rrggbb; rgb(r,g,b); rgb(r%,g%,b%)

例子:边框颜色。

5、border-style

功能:用于显示边框和指定边框样式。

数值:none - 不显示边框,为缺省值。

dotted - 点线。

dashed - 虛线。

solid - 实线。

double - 双线。

groove - 3d陷入线。

ridge - 3d山脊狀线。

inset - 使页面有沉入感。

outset - 使页面有浮出感。

说明:并非所有浏览器都能显示ridge, inset, outset 之类的样式,有些浏览器将所有边框都绘制成实线。

example1

example2

6、border

功能:简写属性,设置所有边框属性。

数值:border-width - 取值 thin, medium, thick 或指定长度。

border-style - 取值 none, dotted, dashed, solid, double, groove, ridge, inset, outset

border-color - 可用颜色名或rgb值。

说明:与其它简写属性不同的是,每个设置只能取一个值,这个属性均匀作用于框的各边。

例子:this is a example

CSS语法

基本语法。一个样式 style 的语法由三部分构成 selector 中文叫选择器有点怪怪的,就用英文吧 属性 property 属性值 value selector 举个例子,下面的 p就是selector,color就是属性,blue就是属性值。p html中所有的tag都可以作为selecto...

CSS语法

基本语法。一个样式 style 的语法由三部分构成 selector 中文叫选择器有点怪怪的,就用英文吧 属性 property 属性值 value selector 举个例子,下面的 p就是selector,color就是属性,blue就是属性值。p html中所有的tag都可以作为selecto...

CSS语法

未来不是固定在那里等你趋近的,而是要靠你创造。可能有人会问,css还有语法?是的,它不属于任何编程语言类型,但它有自己规定的格式以及规范,只有了解这些规范你才能写出更简洁 易懂的css。网页设计师们应力求写出的css有更好的可读性,更规范的书写,更小的体积,这是初学者们应该要明白的。css 语法由三...