前端基础——CSS常见样式

来源:互联网 发布:淘宝分销模式解说 编辑:程序博客网 时间:2024/07/13 11:08

先简单介绍一下常见的css样式,如下:


width 宽度  height 高度

最基础的一个css属性,可以描述各种元素的宽度,如html,body,div,img,table等。

background 背景  

一个复合属性,属性值包括颜色、图片、重复方式、位置定位、是否滚动。可以直接填写,也可分成单个属性:

background:url(bg.jpg) center 0 no-repeat gray fixed;

<pre name="code" class="css" style="font-size: 12px;">background-attachment: fixed; //背景是否滚动background-color: gray; //背景颜色background-image: url(bg.jpg);  //背景图background-repeat: no-repeat;// 背景图是否重复background-position: center 0px; //背景图位置
background-attachment: fixed; 背景是否滚动


margin 外边距、border 边框、padding 内边距

详细介绍请看盒子模型,现在说几点特殊的,

先说一说常用的,比如居中:

就可以这样写:

margin-left:auto;margin-right:auto;

margin(外边距)有如下几点问题:

1、上下外边距会叠压;(比如div1下外边距和div2上边距会重合并不会简单相加)
2、父子级包含的时候子级的margin-top会传递给父级;(父级的内边距替代子级外边距只包括margin-top,其他属性没有这种问题)

文本设置

font-size  文字大小 

值描述

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。

默认值:medium。

smaller把 font-size 设置为比父元素更小的尺寸。larger把 font-size 设置为比父元素更大的尺寸。length把 font-size 设置为一个固定的值。%把 font-size 设置为基于父元素的一个百分比值。inherit规定应该从父元素继承字体尺寸。font-family 字体

值描述

  • family-name
  • generic-family

用于某个元素的字体族名称或/及类族名称的一个优先表。

默认值:取决于浏览器。

inherit规定应该从父元素继承字体系列。color 文字颜色 

值描述color_name规定颜色值为颜色名称的颜色(比如 red)。hex_number规定颜色值为十六进制值的颜色(比如 #ff0000)。rgb_number规定颜色值为 rgb 代码的颜色(比如 rgb(255,0,0))。inherit规定应该从父元素继承颜色。

line-height 行高

值描述normal默认。设置合理的行间距。number设置数字,此数字会与当前的字体尺寸相乘来设置行间距。length设置固定的行间距。%基于当前字体尺寸的百分比行间距。inherit规定应该从父元素继承 line-height 属性的值。text-align 文本对齐方式

值描述left把文本排列到左边。默认值:由浏览器决定。right把文本排列到右边。center把文本排列到中间。justify实现两端对齐文本效果。inherit规定应该从父元素继承 text-align 属性的值。

text-indent 首行缩进值描述length定义固定的缩进。默认值:0。%定义基于父元素宽度的百分比的缩进。inherit规定应该从父元素继承 text-indent 属性的值font-weight 文字着重值描述normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。

  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。inherit规定应该从父元素继承字体的粗细。

font-style 文字样式值描述normal默认值。浏览器显示一个标准的字体样式。italic浏览器会显示一个斜体的字体样式。oblique浏览器会显示一个倾斜的字体样式。inherit规定应该从父元素继承字体样式。text-decoration 文本修饰值描述none默认。定义标准的文本。underline定义文本下的一条线。overline定义文本上的一条线。line-through定义穿过文本下的一条线。blink定义闪烁的文本。inherit规定应该从父元素继承 text-decoration 属性的值。letter-spacing 字母间距值描述normal默认。规定字符间没有额外的空间。length定义字符间的固定空间(允许使用负值)。inherit规定应该从父元素继承 letter-spacing 属性的值。

word-spacing 单词间距值描述normal默认。定义单词间的标准空间。length定义单词间的固定空间。inherit规定应该从父元素继承 word-spacing 属性的值。            

0 0
原创粉丝点击