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

相关推荐
我要洋人死19 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人30 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人31 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR36 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香38 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969341 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#