• JSD-2204-HTML-CSS-Day02

    1.css

    1.1选择器续

    • 子孙后代选择器: 通过元素和元素之间的关系选择元素, 选择范围更广包含了后代元素
      • 格式: body div p{样式代码} 匹配body里面的div里面的所有p(包含后代)
    • 子元素选择器: 通过元素和元素之间的关系选择元素,选择范围更精准
      • 格式: body>div>p{样式代码} 匹配body里面的div里面的p子元素
    • 伪类选择器:匹配元素的状态, 超链接包括(link未访问状态,visited访问过状态,hover悬停状态,active点击/激活状态), p包括(悬停状态,点击状态)
    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>选择器续</title>
    6. 		<style type="text/css">
    7. 			/* 子孙后代选择器 */
    8. 			body div div p{
    9. 				color: #FFA500;
    10. 			}
    11. 			/* 子元素选择器 */
    12. 			body>div>div>p{
    13. 				color: #7FFF00;
    14. 			}
    15. 			/* 伪类选择器  选择元素状态，必须按照一下顺序写 */
    16. 			a:link{/* 为访问 */
    17. 				color: pink;
    18. 			}
    19. 			a:visited{/* 访问过 */
    20. 				color: green;
    21. 			}
    22. 			a:hover{/* 悬停 */
    23. 				color: red;
    24. 			}
    25. 			a:active{/* 激活/点击状态 */
    26. 				color: yellow;
    27. 			}
    28. 		</style>
    29. 	</head>
    30. 	<body>
    31. 		<a href="../day01/03图片标签.html">超链接1</a>
    32. 		<a href="../day01/04超链接.html">超链接2</a>
    33. 		<a href="../day01/05表格标签.html">超链接3</a>
    34. 		<p>p1</p>
    35. 		<div><p>p2</p></div>
    36. 		<div>
    37. 			<div>
    38. 				<p>p3</p>
    39. 			</div>
    40. 			<div>
    41. 				<p>p4</p>
    42. 				<div>
    43. 					<p>p5</p>
    44. 				</div>
    45. 			</div>
    46. 		</div>
    47. 	</body>
    48. </html>

    1.2选择器练习:

    • 通过内部样式实现以下效果
    1. 关羽绿色
    2. 张飞和苹果黄色
    3. 文本框和所有水果背景红色
    4. p2字体粉色
    5. p2和p3背景黄色
    6. 达内官网未访问绿色,访问过红色

    悬停黄色,点击粉色

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>选择器练习</title>
    6. 		<style type="text/css">
    7. 			#i-1{
    8. 				color: #7FFF00;
    9. 			}
    10. 			.c1{
    11. 				color: yellow;
    12. 			}
    13.  
    14. 			input[type='text'],body>p{
    15. 				background-color: #FF0000;
    16. 			}
    17. 			body>div>div>p{
    18. 				color: #FFC0CB;
    19. 			}
    20. 			div>div>p{
    21. 				background-color: #FFFF00;
    22. 			}
    23. 			a:link{
    24. 				color: #7FFF00;
    25. 			}
    26. 			a:visited{
    27. 				color: #FF0000;
    28. 			}
    29. 			a:hover{
    30. 				color: #FFFF00;
    31. 			}
    32. 			a:active{
    33. 				color: #FFC0CB;
    34. 			}
    35. 		</style>
    36. 	</head>
    37. 	<body>
    38. 		<ul>
    39. 			<li>刘备</li>
    40. 			<li id="i-1">关羽</li>
    41. 			<li class="c1">张飞</li>
    42. 		</ul>
    43. 		<p>香蕉</p>
    44. 		<p class="c1">苹果</p>
    45. 		<input type="text">
    46. 		<input type="password">
    47. 		<div>
    48. 			<p>p1</p>
    49. 			<div>
    50. 				<p>p2</p>
    51. 			</div>
    52. 			<div>
    53. 				<div>
    54. 					<p>p3</p>
    55. 				</div>
    56. 			</div>
    57. 		</div>
    58. 		<a href="http://www.tedu.cn">达内官网</a>
    59. 	</body>
    60. </html>

    1.3颜色赋值

    • 三原色:红绿蓝 , Red Green Blue RGB ,每个颜色的取值范围0-255
    • 颜色赋值方式:
    • 颜色单词赋值: red/blue/yellow/pink......
    • 6位16进制赋值: #ff0000
    • 3位16进制赋值: #f00 #000黑色 #fff白色
    • 3位10进制赋值: rgb(255,0,0)
    • 4位10进制赋值: rgba(255,0,0,0-1) a=alpha透明度 值越小越透明

    1.4背景图片

    • background-image:url("路径"); 设置背景图片
    • background-size:100px 200px; 设置背景图片的尺寸 宽度和高度
    • background-repeat:no-repeat; 禁止重复
    • background-position: 横向 纵向; 设置背景图片的位置 , 两种赋值方式:1. 偏移值 2. 百分比
    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>颜色和背景</title>
    6. 		<style type="text/css">
    7. 			h1{
    8. 				color: rgba(255,0,0,0.3);
    9. 			}
    10. 			div{
    11. 				width: 200px;
    12. 				height: 200px;
    13. 				background-color: purple;
    14. 				/* 设置背景图片 */
    15. 				background-image: url(../b.jpg);
    16. 				/* 设置图片尺度大小 */
    17. 				background-size: 100px;
    18. 				/* 禁止重复 */
    19. 				background-repeat: no-repeat;
    20. 				/* 控制背景图片的位置: 横向和纵向 */
    21. 				background-position: 30px 60px;
    22. 			}
    23. 			#d1{
    24. 				width: 611px;
    25. 				height: 376px;
    26. 				background-color: #e8e8e8;
    27. 				background-image: url(study_computer_img1.png);
    28. 				background-size: 318px 319px;
    29. 				background-position: 90% 90%;
    30. 			}
    31. 			#d2{
    32. 				width: 375px;
    33. 				height: 376px;
    34. 				background-color: #e8e8e8;
    35. 				background-image: url(study_computer_img2.png);
    36. 				background-size: 292px 232px;
    37. 				background-position: 90% 90%;
    38. 			}
    39. 		</style>
    40. 	</head>
    41. 	<body>
    42. 		<div id="d2">
    43. 			
    44. 		</div>
    45. 		<br>
    46. 		<div id="d1">
    47. 			
    48. 		</div>
    49. 		<div></div>
    50. 		<h1>颜色测试</h1>
    51. 	</body>
    52. </html>

    1.5文本和字体相关样式

    • text-align:left/right/center; 文本水平对齐方式
    • text-decoration:overline上划线/underline下划线/line-through删除线/none去掉自带的线;
    • line-height:20px; 设置行高, 多行文本可以控制行间距, 单行文本可以控制垂直居中
    • text-shadow: 颜色 x偏移值 y偏移值 浓度; 设置阴影
    • font-size:20px; 设置字体大小
    • font-weight: bold加粗/normal去掉加粗
    • font-style:italic; 斜体
    • font-family:xxx,xxx,xxx; 设置字体
    • font: 20px xxx,xxx,xxx; 设置字体 和字体大小
    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>文本和字体</title>
    6. 		<style type="text/css">
    7. 			div{
    8. 				width: 200px;
    9. 				height: 50px;
    10. 				border: 1px solid red;
    11. 				/* 文本对其方式 */
    12. 				text-align: center;
    13. 				/* 文本修饰 overline 上划线，underline 下划线 line-through 删除线 none 没有线*/
    14. 				text-decoration: line-through;
    15. 				/* 设置行高,多行文本控制行距，单行文本控制垂直剧中 */
    16. 				line-height: 50px;
    17. 				/* 文本阴影：颜色 x偏移值 y偏移值 浓度 */
    18. 				text-shadow: red -10px 10px 2px;
    19. 				/* 字体大小 */
    20. 				font-size: 30px;
    21. 				/* 字体加粗 */
    22. 				font-weight: bold;
    23. 				/* 斜体 */
    24. 				font-style: italic;
    25. 			}
    26. 			a{
    27. 				text-decoration: none;
    28. 			}
    29. 			h1{
    30. 				/* 去掉加粗 */
    31. 				font-weight: normal;
    32. 				/* 设置字体 */
    33. 				/* font-family: '隶书'; */
    34. 				/* 字体大小和字体一起设置 */
    35. 				font: 20px cursive;
    36. 			}
    37. 		</style>
    38. 	</head>
    39. 	<body>
    40. 		<h1>这是个h1</h1>
    41. 		<div>文本和字体</div>
    42. 		<a href="">超链接</a>
    43. 	</body>
    44. </html>

    1.6小练习

    1.  刘德华 宽度100 高度30 绿色背景 红色字体 横向和纵向居中
    2.  苹果和香蕉 字体大小25px 斜体
    3.  冰箱去掉加粗 蓝色阴影 方向是左下 浓度3
    4.  洗衣机添加下划线
    5.  百度去掉下划线字体加粗 字体大小20px
    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 		<style type="text/css">
    7. 			#i-1{
    8. 				width: 100px;
    9. 				height: 30px;
    10. 				background-color: #7FFF00;
    11. 				color: red;
    12. 				text-align: center;
    13. 				line-height: 30px;
    14. 			}
    15. 			span{
    16. 				font-size: 25px;
    17. 				font-style: italic;
    18. 			}
    19. 			#i-2{
    20. 				font-weight: normal;
    21. 				text-shadow: aqua -10px 10px 3px;
    22. 			}
    23. 			#i-3{
    24. 				text-decoration: underline;
    25. 			}
    26. 			a{
    27. 				text-decoration: none;
    28. 				font-weight: bold;
    29. 				font-size: 20px;
    30. 			}
    31. 		</style>
    32. 	</head>
    33. 	<body>
    34. 		<div id="i-1">刘德华</div>
    35. 		<div>张学友</div>
    36. 		<span>香蕉</span>
    37. 		<span>苹果</span>
    38. 		<h1 id="i-2">冰箱</h1>
    39. 		<h1 id="i-3">洗衣机</h1>
    40. 		<a href="http://www.baidu.com">百度</a>
    41. 	</body>
    42. </html>

    1.7元素的显示方式display

    • block: 块级元素, 特点: 独占一行可以修改元素的宽高, 包含:h1-h6,p,div
    • inline: 行内元素,特点: 共占一行不可以修改元素的宽高,包含:span,b,i,s,u,a
    • inline-block:行内块元素, 特点: 共占一行并且可以修改元素的宽高,包含:img图片,input
    • none: 隐藏元素
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.   <style>
    7.     div{
    8.       width: 100px;height: 100px;
    9.       border: 1px solid red;
    10.     }
    11.     span{
    12.       border: 1px solid blue;
    13.       /*行内元素宽高不能修改*/
    14.       width: 100px;height: 100px;
    15.     }
    16.     img{
    17.       /*行内块元素 共占一行并且可以修改宽高*/
    18.       width: 100px;
    19.       height: 100px;
    20.       /*隐藏元素*/
    21.       display: none;
    22.     }
    23.     a{
    24.       background-color: #0aa1ed;
    25.       /*行内元素无法修改宽高,如果必须改,需要将元素改成块级元素或行内块元素*/
    26.       display: block;
    27.       width: 132px;
    28.       height: 40px;
    29.       text-align: center;
    30.       line-height: 40px;
    31.       color: white;
    32.       font-size: 20px;
    33.       text-decoration: none;
    34.       border-radius: 3px;/*设置圆角 值越大越圆*/
    35.     }
    36.   </style>
    37. </head>
    38. <body>
    39. <a href="">查看详情</a>
    40. <img src="../b.jpg" alt="">
    41. <img src="../b.jpg" alt="">
    42. <img src="../b.jpg" alt="">
    43. <div>div1</div>
    44. <div>div2</div>
    45. <div>div3</div>
    46. <span>span1</span>
    47. <span>span2</span>
    48. <span>span3</span>
    49.  
    50. </body>
    51. </html>

    1.8盒子模型

    • 盒子模型由四部分样式组成,包括:content内容,margin外边距,border边框,padding内边距
    • 通过盒子模型的相关样式控制元素的显示效果
    • content内容: 控制元素的显示尺寸
    • margin外边距: 控制元素的显示位置
    • border边框: 控制元素的边框效果
    • padding内边距: 控制元素内容的位置

    1.9盒子模型之content(内容)

    • 相关样式: width和height
    • 赋值方式:
    • 像素
    • 上级元素百分比
    • 行内元素不能修改元素的宽高

    1.10盒子模型之margin(外边距)

    • 外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距
    • 赋值方式:
    • margin-left/right/top/bottom:10px; 单独某一个方向赋值
    • margin:50px; 四个方向赋值
    • margin:10px 20px; 上下10 左右20
    • margin:10px 20px 30px 40px; 上右下左顺时针赋值
    • 上下相邻彼此添加外边距取最大值
    • 左右相邻彼此添加外边距两者相加
    • 行内元素上下外边距无效
    • 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时, 给元素添加上外边距会出现粘连问题, 给上级元素添加overflow:hidden解决
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.   <style>
    7.     div{width: 100px;height: 100px;border: 1px solid red}
    8.     #d1{
    9.       /*margin-left: 50px;
    10.       margin-top: 50px;
    11.       margin-bottom: 50px;
    12.       margin-right: 50px;*/
    13.       margin: 50px;/*四个方向50个像素的外边距*/
    14.       margin: 50px 100px;/*上下50和左右100*/
    15.       margin: 10px 20px 30px 40px;/*上右下左*/
    16.     }
    17.     #d2{
    18.       /*上下相邻两个元素彼此添加外边距 取最大值*/
    19.       margin-top: 50px;
    20.     }
    21.     #s1{
    22.       /*行内元素上下外边距无效*/
    23.       margin-bottom: 100px;
    24.       margin-right: 50px;
    25.     }
    26.     #s2{
    27.       /*左右相邻彼此添加外边距两者相加*/
    28.       margin-left: 50px;
    29.     }
    30.  
    31.   </style>
    32. </head>
    33. <body>
    34. <span id="s1">span1</span><span id="s2">span2</span>
    35. <div id="d1">div1</div>
    36. <div id="d2">div2</div>
    37. </body>
    38. </html>

    1.11盒子模型之border边框

    • 赋值方式:
    • 单独某一个方向添加边框: border-left/right/top/bottom:粗细 样式 颜色;
    • 四个方向添加边框: border:粗细 样式 颜色
    • 圆角: border-radius 值越大越圆 ,超过宽高一半时为正圆
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.   <style>
    7.     #d1{
    8.       width: 200px;
    9.       height: 200px;
    10.       background-color: red;
    11.       overflow: hidden;/*解决粘连问题*/
    12.     }
    13.     #d1>div{
    14.       width: 50px;
    15.       height: 50px;
    16.       background-color: blue;
    17.       margin-left: 50px;
    18.       /*当元素的上边缘和上级元素的上边缘重叠时
    19.       给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决*/
    20.       margin-top: 100px;
    21.     }
    22.   #d2{
    23.     width: 100px;
    24.     height: 100px;
    25.     border: 10px solid red;
    26.     /*设置圆角 超过宽高一半为正圆*/
    27.     border-radius: 100px;
    28.   }
    29.   #d3{
    30.     width: 50px;
    31.     height: 50px;
    32.     border: 1px solid blue;
    33.     /*给元素添加内边距 会影响元素的宽高*/
    34.     padding-left: 50px;
    35.     padding-top: 50px;
    36.   }
    37.  
    38.   </style>
    39. </head>
    40. <body>
    41. <div id="d3">内边距</div>
    42. <div id="d2">边框测试</div>
    43. <div id="d1">
    44.   <div></div>
    45. </div>
    46. </body>
    47. </html>

    1.12盒子模型之内边距

    • 内边距: 元素内容距元素边缘的距离称为内边距
    • 给元素添加内边距会影响元素的宽高
    • 赋值方式: (类似外边距)
    • padding-left/right/top/bottom:10px; 单独某一个方向赋值
    • padding:50px; 四个方向赋值
    • padding:10px 20px; 上下10 左右20
    • padding:10px 20px 30px 40px; 上右下左顺时针赋值
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.   <style>
    7.     #d1{
    8.       width: 100px;
    9.       height: 100px;
    10.       background-color: red;
    11.       margin: 25px 0 0 25px;
    12.       overflow: hidden;
    13.     }
    14.     #d1>div{
    15.       width: 50px;
    16.       height: 50px;
    17.       background-color: blue;
    18.       margin: 25px 0 0 25px;
    19.     }
    20.     #d2{
    21.       width: 50px;
    22.       height: 50px;
    23.       border: 5px solid green;
    24.       border-radius: 5px;
    25.       margin-left: 125px;
    26.       padding: 50px 0 0 50px;
    27.     }
    28.  
    29.  
    30.   </style>
    31. </head>
    32. <body>
    33. <div id="d1">
    34.   <div></div>
    35. </div>
    36. <div id="d2">哈喽</div>
    37. </body>
    38. </html>

  • 相关阅读:
    如何使用 apt-get 安装特定版本的软件包
    MySQL数据库基础知识
    JS的深拷贝和浅拷贝
    Electron之集成vue+vite开发桌面程序
    python __init__（构造函数）方法的使用
    我有一个朋友，分享给我的字节跳动测试开发真题
    [NOIP2000 提高组]-乘积最大：隔板法-DFS搜索-Go语言
    css_背景属性所踩的坑
    第十章 异常
    【科学文献计量】知识单元的频次统计与分布（简单阅览和完整频次统计）
  • 原文地址：https://blog.csdn.net/TheNewSystrm/article/details/125508279