CSS笔记-01

用户409379271368
100 阅读4分钟

什么是CSS,以及CSS的发展历程

CSS又叫层叠样式表: CSS中设置的各种键值对就是样式,集合在一起就是表;并且CSS有个特性就是层叠性 ---理解性记忆
发展里程
    1.一开始的网页都是由HTML编写的,但是为了让页面更加的美观,于是开发出了很多有样式的元素,比如:strong,del,i等
    2.后来许多浏览器厂家也开发出了各式各样的样式语言,没有得到很好的统一
    3.1994年，哈肯·维姆·莱和伯特·波斯合作设计CSS，在1996年的时候发布了CSS1
    4.1997年,W3C组织成立了CSS的工作组,并于1998年5月发布了CSS2
    5.从CSS3开始,将所有的CSS分为了好几个模块,于是CSS开始了按模块进行更新

CSS作用的总结

实现了结构和样式分离;并且美化了HTML,给HTML提供了许多的样式以及对HTML的结构布局也做出了贡献

CSS样式的格式

CSS的结构可以理解为就是一个键值对,如下图

CSS格式.PNG

CSS样式的编写位置

CSS样式结构已经知道怎么编写以后,那么就需要知道CSS样式写在什么地方,并且是如何准确的加到HTML上的

内联样式: 内敛样式编写CSS样式是最简单的一种方式,也是三种方式中唯一不需要用到选择器的方式,它只需要在开始标签中,添加style属性,把CSS样式写在style属性中,多个属性值使用;隔开

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <!-- 内联样式(inline) -->
  <div style="color: red; font-size: 30px;">我是div元素</div>
  <h1 style="font-size: 100px">我是标题</h1>

</body>
</html>

内部样式: 写在HTML文件内部的,一般写在head标签中,由style标签包裹,配上选择器选中需要加样式的元素,写上对应的CSS代码

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 内部样式表(internal) */
    /* 选择器 */
    /* 两个div都可以找到 */
    /* div {
      color: red; 
      font-size: 30px; 
      background-color: orange;
    } */

    /* 找到class为.div-one的元素 */
    .div-one {
      color: red; 
      font-size: 30px; 
      background-color: orange;
    }
  </style>

</head>
<body>
  
  <div class="div-one">我是div元素</div>
  <div>我也是div元素</div>

  <p>我是段落</p>
  <h1>我标题</h1>

</body>
</html>

外部样式: 创建一个后缀名为CSS的文件,写上对应的选择器和CSS样式,最后通过link元素引入到HTML文件中,即可

/*外部CSS样式1  style.css*/
.title {
  font-size: 30px;
  color: red;
  background-color: purple;
}

/*外部CSS样式2  test.css*/
h1 {
  color: orange;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- link元素是用来引入资源 -->
  <!-- href -> hypertext reference -->
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/test.css">
</head>
<body>
  
  <h1>我是h1元素</h1>
  <div class="title">我是01中的title</div>

</body>
</html>

外部样式2: 当外部有许多CSS样式需要引入时,可以创建一个新的CSS文件,把需要引入到样式文件都引入到这个新创建的CSS文件,最后只需在HTML中引入这个新创建的CSS文件即可.

/* 可以通过@import引入其他的css资源 */
@import url(./style.css);
@import url(./test.css);

/* div {
  background-image: url();
}
 */

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 外部样式(external) -->
  <!-- <link rel="stylesheet" href="./css/style.css"> -->

  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  
  <h1>我是h1元素</h1>
  <div class="title">我是02中的title</div>

</body>
</html>

CSS注释

程序员应该养成良好的代码注释的习惯,写代码添加注释可以让我们很快的理解这段代码的含义,而不需要花时间去阅读它.CSS中的注释是 /**/,可以以使用快捷键ctrl+/快速注释

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
  <style>
    /* css的注释 */
    .box {
      font-size: 30px; /* 字体大小 */
      color: red; /* 前景色 */
    }
  </style>
</head>
<body>

  <div class="box">我是盒子</div>
  
</body>
</html>

CSS常见的5种属性

CSS样式的语法其实已经学习完毕了,CSS最重要学习的是其中的样式,这边会列举出5种常用的样式
CSS官方文档地址https://www.w3.org/TR/?tag=css
CSS推荐文档地址：https://developer.mozilla.org/zhCN/docs/Web/CSS/Reference#%E5%85%B3%E9%94%AE%E5%AD%97%E7%B4%A2%E5%BC%95
  1. font-size
    顾名思义就是用于设置字体大小的,不设置字体大小,默认情况下浏览器的字体大小是16px
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* font-size */
    .title {
      font-size: 24px;
    }
  </style>
</head>
<body>
  
  <div class="title">Hello World</div>

</body>
</html>
  1. color
    大部分人理解的color为字体的颜色,其实不然,说是前景色其实更为恰当.包括文字、装饰线、边框、外轮廓等的颜色
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .title {
      font-size: 24px;
      color: chocolate;
    }
  </style>
</head>
<body>
  
  <div class="title">Hello World</div>

</body>
</html>
  1. background-color
    有前景色自然就有背景色,这个样式就是设置元素的背景色的
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .title {
      font-size: 24px;
      color: chocolate;
      background-color: black;
    }
  </style>
</head>
<body>
  
  <div class="title">Hello World</div>

</body>
</html>
  1. width与height width:设置的是元素的宽,height设置的元素的高,但是不是所有元素都可以设置宽高的,后面会详细说
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .title {
      font-size: 24px;
      color: chocolate;
      background-color: black;

      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  
  <div class="title">Hello World</div>

</body>
</html>
avatar
文章
阅读
粉丝