1.CSS 背景
CSS 属性定义背景效果:
background-color属性定义了元素的背景颜色
background-image属性描述了元素的背景图像.默认情况下,背景图像会在页面的水平或者垂直方向平铺,以覆盖整个元素实体.
body
{
background-image:url('gradient2.png');
}
background-repeat配合background-image使用,可以更改图片的平铺方式.可以不重复平铺,使用no-repeat,或者竖直平铺repeat-y
如果图像只在水平方向平铺 (repeat-x)
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
background-position可以利用 background-position 属性改变图像在背景中的位置
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动,scroll--背景图片随页面的其余部分滚动。这是默认;fixed--背景图像是固定的;inherit--指定background-attachment的设置应该从父元素继承
2.CSS 文本格式
文本颜色
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线
a {text-decoration:none;}//让链接无下划线
也可以这样:
h1 {text-decoration:overline;}//上划线
h2 {text-decoration:line-through;}//删除线
h3 {text-decoration:underline;}//下划线
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母,或每个单词的首字母大写。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}//首字母大写
文本缩进
文本缩进属性是用来指定文本的第一行的缩进。(别想着用空格缩进,那是很low的)
p {text-indent:50px;}
设置文字方向(ltr:默认。文本方向从左到右。rtl:文本方向从右到左。inherit:规定应该从父元素继承 direction 属性的值。)
div
{
direction:rtl;
}
letter-spacing 属性--属性增加或减少字符间的空白(字符间距)
h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
line-height 属性,可以使用数字(100px,或者0.5--这个其实也是百分比,就是50%而已)和百分比来设置(可以设置行与行之间的距离,比如设置
p.small {line-height:70%;}//行与行之间可能会重叠
p.big {line-height:200%;}//这样行与行就隔得开
)
注意:这个可以让文字垂直居中,设置的高度和div的高度一样的话
p.big
{
line-height: 30px
}
text-shadow 属性
基本文字阴影(text-shadow)
语法
text-shadow: h-shadow v-shadow blur color;
注意: text-shadow属性连接一个或更多的阴影文本。属性是阴影,指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。blur可选。模糊的距离;color可选。阴影的颜色
h1 {text-shadow:2px 2px 8px #FF0000;}
vertical-align 属性--设置一个元素的垂直对齐(相对于父元素的)。
<style>
img.top {
vertical-align: top;
}
img.bottom {
vertical-align: text-bottom;
}
p {
border: 1px solid red;
line-height: 8;
}
</style>
<p>dsfs
<img src="./voice_rcd_btn_nor.9.png" alt="w3cschool" width="270" height="50" />asfas</p>
<p>sdfs
<img class="top" src="./voice_rcd_btn_nor.9.png" alt="w3cschool" width="270" height="50" /> text-top 。</p>
<p>sdfs
<img class="bottom" src="./voice_rcd_btn_nor.9.png" alt="w3cschool" width="270" height="50" /> text-bottom </p>
white-space 属性--可以让文字不换行的。或者文字保留原格式,都可以使用这个。
3.字体
CSS字体属性定义字体,加粗,大小,文字样式。
字体系列
font-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。
多个字体系列是用一个逗号分隔指明:
p{font-family:"Times New Roman", Times, serif;}
字体样式
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值:
正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜(和斜体非常类似,但不太支持)
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体大小
font-size 属性设置文本的大小。
能否管理文字的大小,在网页设计中是非常重要的。但是,你不能通过调整字体大小使段落看上去像标题,或者使标题看上去像段落。
请务必使用正确的HTML标签,就<h1> - <h6>表示标题和<p>表示段落:
字体大小的值可以是绝对或相对的大小。
绝对大小:
- 设置一个指定大小的文本
- 不允许用户在所有浏览器中改变文本大小
- 确定了输出的物理尺寸时绝对大小很有用
相对大小: - 相对于周围的元素来设置大小
- 允许用户在浏览器中改变文字大小
如果你不指定一个字体的大小,默认大小和普通文本段落一样,是16像素(16px=1em)。
font-weight 属性--指定字体的粗细。
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}