04-复合选择器

2020-06-10  本文已影响0人  我家有个王胖胖

typora-copy-images-to: media

第01阶段.前端基础

CSS 第二天

今天我们围绕一个 导航栏案例进行学习知识点。

今日重点：

<img src="media/day2.png" />

1. CSS复合选择器

目标

为什么要学习css复合选择器

CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。

1.1 后代选择器（重点）

父级 子级{属性:属性值;属性:属性值;}

.class h3{color:red;font-size:16px;}

<img src="media/hou.png" />

1.2 子元素选择器

.class>h3{color:red;font-size:14px;}

<img src="media/zi1.png" />

pink老师一句话说出他们

这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

白话：

 比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

1.3 交集选择器

<img src="media/jiaoji.png" />

<img src="media/jiao.png" />

记忆技巧：

交集选择器 是 并且的意思。 即...又...的意思

比如：   p.one   选择的是： 类名为 .one  的 段落标签。

用的相对来说比较少，不太建议使用。

1.4 并集选择器（重点）

<img src="media/bing.png" />

比如  .one, p , #test {color: #F00;}  
表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
通常用于集体声明。

<img src="media/hu.gif" />他和他，在一起， 在一起 一起的意思

测试题

 <!-- 主导航栏 -->
<div class="nav">   
  <ul>
    <li><a href="#">公司首页</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>
<!-- 侧导航栏 -->
<div class="sitenav">    
  <div class="site-l">左侧侧导航栏</div>
  <div class="site-r"><a href="#">登录</a></div>
</div>

在不修改以上结构代码的前提下，完成以下任务：

  1. 链接 登录 的颜色为红色
  2. 主导航栏里面的所有的链接改为橙色
  3. 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。

1.5 链接伪类选择器（重点）

伪类选择器：

为了和我们刚才学的类选择器相区别
类选择器是一个点 比如 .demo {}
而我们的伪类 用 2个点 就是 冒号 比如 :link{} 伪娘

作用：

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。

注意

a {   /* a是标签选择器  所有的链接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
            color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

1.6 复合选择器总结

选择器 作用 特征 使用情况 隔开符号及用法
后代选择器 用来选择元素后代 是选择所有的子孙后代 较多 符号是空格 .nav a
子代选择器 选择 最近一级元素 只选亲儿子 较少 符号是> .nav>p
交集选择器 选择两个标签交集的部分 既是 又是 较少 没有符号 p.one
并集选择器 选择某些相同样式的选择器 可以用于集体声明 较多 符号是逗号 .nav, .header
链接伪类选择器 给链接更改状态 较多 重点记住 a{} 和 a:hover 实际开发的写法

2. 标签显示模式（display）重点

目标：

2.1 什么是标签显示模式

2.2 块级元素(block-level)

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

<img src="media/12%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0.png">

（1）比较霸道，自己独占一行

（2）高度，宽度、外边距以及内边距都可以控制。

（3）宽度默认是容器（父级宽度）的100%

（4）是一个容器及盒子，里面可以放行内或者块级元素。

2.3 行内元素(inline-level)

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

<img src="media/13%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0.png">

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。

<img src="media/w.jpg" /> 注意：

2.4 行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

<img src="media/14%E8%A1%8C%E5%86%85%E5%9D%97%E5%85%83%E7%B4%A0.png">

2.5 三种模式总结区别

元素模式 元素排列 设置样式 默认宽度 包含
块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签
行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 容纳文本或则其他行内元素
行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度

2.6 标签显示模式转换 display

此阶段，我们只需关心这三个，其他的是我们后面的工作。

3. 行高那些事（line-height）

目标

3.1 行高测量

行高的测量方法：

<img src="media/line1.png" />

<img src="media/line2.png" />

3.2 单行文本垂直居中

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

文字的行高等于盒子的高度。

这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。

行高 = 上距离 + 内容高度 + 下距离

<img src="media/1.png" width="700" />

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

行高和高度的三种关系

4. CSS 背景(background)

目标

4.1 背景颜色(color)

4.2 背景图片(image)

background-image : none | url (url)
参数 作用
none 无背景图（默认的）
url 使用绝对或相对地址指定背景图像 
background-image : url(images/demo.png);

4.3 背景平铺（repeat）

background-repeat : repeat | no-repeat | repeat-x | repeat-y
参数 作用
repeat 背景图像在纵向和横向上平铺（默认的）
no-repeat 背景图像不平铺
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向平铺

4.4 背景位置(position) 重点

background-position : length || length

background-position : position || position
参数 值
length 百分数 | 由浮点数字和单位标识符组成的长度值
position top | center | bottom | left | center | right 方位名词

实际工作用的最多的，就是背景图片居中对齐了。

练习1：

背景大图

练习2：

小图片在盒子左侧垂直居中

4.5 背景附着

参数 作用
scroll 背景图像是随对象内容滚动
fixed 背景图像固定

4.6 背景简写

background: transparent url(image.jpg) repeat-y  scroll center top ;

案例：

导航栏案例

4.7 背景透明(CSS3)

background: rgba(0, 0, 0, 0.3);

4.8 背景总结

属性 作用 值
background-color 背景颜色 预定义的颜色值/十六进制/RGB代码
background-image 背景图片 url(图片路径)
background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y
background-position 背景位置 length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-attachment 背景固定还是滚动 scroll/fixed
背景简写 更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明 让盒子半透明 background: rgba(0,0,0,0.3); 后面必须是 4个值

5. CSS 三大特性

目标：

5.1 CSS层叠性

<img src="media/20%E5%B1%82%E5%8F%A0%E6%80%A7.png">

CSS层叠性最后的执行口诀：  长江后浪推前浪，前浪死在沙滩上。

<img src="media/hai.gif" width="600" height="400" />

5.2 CSS继承性

<img src="media/21%E7%BB%A7%E6%89%BF%E6%80%A7.png">

简单的理解就是： 子承父业。

CSS继承性口诀：  龙生龙，凤生凤，老鼠生的孩子会打洞。

<img src="media/shu.gif" />

5.3 CSS优先级（重点）

<img src="media/22%E4%BC%98%E5%85%88%E7%BA%A7.png">

1). 权重计算公式

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

标签选择器 计算权重公式
继承或者 * 0,0,0,0
每个元素（标签选择器） 0,0,0,1
每个类，伪类 0,0,1,0
每个ID 0,1,0,0
每个行内样式 style="" 1,0,0,0
每个!important 重要的 ∞ 无穷大

2). 权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算

<img src="media/w.jpg" /> 注意：

  1. 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

3). 继承的权重是0

这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。

1） 如果选中了，那么以上面的公式来计权重。谁大听谁的。
2） 如果没有选中，那么权重是0，因为继承的权重为0.

6. CSS注释

CSS注释规则：

/*  需要注释的内容  */  进行注释的，即在需要注释的内容前使用 "/*" 标记开始注释，在内容的结尾使用 "*/"结束。

例如：

p {
 /* 所有的字体是14像素大小*/
  font-size: 14px;                 
}

7. 今日总结

<img src="media/day2.png" />

上一篇 下一篇

猜你喜欢

热点阅读