本文发布于 2016-10-29, 最后更新于 1853 天前,其中的信息可能已经有所发展或是发生改变。
文章摘要
CSS学习之路-第2篇 我这节学的是 构造块级元素 : 1.宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代元素继承 2.背景 (1)背景颜色 background-color:颜色值; 颜色值上一篇有介绍过,这里就不详细介绍了 background-color不会被后代继承 (2)背景图片 background-image:属性; 属性的默认值为none 表示…
CSS学习之路-第2篇 我这节学的是 构造块级元素 : 1.宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代元素继承 2.背景 (1)背景颜色 background-color:颜色值; 颜色值上一篇有介绍过,这里就不详细介绍了 background-color不会被后代继承 (2)背景图片 background-image:属性; 属性的默认值为none 表示背景上没有放置任何图片 如果需要设置一个背景图像,必须为这个属性设置一个url值 background-image:url(bg.png); 注意图片的位置引入方法! 背景图片重复问题 使用background-repeat来解决,可用的值有: repeat-x(水平平铺) repeat-y(垂直平铺) no-repeat(不平铺) 背景图片的位置 使用 background-position 来设置 1 可以使用一些关键字:top bottom left right 和 center 通常这些关键字会成对出现 top left top center top right center left center center center right bottom left bottom center bottom right 2 也可以用百分比 background-position:50% 50%; 使用关键字时 第一个值是y轴(垂直方向) 第二个值是x轴(水平方向) 使用具体的数值时,例如百分比时 第一个表示x轴(水平方向),第二个表示y轴(垂直方向) 背景关联(使背景图片不随着滚动条的移动而移动) background-attachment:fixed; (3)总结写法 background:#00ff00 url(bg.gif) no-repeat fixed center left; 写法: background:颜色值 背景图片地址 图片是否平铺 图片是否随滚动条移动而移动 水平偏移值 垂直偏移值 格式不需要一定相同 3.边框 border:1px solid#ccc; dashed 表示虚线 border-left:none; border-right:none; border-top:none; border-bottom:none; 分开设置CSS学习之路-第2篇
我这节学的是构造块级元素:
1.宽高
width:数值;
height:数值;
也可用百分比!
长高的设置不会被后代元素继承
2.背景
(1)背景颜色
background-color:颜色值;
颜色值上一篇有介绍过,这里就不详细介绍了
background-color不会被后代继承
(2)背景图片
background-image:属性; 属性的默认值为none 表示背景上没有放置任何图片
如果需要设置一个背景图像,必须为这个属性设置一个url值
background-image:url(bg.png);
注意图片的位置引入方法!
背景图片重复问题
使用background-repeat来解决,可用的值有:
repeat-x(水平平铺)
repeat-y(垂直平铺)
no-repeat(不平铺)
背景图片的位置
使用 background-position 来设置
1>可以使用一些关键字:top bottom left right 和 center
通常这些关键字会成对出现
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
2>也可以用百分比
background-position:50% 50%;
使用关键字时
第一个值是y轴(垂直方向) 第二个值是x轴(水平方向)
使用具体的数值时,例如百分比时
第一个表示x轴(水平方向),第二个表示y轴(垂直方向)
背景关联(使背景图片不随着滚动条的移动而移动)
background-attachment:fixed;
(3)总结写法
background:#00ff00 url(bg.gif) no-repeat fixed center
left;
写法:
background:颜色值 背景图片地址 图片是否平铺 图片是否随滚动条移动而移动 水平偏移值 垂直偏移值
格式不需要一定相同
3.边框
border:1px solid#ccc;
dashed 表示虚线
border-left:none;
border-right:none;
border-top:none;
border-bottom:none;
分开设置本文采用 CC BY-NC-SA 4.0 协议进行授权,如无注明均为原创,转载请注明出处。
标题:CSS学习之路-第2篇作者:九仞之行链接:http://dev.styunlen.cn/archives/post-49.html
💬 评论 (1)✿
