2021-03-06

最新推荐文章于 2024-09-11 20:31:47 发布

亐㔓832

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量93

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_55685975/article/details/114434199

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.什么是CSS?
CSS-Cascading Style Sheet [层叠样式表]
是用于(增强)控制网页[html]样式并允许将样式信息与网页内容分离的一种标记性语言.
2.CSS的作用
给HTML元素设置样式，使HTML更好看。
3.在HTML中如何使用CSS？
3.1 内联定义
就是在HTML元素的内部使用对象的style属性定义适用其的样式表属性，以达到控制当前HTML元素的样式。
在HTML元素中的开始标记中设置样式
格式：<html标记 style=”样式名称1:样式值1;样式名称2:样式值2”>显示的内容</html标记>
缺点：当我们给一个html标记设置很多样式的时候，这个HTML标记就会变得很长，以后修改起来不方便。
适合于样式定义较少的情况。
3.2内部样式块
就是在中添加标记来设置html元素的样式。
格式：

<html>
<head>
<style>
   css选择器{
      css样式名称:样式值;
              css样式名称:样式值;
  css样式名称:样式值;
}
</style>
</head>
<body>
   Html元素
</body>
</html>

缺点：当我们需要设置多个标记样式时，会使内部样式块变的很大。
适用于样式较少的时候使用。
3.3链入外部样式
先建立外部样式表文件（.css），然后使用HTML的link标记，将外部样式表文件（.css）导入进当前的html文件中。
第一步：建立外部样式表文件（.css）
第二步：在html的head标记中使用link标记导入样式文件。

<link rel=stylesheet href="样式文件的路径" type="text/css">

当我们需要设置大量的CSS样式设置时使用这种方式，这种方式可以做到HTML和CSS的分离控制。
我们往往使用最多的就是第2种和第3种方式。这两种方式定义css样式的语法是相同的。
格式：
css选择器{
css样式名称:样式值;
css样式名称:样式值;
css样式名称:样式值;
}
上面的样式定义格式是由2部分组成
1.css选择器
2.具体样式设置
4.CSS选择器
CSS选择器是用来从HTML文件中选中需要被控制的HTML标记。
1.元素选择器—根据HTML元素的名称选中被控制的HTML标记
2.id选择器—根据给HTML标记设置的id属性来选中需要被控制的HTML标记。
如果要使用id选择器，首先要给HTML标记设置id属性。
3.类【class】选择器—根据给HTML标记设置的class属性来选中需要被控制的HTML标记。
如果要使用类【class】选择器，首先要给HTML标记设置class属性。
4.包含选择器—选择所有被父元素包含的子元素。
5.属性选择器—根据HTML标记的属性来选中被控制的元素。
5.1 元素 [属性名称] { sRules }：选择具有某个属性的元素
5.2 元素 [属性名称 = value【属性值】 ] { sRules }：选择具有某个属性且属性值等于 value 的元素。
6.子元素选择器—选择所有E1子对象的E2。
7.选择器分组—将同样的样式应用于多个选择器选中的元素上，不同的选择器之间使用“，”分割。
注意：CSS的选择器在使用时，不是单一的使用，而是通过不同的组合方式去使用。
5.常用的伪类
1.:link—设置 a 标记在未被访问前的样式。
格式🅰️ link {css样式属性}
2.:hover----设置对象在其鼠标悬停时的样式。
格式:Selector: hover{css样式属性}
3.:active—设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。应用于任何对象
格式:Selector:active{css样式属性}