您好,欢迎来到化拓教育网。
搜索
您的当前位置:首页CSS样式属性

CSS样式属性

来源:化拓教育网
样式属性

一:颜色属性 color

二:文本属性

font-size 字体大小 font-family 字体 font-align 字体对齐

三:边框属性(用于表单元素) border-width 边框宽度 border-style 边框样式 border-color 边框颜色

border-(top/bottom/left/right)-style border-(top/bottom/left/right)-width border-(top/bottom/left/right )-color border-(top/bottom/left/right/spacing) 四:定位属性(position) top 上边距 left 左边距 width 宽度 height 高度

z-index z 轴索引号,用于层 五:段落属性

text-align:段落水平对齐设置值:center left right justify

vertical-align:段落垂直对齐设置值:sub(下标) super(上标))top middle bottom 10px -10px 相对于元素行高属性的百分比

letter-spacing:字母的间距(单位:px)

word-spacing:单词的间距(通过空格来区分单词,单位:px) line-height:文本行高(单位:px) text-indent:缩进方式(单位:px)

white-space:排版方式设置值:normal pre(保留空格) nowrap(不换行) 六:背景属性

background-color 背景颜色 background-image 背景图片

background-repeat 背景重复方式设置值 background-position 背景位置设置值

background-attachment 固定或滚动背景设置值

{ background:#00cc00 url(logo.jpg) no-repeat bottom right} 此为合并设置背景样式 七:表格属性

table{table-layout:fixed;}表示表格是否随内容而改变宽度 table{caption-side:bottom;}表格标题的位置

table{border-collapse:collapse;}控制表格边框的显示方式 table{border-spacing:8px 9px;}控制表格内外边框的距离 table{empty-cells:}控制对空单元格的显示方式

tr:hover{color:red;}鼠标移动到表格,表格边框或单元格显示的样式 八:表单

给input添加背景色和背景图 一条线的文本框 按钮样式控制 彩色的下拉框

类似Excel表格的表单 九:伪元素选择器样式属性

a:link超链接的正常状态(没有任何动作前) a:visited访问过的超链接的状态 a:hover光标移动到超链接上的状态 a:active鼠标按下之后的状态 p:first-line段落中的第一行文本 p:first-letter段落中的第一个字母 h1:first-child第一个h1的样式属性 十:鼠标样式

cursor:crosshair text wait default help e-resize ne-resize n-resize nw-resize w-resize sw-resize s-resize se-resize auto 十一:滚动条样式

scrollbar-face-color:滚动条凸出部分的颜色

scrollbar-hightlight-color:滚动条空白部分的颜色 scrollbar-shadow-color:立体滚动条阴影的颜色 scrollbar-3dlight-color:滚动条亮边的颜色

scrollbar-arrow-color:上下按钮上三角箭头的颜色 scrollbar-track-color:滚动条的背景颜色

scrollbar-darkshadow-color:滚动条强阴影的颜色 scrollbar-base-color:滚动条的基本颜色 十二:列表样式

list-style-type:disc(实心圆) circle(空心圆) square(方块) decimal(阿拉伯数字) lower-alpha(小写英文字母) upper-alpha(大写英文字母) upper-roman(大写罗马数字) lower-roman(小写罗马数字) none(无项目符号)

list-style-image 列表图片符号

list-style-position 设置值:inside(内部) outside(外部) 十三:盒子概念

padding:内容与盒子边框间的距离

若定义一个参数,表示内容与盒子四个边框之间的距离。

若定义两个参数,第一个参数表示内容与盒子上下边框之间的距离。

若定义三个参数,第一个参数表示内容与盒子上边框之间的距离,第二个参数表示内容与盒子左右边框之间的距离,第三个参数表示内容与盒子下边框之间的距离。 若定义四个参数,分别表示的是内容与盒子上、右、下、左边框之间的距离。 还可以分别定义padding-left padding-right padding-bottom padding-top margin:盒子边框与盒子边框之间的距离

若定义一个参数,表示盒子四个边框与盒子四个边框之间的距离。

若定义两个参数,第一个参数表示盒子边框与盒子上下边框之间的距离。

若定义三个参数,第一个参数表示盒子边框与盒子上边框之间的距离,第二个参数表示盒子边框与盒子左右边框之间的距离,第三个参数表示盒子边框与盒子下边框之间的距离。 若定义四个参数,分别表示的是盒子边框与盒子上、右、下、左边框之间的距离。 还可以分别定义margin-left margin-right margin-bottom margin-top 另外,有一些元素有一些默认的margin,如h标签,body标签

指定margin原则:能在父元素中指定margin就不要在子元素中指定 十四:display(控制显示与隐藏)

display设置值:block inline inline-block list-item none 十五:float

float设置:left right none 十六:overflow

overflow设置值:visible hidden scroll auto 十七:clip(裁切,一般应用于图片)

clip设置值:clip:rect(top right bottom left) auto 十八:visibility(控制显示与隐藏) visibility设置值:visible hidden

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- huatuo9.cn 版权所有 赣ICP备2023008801号-1

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务