<htmllang="en">
<head>
<metacharset="UTF-8">
<styletype="text/css">
css中的选择器
/*加空格 后代选择器
加尖括号>，子代选择器*/
/*标签选择器，作用与当前页面所有匹配标签*/
li{
color: blue;
}
/* 类选择器，作用于当前页面所有class值为red的标签*/
.red{
color: red;
}
/*伪类选择器*/
/*1：默认链接状态*/
a:link{
color: yellow;
}
/*2:已访问状态*/
a:visited{
color: darkgray;
}
/*鼠标悬浮状态*/
a:hover{
color: red;
}
/*鼠标点击时的状态*/
a:active{
color: orange;
}
</style>
<title>css入门</title>
</head>
<body>
<!--css的写法，分三类-->
<!--1：行内样式 (优先级最高，该样式只在当前标签可用，写法比较繁琐，尽量避免此种写法)-->
<p>电脑<spanstyle="color:red;font-size:40px">1</span>元起</p>
<!--2.内部样式 只在当前页面使用，比行内写法稍好。缺点：多个页面无法共用一个样式-->
<p>
电脑<spanid="price">1</span>元起
</p>
<!--3.外部样式（推荐写法，样式可以复用。做到样式和文件分离）-->
<p>
电脑<spanid="price2">1</span> 元起
</p>
<!--注意：以上效果的实现要符合“就近原则”，或者说浏览器是按照从上往下的顺序来渲染的，
处于上方的样式会被下方的样式覆盖，但是只会覆盖相同的属性，不同的属性仍会被渲染出来-->
<ul>
<li>家用电器</li>
<liclass="red">各类书籍</li>
<li>手机数码</li>
<liclass="red">日用百货</li>
</ul>
<a href="https://www.taobao.com/">淘宝</a>
</body>
</html>