CSS基础2--简单应用

应用CSS

CSS编写在扩展名为.css的单独文件中，并利用HTML 的元素引用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS DEMO</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <h1>微信搜索：伊洛的小屋</h1>
    <p>凡是过去，皆为序章</p>
  </body>
</html>

标记CSS文件

/*
h1 {
  color: blue;
  background-color: cornflowerblue;
  border: 1px solid black;
}

p {
  color: darkviolet;
}
*/

打开浏览器查看效果

元素的href指向css文件的地址
内部样式表
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS DEMO</title>
      <style>
          h1 {
             color: blue;
              background-color: cornflowerblue;
             border: 1px solid black;
           }

          p {
             color: darkviolet;
           }
      </style>
  </head>
  <body>
    <h1>微信搜索：伊洛的小屋</h1>
    <p>凡是过去，皆为序章</p>
  </body>
</html>

不使用外部CSS文件，而是将CSS放在HTML文件放在<style>标签中

内联样式

内联样式表存在于HTML元素的style属性之中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS DEMO</title>
  </head>
  <body>
    <h1 style="color: blue;background: cornflowerblue; border: 1px solid black">微信搜索：伊洛的小屋</h1>
    <p style="color:red;">凡是过去，皆为序章</p>
  </body>
</html>
选择器

每个CSS规则都以一个选择器或一组选择器为开始，选择器具有专一性且稍后的样式将覆盖以前的样式

属性和值

CSS由两部分组成：1.属性 2.值
与值配对的属性称为CSS声明，CSS声明放在CSS声明块中，属性和值都是区分大小写的，每对中的属性和值由冒号(：)分隔

规则

@rules

注释

CSS中的注释以/*开头，以*/结尾

/* 公众号：伊洛的小屋
个人主页：https://yiluotalk.com/
博客园：https://www.cnblogs.com/yiluotalk/ 
h1 {
  color: blue;
  background-color: cornflowerblue;
  border: 1px solid black;
}

p {
  color: darkviolet;
}
*/
posted @ 2020-09-15 11:28  伊洛Yiluo  阅读(130)  评论(0)    收藏  举报