CSS 表单美化-outstyle

廓线(outstyle)

比较常见于表单和链接等。

outline-style:none; 取消谷歌、360等蓝色边框

:focus 获得焦点的状态, 鼠标的光标就是焦点

.username:focus{ /*获得焦点的状态*/
    border:1px dashed pink;
    background-color:#FFF7FB;
    color:pink;
}

取消表单边框

因为表单在不同浏览器里面, 以后不同的显示方式。

所以, 一般情况下, 我们会把所有的表单都去掉边框。

border: 0 none; 兼容性更好的写法

Label 标签

<label for="txt">搜索一下</label>: <input type="text" id="txt" class="search" value="请输入..." />

这样, 我们点击搜索一下, 光标就跳到了相应id的 input 里面了

完整实例:

般我们在做页面涉及字体的时候，最多就是换个color换个font-family，在空闲时间之时，我们可以自己动手，看看能不能“创造”出一些CSS字体样式呢～体现下字体的文艺范！下面就来说说有关css美化文字的一些常见做法！

透明文字：

用rgba调整透明度

用opacity调整遮罩

这两者区别是用rgba只是对文字有透明度，而opacity对整个div都有遮罩影响

模糊文字

可以用text-shadow喝-webkit-text-fill-color组合，得出模糊文字，如下：

镂空文字

可以用-webkit-text-stroke来给文字外围描边，然后在把文字的填充颜色设置为透明，这样就能只显示出文字的外围的描边

渐变文字

background可以做到渐变颜色

图片背景文字

在一些网站经常看到类似于这样炫酷的效果

以上就是今天要说的一些CSS美化文字方法，还有很多方法，等一一总结出来再给小伙伴们看，谢谢大家支持！

、字体样式

font-family：设置字体类型，可以同时声明多种字体，字体之间用英文逗号分隔开；
font-size：设置字体大小，常用单位为px，还有其他如in、cm、mm、pt、pc等单位；
font-style：设置字体风格，有三个属性值，分别是normal(标准字体样式)、italic(斜体字体样式)、oblique(倾斜字体样式)；
font-weight：设置字体粗细，属性值有normal(默认)、bold(粗体)、bolder(更粗)、lighter(更细)，还可以用100到900定义由细到粗的字体，400等同于normal，700等同于bold；
font：设置字体多种属性，可以同时设置；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
 p{
 font-family:"宋体";
 font-size:14px;
 }
 .p2{
 font-style:italic;
 }
 .p3{
 font-weight:bold;
 }
 .p4{
 font-family:"微软雅黑";
 }
 .p5{
 font-size:36px;
 }
 
</style>
</head>
<body>
 <p class="p1">这是第一行(样式为：标签选择器p中的样式)</p>
 <p class="p2">这是第二行(样式为：斜体)</p>
 <p class="p3">这是第三行(样式为：加粗)</p>
 <p class="p4">这是第四行(样式为：字体变成微软雅黑)</p>
 <p class="p5">这是第五行(样式为：字体大小为36px)</p>
</body>
</html>

效果演示图如下所示：

1.png

二、使用CSS排版网页文本

color：设置文本颜色，统一采用RGB格式，也就是“红绿蓝”三原色模式；
text-align：设置元素水平对齐方式，属性值有left(左对齐，默认)、right(右对齐)、center(中间对齐)、justify(两端对齐)；
line-height：设置文本行高，单位也是px，也可以不加单位，按倍数表示；
text-indent：设置文本的首行缩进，单位是em或者px，em是相对单位，表示长度相当于文本中字符的倍数，可以根据字体大小自适应改变；
text-decoration：设置文本的装饰，属性值有none(默认值)、underline(下划线)、overline(上划线)、line-through(删除线)；
vertical-align：垂直对齐，属性值有top、middle、bottom；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.div1{
 width:500px;
 border:1px solid #000;
 padding:20px; 
 }
.p1{
 color:red;
 } 
.p2{
 text-align:center;
 } 
.p3{
 line-height:50px;
 }
.p4{
 text-indent:2em;
 }
.p5{
 text-decoration:line-through;
 }
.div2{
 border:1px solid red;
 padding:20px;
 }
![18.png](https://upload-images.jianshu.io/upload_images/3260639-668445cd70292382.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
.img1{
 width:70px;
 height:70px;
 vertical-align:middle;
 } 
 
</style>
</head>
<body>
 <div class="div1">
 <p class="p1">这是第一行(样式为: 字体红色)</p>
 <p class="p2">这是第二行(样式为：居中)</p>
 <p class="p3">这是第三行(样式为：行高50px)</p>
 <p class="p4">这是第四行(样式为：缩进2em)</p>
 <p class="p5">这是第五行(样式为：删除线)</p>
 <div class="div2">
 <img src="tu24.png" alt="" class="img1">这是第六行(样式为：垂直居中)
 </div>
 
 </div>
</body>
</html>

演示效果如图所示：

2.png

三、cursor设置鼠标形状

cursor属性可以用来设置鼠标指针样式；
default：默认光标，箭头；
pointer：超链接的指针，手型；
wait：指示程序正在忙；
help：指示可用的帮助；
text：指示文本；
crosshair：鼠标呈现十字状；

四、背景样式

background-color：背景颜色；
background-image：背景图像；
background-repeat：背景平铺，属性值有repeat(沿水平和垂直方向平铺)、no-repeat(不平铺)、repeat-x(沿水平方向平铺)、repeat-y(沿水质方向平铺)；
background-position：设置图像在背景中的位置；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.div1{
 width:500px;
 height:500px;
 background-color:#F1CCE8; //背景颜色
 }
.div2{
 width:100%;
 height:100%;
 background-image:url(tu24.png); // 插入背景图片
 background-repeat:no-repeat; //图片不平铺
 background-position:center center; //背景图片垂直水平居中
 }
</style>
</head>
<body>
 <div class="div1">
 <div class="div2">
 </div>
 </div>
</body>
</html>

演示效果图：

3.png

五、列表样式

list-style-type：设置列表项标记的类型，属性值有none(无标记符号)、disc(实心圆，默认类型)、circle(空心圆)、square(实心正方形)、decimal(数字)；
list-style-image：使用图片替换列表的标记项；
list-style-position：设置在何处防止列表标记项，属性值有inside(放在文本以内)、outside(放在文本左侧)；
list-style：简写属性，可以设置所有列表属性；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.div1{
 width:300px;
 height:300px;
 background-color:#F1CCE8;
 padding:20px;
 }
.ul1{
 }
.ul2{
 list-style-type:none;
 }
.ul3{
 list-style-image:url(person02.png);
 list-style-position:outside;
 
 } 
</style>
</head>
<body>
 <div class="div1">
 <ul class="ul1">
 <li>第一队</li>
 <li>第一队</li>
 <li>第一队</li>
 </ul>
 <ul class="ul2">
 <li>第二队</li>
 <li>第二队</li>
 <li>第二队</li>
 </ul>
 <ul class="ul3">
 <li>第三队</li>
 <li>第三队</li>
 <li>第三队</li>
 </ul>
 </div>
</body>
</html>

演示效果图为：

4.png

在线咨询

上一篇：小巧且精美的MarkDown笔记应用程序-Notable
下一篇：逐一介绍HTML5工程师需具备的职能及岗位职责！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。