Html之Css常见属性

11 篇文章 0 订阅

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.字体属性

1.font-size 字体大小  			固定大小  font-size:14px
                                父元素百分比   %
                                比父元素更大  larger
                                比父元素更小  smaller
                                继承父元素   inherit
                                    
2.font-family 定义字体     font-family:微软雅黑,serif;    可以使用“,”隔开,以确保当字体不存在的时候直接使用下一个
3.font-weight 字体加粗   normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)
                                       100、200、300~900      400 = normal,而 700 = bold
4、font-style    字体样式   normal   正常
							italic    斜体
							oblique  倾斜
							inherit  继承
5、font-variant     小型大写字母显示文本      normal    正常
											small-caps  小型大写字母显示文本    
											inherit  继承
                         
					            

父元素百分比:

在这里插入图片描述

在这里插入图片描述在这里插入图片描述

在这里插入图片描述在这里插入图片描述

3.背景属性

1.背景颜色 background-color
2.背景图片 background-image   background-image:url(图片路径)   background-image:none
3.背景重复 background-repeat    repeat  重复平铺满
                                                     repeat-x    向Y轴重复
                                                     repeat-y    向Y轴重复
                                                     no-repeat   不重复
4.背景位置 background-position    横向(left,center,right)
                                                      纵向(top,center,bottom)
5.简写方式    background:背景颜色 url(图像) 重复 位置 
 					background:#f60 url(images/bg,jpg) no-repeat top center

在这里插入图片描述
简写方式
在这里插入图片描述

4.文本属性

1.text-align  横向排列    left,center,right
2.line-height 文本行高    1.%基于字体大小的百分比行高  
										2.数值 来设置固定值
3.text-indent 首行缩进  %  父元素的百分比
                       px   固定值  默认为0
                       inherit   继承
4.letter-spacing 字符间距    normal  默认值
							length 设置具体的值(可以为复数) 
							inherit  继承
                              
5、word-spacing   单词间距   normal  标准值
							px  固定值(可以为复数)
							inherit  继承

6、direction   文本方向  ltr从左到右   默认值
						rtl 从右到左 
						inhrtit   继承

7.text-transform   文本大小写    none  默认
								capitalize  每个单词以大写字母开头
								uppercase  定义仅有大写字母
								lowercase  定义  无大写字母仅有小写字母
								inherit  继承
								


在这里插入图片描述在这里插入图片描述

5.边框属性

1.边框风格 border-style
         统一风格(简写风格) border-style
         单独定义某一方向的边框样式   border-bottom-style 下边边框样式
                                                           border-top-style 上边边框样式
                                                           border-left-style 左边边框样式
                                                           border-right-style 右边边框样式
		边框风格样式的属性值        1、none 无边框
		 											2、solid  直线边框
		 											3、dashed  虚线边框
		 											4、dotted 点状边框
		 											5、double  双线边框
		 											6、groove 凸槽边框
		 											7、ridge 垄状边框
		 											8、inset inset边框
		 											9、outset outset边框
		 											10、inherit继承
		 							6-9  依托border-color的属性值
2.边框宽度 border-width   统一风格   border-width:

			             单独风格  	  border-top-width 上边边框宽度
					           		  border-bottom-width 下边边框宽度
					                  border-left-width 左边边框宽度
					                  border-right-width 右边边框宽度
					边框宽度的属性值:	 1、thin 细边框
									  	 2、medium 中等边框
									  	 3、thick 粗边框
									 	 4、px  固定值的边框
									  	 5、inherit继承

3.边框颜色 border-color  统一风格  border-color
                        单独风格   border-top-color 上边边框颜色
                                  border-bottom-color 下边边框颜色
                                  border-left-color 左边边框颜色
                                  border-right-color 右边边框颜色
						属性值  	1、颜色值的名称  red、green、  RGBrgb(255,255,0)、RGBArgba(255,255,0,0.1)、十六位进制#ff0、#ff0000、继承inherit
						属性值的四种情况     一个值:border-color:(上、下、左、右);
											两个值:border-color:(上下) (左右);
											三个值:border-color:(上) (左、右) (下);
											四个值:border-color:(上)(右)(下)(左);
简写方式       border:solid 2px #f60

在这里插入图片描述在这里插入图片描述
简写方式:
在这里插入图片描述

6.列表属性

1.标记的类型    list-style-type   	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, 等。)
									cjk-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, 等。(日文片假名)
									
2.标记的位置   list-style-position       inside	列表项目标记放置在文本以内,且环绕文本根据标记对齐。
										outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
										inherit	规定应该从父元素继承 list-style-position 属性的值。
										
3.设置图像列表标记      list-style-image     URL	图像的路径。
											none	默认。无图形被显示。
											inherit	规定应该从父元素继承 list-style-image 属性的值。
											
4.简写方式      list-style       list-style:square inside url('/i/arrow.jpg');





















![在这里插入图片描述](https://img-blog.csdnimg.cn/20190626173722505.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYyMDUwNQ==,size_16,color_FFFFFF,t_70)![在这里插入图片描述](https://img-blog.csdnimg.cn/20190626173736564.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYyMDUwNQ==,size_16,color_FFFFFF,t_70) `在这里插入代码片`
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190626174542117.png)![在这里插入代码片](https://img-blog.csdnimg.cn/20190626174549127.png)
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夢鑰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值