常用CSS标签1——属性

大憨熊 提交于 2020-03-26 18:32:13

一、属性

1、字体 font

1)font:

  font-style;

  font-variant;

  font-weight;

  font-size;

  font-height;

  font-family.

2) color:

  指定颜色,写法:

  十六进制值(或者简写);

  rgb()函数;

  css承认的颜色名。

3)font-family:

  在后面直接输入名字,如果有英文,尽量用引号引起来。

4)font-face(导入外部字体)

  @font-face{

  font-family

  src:url("url");

}

  必须记住导入外部字体后,要进行引用。

5)font-size:

  A、absolute-size 绝对大小:

  xx-small;

  x-small;

  small;

  medium;

  large;

  x-large;

  xx-large.

 B、 relative-size 相对大小:

  larger;

  smaller.

 C、length 长度:

  常以px为选项。

 D、百分比:

  其百分比取值是基于父对象中字体的尺寸。

6)font-style (字体的样式):

  normal(正常);

  italic和oblique(斜体).

7)font-weight(字重):

  normal(正常=400);

  bold(加粗=700);

  bolder(特粗,只在IE5中可行);

  lighter(细体,只在IE5中可行).

8)text-decoration(文字装饰):

  none(没有装饰);

  underline(下划线);

  line-through(贯穿线);

  overline(上划线).

9)text-shadow(文字阴影):

  2px 2px 3px gray;

分别表示向x轴偏移,向y轴偏移,模糊程度,阴影颜色。

10)font-variant(文字转换1):

  normal(正常);

  small-caps(把小写转换为大写).

11)text-transform(文字转换2):

  none(无转换发生);

  capitalize(把单词首字母转换为大写);

  uppercase(全部转换为大写);

  lowercase(全部转换为小写).

12)line-height(行高):

  normal(正常);

  length(具体的长度值,可以为负值).

13)letter-spacing(字母之间的间距):

  normal(默认的间隔);

  length(具体的长度值,可以为负值).

14)word-spacing(单词之间的间隔):

  normal(默认的间隔);

   length(具体的长度值,可以为负值).

2、文本

1)text-align(文本对齐)

  left(左对齐);

  right(右对齐);

  center(居中对齐);

  justify(两端对齐,比较少用).

2)没了。。。嘻嘻。

3、background(背景)

1)background-color(背景颜色);

  transparent(背景色透明);

  color(指定颜色,rgb、十六进制、英文名);

2)background-image(背景图像);

  none(没有);

  url(url)(指明具体的路径).

3)background-position(背景图像的位置);

  length/length(长度/宽度);

  position:top/center/bottom/left/right(比较少用).

4)bavkground-repeat(背景重复);

  repeat(背景图像在横向与纵向进行平铺,默认值);

  no-repeat(背景图像不平铺);

  repeat-x(背景图像在横向平铺);

  repeat-y(背景图像在纵向平铺).

4、positioning(定位)

1)position(位置);

  static(无特殊定位,默认值);

  absolute(绝对定位。脱离文档流,与left、right、bottom、top连用);

  relative(相对定位。仍然占据文档流,与left、right、bottom、top连用);

  fixed(固定定位);

2)z-index(层叠顺序,必须与position连用,才有效果!)

  auto(遵从其父对象的定位);

  number(无单位的整数值。可以为负).

3)top、right、bottom、left(上、右、下、左)

  auto(遵从文档流);

  length(浮点数字、有单位标示的长度值、百分数).

5、layout(布局)

1)clear(清除浮动影响);

  none(允许两边都有浮动对象);

  both(不允许有浮动影响);

  left(不允许左边有浮动影响);

  right(不允许右边有浮动影响).

2)float(浮动)

  none(对象不浮动);

  left(浮动到左边);

  right(浮动到右边).

3)clip(剪切,好恶心的东西)

  auto(对象无剪切);

  rect(unmber  unmber  unmber  unmber)(以对象左上角的(0,0)坐标为依据按上右下左的顺序依次剪切,任意一边设为auto,表示不剪切).

4)overflow(处理溢出)

  visible(不剪切内容也不添加滚动条,默认值,此时clip的属性失效);

  auto(在需要的时候剪切内容和添加滚动条);

  hidden(不显示超过对象尺寸的内容);

  scroll(总是显示滚动条).

5)display(显示)

  inline(以行级元素显示);

  block(以块级元素显示);

  inline-block(内容是块级元素,以行级元素显示);

  none(不显示,脱离文档流).

6)visibility(可见性)

  visible(对象可见);

  hidden(对象隐藏).

6、(border)边框

1)border-color(边框颜色);

2)border-style(边框样式);

  none(没有边框);

  dotted(点线边框);

  dashed(虚线边框);

  solid(实线边框);

  double(双线边框);

  groove(按border-color画3D凹槽);

  ridge(按border-color画菱形边框);

  inset(按border-color画3D凹边);

  outset(按border-color3D凸边).

3)border-width(边框厚度)

  medium(默认宽度);

  thin(小于默认宽度);

  thick(大于默认宽度);

  length(浮点数字和单位标识符组成的长度值).

4)top、right、left、bottom都可以与上面任何一个属性连用!

7、lists(列表)

1)list-style-image(列表图片样式);

  none(没有样式);

  url(url)(加入图片的地址).

2)list-style-type(列表样式).

  disc :  CSS1 实心圆
circle :  CSS1 空心圆
square :  CSS1 实心方块
decimal :
 CSS1 阿拉伯数字
lower-roman :
 CSS1 小写罗马数字
upper-roman :
 CSS1 大写罗马数字
lower-alpha :
 CSS1 小写英文字母
upper-alpha :
 CSS1 大写英文字母
none :
 CSS1 不使用项目符号
8、table(表格)

1)border-collapse(边框合并);

  separate(边框独立);

  collapse(边框合并).

2)border-spacing(边框间距);

  length/length(当指定了全部两个length值时,第一个作用于横向间距,第二个作用于纵向间距。).

 

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!