小黄鸭

Appearance

🟢 🟡 🔴

🔵 CSS 入门 ​

🔵 第一个 CSS ​

前面我们用 HTML 做了一个不是那么好看的网页 👇

HTML-html作业

它没有布局，图片也超大。所以我们要用CSS来改变它👇

我们先把原来的代码拿过来看看吧👇

html
<!DOCTYPE html> 
<html> 
  <head> 
    <title>网站标题</title> 
  </head> 
  <body>

    <h1>我的前端作业！</h1> 
    <p>这是一段描述段落哦！</p> 
    <a href="https://xgcode.xiexiage.com" target="_blank">小黄鸭</a> 
    <img src="./img.svg" alt="小黄鸭" /> 

  </body> 
</html>

接下来我们使用【CSS】的知识来改变一下图片的大小吧！👇

html
<img style="width:100px" src="./img.svg" alt="小黄鸭" />
  • 在标签里加入 style 属性来装饰 HTML
  • width:100px 指的是宽度100px,
  • px 是一种像素单位，非常常用！

竟然改都改了，那就让我们改多点吧👇

html
<!DOCTYPE html> 
<html> 
  <head> 
    <title>网站标题</title> 
  </head> 

          👇 把背景改成黑色 
  <body style="background-color:black"> 

          👇 把大标题的字改成了白色 
    <h1 style="color:#fff">我的前端作业！</h1> 
        👇 把段落的字改成黄色 
    <p style="color:yellow">这是一段描述段落哦！</p> 
    <a href="https://xgcode.xiexiage.com" target="_blank">小黄鸭</a> 
          👇 把图片宽度改成100px 
    <img style="width:100px" src="./img.svg" alt="小黄鸭" /> 

  </body> 
</html>

代码当中有很多陌生的单词！不用慌，后续我们会来学习这些单词可以使他们改变什么样式，都是很常用的，用过几次后就会记住的了，例如👇

  • background-color 用来改变背景颜色
    • black 是👆它的参数：可以是【用以描述颜色的单词】也可以是【色号】
    • #000 例如这个就是色号！
  • color 改变字体颜色
  • width 改变标签宽度

我们先来看看刚刚改变后的效果吧！👇

css-css装扮小作业

请你也一定要动手试试！！

☁️ 内嵌式 ​

html
<!DOCTYPE html> 
<html> 
  <head> 
    <title>网站标题</title> 
  </head> 
  <body>

    <h1 style="color:red" >我的前端作业！</h1>  
   
  </body> 
</html>

上面我们把样式写在 HTML 标签里面，这种就叫【嵌入式】

接下来介绍另外两种👇也可以使用CSS的方式👇

🌥️ 内联式 ​

html
<!DOCTYPE html> 
<html> 
  <head> 
    <title>网站标题</title> 
    <style> 
      h1{ 
        color:red;  
      } 
    </style> 
  </head> 
  <body>

    <h1>我的前端作业！</h1> 
   
  </body> 
</html>

可以看到我们在 <head> 标签里多加了一个 <style> 标签，这个就叫【内联式】。
我们在 <style> 标签里写上 h1 这样就会改变所有 h1 标签的样式。

  • color:red; 就把所有 h1 的字都改成红色。

它的好处就是：

  1. 假设我现在要把所有 h1 标签都改成某一种颜色，就不用一个一个在 HTML 标签里改了

除了这种方式还剩下一种👇

🌤️ 外联式 ​

就是在 <head> 标签里引入外部文件👇

html
<!DOCTYPE html> 
<html> 
  <head> 
    <title>网站标题</title> 
    <link rel="stylesheet" href="index.css"> 
  </head> 
  <body>

    <h1>我的前端作业！</h1> 
   
  </body> 
</html>

然后我们新建一个 index.css 的文件在 index.html 文件旁边。👇

css-新建css

🏅 优先级 ​

上面三种引入 CSS 的方式中，如果同时存在，那么他们之间的优先级：

内嵌 > 内联 > 外联

三种引入 CSS 的方式都各有优劣，视情况而决定用哪一种。

#️⃣ class & id ​

接下来，将介绍如何使用 class 和 id 选择器来给标签分类。

  1. class 称之为 “类”，类可以有很多个，类名只要是一样的，他们就是同一类，就像猫和狮子都是【猫科动物】这一类。
  2. id id 名字是唯一的，只能有一个。
html
<h1>我的h1标签</h1>
<h1 class="xxg">我是类名叫xxg的h1标签</h1>
<h1 class="xxg">我是类名叫xxg的h1标签</h1>
<p class="xxg">我是类名叫xxg的p标签</p>

<h1 id="test">id是唯一的</h1>

我们给标签加上了【属性】， class 和 id 是所有标签都有的属性。

html
<style>
h1{
  color:blue;
}
.xxg{
  color:red;
}
#test{
  color:green;
}
</style>

在权重方面，id > class > <标签> ，也就是说，如果一个标签同时有 id 和 class 的话，那么 id 优先级更高。