HTML&CSS3

HTML&CSS3

语雀HTML&CSS3文档

04-CSS语法与选择器

1、CSS简介

层叠样式表

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，类似PS的图层

使用CSS来修饰元素样式的方式大致可以分为3种

内联样式（行内样式）

在标签内容通过style属性来设置元素的样式

内部样式表

<style>
 	p{
 		color:red;
 		font-size:40px;
 	}
style>
1
2
3
4
5
6

内容样式表只能对一个网页起作用，不能跨页面进行复用

外部样式表

可以将css样式编写到一个外部的CSS文件中，通过link标签来引入外部的CSS文件

<link rel="stylesheet" href="./style.css">
1

将样式写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页速度，提供用户的体验。

2、CSS基本语法

注释

/*
css中的注释
*/

/*
JS（JavaScript）和JQuery的注释
*/

1
2
3
4
5
6
7
8
9
10
11
12

基本语法

选择器

• 通过选择器可以选中页面中的指定元素
• 比如p的作用就是选中页面中所有的p元素声明块

声明块

• 通过{}指定要为元素设置的样式
• 声明块由一个一个声明组成，声明是一个键值对结构
• 一个样式名对应一个样式值，名和值之间以：连接，以；结尾

3、基本CSS选择器

通配符选择器（Universal selector）

• 作用：选中页面中的所有元素

  *{color:red;}
  1

元素选择器（Type selector）

也叫类选择器、标签选择器

• 作用：根据标签名来选中指定的元素

• 语法：elementname{}

  p{
      color:red;
      font-size:40px;
  }
  1
  2
  3
  4

类选择器（class selector）

• 作用：根据元素的class属性值选中一组元素

• 语法：.classname

  .blue{
  	color:blue;
  }
  1
  2
  3

  class是一个标签的属性，它和id类似，不同的是class，

  - 可以重复使用
  - 可以通过class属性来为元素分组
  - 可以同时为一个元素指定多个class属性
  
  类选择器
  1
  2
  3
  4
  5

ID选择器（ID selector）

• 作用：根据元素的id属性值选中一个元素

• 语法：#idname{}

  #red{
      color:red;
  }
  1
  2
  3

优先级：id>class>标签

属性选择器（Attribute selector）

• 作用：根据元素的属性值选中一组元素

• 语法：

  • [属性名]选择含有指定属性的元素
  • [属性名=属性值]选择含有指定属性和属性值的元素
  • [属性名^=属性值]选择属性值以指定值开头的元素
  • [属性$=属性值]选择属性值以指定值结尾的元素
  • [属性名*=属性值]选择属性值含有某值的元素

  p[title]{
  	color:red;
  }
  p[title$=e]{
  	color:red;
  }
  1
  2
  3
  4
  5
  6

4、复合选择器

交集选择器

• 作用：选中同时复合多个条件的元素

• 语法：选择器1选择器2…选择器n{}

• 注意：交集选择器中如果含有元素选择器，必须使用元素选择器开头

  div.red{
  	color:red;
  }
  1
  2
  3

并集选择器（选择分组）

• 作用同时选择多个选择器对应的元素

• 语法：选择器1，选择器2，…选择器n{}

  h1,span{
  	color:red;
  }
  1
  2
  3

5、关系选择器

• 父元素：直接包含子元素的叫父元素
• 子元素：直接被父元素包含的元素是子元素
• 祖先原始：直接或间接包含后代元素的元素叫祖先元素；父元素也是祖先元素
• 后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
• 兄弟元素：拥有相同父元素的元素是兄弟元素

子元素选择器（child combinator）

• 作用：选中指定父元素的指定子元素

• 语法：父元素 > 子元素{}

  div.box > p > span{
  	color: orange
  }
  1
  2
  3

后代元素选择器

• 作用：选中指定元素内的指定后代元素

• 语法：祖先 后代{}

  div span{
  	color：skyblue;
  }
  1
  2
  3

兄弟元素选择器

• 作用：选择下一个兄弟

• 语法：

  • A1 + A2{} 相邻的兄弟选择器：找紧挨着的下一个兄弟元素

  • A ~ A3{} 通用兄弟选择器：后面所有兄弟元素

    p + span{
    	color: red;
    }
    p ~ span{
    	color: red;
    }
    1
    2
    3
    4
    5
    6

6、伪类选择器

伪类：不存在的类，特殊的类。用来描述一个元素的特殊状态如：第一个子元素、被点击的元素、鼠标移入的元素…

伪类一般情况下都是使用：开头

• ：first-child 第一个子元素
• ：last-child 最后一个子元素
• : nth-child()
  • n:第n个，n的范围0到正无穷
  • 2n或even:选中偶数为的元素
  • 2n+1或odd：选中奇数为的元素

以上这些伪类都是根据所有的子元素进行排序的

• :first-of-type同样类型中的第一个子元素
• :last-of-type 同样类型中的最后一个子元素
• :nth-of-type()选中同类型中的第n个子元素

这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的

• :not()否定伪类，将符合条件的元素从选择器中去除

  u>li:first-child{}
  
  /*ul下第偶数个li，黄色*/
  ul>li:nth-child(2n){color：yellow;}
  
  /*ul下除了第三个li，其余的都是红色*/
  ul>li：not(:nth-of-type(3)){color：red;}
  1
  2
  3
  4
  5
  6
  7

• :link 未访问的链接

• :visited 已访问的链接

  • 由于隐私原因，所以visited这个伪类只能修改链接的颜色

• :hover 鼠标悬停的链接

• :active 鼠标点击的链接

  a:visited{}
  1

7、伪元素选择器

伪元素，表示页面中一些特殊的并不真实存在的元素（特殊位置）

伪元素::开头

• ::first-letter表示第一个字母

• ::first-line表示第一行

• ::selection表示选中的内容

• ::before元素的开始

• ::after元素的最后

  • ::before 和::after必须结合content属性来使用

  p::first-letter{
  	background-color：yellow；
  }
  
  /*div前面加上内容*/
  div::before{
  	content:'BEFORE';
  	color:red;
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9

06-盒子模型

1、文档流（normalflow）

网页是一个多层的结构，通过CSS可以分别为每一层来设置样式，作为用户来讲只能看到最顶上的一层，这些层中，最底下的一层称为文档流

• 文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列
• 对于我们来说元素主要有两个状态
  • 在文档流中
  • 不在文档流中（脱离文档流）

2、块元素

• 块元素会在页面中独占一行

• 默认宽度是父元素的全部（会把父元素撑满）

• 默认高度是被内容撑开（子元素）

3、行内元素

• 行内元素不会独占页面的一行，只占自身的大小
• 在页面中左向右水平排列
• 如果一行之中不能容纳下所有的行内元素，元素会换到第二行继续自左向右排列
• 默认宽度和高度都是被内容撑开

4、盒子模型

盒子模型

CSS将页面中所有元素都设置为一个矩形的盒子，对页面的布局就是将不同的盒子摆放到不同的位置

每一个盒子都是有一个几个部分组成

• 内容区（content）
• 内边距（padding）
• 边框（border）
• 外边距（margin）

内容区

内容区是盒子的模型中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型，元素中的所有的子元素和文本内容都在内容区中

• width
• height

边框

边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部

注意：边框的大小会影响都爱整个盒子的大小

• border-width

  • 边框的宽度：默认3px
  • 上右下左
  • border-top-width，border-right-width，border-botttom-width，border-left-width

• border-color

  • 边框的颜色：默认使用color的颜色值

• border-style

  • 边框的样式：默认值none

solid、dotted、dashed、double

不论是border-width、border-color、border-style 还是其衍生出来的属性写法，都可以指定每个方向的边框情况

设定几个值就决定了对应方向的宽度、颜色或样式

.box1{
	border: 10px red solid;
}
1
2
3

内边距

内边距，也叫填充，是内容区和边框之间的空间，背景颜色会延伸

外边距

外边距，位于盒子的最外围的空间。空白边使盒子之间不会紧凑的连接在一起，是CSS布局的一个重要手段

注意：外边框不会影响盒子的可见框的大小，但是外边距会影响盒子的位置和占用空间

margin四周外边距

• margin-top:上外边距

• 正值元素向下移动，负值元素向上移动

• margin-right：右外边距

  • 正值其右边的元素向右移动，负值其右侧的元素向左移动
  • 对于块元素，设置margin-right不会产生任何效果

• margin-bottom ：下外边距

  • 正值其下边的元素向下移动，负值其下边的元素向上移动
  • 对于块元素，会有垂直方向上的边距重叠问题

• margin-left：左外边距

  • 正值元素向右移动，负值元素向上移动

  元素在页面中是按照自左向右的顺序排列的，所以默认情况下

  • 设置的左和上外边距则会移动元素自身
  • 设置下和又外边距会移动其它元素

5、水平方向布局

元素再其父元素中水平方向的位置由以下几个属性共同决定

​ margin-left border-left padding-left width padding-right border-right margin-right

水平布局必须满足以下的等式

​ 其父元素内容区的宽度 = margin-left + border-left + padding-left + width + padding-right +border-right + margin-right

以上等式必须满足，如果相加结果使等式不成立，则称为 过度约束

等式会自动调整的情况

• 如果这七个值中没有auto 的情况，则浏览器会自动调整 margin-right 使等式满足

​ 0+0+0+200+0+0+0=800 => 0+0+0+200+0+0+600=800

• 如果宽度为auto，则宽度会调整到最大，其他auto 的外边距会自动设置为0
  • 如果外边距都未auto，则auto的外边距会自动均分以使等式成立

6、垂直方向布局

元素溢出

overflow （overflow-x overflow-y）

• visible
• hidden
• scroll
• auto

外边距折叠

垂直外边距的重叠

​ 不能让两个垂直margin相遇，否则就回发生外边距折叠。

避免外边距折叠的方法

• 浮动元素不会与任何元素发生折叠

• 绝对定位元素和其他任何元素之间不发生外边距叠加，也包括他的子元素

• inline-block元素和其他任何元素之间不发生外边距叠加，也包括它的子元素

• 创建了BFC的元素不会和它的子元素发生外边距的叠加（兄弟元素还是会叠加）

兄弟元素

• 如果相邻的外边距都是正值，取两者之间的较大者
• 如果相邻的外边距都是一正一负，则取两者的和
• 如果相邻的外边距都是负值，则取两者中绝对值较大的
• 总结：兄弟元素之间的外边距的重叠，对于开发是有利的，不需要进行处理

父子元素

​ 父子元素间相邻外边距，子元素会传递给父元素（上外边距）

7、行内元素的盒模型

• 行内元素不支持设置宽度和高度

• 行内元素可以设置padding,但是垂直方向padding不会影响页面的布局

• 行内元素可以设置border，垂直方向的border不会影响页面的布局

• 行内元素可以设置margin，垂直方向的margin不会影响布局

想要行内元素对页面布局产生影响

1、display 用来设置元素的行内元素

• inline 将元素设置为行内元素

• block将元素设置为块元素

• inline-block将元素设置为行内块元素，既可以设置宽高又不占一行（避免使用）

• table将元素设置为空表格

• none 不在页面中显示，隐藏一个元素，同时原来属于它的位置也没了

2、visibility用来设置元素的显示状态

• visible 默认值，元素在页面中正常显示
• hidden元素在页面中隐藏不显示，但是依然占据页面位置

8、浏览器的默认样式

通常情况，浏览器都会为元素设置一些默认的样式

默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）

*{
	margin：0；
	padding：0；
	list-style：none；
}
1
2
3
4
5

reset样式

normalize样式