CSS基础
发表更新前端 / CSS15 分钟读完 (大约2317个字)

CSS基础

css(Cascading Style Sheets)层叠样式表

准备

常见的字符集：

【Web前端HTML5&CSS3】01-前端简介 - VectorX - 博客园 (cnblogs.com)

网页基本知识:

【Web前端HTML5&CSS3】03-字符实体与语义标签 - VectorX - 博客园 (cnblogs.com)

CSS语法和选择器

样式表

内联样式(行内样式)

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

1
<p style="color:red;font-size:60px;">内联样式（行内样式）</p>

开发时候尽量不要使用

内部样式表

将样式编写到head中的style标签里然后通过 css 的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用

1
2
3
4
5
6
<style>
p{
    color:green;
    font-size:50px;
}
</style>

外部样式表

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

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

选择器

css选择器

通配选择器（Universal selector）

  • 选择页面中所有的元素
1
2
3
* {
  color: red;
}

元素选择器（Type selector）

  • 根据标签名选中指定的元素
1
2
3
4
5
6
7
p {
  color: red;
}

h1 {
  color: green;
}

类选择器（Class selector）

  • 根据元素的class属性选中一组元素
1
2
3
4
5
6
.blue {
  color: blue;
}
.size {
  font-size: 20px;
}

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

  • 可以重复使用，
  • 可以通过class属性来为元素分组，
  • 可以同时为一个元素指定多个class属性

ID 选择器（ID selector）

  • 根据元素id属性值选中元素
1
2
3
#red {
  color: red;
}

属性选择器（Attribute selector）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#选择含有指定属性的元素
p[title] {
  color: orange;
}
#选择含有指定属性和属性值的元素
p[title="e"] {
  color: orange;
}
#选择属性值以指定值开头的元素
p[title^="e"] {
  color: orange;
}
#选择属性值以指定值结尾的元素
p[title$="e"] {
  color: orange;
}
#选择属性值中含有某值的元素
p[title*="e"] {
  color: orange;
}

复合选择器

交集选择器和并集选择器区别_笔记大全_设计学院 (python100.com)

交集选择器

  • 选中同时符合多个条件的元素(同时符合多个选择器的元素)
1
2
3
4
#选中所有class为box并且p标签的元素
.box p {
  font-size: 20px;
}

并集选择器

  • 选中同符合多个条件的元素()
1
2
3
4
#选中所有class为box和p标签的元素
.box, p {
  font-size: 20px;
}

复合选择器

  • 选中同时复合多个条件的元素()

关系选择器

子元素选择器（Child combinator）

  • 选中指定父元素的指定子元素
1
2
3
div.box > p > span {
  color: orange;
}

后代元素选择器（Descendant combinator）

  • 选中指定元素内的指定后代元素
1
2
3
div span {
  color: skyblue;
}

兄弟元素选择器（Sibling combinator）

  • 选择下一个兄弟
1
2
3
4
5
6
7
8
9
#选中第一个<p>元素紧跟着一个同级的<span>元素时
p + span {
  color: red;
}

#选中<p>元素后面的所有同级<span>元素
p ~ span {
  color: red;
}

伪类选择器

伪类（不存在的类，特殊的类）

  • 用来描述一个元素的特殊状态，例如：第一个子元素，被点击的元素

  • :first-child 第一个子元素

  • :last-child 最后一个子元素

  • :nth-child()

    选中第 n 个子元素

    • n：第 n 个，n 的范围 0 到正无穷
    • 2n 或 even：选中偶数位的元素
    • 2n+1 或 odd：选中奇数位的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* ul下所有li，黑色 */
ul > li {
  color: black;
}

/* ul下第偶数个li，黄色 */
ul > li:nth-child(2n) {
  color: yellow;
}

/* ul下第奇数个li，绿色 */
ul > li:nth-child(odd) {
  color: green;
}

/* ul下第一个li，红色 */
ul > li:first-child {
  color: red;
}

/* ul下最后一个li，黄色 */
ul > li:last-child {
  color: orange;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
  /* 把没访问过的链接用特殊颜色标记出来 */
  a:link {
    color: aqua;
  }

  /* 把已经访问过的链接用特殊颜色标记 */
  a:visited {
    color: azure;
  }

  /* 鼠标经过时链接变色 */
  a:hover {
    color: black;
  }

  /* 鼠标按下还未弹起的时候变换的特殊颜色 */
  a:active {
    color: blue;
  }
</style>

伪元素选择器

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

  • ::first-letter 表示第一个字母
  • ::first-line 表示第一行
  • ::selection 表示选中的内容
  • ::before 元素的开始
  • ::after 元素的最后
  • ::before和::after 必须结合content属性来使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 段落首字母设置大小为30px */
p::first-letter {
  font-size: 30px;
}

/* 段落第一行设置为黄色背景 */
p::first-line {
  background-color: yellow;
}

/* 段落选中的部分变绿色 */
p::selection {
  background-color: green；;
}

/* div前加上内容 */
div::before {
  content: "BEFORE";
  color: red;
}

/* div后加上内容 */
div::after {
  content: "AFTER";
  color: blue;
}

选择器练习小游戏

三特性和其他

css的三特性

层叠性

相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性的主要解决冲突的问题

层叠性原则：

  • 样式冲突，遵循就近原则，那个样式离结构近，就执行哪个样式
  • 样式不冲突，不会层叠

继承性

css中子标签会继承父标签的某些样式，如文本颜色和字号。

优先级

  • 相同选择器，遵循层叠原则
  • 不同选择器，按照权重来

​

选择器 权重
继承 0，0，0，0
元素标签选择器 0，0，0，1
类/伪类选择器 0，0，1，0
id选择器 0，1，0，0
行内样式表 1，0，0，0
important ∞ 
1
background-color: rgba(0, 0, 0, 0.3) !important;

使用important声明的属性优先级最高

注意：

如果继承的优先级为0，如果标签定义有样式表，则优先级高于其继承父标签的样式表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <style>
        #father {
            color: aqua;
        }
        p {
            color: azure;
        }
    </style>
</head>
<body>
    <div id="father">
        <p></p>
    </div>
</body>

权重的叠加：定义范围更小的优先级高，如li的权重低于 ul li

px，em，rem

  • px：像素点
  • em：参考是父元素的font-size，具有继承的特点。如果自身定义了font-size按照自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值
  • rem：css3新单位，相对于根元素html的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱

浮动

浮动简介

通过浮动可以使一个元素向其父元素的左侧或右侧移动

使用float属性来设置于元素的浮动

  • none 默认值，元素不浮动
  • left 元素向左浮动
  • right 元素向右浮动

浮动特点

  1. 浮动元素会完全脱离文档流，不再占据文档流中的位置
  2. 设置浮动以后，元素会向父元素的左侧或右侧移动
  3. 浮动元素默认不会从父元素中移出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  .box1 {
    width: 100px;
    height: 100px;
    background-color: orange;
    float: left;
  }

  .box2 {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>

<div class="box1"></div>
<div class="box2"></div>

不会从父元素种移出

  1. 浮动元素向左或向右移动时，不会超过前边的浮动元素（先来后到的顺序）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
  .box1 {
    width: 200px;
    height: 200px;
    background-color: orange;
    float: left;
  }

  .box2 {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
  }

  .box3 {
    width: 200px;
    height: 200px;
    background-color: yellow;
    float: left;
  }
</style>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

不会超过前面的元素

  1. 浮动元素不会超过上边的浮动的兄弟元素，最多就是和它一样高
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
  .box1 {
    width: 300px;
    height: 300px;
    background-color: orange;
    float: left;
  }

  .box2 {
    width: 400px;
    height: 400px;
    background-color: red;
    float: left;
  }

  .box3 {
    width: 300px;
    height: 300px;
    background-color: yellow;
    float: right;
  }
</style>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

最多和兄弟同高

  1. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    <style>
        /* 不浮动 */
  .box1 {
    width: 200px;
    height: 200px;
    background-color: orange;
  }
/* 向左浮动 */
  .box2 {
    width: 200px;
    height: 200px;
    background-color: aqua;
    float: left;
  }
  /* 不浮动 */
  .box3 {
    width: 300px;
    height: 300px;
    background-color: rgb(34, 31, 31);

  }
      </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

浮动不能超过上一个未浮动的位置

  1. 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果

浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局

脱离文档流的特点

块元素：

  • 块元素不再独占页面的一行
  • 脱离文档流以后，块元素的宽度和高度默认都被内容撑开
1
2
3
4
5
6
7
8
<style>
    .box1{
        background-color: aqua;
        /* 浮动后 hello从原本占一样 变为hello文本长度 */
        float: left;
    }
</style>
<div class="box1">hello</div>

块元素浮动后

行内元素:

  • 行内元素脱离文档流以后会，特点和块元素一样
  • 脱离文档流之后的特点很像行内块元素，不过存在一些差异
#
关注我

最新文章

分类

×