2执行菜单栏中的”文件>新建”命令或按住Ctrl+N键打开”新建文档”对话框，选择其文档类型为HTML，单击”创建”按钮，即创建一个网页文档。
3在<body>和</body>之间添加<ul class=”text”></ul>，如下图所示。【基本语法】<ul class=”XXX”> ….</ul>【语法说明】在HTML文件中，可以利用成对的<ul></ul>标记插入无序列表。CSS中的class中文意思是类,类可以应用于多个标签元素。类前面都带有一个英文句点“.”如:<style type=”text/css”.bigfont {font-size:36px}</style>引用时在标签里加上class=””例:用在段落标签：<p class=”bigfont”>大字体</P>
4<ul> 和</ul>之间添加”<li>首页</li> <li>新闻</li> <li>汽车</li> <li>体育</li> <li>视频</li>”,如下图所示。【基本语法】<ul class=”XXX”><li>….</li><li>….</li><li>….</li><li>….</li>…..</ul>【语法说明】列表项标记<li></li>用来定义列表项序列。
5<head>和</head>之间添加”<style type=”text/css”></style>”,如下图所示。【基本语法】<style type=”text/css”>选择符1{样式属性：属性值；样式属性：属性值；…}选择符2{样式属性：属性值；样式属性：属性值；…}….选择符n{样式属性：属性值；样式属性：属性值；…}</style>【语法说明】<style>标记是用来说明所要定义的样式，type属性是指style元素以CSS的语法定义。【选择符1..选择符n】：选择符可以使用HTML标记的名称，所有的HTML标记都可以作为选择符。【样式属性】：主要指关于对选择符格式化显示风格的样式属性名称。【属性值】：设置对应样式属性的值。
6<style type=”text/css”></style>之间添加”.text{color:hsla(295,86%,50%,1.00);font-family:”微软雅黑”;list-style-type:none;}【基本语法】color属性：设置字体颜色font-family属性：设置文字样式list-style-type属性：设置列表样式（none：不显示任何列表符号或编号）
7保存网页文件，按住F12键可以在浏览器中预览效果，如下图所示。
@ css3和css一样吗？
CSS3是CSS的子集，CSS3是最新的标准，提供了很多好用的新属性，提升了网页的表现性。
CSS3提供了更好用的选择器
最新的CSS3中，对伪类、伪元素选择器做了严格的规范。有了伪类后，不用在div标签里面添加额外的元素完成一些DOM操作，可以通过::before,::after完成，代码简洁明了。对于鼠标的操作，也可以通过::hover等类似的操作完成。非常高效。还有::first–child等类似的选择器去操作子元素。
CSS3使动画效果越来越方便
css3里面通过animation来完成动画，设置@keyframes即可，一些轻量级的动画不必再通过js完成。
CSS3完成圆角、阴影美化更方便
以前的css完成类似的功能只能通过图片做背景，现在只需要border-radius、boxshadow即可。非常高效简洁。
CSS3提供了全新的盒模型
这个特性十分有用。原来的盒模型width=content.+border+padding。你规定了width.每次都要自己计算，现在有了boder-box不用这么麻烦了。
CSS3的flex布局是最强大的
IE已死，不需要再考虑它的兼容性！！！用flex布局，节省很多时间，节省的时间可以学很多东西，而不是浪费时间去适应落后的ie！！！
还有很多好用的css3特性，这个版本提供了巨大的生产力！！！很感谢它，期待下一个grid布局～
以上是偶的看法～
@ box在HTML中的意思？
这是个CSS的相邻同胞选择器。 .box + .box 意思就是：选择紧邻第一个box元素的同胞box元素。 这俩类名一样，解释起来有点混乱。 偶举个例子。 例如：标题 标题
文章段落
如果偶这么写：.box1 + h1 ,那么偶选择的就是类名叫.h1-1的元素。 如果：.box2 + h1 ,它不会选择任何元素，因为.box2的下面没有一个叫h1的同胞元素。 如果：h1 + div ,那么会选择.box2的div元素。 第一个元素 + 第二个元素 这个选择器只会选择 紧邻第一个元素 并且是在第一个元素下面的同胞级元素 上面那段代码，如果你写 ：.box1 + .box2 将没有效果，因为他们中间夹了个h1元素。 但是有一个选择器可以实现，就是.box1 ~ .box2 同胞选择器。 能力有限，不知帮到了吗？
@ 用什么表示子代选择器？
CSS3中的关系选择器主要包括子代选择器和兄弟选择器，其中子代选择器由符号连接，兄弟选择器由符号“+”和“~”连接，具体如下所示。
（1）关系选择器
例如： h1>strong
说明：表示选择嵌套在h1标记的子标记strong。
（2）临近兄弟选择器
例如： h2+p
说明：表示选择h2标记后紧邻的第一个兄弟标记p。
（3）普通兄弟选择器
例如：p~h2
说明：表示选择p标记所有的h2兄弟标记
css选择器选择所有元素 DW教程如何利用CSS样式设置列表文字 – CSS – 前端 html5 css3 pdf完整版
