text-align: center”>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常用的一些属性详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608217.html
微信扫一扫 
支付宝扫一扫 
