教大人写前端第二课之《新手入门了解CSS样式表》

看这篇之前，你应该具备一点点html的知识了。也可移步《html常用标签学习》链接: https://blog.csdn.net/qq_37617413/article/details/106459876.

一、什么是css？

1. 释义
CSS 指层叠样式表 (Cascading Style Sheets)，定义如何显示 HTML 元素样式，样式通常存储在样式表中。

2. 作用
要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。例如，修改字体、大小、颜色、间距等

3. 语法格式
每个css属性是由一个个键值对构成的，比如修改字体颜色color: red;，背景颜色：background-color:pink;

二、3种样式表导入方式

1. 行内样式，使用style方式导入

<h1 style="color:red;">style属性的应用</h1>
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

2. 内部样式表，在style标签中书写CSS代码。style标签写在head标签中。

<head>
  <style type="text/css">
   	h1 {
    
    border:blue solid 1px;background-color: brown}
   	p {
    
    border:blue solid 1px;background-color: brown}
  </style>
</head>

3. 外部样式表,CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表。相对于内部样式表，易于维护

// html文件
<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

// 样式表文件，写法跟内部样式表一致
  	h1 {
    
    border:blue solid 1px;background-color: brown}
  	p {
    
    border:blue solid 1px;background-color: brown}

小结：在这三种方式里，直接在style写的样式的优先级是最高的，比如同样是设置宽度，style里的宽度是优先应用的。
优先级：行内样式>内部样式表>外部样式表

三、选择器的使用

1. 内联/内嵌，元素style属性里面直接写样式即可

<div style="color: #fff000;">
  我是div标签，我的样式是通过行内方式给我的呀
 </div>

运行结果如图：
在这里插入图片描述
2. 元素选择器，直接写标签名即可，这里给p标签的样式，字体28px，颜色#333

<head>
 <style>
   p {
    
    
     font-size: 28px;
     color: #333333;
   }
 </style>
</head>
<p>
   我是p标签，我的样式是通过标签给我的呀
</p>

运行结果如图：
在这里插入图片描述
3. class 常用，以“.”开头：样式字体加粗，字号24px

  <style>
    .text-styles {
    
    
      font-weight: bolder;
      font-size: 24px;
    }
  </style>
   <span class="text-styles">
    我是span标签，我的样式是class给我的呀
  </span>

运行结果如图：
在这里插入图片描述
4. id，以“#”开头

 <style>
  p {
    
    
     font-size: 28px;
     color: #333333;
     border: 1px solid #ddd;
     padding: 8px;
   }

   #link-styles {
    
    
     color: #2C68FF;
     cursor: pointer;
   }
 </style>
 <p>
   <a id="link-styles" href="https://blog.csdn.net/qq_37617413/article/details/106459876">我是a标签，是个链接，点击我可以去学习基础标签</a>
 </p>

运行结果:
在这里插入图片描述

到这儿你已经基本了解HTML+CSS是如何配合组合成页面的了，通过这些基本知识，下一篇我们可以来实现一个微信公众号网页。