CSS基础2--简单应用

应用CSS

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

<!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;
}

打开浏览器查看效果



<link>元素的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;
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容