在某网课学习前端笔记整理css篇06

实际作业中的细节与技巧总结

1.图片上的字体和文字色差很小时，如何凸出字体。

​ 使用text-shadow给图片上的文字设置阴影。

语法

抄自于w3c css参考手册

text-shadow：h-shadow v-shadow blur color

注释：text-shadow属性向文本添加一个或多个阴影，该属性是逗号隔开的阴影列表，每个阴影有2-3个长度值和一个颜色值进行规定，省略长度为0。

值	描述
h-shadow	必需，水平阴影的位置，允许负值。
v-shadow	必需，垂直阴影的位置，允许负值。
blur	可选，模糊的距离。（羽化值）
color	可选，阴影的颜色。

	<style >
		div{
			width:500px;
			height: 400px;
			margin-left: auto;
			margin-right: auto;
			background-image: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1840073864,3878040318&fm=27&gp=0.jpg);
		}
		h2{
			text-shadow:0 1px 1px white,1px 0 1px black;
		}
	</style>
	<div>
		<h2>you can't see me</h2>
	</div>

2.类名组合

​ 页面的html元素的class属性要见名知意，相同效果的元素可以用一个类名来封装起来，不同的部分再分别设置另一个类名。也就是一个元素，为了实现很多存在的效果，可以包含多个类名，用空格分隔。这样子会大大减少代码量，且让代码清晰易读。

<style >
		/*所有的a标签都没有下划线，但香蕉要求颜色是黄色的*/
		.fruit{
			text-decoration: none;
		}
		.banana{
			color:yellow;
		}
	</style>
	<ul>
		<li><a href="#" class="fruit banana">香蕉</a></li>
		<li><a href="#" class="fruit">葡萄</a></li>
		<li><a href="#" class="fruit">苹果</a></li>
	</ul>

3.杂

​ a.页面的元素排版，能用float就不要取用position，position在页面要求改变时不好操作。

​ b.相对路径是相对于当前文件所在位置的路径，绝对路径是资源的完整路径，包含根节点。

​ c.display的block（块级），inline（行级），inline-block（行内块）。其中行级就是指span，a这些元素，没有宽高，没有上下边界；块级指的是div，p这些元素，有宽高，还会独占一行；行内块，指的是img这写元素，有块级元素的一些特征，也有行级元素的一些特征，比如你想要a有宽高，可以将它变为行内块或者块级元素。