前端零基础教学开始第三天 03 -day _ Css 选择器与行内元素

最新推荐文章于 2024-09-22 00:15:45 发布

weixin_34185560

最新推荐文章于 2024-09-22 00:15:45 发布

阅读量204

点赞数

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5c164786e51d45035d61b423

版权

备注：部分选择器见02 教程

1、子元素选择器

子元素选择器只能选择作为某元素子元素的元素，其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接， 注意符号左右 两侧各保留一个空格
复制代码

    .box > span{
		color:  red;
		font-size: 100px;
	}

	<div class="box">
		<p>
			<span>前端开发教学</span>
		</p>
		<span>前端开发教学第三天</span>
		<!-- 
		p 和 span 是同级标签 
		前端开发教学第三天 生效了 子代选择器，选择的元素的亲儿子
		 -->
	</div>
复制代码

2、并集选择器

并集选择器，是哥哥选择器通过，逗号 连接而成，任何形式的选择器包括标签选择器，class类选择器 id 选择器，都可以作为并集选择器的一部分

.box,p,h2{
	color: red;
	font-size:20px;
}

<div class="box">并集选择器2</div>
<p>并集选择器2</p>
<h2>并集选择器3</h2>
复制代码

并集选择器和的意思，就是说只要逗号隔开，所有选择器都会执行后面样式

3、链接伪类选择器

链接伪类选择器 (内置类)

：link  未访问的链接
：visited 已访问的链接
: hover 鼠标移动到链接上
：active 选定的链接 超链接激活的状态
复制代码

他们的书写顺序 一定要是 lvha  不要颠倒顺序
实际开发 hover 最多
<style type="text/css">
	a:link{
		color: pink;
		text-decoration: none;
	}
	a:visited{
		color: orange;
	}
	a:hover{
		color: red;
		text-decoration: underline;
	}
	a:active{
		color: blue;
	}
</style>

<a href="#">人生如梦</a>

复制代码

标签显示模式（display ）

1、块元素  block-level	
	## 块元素会独占一行或者多行，可以对其设置宽高对其等属性，常用于网页结构的搭建
	常见的块元素有 <h1> -<h6> <p> <div> <ul> <li>等
	块元素特点：
	1、总数从新行开始
	2、高度，行高，外边距，以及内边距都可以控制
	3、宽度默认是容器的100%；
	4、可以容纳内敛元素和其他块元素
	5、是一个容器的盒子，里面可以放行内块或者块级元素
	6、独占一行很重要 **
## 	7、没有设置宽度，会默认父元素的宽度
        8、可以设置宽高，内容也会撑开高度

2、行内块 inline-level
    1、内联元素，不沾油独立的区域，仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度，高度，对齐等属性，常用于控制页面中文本的样式
    <a> <strong>  <span>
    行内元素特点：
       1、在一行上显示
       2、不能直接设置宽高，宽高是内容撑开的
       3、不能设置对齐，常用于控制文本
       
3、行内块元素 inline-block
    1、行内块  img     input   td  可以对他们设置宽高，和对齐属性，
    行内快的特点：
	1、和相邻的行内块元素在一行上，但是之间会有空白缝隙
	2、默认宽度就是它本身内容的宽度
	3、高度，行高 ，外边距以及内边距都可以控制
	4、可以在一行上显示
        5、可以设置宽高
复制代码

三种模式区别：

元素模式元素排列设置样式默认宽度包含

1、块元素	一行只能放一个块元素		可以设置宽度高度 			容器的100%			容器级可以包含任何标签
2、行内元素 一行可以放多个行内元素		不可以直接设置宽度高度	它本身内容的宽度		容纳文本或则其他行内元素
3、行内块元素		一行放多个行内块 元素		可以设置宽度和高度			它本身内容的宽度
复制代码

标签显示模式转换 display 重点

三种类型可以相互转换
复制代码

块元素转行内： display： inline

行内转块： display ： block；

块、行内元素转为行内块： display：inline-block；

让我们现在来一个小练习吧：

写三个 div 给定 100 * 100 的红色盒子 -- 宽度高度背景色
三个 span 也要求 150 * 150 绿色盒子
三个 a 链接 80 * 20 蓝色盒子要求必须一行显示这三个盒子
鼠标经过3个a链接的时候，背景颜色变为橙色
如果自己写不出来可以参照我的写法，代码就得写加上练习与检测

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 100px;
			height:100px;
			background-color: red;
		}
		span{
			width: 150px;
			height: 150px;
			background-color: green;
			/*display: block;*/
			display:inline-block;
		}
		a{
			width: 80px;
			height: 20px;
			display: inline-block;
			background-color: blue;
		}
		a:hover{
			background-color: orange;
		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	1111111111111
	<br>
	<span></span>
	<span></span>
	<span></span>
	<a href=""></a>
	<a href=""></a>
	<a href=""></a>
</body>
</html>


复制代码

** 行高那些事重点

浏览器默认文字是 16 行高的默认值约等于 1.1-1.3 line-height:normal

不想要行高 line-height:1; 谨记要是不等于1 哪怕 normal 也不好使

行高的标准定义是基线与基线之间的距离可以在ps 中看见看我下图

行高分为四块顶线中线基线底线

行高我们利用最多的一个地方是，可以让一行文本在盒子中垂直居中对齐，

一行文字行高与容器高度一致的时候，这行文字垂直居中

上下距离总是相等的，因此文字看上去是垂直居中的

如果行高等于 height  高度 文字会垂直居中
如果行高大于高度 文字会偏下
如果行高小于高度 文字会偏上
复制代码

C33层叠性

当多个 选择器 作用于一个标签上会发生样式冲突，谁距离标签更近 会使用谁
层叠性是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一属性就会将另外一个属性层叠掉，样式冲突，遵循的原则是就近原则，那个样式离着结果近，就执行那个样式，样式不冲突，不会出现层叠
复制代码

继承性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.father{
			color: red;
			font-size: 100px;
			font-style: italic;
			font-weight: 800;
			font-family: 'simsun';
			text-indent: 2em;
			text-decoration: underline;
			text-align:right;
			line-height: 150px;
		}
	</style>
</head>
<body>
	<div class="father">
		<p>继承性</p>
	</div>
</body>
</html>
复制代码

a 标签不会继承父元素的文字颜色

H1 标题标签不会继承父元素的大小

继承都是来自于浏览器 #### user agent stylesheet

优先级权重计算

权重计算器公式		            计算权重公式

继承或者 * 	通配符 *			0,0,0,0
每个元素标签选择器		        	0,0,0,1
每个类，伪类				0,0,1,0
每个ID					0,1,0,1
每个行内样式style=‘’	        	1,0,0,0
每个  ！important 重要	        	无穷大
复制代码

当多个养生作用于同一个标签的时候，发生了样式冲突权重高的样式优先执行，当权重一样的时候，就近原则~! 我想静静手记转载需备注！

默认样式 < 标签选择器< 类选择器<id 选择器 <行内样式 < !important 谨记要带上叹号

继承的权重为0

权重是可以叠加的 

div ul li            0,0,0,3
.nav  ul li 		00,1,2
 a:hover 		0,0,1,1
.nav a 		0,0,1,1
#nav p 		0,1,0,1
复制代码

Css 背景 background

background-color ：transparent;  背景颜色透明  
background-image	：url()	背景图片地址
background-position： top bottom center left right 背景位置. 可以写 像素 10px  100px  10是距离左面  100 是上面
background-repeat：no-repeat	背景是否平铺	
background-attachement:scroll   背景固定还是滚动  fixed 固定 一共两个值
复制代码

背景定位

background-position： 20px;

写2个方位值，没有顺序要求
写一个方位值或者数值，另外一个值默认center 写 2个数值，第一个数值 是距离左边的距离，第二个数值是距离顶边的距离
复制代码

背景属性连写重要

background:#ccc  url() no-repeat  50px  100px scroll;复制代码

转载于:https://juejin.im/post/5c164786e51d45035d61b423