css基础——day4

权泉全
145 阅读7分钟

一、复合选择器

  • 由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）；

1. 后代选择器

  • html结构存在嵌套的父子级或者后代关系。
  • 基本语法： 选择器1 选择器2 { css样式 }
  • 1、选择器1相当于父级元素，选择器2相当于后代元素，之间用空格隔开表示后代关系；
  • 2、后代元素可以是子元素，也可以是孙子级别的元素，只要有嵌套关系就可以查找到；
  • image.png

2.子代选择器（亲儿子选择器）

  • html结构必须是父子级的嵌套关系，只能选择第一级的嵌套，不会选择里面的孙子；
  • 基本语法： 选择器1>选择器2 { css样式 }
  • 1、选择器1相当于父级元素，选择器2相当于子元素，之间用大于号>连接表示选中第一级的子元素；
  • 2、后代元素必须是子元素（亲儿子），不可以是孙子级别的元素；
  • image.png
  • 注意：子元素选择器只能选择嵌套的父子级的子级盒子，可以理解为亲儿子选择器

3.并集选择器

  • 同时选择多组标签，设置相同的样式；
  • 基本语法： 选择器1,选择器2 { css样式 }
  • 注意： 用英文状态下的逗号隔开。

4.交集选择器

  • 选中页面中 同时满足 多个选择器的标签，满足即又的关系，主要是可以提高被选择元素的权重；
  • 基本语法：
  • 选择器1选择器2 { css样式 } （中间无空格）
  • 1、交集选择器可以更加精准的选择某一个元素，相当于即又关系，也就是两个需求都要满足（比如：我要找一个人，这个人是男生并且有个名字叫老王 ---- 男生老王）
  • 2、最常用的还是标签选择器和类选择器的搭配使用,选择器2也可以是id选择器；
  • 3、交集选择器两个选择器之间是绝对不能书写空格，有了空格就会变成后代选择器；
  • image.png
  • 注意：交集选择器后期经常用来提升元素的选择权重。

5.伪类选择器

  • 所有的html标签都可以设置伪类，我们只需要用英文状态的冒号( : )将选择器和伪类状态连接即可；
  • 基本语法： 选择器:伪类状态 { css样式 }
  • 常见的伪类状态有： :link，:visited ，:hover，:active 四种状态，还有一种特殊专门作用于表单元素获取焦点状态的 :focus伪类选择器。
  • 选择器:link ：鼠标未访问的链接（访问前，针对a标签）
  • 选择器:visited： 鼠标已访问的链接（访问后，针对a标签）
  • 选择器:hover ：鼠标移动到连接上（鼠标经过）
  • 选择器:active ：鼠标选定的链接（按下鼠标的时候）
  • 注意： 如果以上四个状态都要书写必须按照L-V-H-A的顺序来书写，否则就会失去效果；
  • image.png

6.focus伪类选择器

  • 用于选取获表单元素的焦点，一般input表单或者文本域textarea才能获取该焦点；
  • image.png

7.::placeholder占位符的颜色修改

  • 我们只能用这样方法修改占位符的颜色，其他样式不能 在这里修改；
  • image.png

二、背景属性background

  • background是一个复合属性，可以用用来设置背景颜色。背景图片等操作；

1. 背景颜色background-color

  • 用来设置元素的背景颜色，取值可以是预定义的英文，16进制取值，rgb取值；
  • rgba(n,n,n,(0-1)) 背景颜色透明度，取值范围0-1
  • image.png

2.背景图background-image

  • 用来设置元素的背景图片，必须要配合url属性值获取背景图片的路径；
  • background-image: url(./img/gAT.gif);

3.背景图的平铺方式background-repeat

  • 插入背景图以后背景图默认是平铺的，可以通过background-repeat设置不同的取值实现背景图是否平铺；
  • 1、取值为repeat，是默认的取值，背景图会平铺；
  • 2、取值为no-repeat，设置背景图不平铺；
  • 3、可以单独设置水平或者垂直方的单一平铺，取值为repeat-x或者repeat-y;
  • image.png

4.背景位置background-position

  • 设置背景图在元素中的位置
  • **background-position：水平方向 垂直方向；**
  • 默认取值为0,0，表示背景图就在元素的左上角
  • 取值为方位名词： 水平方向：left、center、right；垂直方向：top、center、bottom；
  • image.png
  • 取值为实际像素：
  • 取值为两个实际像素，让背景图在我们预定义好的位置显示；
  • background-position: 100px 50px;
  • 如果取值为一个值，那么这个值是表示左右的水平位置，垂直方向的位置默认居中显示；
  • background-position: 80px;

背景属性综合写法1

  • 基本语法： background: 背景颜色 背景图片地址 背景平铺 背景图片位置;
  • 1、属性值没有书写顺序，没有的属性可以省略不写；
  • 2、属性值和属性值之间用空格隔开；

5.背景尺寸设置background-size

  • 如果背景图片小于当前的盒子或者大于当前的盒子，设置背景图的尺寸大小；
  • 取值为cover： 背景图等比缩放，一直到铺满整个盒子
  • 注意：该属性取值如果背景图和盒子比例不一致。可能会导致背景图过大超出盒子显示不全，溢出隐藏；
  • 取值为contain： 背景图等比缩放，直到背景图的宽或者高和盒子一致就停止缩放；
  • 注意：该属性取值如果背景图和盒子比例不一致可能会导致背景图不会完全铺满盒子；
  • 取值为实际像素大小： 设置背景图大小固定； background-size: 45px 45px;

背景属性综合写法2（加上background-size的写法）

  • background: 背景颜色 背景图片 是否平铺 水平定位 垂直定位 / 背景缩放
  • 注意： 可以把背景尺寸设置给到综合写法中，用 / 隔开连接即可，但是必须要有background-position值，哪怕是0也要书写，否则综合写法失效；

三、盒子透明opacity

  • 语法： opacity: 透明值；
  • opacity 设置盒子的透明，取值为0-1之间，0表示完全透明，1表示不透明，之间的小数表示透明的程度
  • opacity: .5;
  • 注意： 用opacity 设置透明，不仅让背景颜色透明，也会影响盒子里面的内容也跟着透明；

四、盒子显示模式

  • 元素（标签）默认以什么方式进行显示，都是盒子显示模式的原因，比如div盒子独自占一行，span标签一行放多个；
  • 元素显示模式分为三类： 块元素、行内元素，行内块元素；

1.块元素

  • 常见的块元素： div/p/h/ul/li/ol/dl/dt/dd标题等
  • 特点：
  • 1、独自占一行；
  • 2、宽度默认是父元素宽度，高度由内容撑开；
  • 3、可设置宽高；
  • 4、注意点：块元素里面可以嵌套任何元素，但是段落标签p里面不能嵌套div标签(p不能嵌套h,h也不能嵌套p)，因为浏览器解析的时候会将p嵌套div解析成两个p标签，一个div标签显示；
  • image.png

2.行内元素

  • 常见的行内元素： img/a /span/u/ins/s/del/b/strong/i/em
  • 特点：
  • 1、一行共存多个；
  • 2、宽高都由内容撑开，不可以设置宽高(img例外)；
  • 3、行内元素中只能嵌套文本图片或者其他行内元素，但是超链接a里面可以嵌套块级元素；

3.行内块元素

  • 常见的行内元素： input/button;
  • 特点：
  • 1、一行可以共存多个；
  • 2、宽度默认由内容撑开；
  • 3、可以设置宽高；

五、元素显示模式之间的转化display

  • 实际开发中各个元素的显示模式是可以通过display设置不同的属性值实现的；
  • 将元素转化为块元素 display:block;
  • 将元素转化为行内元素 display:inline;
  • 将元素转化为行内块元素 display:inline-block;
avatar
文章
阅读
粉丝