CSS层叠样式表——常见属性

简介:

    常见属性

1   颜色属性

   color属性定义文本的颜色

   color:green

   color:#ff6600

   color:#f60(简写式)

   color:rgb(255,255,255)    红(R).绿(G).蓝(B)每个的取值范围0-255

   color:rgba(255,255,255,1)    RGBA是代表Red(红色).Green(绿色).Blue(蓝色)和Alpha的(色彩空间)透明度

2   字体属性

2.1    font-size   字体大小

   font-size:14px

2.2   font-family   定义字体

   font-family:微软雅黑,serif;

   可以使用","隔开,以确保当字体不存在的时候直接使用下一个

2.3   font-weight   字体加粗

   normal(默认值).bold(粗).bolder(更粗).lighter(更细)

   100.200.300-900     400=normal,而700=bold

3   背景属性

3.1   背景颜色   background-color

3.2   背景图片   background-image

   background-image:url(图片路径)

   background-image:none

3.3   背景重复   background-repeat

   repeat   重复平铺满

   repeat-x   向X轴重复

   repeat-y   向Y轴重复

   no-repeat   不重复

3.4   背景位置   background-position

   横向(left,center,right)

   纵向(top,center,bottom)

3.5   简写方式

   background:背景颜色  url(图像)重复 位置

   background:#f60  url(images/bg.jpg)no-repeat top center

4   文本属性

4.1   text-align   横向排列   left,center,right

4.2   line-height   文本行高

   %基于字体大小的百分比行高

   数值来设置固定值

4.3   text-indent   首行缩进

4.4   letter-spacing   字符间距

   normal   默认

   length   设置具体的数值(可以设置负值)

   inherit  继承

5   边框属性

5.1   边框风格   border-style

5.1.1   统一风格(简写风格)   border-style

5.1.2   单独定义某一方向的边框样式

   border-bottom-style   下边边框样式

   border-top-style   上边边框样式

   border-left-style   左边边框样式

   border-right-style   右边边框样式

5.1.3   边框风格样式的属性值

   none   无边框

   solid   直线边框

   dashed   虚线边框

   dotted   点线边框

   double   双线边框

                     

   groove   凸槽边框

   ridge   垄状边框          依托border-color的属性值

   inset   inset边框

   outset   outset边框  

                      

   inherit   继承

5.2   边框宽度   border-width

5.2.1   统一风格   border-width

5.2.2   单独风格

   border-top-width   上边边框宽度

   border-bottom-width   下边边框宽度

   border-left-width   左边边框宽度

   border-right-width   右边边框宽度

5.2.3   边框宽度的属性值

   thin   细边框

   medium   中等边框

   thick   粗边框

   px   固定值的边框

   inherit   继承

5.3边框颜色   border-color

5.3.1   统一风格   border-color

5.3.2   单独风格

   border-top-color   上边边框颜色

   border-bottom-color   下边边框颜色

   border-left-color   左边边框颜色

   border-right-color   右边边框颜色

5.3.3   属性值

   颜色值的名称   red.green

   RGB   rgb(255.255.0)

   RGBA   rgba(255.255.0.0.1)

   十六位进制   #ff0.#ff0000

   继承   inherit

5.3.4   属性值的四种情况

   一个值:border-color:(上.下.左.右)

   两个值:border-color:(上下)(左右)

   三个值:border-color:(上)(左右)(下)

   四个值:border-color:(上)(右)(下)(左)

5.3.5   简写方式   border:solid  2px  #f60

6   列表属性

6.1   标记的类型   list-style-tyle

   none   无标记

   disc   默认,标记是实心圆

   circle   标记是空心圆

   square   标记是实心方块

   decimal   标记是数字

   decimal-leading-zero   0开头的数字标记(01,02,03,等)

   lower-roman   小写罗马数字(i,ii,iii,iv,v等)

   upper-roman   大写罗马数字(I,II,III,IV,V等)

   lower-alpha   小写英文字母The  marker  is  lower-alpha(a,b,c,d,e,等)

   upper-alpha   大写英文字母The  marker  is  upper-alpha(A,B,C,D,E,等)

   lower-greek   小写希腊字母(alpha,beta,gamma,等)

   lower-latin   小写拉丁字母(a,b,c,d,e,等)

   upper-latin   大写拉丁字母(A,B,C,D,E,等)

   hebrew   传统的希伯来编号方式

   armenian   传统的亚美尼亚编号方式

   georgian   传统的乔治亚编号方式(an,ban,gan,等)

   cik-ideographic   简单的表意数字

   hiragana   标记是:a,i,u,e,o,ka,ki,等。(日文片假名)

   katakana   标记是:A,I,U,E,O,KA,KI,等。(日文片假名)

   hiragana-iroha   标记是:i,ro,ha,ni,ho,he,to,等。(日文片假名)

  katakana-iroha   标记是:I,RO,HA,NI,HO,HE,TO,等。(日文片假名)

6.2   标记的位置   list-style-position

   inside   列表项目标记放置在文本以内,且环绕文本根据标记对齐

   outside   默认值,保持标记位于文本的左侧,列表项目放置在文本以外,且环绕文本不根据标记对齐

   inherit   规定应该从父元素继承list-style-position属性的值

6.3   设置图像列表标记   list-style-image

   URL   图像的路径

   none   默认,无图形被显示

   inherit   规定应该从父元素继承list-style-image属性的值

6.4   简写方式   list-style

   list-style:square  inside  url('/i/arrow.jpg')


本文转自 拉考的考拉 51CTO博客,原文链接:http://blog.51cto.com/lakaodekaola/1967986



相关文章
|
3月前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
3月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
36 0
|
3月前
|
前端开发
CSS属性
CSS属性
32 0
|
21天前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
33 2
|
21天前
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
29 1
|
1月前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
27 1
|
3月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
50 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
1月前
|
前端开发
css简写属性
css简写属性
30 0
|
3月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
99 1