`
yfy_web
  • 浏览: 10226 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

常用CSS样式属性(转)

阅读更多
原文地址:http://www.cnblogs.com/sidecore/archive/2013/01/20/2868464.html

【长度单位】
CSS可使用长度单位
单位单位说明范例
pt Point,就像是Word里面的Point一样大小 font-size:10pt
px Pixels,依您屏幕分辨率而决定大小 font-size:10px
pc Pica,6个Pica是一英吋 font-size:10pc
mm 公厘,用过尺...这个设定值完全不会因为其它设定而改变 font-size:10mm
cm 公分,不会因为使用者设定而改变 font-size:10cm
% 百分比,大部分是指所在位置宽度或者长度百分比 font-size:10%


【颜色表示】
CSS可用颜色表示方式
表示方式表示方式说明范例
#rrggbb可以用Windows色彩选择工具找到color:#feefc7
rgb(#,#,#)用数字来表示红色蓝色以及绿色的混合...也可以用Windows色彩选择工具找color:rgb(135,255,124)
rgb(%,%,%)用百分比来代表红色蓝色以及绿色的强度来混合颜色color:rgb(70%,35%,41%)
颜色名称用颜色的名称来指定颜色color:brown


【背景可用值】
CSS可用背景值
名称说明可能值范例
background背景下面的背景设定值皆适用background:fixed
background-attachment背景图性是否固定fixed, scrollbackground-attachment:fixed
background-color背景颜色颜色 transparent(透空)backgroun-color:yellow
background-image背景图片none(无背景图) url(****)(图片位置)background-image:url(test.jpg)
background-position背景图位置水平 垂直background-position:135 159
background-repeat背景是否重复repeat(重复) repeat-x(水平重复) repeat-y(垂直重复) no-repeat(不重复)background-repeat:repeat


【属性可用值】
CSS可用属性值
名称说明可能值范例
visibility显示或是隐藏inherit(父组件决定) hidden(隐藏) visible(显示)  visibility:hidden
width宽度auto(自动决定) 数字width:135
height高度auto(自动决定) 数字height:100
z-indexZ轴高度(立体,是否在另一个组件之上)auto(自动决定) 数字z-index:135
position定位方式absolute (绝对寻址-依窗口坐标,原点为父窗口左上角) relative (相定位-以一般网页排列[right.center.left]后再根据坐标定位,原点为定位后的位置) static(静态定位-以一般网页排列)position:absolute
top(对象的position属性须为absolute或relative)对象的Y坐标(原点根据postion属性有所同)数字
left(对象的position属性须为absolute或relative)对象的X坐标(原点根据postion属性有不同)数字


【文字设定可用值】
CSS可用文字设定值
名称说明可能值范例
font文字设定以下所有皆可使用  font:arial
font-family字体字体名称font-family:arial
font-size字体大小百分比或是数字(单位)font-size:12px
font-style字型样式normal(普通) italic(斜体) oblique(斜体)font-style:italic
font-variant字型特别样式normal(普通) small-caps(大小英文字母)font-variant:small-caps
font-weight字型粗细normal(普通) bold(粗体) bolder(超粗体) lighter(细体) 数字(400=normal 700=bold )font-weight:bolder
letter-spacing字符相距normal(普通) 数字(预设为0)letter-spacing:5
text-align字符对齐left(左边) right(右边) center(中间) justify(左右平分)text-align:justify
text-decoration字符样式none(普通) underline(加底线) no-underline(不加底线) blink(闪烁) no-blink(不闪烁) line-through(加删除线) no-line-through(不加删除线) verline(加顶线) no-overline(不加顶线)text-decoration:underline


【表格设定】
CSS可用表格设定值 框线位置:(上-top.下-bottom.左-left.右-right)
名称说明可能值范例
border表格边框设定以下所有皆可使用  border:green
border-color, border-(框线位置)-color边框颜色任何颜色表示方法border-color:blue
border-style, border-(框线位置)-style边框样式none(无边框) dotted(点线) dashed(虚线) solid(实线) double(双线) groove(立体凹线) ridge(立体凸线) inset(立体入线) outset(立体隆起线)border-style:dotted
border-width, border-(框线位置)-width边框宽度数字border-width:5
padding边框补白数字padding:5


【鼠标设定】
CSS可用鼠标光标设定值
名称说明可能值范例
cursor光标图标auto(自动决定) default(默认值) crosshair(十字) hand(手形) move(移动时的光标) help(有问号的游标) text(文字编辑的光标) wait(忙碌中的游标) w-resize(向左箭头) e-resize(向右箭头) n-resize(向上箭头) ne-resize{向右上箭头) nw-resize(向左上箭头) s-resize(向下箭头) se-resize(向右下箭头) sw-resize(向左下箭头)  cursor:hand


【滚动条设定】
CSS可用滚动条列设定值
名称说明可能值范例
scrollbar-base-color滚动条列主色调颜色scrollbar-base-color:#aaaaaa
scrollbar-arrow-color按钮箭头的颜色颜色  scrollbar-arrow-color:#000000
scrollbar-face-color移动棒的颜色颜色scrollbar-face-color:#ffee99
scrollbar-highlight-color按钮边框内层左边与上面的颜色及滚动条底部轨道网状颜色(与rack同时使用网状会消失)颜色scrollbar-highlight-color: #000000
scrollbar-3dlight-color按钮边框外层左边与上面的颜色颜色scrollbar-3dlight-olor:#000000
scrollbar-darkshadow-color按钮边框外层右边与下面的颜色颜色scrollbar-darkshadow-color:#000000
scrollbar-shadow-color按钮边框内层右边与下面的颜色颜色scrollbar-track-color: #cccccc
scrollbar-track-color底部轨道颜色颜色scrollbar-track-color: #cccccc
分享到:
评论

相关推荐

    CSS常用属性一览表

    ### CSS常用属性一览表 #### 一、CSS文字属性 CSS中的文字属性是网页设计中最基本也是最常用的属性之一,这些属性能够帮助我们调整文本的显示效果,使其更加美观和易于阅读。 - **color**: 设置文字的颜色。例如...

    常用CSS样式属性CSS样式表.pdf

    以下是一些常用CSS样式属性的详细说明: 1. **长度单位**: CSS支持多种长度单位来设置元素的尺寸,如`font-size`、`width`、`height`等。常见的长度单位包括: - `pt`: 点,常用于打印,1pt等于1/72英寸。 - `...

    CSS常用属性大全

    CSS是层叠样式表(英文全称:Cascading Style Sheets)的简称,简单来说,就是网页布局的样式元素,网页界面的视觉效果,就是CSS做出来的。 目前,网页架构的标准版本是html5+CSS3,CSS的最新版也是CSS3,任何网页都...

    常用的CSS属性大全

    在网页设计中,CSS(Cascading Style Sheets)起着至关...通过熟练掌握这些CSS属性,你可以创建出丰富多样的网页布局和样式,从而提升用户体验。不断学习和实践是成为CSS高手的关键,因为CSS一直在不断发展和完善中。

    CSS常用属性列表

    本文将深入探讨CSS的常用属性,帮助您更好地理解和掌握这一核心技能。 1. **选择器**:CSS的选择器是用于匹配HTML元素的方式,如`class`、`id`、`tag name`等。例如,`.myClass`代表具有特定类名的元素,`#myID`...

    常用控件CSS样式

    "常用控件CSS样式"是一个集合,包含了各种经典且美观的CSS样式,适用于多种常见的网页控件,这些样式可以自定义并应用于项目中,以提升用户体验和界面美观度。 "设计模edo-Flat-UI-c4d26b2"这个文件很可能是这个...

    常用css属性汇总大全

    下面将详细阐述在给定的标题和描述中提到的一些常用CSS属性。 1. **字体属性**: - `font-size`:设置字体大小,可以使用像素(PX)、百分比(%)等单位。 - `font-style`:定义字体样式,如`italic`为斜体,`...

    Div+Css常用属性

    ### Div+Css常用属性详解 #### 一、概述 在网页设计中,`Div+Css`是一种非常重要的布局方式,它能够帮助我们更加灵活地控制网页元素的位置、大小及样式等。通过合理运用`Div+Css`,可以实现美观且响应式的网页布局...

    css 常用公共样式 样式总结(持续更新)

    本文将深入探讨“css常用公共样式”的总结,包括`flex布局`、`简写`技巧、`遮罩层`实现以及`滚动条透明`与`动画`的应用。这些都是现代Web开发不可或缺的部分。 首先,让我们来谈谈`flex布局`。Flex布局,全称为 ...

    css常用属性

    - 脚本引用:通过JavaScript动态插入CSS样式。 3. **CSS元素与布局**: - `SPAN`和`DIV`:`SPAN`通常用于内联元素的样式控制,而`DIV`作为块级元素,可以控制区域布局,两者可通过`display`属性转换其行为。 - ...

    Css+div_常用CSS标签及属性

    Css+div_常用CSS标签及属性 Css+div是Web开发中最常用的技术之一,Css是用于描述网页样式和布局的标记语言,而div是Html中最基本的布局标签。本文将从Css+div的角度,总结常用的Css标签及属性,并进行分类。 Css中...

    常用的css属性大全电脑技巧

    ### 常用的CSS属性详解与应用技巧 在网页设计与开发中,CSS(层叠样式表)扮演着至关重要的角色,它负责控制页面的布局、颜色、字体等视觉表现,使网页更加美观和易读。本文将深入探讨一些常用的CSS属性,包括文字...

    CSS3常用属性大全[参考].pdf

    CSS3 常用属性大全 CSS3 是 Cascading Style Sheets(层叠样式表)的第三个版本,是一种用于描述网页样式的语言。它对CSS2进行了扩展,添加了一些新的特性和功能。本文档总结了 CSS3 中的常用属性,涵盖了动画、...

    WEB开发常用CSS样式

    在探讨“WEB开发常用CSS样式”这一主题时,我们深入剖析了给定文件中的几个关键CSS样式示例,包括按钮样式、下拉选择框样式、以及页面滚动条样式。这些样式不仅展示了CSS的强大功能,也提供了实用的设计模式,对Web...

    css背景属性案例

    ### CSS背景属性详解与实践案例 #### 一、引言 在网页设计中,CSS (Cascading Style Sheets) 背景属性是用于控制页面背景的重要工具之一。通过合理运用这些属性,可以极大地增强页面的视觉效果和用户体验。本文将...

    Css所有属性

    本篇文章将深入探讨CSS的常用属性以及所有属性,帮助你全面理解和掌握这一强大的样式语言。 首先,我们来关注CSS的**基础属性**: 1. **颜色属性**:包括`color`用于设置文本颜色,`background-color`用于设置背景...

    js与css样式对照

    为了方便开发者理解和使用,这里详细介绍了一些常用的CSS样式及其对应的JavaScript属性。 ##### 边框(Border) - **CSS属性**:`border` - **JavaScript属性**:`border` - **CSS属性**:`border-bottom` - **...

    CSS常用属性整理.pdf

    本文将整理一些常见的CSS属性,帮助开发者更好地理解和应用CSS。 1. 字体和文本样式: - font-family: 指定元素的字体,可以指定多个字体作为回退方案。 - font-style: 指定字体样式,包括normal(正常)、italic...

Global site tag (gtag.js) - Google Analytics