Web前端105天-day08-CSS

smile陌辰

已于 2022-11-16 19:38:56 修改

阅读量214

点赞数

分类专栏： CSS 文章标签：前端 html css 开发语言

于 2022-11-11 16:48:24 首次发布

本文链接：https://blog.csdn.net/qq_52810836/article/details/127808260

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

day08

前言

第八天学习开始

一、复习

布局练习
定位
相对定位

绝对定位

固定定位
子绝父相

二、消失和隐藏

1.元素消失和显示

display: none; 元素显示值为不显示。是脱离文档流的完全消失。
visibility: hidden; 隐藏，元素还在原来的位置上，只是显示不出来

opacity 元素透明度属性， 0-1,0 完全透明， 1 完全不透明。 rgba() 属于色值， opacity 属于元素透明，整个元素包括其子元素是一起透明的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.item {
				background-color: aqua;
				
			}
			.item h3 {
				width: 200px;
				background-color: yellow;
			}
			.show {
				width: 200px;
				height: 200px;
				background-color: red;
				display: none;
			}
			.item:hover .show {
				display: block;
				background-color: blue;
			}
			/* .tit1:hover+.show {
				 display: none; 
			} */
			.tit2:hover+.show {
				visibility: hidden;
			}
			.tit3:hover+.show {
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item">
				<h3 class="tit1">使用display属性</h3>
				<div class="show"></div>
			</div>
			<!-- <div class="item">
				<h3 class="tit2">使用visibility属性</h3>
				<div class="show"></div>
			</div>
			<div class="item">
				<h3 class="tit3">使用opacity属性</h3>
				<div class="show">1212564465456</div>
			</div> -->
		</div>
	</body>
</html>

2.下拉菜单

使用元素的消失和隐藏

使用关系的选择器

.show {
    width: 200px;
    height: 200px;
    background-color: red;
    display: none;
}
.item:hover .show {
    display: block;
    background-color: blue;
}

三、文本和字体样式

1.字体颜色

color: blue;

值为色值，英文，十六进制， rgb(),rgba(

2.文本的对齐方式

text-align 值的是文本（行内）在块级元素中水平对齐的方式
left左
center 中
right 右

3.行高

line-height 行高，也指行间距，让文本和上下有一些距离
行高是包含文本本身的高度，上下行高距离不需要自己计算，是（总行高-文本高度）/2

所以单行文本在父元素中，行高等于高度，就相当于让单行文本在元素中垂直居中。如果元素中只有一行文本，可以只写行高撑开，无需再写高度。

行高对行内元素也有效
行高可以写没有任何单位的值，代表倍数，文本字号的倍数

4.文本的修饰线

text-decoration: underline; 下划线
text-decoration: line-through; 删除线
text-decoration: none; 去掉文本修饰线

5.文本溢出效果

单行文本的溢出

指定一个宽度，宽度一定是小于文字总和。给元素指定 width

文本不能换行 white - space: nowrap ;

多余溢出部分隐藏掉 overflow: hidden ;

为了显示文本是没有完全显示的，因此可以给文本增加省略号 text - overflow: ellipsis ;

.text-overflow {
    width: 自定值;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

6.首行缩进

text-indent: 2em; 指第一行文本向内缩进2倍的字符
多用于中文首行的空两格
字号的单位px，绝对单位
em相对单位，参照物是父级元素文本的大小倍数
rem相对单位，参照html根标签的字号大小倍数

7.字体

font-size 指文本的字号，可以写px，em，rem等

8.字体系列

font-family 允许你通过一个有先后顺序，由字体名字组成的字体元素设置。
凡是中文或多单词组成的字体，需要引号包裹（单引号或双引号）
不是前端开发可以设置的，一般在html标签中指定字体系列

font-family: "上首龙猫体","隶书","幼圆";

9.字体字重

font-weight 字体的粗细

取值 100-900 ，没有任何单位的。 100-900 的取值在不同浏览器中显示的效果不同，在 pc 端谷歌浏览器中只能识别三种

100-300 细体

400-500 正常体

600-900 粗体

关键词取值
lighter 细体
bold 粗体

10.垂直对齐方式

vertical-align 只能运用于行元素

对齐方式并不是自身的对齐，而是左右两侧的行内元素或者文本与自己的对齐方式（管的不是自己，是自己两侧的兄弟）

vertical-align: middle; 中间对齐
vertical-align: top; 顶部对齐
vertical-align: bottom; 底部对齐
vertical-align: baseline; 基线对齐（img默认的）

文本相关属性练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1 {
				color: blue;
			}
			.p2 {
				background-color: yellow;
				text-align: center;
			}
			.p3 {
				background-color: yellow;
				text-align: right;
			}
			.p3 span {
				background-color: aqua;
				
			}
			.d1 {
				background-color: aqua;
				line-height: 3;
			}
			.p4 {
				text-decoration: underline;
				text-decoration: line-through;
				text-decoration: none;
			}
			.p5 {
				width: 300px;
				background-color: yellow;
			}
			.p6 {
				width: 300px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.p7 {
				text-indent: 2em;
				
			}
			html {
				font-size: 20px;
			}
			.p8 {
				font-size: 30px;
			}
			.p8 span{
				font-size: 2rem;
			}
			.p9 {
				font-family: "上首龙猫体","隶书","幼圆";
			}
			.p10 {
				font-family: 'Courier New', Courier, monospace;
			}
			.p11 {
				font-weight: 600;
				font-weight: lighter;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<p class="p1">文本的颜色</p>
		<p class="p2">文本的对齐方式</p>
		<p class="p3"><span>行内元素和文字是一样的</span></p>
		<div class="d1">一段文字行高 <br>ssssss</div>
		<p class="p4">文本的修饰线</p>
		<p class="p5 p6">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈况且哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
		<p class="p5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa voluptate pariatur expedita, sint distinctio vero exercitationem, eius facilis molestiae enim nesciunt, quidem ab assumenda facere reprehenderit ullam perspiciatis provident quod.</p>
		<p class="p5">12313245 6454324345432 43245346542313243543242315645641231857351241</p>
		<p class="p5">sjhdjkashfdjakshfjkagfkjasgfhkadsgfhkdsagfgsdjkhfjksdhfjksdbfkjsdhfjks</p>
		<p class="p7">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈况且哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
		<p class="p8">
			p8里直接的文字默认16px
			<span>p8里span的文字</span>
		</p>
		<p class="p9">写点中国字</p>
		<p class="p10">hello tom</p>
		<p class="p11">文字的粗细</p>
	</body>
</html>