之前我们编写的页面非常基础，我们只能通过一些很基本的属性来排列我们的页面元素，那么如何实现更高度的自定义呢，我们就需要用到CSS来自定义样式，首先我们创建一个名为style.css的文件。
首先在我们HTML文件的头部添加：
<link href="http://www.likecs.com/style.css">我们在CSS文件中添加以下内容：
body { text-align: center; }我们发现，网页的内容全部变为居中显示了，这正是css在生效，相当于我们现在给页面添加了自定义的样式规则。
当然，我们也可以选择不使用CSS，而是直接对某个元素添加样式：
<body> ...这样的效果其实是等同于上面的css文件的，相当于我们直接把样式定义在指定元素上。
也可以在头部直接定义样式，而不是使用外部文件：
<style> body { text-align: center; } </style>使用以上三种方式都可以自定义页面的样式，我们推荐使用还是第一种，不然我们的代码会很繁杂。
样式的属性是非常多的，我们不可能一个一个全部讲完，视频中用到什么再来讲解什么，如果同学们感兴趣，可以自行下去了解。
CSS选择器我们首先来了解一下选择器，那么什么是选择器呢？
在我们想要自定义一个元素的样式，那么我们肯定要去选择某个元素，只有先找到要自定义的元素，我们才能开始编写样式。
我们上面的例子中使用的就是标签名选择器，它可以快速选择页面中所有指定的的标签，比如我们之前使用的就是body标签，那么就相当于页面中所有的body元素全都使用此样式，那么我们现在来试试看选择页面中所有的input标签：
input { width: 200px; }我们发现，页面中所有的input元素宽度全部被设定为了200个像素（px是单位大小，代表像素，除了px还有em和rem，他们是根据当前元素字体大小决定的相对大小，一般用于适配各种大小的浏览器窗口，这里暂时不用）
样式编写完成后，如果只有一个属性，可以不带;若多个属性则每个属性后面都需要添加一个;
因此，一个标签选择器的格式为：
标签名称 { 属性名称: 属性值 }我们还可以设定输入框的字体大小、行高等：
input { width: 200px; font-size: 20px; line-height: 40px; }我们现在可以通过选择器快速地去设置某个元素样式了，那么如何实现只设置某个元素的样式呢，现在我们来看看，id选择器，我们之前已经讲解过了，每个元素都可以有一个id属性，我们可以将其当做一个跳转的锚点使用，而现在，我们可以使用css来进行定位：
我们先为元素添加id属性：
<h1>登陆我们的网站</h1>现在使用CSS选择我们的元素，并设定一个属性，选择某个id需要在前面加上一个#：
#title { color: red; }虽然id选择器已经可以很方便的指定某个元素，但是如果我们希望n个但不是元素都被选择，id选择器就无法实现了，因为每个元素的id是唯一的，不允许出现重复id的元素，因此接着我们来讲解一下类选择器。
每个元素都可以有一个class属性，表示当前元素属于某个类（注意这里的类和我们Java中的类概念完全不同）一个元素可以属于很多个类，一个类也可以被很多个元素使用：
<form> <div > <label> 账号： <input type="text" placeholder="Username..."> </label> </div> <div> <label> 密码： <input type="password" placeholder="Password..."> </label> </div> </form>上面的例子中，两个label元素都使用了test类（类名称是我们自定义的），现在我们在css文件中编写以下内容来以类进行选择：
.test{ color: blue; }我们发现，两个标签的文本内容都变为了蓝色，因此使用类选择器，能够对所有为此类的元素添加样式。注意在进行类选择时，我们需要在类名前面加上.来表示。
组合选择器和优先级问题我们也可以让多个选择器，共用一个css样式：
.test, #title { color: red; }只需要并排写即可，注意中间需要添加一个英文的逗号用于分割，我们也可以使用*来一次性选择所有的元素：
* { color: red; }我们还可以选择位于某个元素内的某个元素：
div label { color: red; }这样的话，就会选择所有位于div元素中的label元素。
当然，我们这里只介绍了一些常用的选择器，有关详细的CSS选择器可以查阅：https://www.runoob.com/cssref/css-selectors.html
我们接着来看一下选择器的优先级：