您的位置：首页 > Web前端 > CSS

HTML+CSS基础入门-第十四天（CSS-文本属性）

2017-03-28 11:48 911 查看

text-align横向排列

属性值

left：水平居左

center：水平居中

right：水平居右

列表内容

代码

<!doctype html>
<body>
<head>
<title>文本属性</title>
<meta charset="utf">

<style type="text/css">
div{
width:900px;
height:500px;
background:red;
}

.p1{
text-align:left;
}
.p2{
text-align:center;
}
.p3{
text-align:right;
}

</style>

</head>
<body>
<div>
<p class="p1">好好学习天天向上 left</p>
<p class="p2">好好学习天天向上 center</p>
<p class="p3">好好学习天天向上 right</p>
</div>
</body>

</body>


显示结果



line-height文本行高

属性值

%基于字体大小的百分比行高

数值来设置固定值

代码

<!doctype html>
<body>
<head>
<title>文本属性</title>
<meta charset="utf">

<style type="text/css">
div{
width:400px;
height:500px;
background:red;
}

.p1{
font-size:20px;
line-height:50%;
}
.p2{
font-size:20px;
line-height:200%;
}
.p3{
font-size:20px;
line-height:40px;
}

</style>

</head>
<body>
<div>
<p class="p1">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
<p class="p2">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
<p class="p3">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
</div>
</body>

</body>


显示结果



text-indent首行缩进

属性值

%父元素的百分比

px固定值，默认是0

代码

<!doctype html>
<body>
<head>
<title>文本属性</title>
<meta charset="utf">

<style type="text/css">
div{
width:400px;
height:500px;
background:red;
}
p{
font-size:20px;

}
.p1{

line-height:100%;

}
.p2{

line-height:200%;
text-indent:50%
}
.p3{

line-height:40px;
text-indent:40px;
}

</style>

</head>
<body>
<div>
<p class="p1">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
<p class="p2">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
<p class="p3">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
</div>
</body>

</body>


显示结果



letter-spacing字符间距

属性值

normal

lenght设置具体的值，可以是负值

inherit继承

代码

<!doctype html>
<body>
<head>
<title>文本属性</title>
<meta charset="utf">

<style type="text/css">
div{
width:400px;
height:500px;
background:red;
}
p{
font-size:20px;

}
.p1{

letter-spacing:normal;
}
.p2{

letter-spacing:20px
}
.p3{

letter-spacing:-20px;
}

</style>

</head>
<body>
<div>
<p class="p1">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
<p class="p2">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
<p class="p3">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
</div>
</body>

</body>


显示结果



word-spacing单词间距

属性值

px：固定值

inherit：继承

代码

<!doctype html>
<body>
<head>
<title>文本属性</title>
<meta charset="utf">

<style type="text/css">
div{
width:400px;
height:500px;
background:red;
}
p{
font-size:20px;

}
.p1{
word-spacing:20px;

}
.p2{

word-spacing:40px;
}
.p3{

word-spacing:60px;
}

</style>

</head>
<body>
<div>
<p class="p1">I am bree good good study day day up</p><hr/>
<p class="p2">I am bree good good study day day up</p><hr/>
<p class="p3">I am bree good good study day day up</p><hr/>
</div>
</body>

</body>


显示结果



direction文本方向

属性值

ltr：从左到右

rtl：从右到左

inherit：继承

代码

<!doctype html>
<body>
<head>
<title>文本属性</title>
&
c4af
lt;meta charset="utf">

<style type="text/css">
div{
width:800px;
height:500px;
background:red;
}
p{
font-size:20px;

}
.p1{

}
.p2{

direction:rtl;

}
.p3{

direction:ltr;
}

</style>

</head>
<body>
<div>
<p class="p1">I am bree good good study day day up</p><hr/>
<p class="p2">I am bree good good study day day up</p><hr/>
<p class="p3">I am bree good good study day day up</p><hr/>
</div>
</body>

</body>


显示结果



text-transform文本大小写

属性

none：默认

capitalize：每个单词以大写字母开头

uppercase：定义只有大写字母

lowercase：仅有小写字母

inherit：规定应该从父元素继承text-transform属性的值

代码

<!doctype html>
<body>
<head>
<title>文本属性</title>
<meta charset="utf">

<style type="text/css">
div{
width:800px;
height:500px;
background:red;
}
p{
font-size:20px;

}
.p1{
text-transform:capitalize;

}
.p2{

text-transform:uppercase;

}
.p3{

text-transform:lowercase;
}

</style>

</head>
<body>
<div>
<p class="p1">I am bree good good study day day up  text-transform:capitalize</p><hr/>
<p class="p2">I am bree good good study day day up  text-transform:uppercase;</p><hr/>
<p class="p3">I am bree good good study day day up  text-transform:uppercase;</p><hr/>
</div>
</body>

</body>


显示结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html css 文本属性 text-trans direction
相关文章推荐
新的分享
章节导航