css--选择器的选取,盒模型,常见的属性---01

最新推荐文章于 2023-09-03 20:44:18 发布

sofency

最新推荐文章于 2023-09-03 20:44:18 发布

阅读量197

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_43079376/article/details/100022242

版权

css作为前端学习中不可缺少的工具，它为页面带来了美感，使用户获得更好的体验感。

选择器的选取

<body>
	<div class="container">
		<div class="test" id="test">汉堡</div>
		<a link="#">传送门</a>
	</div>
	<div class="test" id="test"></div>
</body>

对于class属性，使用 .选择器 .container{};
对于id属性，使用#选择器 #test{}; 会找到两个div
对于上述的代码可以进行精确选择 .container .test{} 为什么要这么做;方便根据这样精确的查找到位置，而且这样写还可以防止网页中存在相同的属性而找错位置这样写只会找到 container下的test块
对于标签属性来说直接使用标签名来选择 body{};
伪元素选择器 a:link{} a:visited{} a:hover{} a:active{} 当鼠标移到a标签上样式发生的变化对于a标签来说遵从爱(link active hover active )恨原则防止样式的覆盖
伪类选择器 .container:hover{} 给类选择器上面加上伪选择器hover

选择器的组合
1.并且的关系使用， 进行将选择器进行并列处理进而将公共的css代码放在一起
2.后代元素 —空格来表示空格
3.子元素 — 使用 >
4.相邻元素 — 使用+
5.兄弟元素 — 使用~

当样式进行精确选择时容易出现样式的优先级问题
比如

.container .test{
	color: green;
}
.test{
   color : red;
 }
 test文字的样式会是什么  答案是green  因为它的优先级高  那么我们如何来比较优先级哪  遵从四位数元素
 比较特殊性 看选择器 总体规则:选择器选中的范围越窄 越特殊
		  具体规则：通过选择器  计算出一个四位数（XXXX）进行比较样式的优先级
		  
		  1. 千位  如果是内联样式(直接写在标签上的样式) 记1 否则记0
		  2. 百位  等于选择器中所有的id选择器的数量
		  3. 十位  等于选择器中所有类选择器 属性选择器  伪类选择器的数量
		  4. 个位  等于 选择其中所有元素选择器 伪元素选择器的数量 
综上所述  .container .test的四位数是 0020
  .test的四位数是 0010 很明显上面的特殊性强所以颜色为green

盒模型

css是基于盒子模型来进行布局的，那么什么是盒子模型哪
在这里插入图片描述
那下面的代码解释

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8"/>
  	<title>test</title>
  	<style>
  		.container{
			width: 400px;
			height: 300px;
			background-color:#008c8c;
			padding: 10px;
			border:10px solid red;
			margin: 100px;
		}
  	</style>
  </head>
  <body>
  	<div class="container"></div>
  	<div class="container"></div>
  </body>
</html>

显示的结果如下
在这里插入图片描述

常见的属性

块级元素主要特性会占据内容一行常见的块级元素 div p h li
行级元素不会占据一整行内容 img a span
如何判断是否是块级元素写一个元素的标签然后打开浏览器在输入框输入display查看
在这里插入图片描述
margin 元素间的距离
margin的简写种类
margin : 上右下左
margin：10px 20 px 50px 100px
margin :(上下) (左右)；
margin：10px 20px 表示上下是10px 左右是20px
margin: 上 (左右) 下
margin 10px 40px 20px; 表示左右也是40px

padding也是类似的书写样式

border: 边框
border :(边框厚度) (边框的样式) (边框颜色)
border-radius边框的圆角
border-radius：4px 设置边框圆角是4px 即半径是4px
它也是简写样式 border-top-left-radius: 左上角依次类推其它的角

background-color:背景颜色
background-image :url（图片路径）背景图片
字体
font-size 字体大小
font-family 字体类型
font-weight 字重

文本居中
text-align :center
line-height行高用来设置文本上下居中的利器如果文本输入的高度为20px 那么设置line-height=20px 就可以做到

box-sizeing border-box
width = border-left+ border-right+ padding-left + padding-right +content-width
对于li这样的标签来说有一些浏览器默认的样式可以设置list-style进行切换

a 超链接的默认样式有下划线
设置text-direction: none取消下滑线

sofency

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css--选择器的选取,盒模型,常见的属性---01

css作为前端学习中不可缺少的工具，它为页面带来了美感，使用户获得更好的体验感。选择器的选取<div class="container"> <div id="test"></div></div>对于class属性，使用 .选择器 .container{};对于id属性，使用#选择器 #test{};对于上述的代码css是基...
复制链接

扫一扫