CSS基础知识

1.CSS概念

css：cascading style sheets，层叠式样式表。规定了html标签在网页上的现实样式

2.CSS作用

样式：html标签在页面的显示效果

某一标签有什么样式，直接设置其属性即可。具体来说，一个是结构样式，一个是显示样式

3.CSS的几个小属性

1.文本样式

字体，颜色，大小

font-family：复合属性，字体类型，包括英文和中文字体。书写时，英文在前，中文在后，可以多写几个，当前边找不到是，会从后边的选择。中文字体写成其对应的英文写法，会加快加载速度。
font-size：复合属性，文字大小，单位为像素（px）
font-weight：复合属性，文字粗细

color：文字颜色，rgb，rgba，十六进制。red，blue等

h2 {
    font-family: "微软雅黑","宋体";
    font-size: 30px;
    font-weight: bold;
    color: red;   
}

2.容器基本属性

width：宽，单位为像素（px)，不写单位不起作用。
height：高，同上。
background-color：背景色。

border：复合属性，有多个值，用空格隔开。边框的宽度，类型，颜色

p {
    font-family: "Arial";
    font-size:20;
    font-weight: normal;
    color: blue;

    width:500px;
    height: 200px;
    border: 1px solid green;
    background: lightgray;
}

效果图

4.CSS的书写位置

根据书写css的位置的不同，将我们的样式表分为三种：行内式，内嵌式，外链式。

行内式：css属性写在标签的一个style属性里。

<div style="font-size: 30px;
          font-weight: bold;
                color: red;
                width:100px;
               height: 40px;
               border: 1px solid green;
           background: lightgray;">
     行内式
</div>

内嵌式：写在html文件里，head标签内的，style标签内：属性type：text/css表示内部写的是纯文本类型的css样式代码

<html>
      <head>
            <style type="text/css">
                  h2 {
                      font-family: "微软雅黑","宋体";
                      font-size: 30px;
                      font-weight: bold;
                      color: red;
                  }
            </style>
      </head>
</html>

外链式：将css单独写在一个css文件里，然后使用时链接到html文件中即可，以后详细介绍

注意：常用内嵌式和外链式，行内式一般留给后端添加。

5.CSS的注意事项

html的属性和属性值，键值对：k="v";
css的属性和属性值，键值对：k:v;
多属性之间用分号分割，空格换行不影响
自己书写代码时，要进行合理的换行和压缩
上传到网上时，为了提高加载速度，需要将所有的空格，缩进，换行等删除，压缩代码。网上有在线工具。

最后编辑于：2019.11.14 18:15:09