<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*CSS语法必须卸载<style>标签中*/ /*CSS注释*/ li{ color: red; font-size: 36; } .first{color: black ;} #abc{color: mediumspringgreen;} /*[选择器命名规范] ①、只能由字母、数字、下划线组成 ②、开头不能是数字 */ /*[选择器的优先级] ①、近者优先 ②、当作用于同一层时，可用权重计算 权重划分：标签选择器1 class选择器10 ID选择器100 #ul .li .li2 li{} 优先级权重121 * */ /*[类选择器 CLASS选择器] ①、写法： .class名{} ②、调用：在需要修改样式的HTML标签上，使用CLASS="选择器名" ③、当作用于同一层时，优先级class选择器大于>标签选择器 */ /*[通用选择器] ①、写法*{} ② 、作用：选中页面中的HTML标签 ③、优先级最低 */ [ID选择器] /*①写法:#选择器名{} ②、在需要修改样式的HTML 标签上,使用id=“选择器名"" 在同一层时，id选择器>class选择器 ③、ID选择器是唯一的，同一页面严禁出现同名ID！！！ */
/*[标签选择器] 写法：HTML标签名{} 作用：选中所有对应的HTML标签，并修改其样式 */ /*[后代选择器] * ①、写法：选择器1 选择器2...选择器N{} ②、生效规则：选择器2必须是选择器1的后代，依次类推 【子代选择器】 ①写法：选择器1>选择器2>...选择器N{} ②、生效规则：选择器2必须是选择器1的【直接子代】.. [交集选择器] ①写法：选择器1选择器2..选择器N ②生效规则：必须同时满足所有选择器，才会生效 【并集选择器】 ①、写法 选择器1，选择器2，...选择器N{} ②、生效规则：满足任意一个选择器，均可生效 */ /*[三种使用CSS样式的方式] * 1、行内样式表：直接在HTML开始标签中使用style=“”的方式 * 引用 * 特点：将CSS代码与HTML代码完全糅杂在一起，不符合W3C关于 * 内容与表现分离的要求。不利于样式复用 * 优先级：最高 * [伪类选择器] * 1、写法：选择器名：伪类状态{} * 常见的伪类状态： * ：link 未访问 ：visited 已访问 * ：hover 鼠标指上状态 ：active 激活选定状态 * 注：当超链接，同时具有以上四种状态，则选择器必须按照上述顺序排列。
* ：focus获得焦点，常用于input * * */ a:link{ color: bisque; text-decoration: underline; } .list{color:black ;} </style>
</head> <body>
<div> <ul> <li id="abc" class="first">这是1</li> <li>这是2</li> <li>这是3</li> <li>这是4</li> <li>这是5</li> </ul> </div> <!--[三种使用CSS样式的方式] 1、行内样式表：直接在HTML开始标签中使用style=“”的方式 引用 特点：将CSS代码与HTML代码完全糅杂在一起，不符合W3C关于 内容与表现分离的要求。不利于样式复用 优先级：最高 2、内部样式表：在<head></head>中，使用<style type="text/css"></style>方式引用 特点：将CSS代码与HTML代码分离，但是没有彻底分离CSS文件与HTML文件 不利于多页面复用样式 3、外部样式表 <link rel="stylesheet" type="text/CSS" href="01.css"> 特点：实现了CSS与HTML的彻底分离，有利于样式复用及后期维护--> </body> </html>