CSS书写的三种方法

外部样式表(External style sheet)

说明

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。且方便后期维护

语法

html
<!--使用link标签链接外部样式表-->
<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表(Internal style sheet)

说明

当单个文档需要特殊的样式时，就应该使用内部样式表

语法

html
<!--在head中使用style标签，比将样式规则书写在style标签中-->
<head>
  <style>
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
  </style>
</head>

内联样式(Inline style)

说明

由于将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。【慎用此方法】

语法

html
<!--在开始标签内添加style-->
<p style="color:sienna;margin-left:20px">这是一个段落。</p>

CSS样式规则

说明

CSS【cascanding(层叠) style(样式) sheet(表)】即层叠样式表样式表中包含了定义网页外观的规则

样式表中的规则包含

选择器
声明块

语法

html
选择器 {
    属性:属性值
    属性:属性值
}

为CSS样式规则添加注释

语法

html
/*  
注释内容  
*/

选择器 {
    属性:属性值
    属性:属性值
}

CSS变量

语法

css
--change-name: value;
/*change-name:变量名  
value：属性值*/

引用

css
background: var(--change-name)

添加回退值

css
var(--pengiun-skin,black)

颜色相关基本概念

三原色

三原色即红-red、绿-Green、蓝-Blue在web等电子器件上多数使用的是三原色使用加色法不断混合形成的颜色效果，三原色中每个颜色取值为0（十六进制00)-255（十六进制FF)、总计255255255约等于1600多万种颜色

互补色

常见背景颜色表示方法

rgb

RGB（红，绿，蓝）；每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数
```
css
rgb(0,0,255)
```
rgba

是RGB颜色值alpha通道的延伸 - 指定对象的透明度
```
css
rgba(0,0,0,255,0.5)
```
HSL

HSL（色调，饱和度，明度）；色相是在色轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，240是蓝色的。饱和度是一个百分比值;0％意味着灰色和100％的阴影，是全彩。亮度也是一个百分点;0％是黑色的，100％是白色的
十六进制表示
由#井号开头，A-F、0-9组成

代码风格

紧凑型风格

css
.picture { width:200px;height:400px;}

展开型风格

css
.picture { 
  width: 200px;
  height: 400px;
}

空格规范

选择器和花括号之间保留一个空格
属性冒号和属性值之间保留一个空格

目录