廓线(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 里面了

完整实例:

、美化网页元素

本章目标：

• 会使用CSS设置字体样式和文本样式
• 会使用CSS设置超链接样式
• 会使用CSS设置列表样式
• 会使用CSS设置背景样式
• 会使用CSS设置渐变效果

2.1、为什么使用CSS

【查看淘宝页面，让学员观察，重点记住了什么东西】 因此使用CSS样式美化网页文本具有如下意义。

1. 有效的传递页面信息
2. 使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户
3. 可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
4. 具有良好的用户体验

< span>标签 < span>标签 的作用：能让某几个文字或者某个词语凸显出来，从而添加对应的样式！

<p>好好学习，<span>天天向上</span></p>

2.2、字体样式

在这里插入图片描述

为一名程序员，天天离不开的不是你媳妇，是你用键盘敲出来的代码，一个好的码农，不光能写代码完成功能，还要能写出来好代码，什么是好代码？好代码不管用什么语言写，层次分明，注释明了，功能实现，代码简洁即可，今天给大家介绍几个我常用的代码美化工具，觉得有用有分享转发，收藏了。

一.CodeZen代码转图像工具

CodeZen是一个非常简约的代码转图像工具，就像操作文本编辑器一样简单，能快速将你的源代码导出为具有语法风格的图像。

二.Carbon代码转图像的开源项目

Carbon是由Dawn Labs创建开发的一个代码转图像的开源项目，目前在GitHub上拥有20000多颗星，每月活跃用户超过50000。

三.Codeimg.io 创建代码图像的工具

Codeimg.io 是一个仍在测试中的创建代码图像的工具，目前发布了创建代码图像所需的基本功能。

四.Glorious Demo开源的JavaScript库

Glorious Demo是一个开源的JavaScript库，它提供了一个简单的API来为你的代码示例创建动画。目前在GitHub拥有近3000颗星。

欢迎关注云码素材，交流分享! 云码素材原创作品，更多精品资源下载，技术分享请关注，私信云码素材！