color:设置字体颜色:
取值方式有:1.颜色值red,green等 、2.十六进制#FF0000,#FF2313等、3.RGB代码rgb(225,225,112)或rgb(100%,55%,0%),取值范围0-225,0%-100%,rgba是rgb的扩展,其中第四个参数设置的是透明度,取值范围为0-1,注意:IE低版本不支持此属性,低版本IE需要:filter:Alpha(opacity=50),opacity值为0 到 100,如下:
p{
color:rgba(112,33,65,0.7);/* 第四个参数设置的是透明度,0.7中的0可以省略直接写 .7 */
}
text-align:设置文本的对齐方式:
强调的是容器中文字对齐,其值:left左对齐、right右对齐、center居中对齐, justify两边对齐(自动控制字距使文本紧靠两边显示)
div{
text-align:center;
}
text-indent:设置段落文本首行缩进:
其单位使用em,em是根据字体大小变化的。
p{
text-indent:2em;
}
text-decoration:文本装饰:
通常用于给链接装饰效果,当然其他元素依然适用,其值有:none标准的文本、underline下划线文本、overline上划线文本、line-through中划线文本、blink闪烁(兼容性极大,忽略此值)。
a{
text-decoration:none;
}
p{
text-decoration:underline;
}
list-style:设置列表样式:
list-style:none去掉列表前面的点。
li {
list-style: none;
}
cursor:设置鼠标样式:
li {
cursor: pointer;
}
其值有:
继:
outline轮廓线:
表单input和文本域textarea默认有轮廓线,想要去掉默认的轮廓线就要使用outline属性,其值none取消轮廓线(值0也是取消轮廓线),一般去掉默认的轮廓线后会添加上一个border边框。
input {
outline: none;
border: 1px solid black;
}
resize防止拖拽textarea文本域尺寸:
textarea文本域默认有一个拖拽变化尺寸的小脚,一般是通过resize: none来去掉的。
textarea {
resize: none;
outline: none;
border: 1px solid black;
}
vertical-align:设置行内元素及行内块元素对齐方式:
baseline基线对齐,默认值、super垂直对齐文本上标、sub垂直对齐文本下标、top把元素的顶端和行中最高元素的顶端对齐、text-top把元素的顶端与父元素的文本顶端对齐、middle把此元素垂直居中在父元素中部、bottom把元素的顶端与行中最低元素的顶端对齐、text-bottom把元素的低端与父级元素字体的低端对齐、20px等具体的像素值、30%等百分比、inherit继承父级元素vertical-align值
<style>
div {
height:500px;
background-color:yellow;
font-size:50px;
}
img,
del {
vertical-align:middle;
}
</style>
<div class="main">
<sapn>中文English</span>
<del>测试Test</del>
<img src="middle.PNG" alt="">
</div>
white-space:设置溢出文字是否换行:
在实际开发中,为了防止超出文字自动换行,使用white-space可以很好的解决这个问题,其值:normal默认的会换行、nowrap强制在同一行中显示所有文本,直到遇到br标签才换行。
text-overflow:文字溢出显示省略号:
其值clip文本超出不显示省略号,只是做简单的裁剪、ellipsis文本超出后会显示省略号。
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海123
其它问题可通过以下方式联系本人咨询:
QQ:810665436
*ConstancyMan