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



相关文章
|
7天前
|
前端开发 UED 容器
CSS基础-背景属性:颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性,包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色(如使用rgba()注意透明度影响)、背景图片(使用background-size控制缩放)、背景重复(避免默认平铺导致混乱)以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
|
1月前
|
前端开发
页面无法滑动-CSS: touch-action属性
页面无法滑动-CSS: touch-action属性
23 0
|
1月前
|
容器
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
23 0
|
2天前
|
前端开发 开发者
CSS进阶-CSS3多列布局
【6月更文挑战第14天】CSS3的多列布局简化了复杂布局,提供杂志样式排版。通过`column-*`属性如`column-count`和`column-gap`实现内容分割和列间距控制。常见问题包括内容溢出、列间距不当和兼容性问题。解决方法包括使用`word-break`和`hyphens`处理长单词,灵活设置列宽和列数,以及为旧浏览器提供回退方案。代码示例展示了一个自动平衡列高的两列布局。理解并解决这些问题将帮助开发者更好地利用CSS3多列布局。尽管有兼容性挑战,但它是现代网页设计的重要工具。
|
5天前
|
前端开发 JavaScript 开发者
CSS基础-CSS3过渡与动画
【6月更文挑战第11天】本文介绍了CSS3的过渡和动画特性,用于创建平滑的视觉效果。过渡通过`transition`属性实现元素样式改变的缓动效果,常用于按钮悬停、图片切换等场景。易错点包括忘记设置初始和最终样式,以及过渡效果不明显。动画则利用`@keyframes`定义关键帧序列,适用于循环播放的图标旋转等复杂效果。动画的错误可能在于结束状态处理和无限循环的性能问题。通过代码示例和避免常见陷阱,开发者能更好地利用CSS3动画提升网页交互体验。关键在于适度使用,保持界面流畅舒适。
|
10天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
18 1
|
10天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
24 1
|
16天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
24 1
|
21天前
|
前端开发 JavaScript 开发者
CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
【5月更文挑战第26天】CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
20 2
|
23天前
|
缓存 前端开发 JavaScript
尚硅谷html5+css3(2)CSS5基本知识
尚硅谷html5+css3(2)CSS5基本知识