CSS基础2--简单应用

最新推荐文章于 2024-04-26 22:14:41 发布

伊洛的小屋

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量112

点赞数

分类专栏： CSS基础文章标签： css html javascript vue python

本文链接：https://blog.csdn.net/weixin_44386231/article/details/108596278

版权

CSS基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文首发公众号：伊洛的小屋，欢迎关注并查看更多内容！！！

应用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文件放在

内联样式

内联样式表存在于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;
}

关注公众号获取更多内容

欢迎下方【戳一下】【点赞】
Author：伊洛Yiluo
愿你享受每一天，Just Enjoy !

伊洛的小屋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础2--简单应用

本文首发公众号：伊洛的小屋，欢迎关注并查看更多内容！！！应用CSSCSS编写在扩展名为.css的单独文件中，并利用HTML 的元素引用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS DEMO</title> <link rel="stylesheet" href="index.css"> </h..
复制链接

扫一扫