前端---认识CSS

文章目录

什么是CSS?

就像我们前面说的:CSS是用来描述页面样式的。它本身是一个"层叠样式表",能够对网页中特定元素的排版进行像素级精确控制,实现美化页面的效果。

CSS在HTML中的位置

内联样式

html 复制代码
<div style="color:green">使用内联样式直接改变元素的颜色</div>

注:使用style属性设置样式,只针对当前元素生效。

内部样式

html 复制代码
<style>
    div {
        color: red;
   }
</style>
<div>使用内部样式改变元素颜色</div>

注:将style标签和要修饰的元素拆分出来,并且都放在body里

外部样式

html 复制代码
//创建外部的一个.css文件
div {
    color: red;
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>使用外部样式改变元素的颜色</div>
</body>

注:

  1. 在外部创建一个.css文件
  2. 使用link标签在head里引入css

CSS的选择器

只有在选中了元素之后才能为其设置样式,CSS的选择器就是让你来选中页面中的哪个/哪些元素,{}里面的样式就是针对这些元素生效的。

普通选择器

标签选择器

html 复制代码
		div {
            color: red;
            font-size: 100px;
        }

注:通过标签名进行选择,就是表示当前页面中所有相同的标签都要被选中。

类选择器

html 复制代码
		.one {
            color: red;
            font-size: 100px;
        }

注:

  1. 此处写的one是类名,所有的HTML元素都可以指定类名
  2. 不同元素可以指定相同的类名
  3. 通过"."加类名来选中元素,表示类名相同的元素都要被选中

id选择器

html 复制代码
		#two {
            color: green;
            font-size: 100px;
        }

注:

  1. 此处写的two是id,所有的HTML都可以指定id
  2. 在同一个页面内id是唯一的,不同的元素不能使用相同的id
  3. 通过"#"加id来选中元素,表示要选中指定id的元素,只能选中一个。

通配符选择器

html 复制代码
		* {
            color: blue;
            font-size: 100px;
        }

注:通过"*"来选中元素,表示页面内的所有元素都被选中

复合选择器

复合选择器:就是把多个基础选择器给组合起来了

后代选择器

html 复制代码
       后代选择器:元素1 元素2 {样式声明}

		ul li {
            color: red;
            font-size: 100px;
        }

注:

  1. 后代选择器:就是在指定的元素中去筛选后代元素
  2. 元素1和元素2可以是标签选择器、类选择器、id选择器,元素1和元素2之间有一个空格
  3. 可以把元素1后代里所有的元素2筛选出来,不管隔了几代都可以筛选出来

子选择器

html 复制代码
       子选择器: 元素1>元素2 { 样式声明 }

		ol>li {
            color: red;
            font-size: 100px;
        }

注:

  1. 子选择器:就是在指定的元素中去筛选子代元素,不能筛选孙子代,更不能筛选更后代的
  2. 元素1和元素2可以是标签选择器、类选择器、id选择器,元素1和元素2之间用 > 连接

并集选择器

html 复制代码
		并集选择器:元素1, 元素2 { 样式声明 }

		h1,h2 {
            color: white;
            font-size: 100px;
        }

注:

  1. 并集选择器:就是用于选择多组标签
  2. 元素1和元素2可以是标签选择器、类选择器、id选择器,元素1和元素2之间用 , 连接

伪类选择器

html 复制代码
		伪类选择器:是选中元素的不同状态
        
        选择未被访问过的链接
		a:link {
            color: orange;
            font-size: 100px;
        }

        选择已经被访问过的链接
        a:visited {
            color: purple;
        }

        选择鼠标悬停的链接
        a:hover {
            color: blue;
        }
        
        选择鼠标按下的链接
        a:active {
            color: red;
        }

注:使用 : 连接左右俩边

CSS的样式

CSS的样式纷繁多样,为了让大家思路更加清晰,特地单独总结了一篇文章来介绍。

相关推荐
热爱编程的小曾28 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin39 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox