css选择器分类以及其他知识点

css选择器分类以及其他知识点

一. id:#id选择器指定具有ID的元素的样式。特点:一对一,一个标签只能对应一个id,就如同一个人只能有一个身份证号码。
<div id="myOnlyId"></div>//正确
<div id="myOneId" id="myTwoId"></div>//错误
二. class:.class选择器是指定类的所有元素的样式。特点:多对多,即一个元素可以有多个class,一个class也可以由多个标签使用,如同人和衣服的关系。
//一个class可以对应多个标签
<div class="myClass"></div>
<div class="myClass"></div>
//一个标签可以使用多个class
<div class="myOneClass myTwoClass myThreeClass"></div>
三. 属性选择器:[class=“myclass”] or [id=“myid”]
四. 标签选择器:特点:无论标签在html文档结构的哪里其都可以被选中。(标签选择器主要的作用为初始化标签样式,因为每个标签出生时,都带着出生样式)
五. 父子(派生)选择器:
<div><span>inside</span></div>
<span>outside<span>
div span{
	background-color:blue;
}
六. 直接子元素选择器:
<div>
	<span>inside</span>
	<strong>
		<span>outside<span>
	</strong>
</div>

div > span{
	background-color:blue;
}
七. 并列选择器:
//html
<div>one</div>
<div class="two">two</div>
<p class="two">three</p>
/* css */
div.two{
	background-color:blue;
}
八. 分组选择器:
//html
<div>one</div>
<p>two</p>
<strong>three</strong>
<em>four</em>
/* css */
div,p,strong,em{
	background-color:blue;
}
九. 伪类选择器:
//html
<div>one</div>
/* css 下列代码的意思是将光标移动到div区域时,背景颜色变为蓝色,移开时,背景颜色还原*/
div:hover{
	background-color:blue;
}

其他小知识:

  1. html中既有行注释//,也有块注释/* */,但是css中只有块注释。
  2. css中行高(line-height)相当于word文档中的行间距。就是一段文字所占一行的高度。一个小例子:实现单行文本水平垂直居中:text-align:center,height与line-height的值相等就可以实现。
  3. text-indent:首行缩进(提起首行缩进就不得不介绍一下em单位:em的大小 = 1 * 该标签样式的font-size值 )
  4. cursor:设置光标的图案。
  5. html标签的分类:标签被划分为三类——行级(inline)元素,块级(block)元素以及行块(inline-block)级元素,其中行级元素的特点是内容决定元素所占位置,不可以通过css改变宽高;块级元素的特点是独占一行,可以通过css改变宽高;行块级元素的特点是内容决定大小,可以改变宽高。(补充一个小知识:凡是带有inline特征的元素都带有文字特性)
  6. 在一般开发过程中,一般是先定义功能,然后再去选择功能。(初学时,我们一般是先定义一个html标签,再根据最终要体现出的样子来定义css,而在一般开发过程中,过程是反过来的,这样做的好处是便于代码的维护以及再利用)
  7. 一般我们使用通配符(*)来初始化标签样式(因为通配符的权重最低——值为0)

css权重:

!important :infinity
行间样式 :1000
id :100
class|属性|伪类选择器 :10
标签|伪元素 :1
通配符 :0

盒模型计算问题:

盒子的组成部分:盒子壁(border)内边距(padding)盒子内容(width+height)
盒子模型组成部分:margin + border + padding + (content = width + height)如下图所示:
盒子模型
盒模型示例代码:

<div>粉红葡萄脆皮酒<div>
/*	padding:20px(表示上下左右大小都为20px)
    padding:20px 10px 15px(表示上20,左右10,下15)
    margin:10px(表示上下大小为10px) 30px(表示左右大小为30px); */
div{
	width:100px;
	height:100px;
	background-color:blue;
	padding:20px;
	border:10px solid black;
	margin:10px 30px;
}

那么请问上述盒子可视区域的宽高是多少?
(w:160 h:160 可视区域不计算margin的值)

【归纳学习笔记】

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值