☛关于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 属性的设置。