前端---认识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的样式纷繁多样,为了让大家思路更加清晰,特地单独总结了一篇文章来介绍。

相关推荐
杨进军18 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW33 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字40 分钟前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵2 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im2 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript