晴海小常识分享

晴海小常识分享

当前位置：首页 > 编程笔记 > 正文
已解决

前端---认识CSS

来自网友在路上 141841提问 提问时间：2023-11-12 21:25:34阅读次数： 41

最佳答案 问答题库418位专家为你答疑解惑

文章目录

  • 什么是CSS？
  • CSS在HTML中的位置
    • 内联样式
    • 内部样式
    • 外部样式
  • CSS的选择器
    • 普通选择器
      • 标签选择器
      • 类选择器
      • id选择器
      • 通配符选择器
    • 复合选择器
      • 后代选择器
      • 子选择器
      • 并集选择器
      • 伪类选择器
  • CSS的样式

什么是CSS？

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

CSS在HTML中的位置

内联样式

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

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

内部样式

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

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

外部样式

//创建外部的一个.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的选择器就是让你来选中页面中的哪个/哪些元素，{}里面的样式就是针对这些元素生效的。

普通选择器

标签选择器

		div {color: red;font-size: 100px;}

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

类选择器

		.one {color: red;font-size: 100px;}

注：

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

id选择器

		#two {color: green;font-size: 100px;}

注：

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

通配符选择器

		* {color: blue;font-size: 100px;}

注：通过“*”来选中元素，表示页面内的所有元素都被选中

复合选择器

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

后代选择器

       后代选择器：元素1 元素2 {样式声明}ul li {color: red;font-size: 100px;}

注：

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

子选择器

       子选择器： 元素1>元素2 { 样式声明 }ol>li {color: red;font-size: 100px;}

注：

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

并集选择器

		并集选择器：元素1, 元素2 { 样式声明 }h1,h2 {color: white;font-size: 100px;}

注：

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

伪类选择器

		伪类选择器：是选中元素的不同状态选择未被访问过的链接a:link {color: orange;font-size: 100px;}选择已经被访问过的链接a:visited {color: purple;}选择鼠标悬停的链接a:hover {color: blue;}选择鼠标按下的链接a:active {color: red;}

注：使用 ： 连接左右俩边

CSS的样式

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

查看全文

99%的人还看了

相似问题

猜你感兴趣

版权申明

本文"前端---认识CSS"：http://eshow365.cn/6-38422-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！

推荐回答

网站内容来自网络，如有侵权请联系我们，立即删除！粤ICP备2023082154号