CSS常用属性

CSS常用属性

☛关于CSS属性个人建议查看手册更加详细方便，我这里就几种常用属性进行分类并简单取几个常用属性值，仅供跟我一样刚学习前端的人作为入门而用。

 

  1.字体样式

字体的缩写,写法是font:font-style|| font-variant ||font-weight||font-size||/ line-height||font-family，一定要按照顺序来写

♣字体的斜体(font-style)：正常 normal || 常用斜体 italic || 没有斜体变量的特殊字体 oblique

♣小型的大写字母t(font-varian)：正常 normal || 小型的大写字母字体 small-caps

♣字体的粗细(font-weight)：正常 normal || 常用粗体 bold || 特粗 bolder || 细体 lighter || 直接用数字表示（数值100-900）

♣字体的大小(font-size)：这里仅介绍可以用几种字根单位表示（px、em、rem）

♣字体的行高(line-height)：可以用长度px|| 百分比（基于字体的高度尺寸）|| 用数值(乘积因子)指定行高

♣字体簇(font-family)： 指定文本使用某个字体或字体序列，值用单引号包起来,默认是宋体.

demo：body{font-family:helvetica,verdana,sans-serif;}

/*注释*/：按优先顺序排列。以逗号隔开。如上字体定义，假设你电脑上没有helvetica字体，但有verdana，这时将会以verdana显示你的文字。

 

  ❤@font-face嵌入字体（课外扩展）

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。

语法：

@font-face {

font-family : 自定义字体名称;

src : url(字体文件在服务器上的相对或绝对路径)  format(字体类型);

}

例：

@font-face {/*该写法是兼容所有的浏览器*/

font-family : bgg;

src: url('fonts/fontawesome-webfont.eot'), /* IE9+ */

url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('fonts/fontawesome-webfont.woff') format('woff'), /* chrome、firefox */

url('fonts/fontawesome-webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari,Android, iOS 4.2+*/

url('fonts/fontawesome-webfont.svg') format('svg'); /* iOS 4.1+ */

}

p{ font-family: bgg }

 

★字体的其他比较少用的样式：

♣caption： 使用有标题的系统控件的文本字体（如按钮，菜单等）（CSS2）

♣icon： 使用图标标签的字体（CSS2）

♣menu： 使用菜单的字体（CSS2）

♣message-box： 使用信息对话框的文本字体（CSS2）

♣small-caption： 使用小控件的字体（CSS2）

♣status-bar： 使用窗口状态栏的字体（CSS2）

 

  2.文本样式

♦文本颜色 color

●颜色名称 16种基本色为aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,tealwhite,and yellow.

●16进制（hex）色彩控制（6位数），其格式为 #336699。支持某些hex值的快捷计数法。比如， #336699可以被称为 #369。

●RGB值 RGB的数值范围从0到255，R代表红色，G代表绿色，B代表蓝色。demo：{ color: rgb(51,204,0) }

♦文本缩进 text-indent,值是以em为单位的数值,1em等于一个字的宽度.

♦文本水平对齐 text-align：left(左对齐) || center(居中对齐) || right(右对齐) || justify(两端对齐)

♦文本垂直对齐 vertical-align：sub(垂直对齐文本的下标) || super(垂直对齐文本的上标) || 还有其他见手册

♦文字间距 letter-spacing,值有normal和以px为单位的数值.

♦文本换行 word-wrap：normal(允许内容顶开或溢出) || break-word(内容将在边界内换行。如果需要，单词内部允许断行)

♦下划线控制 text-decoration ：none(没有下划线,默认)、underline(下划线)、blink、overline(上划线)、line-through(删除线)

♦文本的大小写 text-transform : 首字母大写 capitalize || 转换成大写 uppercase ||  转换成小写 lowercase

 

  3.列表样式 list-style

▶list-style-image:url(/dot.gif);  图片式符号，选择图像作为列表项的引导符号

▶list-style-position：列表符号位置

♥outside（默认值，列表与符号贴近）

♥inside（列表缩进，与符号相离）

▶list-style-type：符号类型（这里列举几种常用的，若需要日文平假片假什么的可以查手册）

♥不编号(none)      ♥阿拉伯数字(decimal)      ♥实心圆(disc)      ♥空心圆(circle)      ♥实心方块(square)

♥小写英文字母(lower-alpha) ♥大写英文字母(upper-alpha)  ♥小写罗马数字(lower-roman) ♥大写罗马数字(upper-roman)

 

  4.背景样式 background

背景样式的缩写,写法是{background-color||background-image||background-repeat||background-attachment||background-position;}

background: 背景色  背景图片 背景平铺方式 背景定位 要按照顺序来.例子background:#F00 url(header_bg.gif) no-repeat fixed left top;

 

♠背景颜色

♠透视背景 background:transparent;

♠背景图片 backgroung-image:url(图片文件路径);

♠背景平铺方式 background-repeat：repeat(全部平铺,默认)|| no-repeat(不平铺)|| repeat-x(横向平铺)|| repeat-y(纵向平铺)

round(背景图像自动缩放直到适应且填充满整个容器)|| space(背景图像以相同的间距平铺且填充满整个容器或某个方向)

♠背景图片滚动 background-attachment：scroll 默认值。背景图像会随着页面其余部分的滚动而移动。

fixed 当页面的其余部分滚动时，背景图像不会移动。||inherit 规定应该从父元素继承 background-attachment 属性的设置。

♠背景定位 background-position:左右对齐方式(left||center||) 上下对齐方式(top||bottom);

也可以将对齐方式写成数值(或百分比%):左边数值(%) 顶部数值(%)

♠背景的大小 background-size

background-size: auto;        自动，默认以图片大小

background-size：px或百分比，若只设置一个值，则第二个值会被设置为 "auto"。

background-size: cover;       将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

background-size: contain;     把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。但是不超出容器

background-size: 100px 100%;  宽高比例改变

♠背景的开始位置 background-origin

写法{background-origin:padding-box背景从边框之后开始(默认)||border-box背景图从边框开始||content-box背景从内容开始}

 

  5.边框样式 border

边框线的缩写：{border:border-width border-style border-color;}

demo：四边边框相同：{border:1px solid #00F}；

若想单独一条边的话，哪个方向的自己挑：{border-[left||right||top||bottom]:border-width border-style border-color;}

 

♜边框线的样式 border-style：none(不加边框线,默认)|| hidden(隐藏边框线)|| dotted(点状虚线)|| dashed(线状虚线,常用)

solid(实线,常用)|| double(双实线)|| groove(浅色实线)|| ridge(深浅色实线)|| inset(左上深右下浅的实线)|| outset(左上浅右下深的实线)

♜边框线的宽度 border-width,值是以px为单位的数值.

♜边框线的颜色 border-color,值是颜色的英文单词或者十六进制的颜色.

♜inherit：规定应该从父元素继承 border 属性的设置。

更多CSS常用属性相关文章请关注PHP中文网！