CSS常用属性
- font-family :设置元素字体，如黑体，宋体，楷体，微软雅黑等等
用法：直接 font-family: 字体名称
或者 属性值 为 inherit ：从父元素继承字体 - vertical-align:设置一个元素的垂直对齐方式，取值范围：baseline(默认), sub, super,top,text-top, middle, bottom,text-bottom length, %, inherit
p.one{
vertical-align:baseline;/*默认，元素放在父元素基线上*/
}
p.two{
vertical-align:sub;/*垂直对齐文本下标*/
}
p.three{
vertical-align:super;/*垂直对齐文本上标*/
}
p.four{
vertical-align:top;/*把元素顶端与行中最高元素顶端对齐*/
}
p.eight{
vertical-align:tex-top;
/*把元素顶端与父元素顶端对齐*/
}
p.five{
text-decoration:middle;/*闪烁文本*/
}
p.six{
text-decoration:bottom;
/*把元素顶端与行中最低元素的顶端对齐*/
}
p.seven{
text-decoration:text-bottom;/*把元素底端与父元素底端对齐*/
}
p.nine{
text-decoration:50%;/*使用line-height属性的百分比值来排列，允许负值*/
}
p.ten{
text-decoration:inherit;/*继承父元素*/
}
-
background-image:url(‘images/photo_test.jpg’) 背景图片
-
background-color:#cccccc; 背景颜色
-
font-style 字体样式 属性值 3种
<style>
p.normal {font-style:normal;} /*浏览器正常字体，也是默认属性值*/
p.italic {font-style:italic;} /*斜体*/
p.oblique {font-style:oblique;} /*倾斜字体*/
</style>
- font-weight 字体粗细 normal(正常)， bold(粗体字符) ， bolder(更粗的字符)， lighter(更细的字体)，100-900间的具体值，400是normal 700是bold
- text-align:设置文本水平对齐方式, 除下面的属性值外 还可以取 inherit 继承父元素的对齐方式
p.one{
text-align:center; /*靠中间对齐*/
}
p.two{
text-align:left;/*靠左对齐，也是默认的对齐方式*/
}
p.three{
text-align:right;/*靠右对齐*/
}
p.four{
text-align:justify;两端对齐
}
上面那图文字太少，不足以看出 left 和 justify的区别，请看下图：注意观察右边细微的区别
- text-decoration 文本装饰 同理 也能取 inherit 继承父元素的值
p.one{
text-decoration:overline;/*文本上一条线*/
}
p.two{
text-decoration:line-through;/*穿过文本的一条线*/
}
p.three{
text-decoration:underline;/*文本下一条线*/
}
p.four{
text-decoration:none;/*无。也是默认的*/
}
p.five{
text-decoration:blink;/*闪烁文本*/
}
- text-shadow:文本阴影
分别对应4个属性，阴影水平右偏值，下偏值，模糊距离，阴影的颜色（前2个属性是必需要的，均可取负值，即反方向）后两个可选
text-shadow: h-shadow v-shadow blur color;
如：
h1.one{
text-shadow:5px 5px 10px #FF0000;
}
-
text-indent:设置文本首行的缩进，其属性值可取：
-
具体长度值 如 10px
-
% 父元素宽度的百分比
-
inherit 从父元素继承text-indent 属性的值
p{
text-indent:50px;/*取具体长度值*/
}
div{
width:400px;
}
p{
text-indent:50%;/*父元素宽度百分比*/
}
<style>
<!--
div{
text-indent:25px;/*继承父元素的text-indent 属性值*/
}
-->
</style>
- line-height:设置行间距,其属性值可以取
| 属性值 | 属性描述 |
|---|---|
| normal | 默认值，设置合理的行间距 |
| number | 以number与当前字体尺寸相乘来设置行间距 |
| length | 设置固定的行间距 |
| % | 基于当前字体尺寸的百分比设置行间距 |
| inherit | 从父元素继承line-height值 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-height属性测试</title>
<style>
div.one{
line-height:50%;
}
div.two{
line-height:300%;
}
</style>
</head>
<body>
<div class="one">
<p>你的能量，超乎你的想象！</p>
<p>你的能量，超乎你的想象！</p>
<p>你的能量，超乎你的想象！</p>
</div>
<div class="two">
<p>你的能量，超乎你的想象！</p>
<p>你的能量，超乎你的想象！</p>
<p>你的能量，超乎你的想象！</p>
</div>
<div> 标准行高：
<p>你的能量，超乎你的想象！</p>
<p>你的能量，超乎你的想象！</p>
<p>你的能量，超乎你的想象！</p>
</div>
</body>
</html>
322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
