标签：02 pink color 元素 height width background 选择器
【CSS学习笔记02】
1.复合选择器
1.1后代选择器
/* 任意基础选择器组合，选择器间用空格隔开 */
ol li {
color: pink;
}
ol li a {
color: red;
}
.nav li a {
color: yellow;
}
1.2子元素选择器
<style>
/* 最近一级的选择器 */
.nav>a {
color: red;
}
</style>
1.3并集选择器
div,
p,
.pig li {
color: pink;
}
id：身份证（唯一） class：可以理解为名字（可以被多个人使用）
1.4链接伪类选择器
<style>
/* 1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来 */
a:link {
color: #333;
text-decoration: none;
}
/*2. a:visited 选择点击过的(访问过的)链接 */
a:visited {
color: orange;
}
/*3. a:hover 选择鼠标经过的那个链接 */
a:hover {
color: skyblue;
text-decoration: underline;
}
/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
color: green;
}
/* 5.因为a标签在浏览器中具有默认样式，实际工作中需要单独指定样式 */
/* 6.注意：为确保生效，请按照LVHA的顺序声明链接伪类选择器 （记忆法：LV好） */
</style>
1.5focus伪类选择器
<style>
/* //focus伪类选择器用于选取获得焦点的input表单元素选取出来 使用较少 */
input:focus {
background-color: pink;
color: red;
}
</style>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
2.显示模式
2.1块级元素
<style>
div {
/* width: 200px; */
height: 200px;
background-color: pink;
}
</style>
2.2行内元素
<style>
span {
width: 100px;
height: 100px;
background-color: hotpink;
}
</style>
2.3行内块元素
span {
width: 300px;
height: 30px;
background-color: skyblue;
display: inline-block;
}
2.4模式转换
<style>
a {
width: 150px;
height: 50px;
background-color: pink;
/* 把行内元素 a 转换为 块级元素 ，可增加触发范围*/
display: block;
}
div {
width: 300px;
height: 100px;
background-color: purple;
/* 把 div 块级元素转换为行内元素 */
display: inline;
}
span {
width: 300px;
height: 30px;
background-color: skyblue;
display: inline-block;
}
</style>
3.背景设置
3.1背景颜色
<style>
div {
width: 200px;
height: 200px;
/* background-color: transparent; 透明的 清澈的 */
/* background-color: red; */
background-color: pink;
}
</style>
3.2背景图片
body {
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
/* background-position: center auto; */
background-position: center top;
}
3.3背景固定
<style>
body {
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
/* 默认是滚动的 */
/* background-attachment: scroll; */
/* 把背景图片固定住 */
/* background-attachment: fixed; */
color: #fff;
font-size: 20px;
}
</style>
4.单行文字垂直居中
<style>
div {
width: 200px;
height: 40px;
background-color: pink;
line-height: 40px;
/* 行高等于盒子高度就可以让文字垂直居中
如果小于位置就会偏上 大于偏下
*/
}
</style>
5.emmet语法快速生成html标签和样式
5.1快速生成html标签
5.2快速格式化代码
6.简单版小米侧边栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单版小米侧边栏</title>
<style>
/* 1. 把a转换为块级元素 */
a {
display: block;
width: 230px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
text-indent: 2em;
line-height: 40px;
}
/* 2 鼠标经过链接变换背景颜色 */
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
</html>
7.综合案例-五彩导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>综合案例-五彩导航</title>
<style>
.nav a {
/* 转成行內块元素 */
display: inline-block;
width: 120px;
height: 58px;
background-color: pink;
text-align: center;
line-height: 48px;
color: #fff;
text-decoration: none;
}
.nav .bg1 {
background: url(images/bg1.png) no-repeat;
}
.nav .bg1:hover {
background-image: url(images/bg11.png);
/* background: url(images/bg11.png); */
}
.nav .bg2 {
background: url(images/bg2.png) no-repeat;
}
.nav .bg2:hover {
background-image: url(images/bg22.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="bg1">五彩导航</a>
<a href="#" class="bg2">五彩导航</a>
<a href="#">五彩导航</a>
<a href="#">五彩导航</a>
<a href="#">五彩导航</a>
</div>
</body>
</html>
标签：02,pink,color,元素,height,width,background,选择器 来源： https://blog.csdn.net/m0_46503569/article/details/115803911
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。