欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS常用的一些属性详解

程序员文章站 2022-05-23 14:27:29
...

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常用的一些属性详解的详细内容,更多请关注其它相关文章!