13dayCSS基础

最新推荐文章于 2024-08-16 23:09:58 发布

洋洋酒仙

最新推荐文章于 2024-08-16 23:09:58 发布

阅读量124

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_59778168/article/details/125665477

版权

1.选择器以及优先级

	<style>
		/* 后代选择器 */
		body #three{
			color:blue
		}
		/* 兄弟选择器 */
		#one ~ li{
			font-size: 40px;
		}
		/* 相邻兄弟选择器 */
		#one + li{
			text-decoration: line-through;
		}
	</style>
</head>
<body>
	<ul>
		<li id='one'>菜浇饭</li>
		<li>冒菜</li>
		<li id='two'>抄手</li>
		<li id='three'>面条</li>
	</ul>
	
	<ol>
		<li id='three'>123</li>
		<li>上面</li>
		<li></li>
	</ol>
</body>

样式优先级问题：
优先级和选择器相关

第1级：属性后面添加!important
第2级：内联样式

其他的任何样式都小于这两级，优先级看权重，权重越大，优先级越高

*---- 1
标签选择器 ------ 1
class选择器 ----- 2
id选择器 ------ 4
父子、后代、兄弟、相邻兄弟 ------ 看符号之间各个选择器的权重和，但是先看符号前边的，如果前边的相等，再比较后边

如何权重相等，最后写的谁，就实现谁
但是，权重不一样，但是都是修改的一个标签，不重叠的样式都能够实现。

	<style>
		/* .p1{
			color: blue;
			text-decoration: underline;
		}
		
		#p1{
			color: red;
		} */
		div > .s1 > p{
			color: aqua;
		}
		
		div > span > p{
			color: blueviolet;
		}
	</style>
</head>
<body>
	<div class="d1">
		<span class="s1">
			<!-- <p id="p1" class="p1" style="color: pink;">我是段落1</p> -->
			<p id="p1" class="p1">我是段落1</p>
		</span>
	</div>
</body>

2.伪类选择器

CSS常用的背景属性
background-color:背景颜色
background:url(图片的地址) 是否平铺 x方向位置 y方向位置背景颜色

是否平铺：no-repeat、repeat
x方向位置：left/right/center、x坐标值
y方向位置：top、bottom、center、y坐标值

	<style>
		a{
			color: blue;
		}
		/* 设置超链接鼠标悬停时的状态 */
		a:hover{
			color: rgba(0, 255,255, 0.5);
			
		}
		span:hover{
			/* 让光标变为手指 */
			cursor: pointer;
		}
		
		/* 超链接访问后的状态 */
		a:link{
			color: lightgray;
		}
		a:visited{
			color: red;
		}
		/* 鼠标悬停，一张图片消失，另一张显示 */
		/* 图片消失实现 */
		div:hover{
			width: 100px;
			height: 100px;
			display: none;
			background: url(1.jpg) no-repeat rgba(0, 255,255, 0.1);
		}
		/* 图片显示 */
	</style>
</head>
<body>
	<span>请点击<a href="https://www.baidu.com/">百度一下</a></span>
	<div><img src="2.jpg" alt=""></div>
	
</body>

3.标准流布局

1.标准流布局：没有设置任何的布局样式，使用标签自己的特性。

a.块级布局标签：一个标签占一行：h1~h6、p等
b.行内标签：一行可以显示多个标签，设置宽高无效：a、span
c.行内块标签：一行可以显示多个标签，设置宽高有效：img、input

2.display-让图片隐藏

block-块级
inline-行内
none-隐藏标签
inline-block-行内块

3.脱流(脱离标准流布局)
（1）脱硫使用的是浮动、定位两种方式
（2）所有标签脱流以后，布局都是以行内块样式布局

<body>
	<!-- 块级布局标签 -->
	<p>第一段</p>
	<p>第二段</p>
	
	<!-- 行内标签 -->
	<span style="width: 100px;height: 100px;">京东</span>
	<span>淘宝</span>
	<!-- 行内块标签 -->
	<input type="submit" value="登录" style="width: 500px;height: 50px;">
	<input type="text">
</body>

4.浮动基本用法以及应用

right(右浮动)

	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: brown;
		}
		#d1{
			float: left;
		}
		#d2{
			float: left;
		}
	</style>
</head>
<body>
	<div id='d1'></div>
	<div id='d2'></div>
</body>

	<style>
		/* 将所有标签内外边距取消 */
		*{
			margin: 0;
			padding: 0;
		}
		/* 网页有宽度，但是没有高度 */
		.d1,.d2,.d3{
			width: 100%;
			border: 2px solid red;
		}
		.d1{
			height: 20px;
		}
		.d2{
			height: 120px;
		}
		.d3{
			height: 360px;
		}
		.left,.middle,.right{
			height: 100%;
			border: 2px solid blue;
		}
		.left{
			width: 13%;
			float: left;
			/* 修改左外边距 */
			margin-left: 12%;
		}
		.middle{
			width: 50%;
			float: left;
		}
		.right{
			width: 13%;
			float: left;
		}
	</style>
</head>
<body>
	<!-- 顶部 -->
	<div class="d1"></div>
	<!-- 搜索栏 -->
	<div class="d2"></div>
	<!-- 分类、广告 -->
	<div class="d3">
		<!-- 分类 -->
		<div class='left'></div>
		<!-- 广告 -->
		<div class='middle'></div>
		<!-- 黄页 -->
		<div class='right'></div>
	</div>
</body>

5.定位

定位：
定位就是设置一个标签到参考对象上、下、左、右的间距。
定位对应的属性：left、right、top、bottom

定位的前提：选好参考对象

position属性 - 专门用于选定参考对象的属性
absolute：绝对定位 – 在盒子中还存在一个真实的元素，但是这个元素不占据任何空间。
relative：相对定位 – 在盒子中存在真实元素，此元素可以任意移动位置，但是其原位置不能被其它元素占用。
fixed：固定定位 – 盒子中存在真实元素，此元素也不占据任何空间，此元素位置不受盒子大小影响
固定定位一般用于返回顶部、某些培训网站右下角等。

	<style>
		div:nth-child(1){
			width: 120px;
			height: 50px;
			background-color: red;
			position: absolute;
		}
		div:nth-child(2){
			width: 100px;
			height: 1000px;
			background-color: green;
			position: relative;
			margin-left: 500px;
		}
		div:nth-child(3){
			width: 50px;
			height: 50px;
			background-color: black;
			position: fixed;
			/* 修改此元素距离有边框下、边框的距离 */
			right: 50px;
			bottom: 50px;
		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<p>封娃子</p>
</body>