今天是第一次学习css样式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--外部样式-->
<link rel="stylesheet" type="text/css" href="">
<title>选择器</title>
<style type="text/css">
div{
background-size: 15px;
color: red;
}
#top{
font-size: 20px;
color: blue;
}
/*id选择器*/
.text{
background-color: yellow;
font-family: "宋体"
font-size:15px;
}
/*claa选择器*/
p{
background-color: black;
}
/*标签选择器*/
/*id选择器>class选择器>标签选择器*/
/*父子选择器*/
ul li{
background-color: #f0f8ff
}
/*通配选择器*/
ul * {
color: #00008b
}
/*子元素选择器*/
ul > li{
font-family: "宋体"
}
/*属性选择器*/
*[id]{
color: black;
}
/*根据属性名和值来选元素*/
li[class="text"]{
font-size: 30px;
}
/*选择样式包括制定词*/
li[class^="text"]{
background-color: #f0f8ff
}
</style>
</head>
<body>
<ul type="none">
<li id="top">登录微信订阅号</li>
<li id="foot">点击“自定义菜单”</li>
<li class="text">进入自定义菜单页面后点击“添加菜单”</li>
<li class="text1">输入菜单名（这里我输入了“往期回顾”)</li>
<li class="text2">选择“跳转网页”（注：这时页面地址栏是灰色的，无法手动输入）</li>
<li class="text3">点击“从公众号图文消息中选择”</li>
<li class="text4">进入“选择图文消息”页面后，点击“历史消息”</li>
<li class="text5">勾选“跳转到历史消息列表”并点击“确定”</li>
<li class="text6">上一步点击“确定”后，会自动返回自定义菜单页面（注：这时再看页面地址栏已经默认历史消息的网址了）然后点击“保存并发布”</li>
<li class="text7">跳出确认信息，点击“确定”。这样就完成了设置。大家赶紧来试试吧</li>
<li class="text">确认</li>
</ul>
<div>
<p>我是一只小小鸟</p>
<p>就算飞也飞不高</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
