由于没有css实际统筹的概念,决定从从头开始学习,会跳过部分基础已知知识点,提升学习效率。前期会根据w3School的例子来学习,争取快速掌握基础知识点。
css背景相关
css设置背景颜色
<style type="text/css">
body {background-color: yellow}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<p class="no2">这个段落设置了内边距。</p>
</body>
</html>
在不同的情况下,可以指定元素使用不同的背景色以及其他属性,比如边距。
css设置文本背景颜色
在某些情况下,需要对文本内的特定文字添加背景颜色属性。
<html>
<head>
<style type="text/css">
span.highlight
{
background-color:yellow
}
</style>
</head>
<body>
<p>
<span class="highlight">这是文本。</span> 这是文本。 这是文本。 这是文本。 <span class="highlight">这是文本。</span>
</p>
</body>
</html>
这时候我们可以通过添加span标签,修改span的样式来做到该效果。
css设置背景图片以及常用属性
background也能设置背景图片,常用属性如background-repeat。
常用值有:repeat-x repeat y,no-repeat,repeat。默认属性是repeat。
同时我们也能设置图片的具体位置:background-position: 30% 20%; 。
也可以使用像素来定位图片的位置,当然,这么写比较死,
而且对不同尺寸的显示器并不友好:background-position: 10px 100px;。
如果不希望图片随着页面的滚动而滚动,可以设置background-attachment属性,
其中默认值是scroll,不滚动值是fixed,而inherit则是继承父类的属性。
最后,我们也可以把所有的样式写到一起,css能自动识别,用空格隔开即可,如:
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed 10% 10%;