Maison > interface Web > tutoriel CSS > CSS常用属性

CSS常用属性

高洛峰
Libérer: 2017-02-22 11:56:29
original
1894 Les gens l'ont consulté

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中文网!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal