CSS将每个元素看做一个盒子表示,由内容,内边框,外边框组成。
内容可被透明内边框padding包围,内边框周围可放一个可选边框border,有一个可选的透明化外边框(margin)包围所有部分。
所有元素,甚至inline元素,也被当做盒。
外边距提供元素之间的间距。
.guarantee{ border-color: black; border-width: 1px; border-style: solid; background-color: #a7caca; padding: 25px; margin:30px; color: gray; line-height: 1.9em; font-style: italic; font-family: Georgia,"Times New Roman",Times,serif; background-image: url(images/background.gif); 添加背景图 background-repeat: no-repeat; 不重复出现背景图 background-position: top left; 背景图位置
background-repeat: repeat; (default) no-repeat; (不重复) repeat-x; (水平重复) repeat-y; (垂直重复) inherit (继承父级元素)
background-position: top; left; right; bottom; center;
border-style:solid;dotted;double;dashed;groove;inset;outset;ridge;
border-top/right/left/bottom-color/style/width
设置某一条边框的属性
border-radius:15px
设置圆角
border-top/bottom-left/right-radius:3em
某个角设置圆角
id是一个元素的唯一标识符,class是一群元素的标识符
但是一个元素可以既有id,又有class.
class元素的选择器是.class
id元素的选择器是#id
多个样式表时,后出现的样式表优先。使用多个样式表的原因:1.网站不同模块的需要;2.面向不同浏览器。
在指定样式表的链接中,添加media
属性,可以在指定设备类型是触发。
或者直接在CSS 文件中使用@media规则,使用媒体查询。
(需要密切关注指定设备的最佳时间)