前端三大件：CSS入门

最新推荐文章于 2022-05-10 23:57:27 发布

无关痛痒qaq

最新推荐文章于 2022-05-10 23:57:27 发布

阅读量495

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43655835/article/details/107540365

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、啥是CSS3?

CSS3是W3C(万维网)制定的最新的CSS标准，CSS3在CSS的基础上拆分和增加了文字特效、列表模块、盒子模块、语言模块、北京边框等等一系列表现方式，同时对于浏览器的兼容问题也做了优化。说白了，CSS就是用来美化网页的，如果说HTML是前端代码的骨架，则CSS就是前端骨架上的外衣。

二、第一个CSS

我们可以在<stryle>标签中写编写css代码，下面<style>代码段中的h3是一个选择器，表示为h3标签设置样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>第一个CSS</title>

  <!--设置h3的样式-->
  <style>
    h3{
      color: green;
    }
  </style>

  <h3>这是3级标题</h3>
</head>
<body>

</body>
</html>

在这里插入图片描述

<style>标签中的css代码基础语法:

选择器{
	样式代码1;
	样式代码2;
	……
}

三、引用CSS文件

这种方式个人还是比较推荐的，css代码单独放到css文件中，然后在html文件中进行引用，这样html文件看起来比较干净，不会显得杂乱。

1.创建一个文件夹css,并在文件夹中创建css文件:mycss

h3{
	color:blue
}

2.在index.html文件中引用mycss文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>无关痛痒的博客</title>

  <link rel="stylesheet" href="css/mycss.css">

  <h3>无关痛痒qaq</h3>

</head>
<body>

</body>
</html>

在这里插入图片描述

注意：文件是否引用成功可以使用鼠标点击href后面引用的文件路径，如果路径正确，则会跳转至引用文件中，如果没有跳转，则引用路径不正确。

四、CSS样式级联

1.内联样式

将样式写在html标签中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>无关痛痒</title>

<h3 style="color: red">无关痛痒qaq</h3>

</head>
<body>

</body>
</html>

2.嵌入式样式

将样式写在<style>标签中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>

  <!--设置h3的样式-->
  <style>
    h3{
      color: green;
    }
  </style>

  <h3>这是3级标题</h3>
</head>
<body>

</body>
</html>

3.外部样式

将样式写在一个单独的样式文件中，并使用链接的下形式进行引用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>无关痛痒的博客</title>

  <link rel="stylesheet" href="css/mycss.css">

  <h3>无关痛痒qaq</h3>

</head>
<body>

</body>
</html>

4.样式优先级

浏览器查找样式的优先级分别为：

内联样式>嵌入式样式>外部样式

可以理解为使用就近原则，哪种样式离被设置的元素越近就是用哪种样式

五、选择器

CSS使用选择器来选择HTML元素并添加样式，CSS选择器常用的有：id选择器、类选择器、标签选择器……(仅仅介绍了几个常用的，CSS的选择器还有很多)

5.1 id选择器

id必须要保证是全局唯一的，id选择器是优先级最高的选择器（选择器越特殊，优先级越高，指向越精确，优先级越高），同时id选择器的效率也是最高的

#myid{
	……
}

5.2 类选择器

我觉得这应该是最常用的一种选择器吧，看个人习惯。

.className{
	……
}

5.3 标签选择器

标签选择器设置样式的时候不够精细，属于批量设置样。

div{
	……
}
或者
h{
	……
}
或者
p{
	……
}
	……

👉点击查看更多高级选择器

六、网页美化

6.1 字体修改

<!--字体系列-->      
      font-family: 楷体;
<!--字体大小-->
      font-size: large;
<!--字体粗细-->
      font-weight: bold;
<!--字体颜色-->
      color: red;
<!--字体样式:斜体-->
      font-style: italic;

6.2 CSS伪类

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

<style>
    .a1 {
      /*去掉下划线*/      
      text-decoration: none;
      color: black;
    }

    /**
        鼠标悬停的颜色
     */
    .a1:hover {
      color: red;
    }

    /**
        鼠标点击时的颜色
     */
    .a1:active {
      color: blue;
    }
</style>
<a class="a1">阿里巴巴</a>

七、盒子模型

CSS中的盒子模型本质上可以看作是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

在这里插入图片描述

Margin:外边距，清除边框外的区域，外边距是透明的
Border：边框，围绕在内边距和内容外的边框
Padding：内边距，清除内容周围的区域，内边距是透明的
Content:内容，盒子的内容，显示文本和图像
Width: 内容的长度
Height: 内容的宽度

在写css的时候，可以直接在浏览器页面上面的盒子模型上进行边距的调整：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    .mybox {
      /*内容的宽度*/
      width: 200px;
      /*内容的高度*/
      height: 50px;
      /*外边距 上 右 下 左  参数设置方向为顺时针 */
      margin: 10px 9px 8px 7px;
      /*内边距 上 右 下 左  参数设置方向为顺时针*/
      padding: 11px 12px 13px 14px;
      /*背景颜色*/
      background: yellowgreen;
    }
  </style>

  <div class="mybox">
    边距测试
  </div>

</head>
<body>

</body>
</html>

上面这段代码在浏览器中通过盒子模型可以看出设置的距离分别对应的是哪一部分：

在这里插入图片描述

✈ 飞机票https://www.w3cschool.cn/css/

无关痛痒qaq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端三大件：CSS入门

一、啥是CSS3?CSS3是W3C(万维网)制定的最新的CSS标准，CSS3在CSS的基础上拆分和增加了文字特效、列表模块、盒子模块、语言模块、北京边框等等一系列表现方式，同时对于浏览器的兼容问题也做了优化。说白了，CSS就是用来美化网页的，如果说HTML是前端代码的骨架，则CSS就是前端骨架上的外衣。二、第一个CSS我们可以在<stryle>标签中写编写css代码，下面<style>代码段中的h3是一个选择器，表示为h3标签设置样式。<!DOCTYPE html&gt
复制链接

扫一扫