引入方式

1、内联样式：直接写在html标签内部

格式： <标签名 style="样式名1:样式值1;样式名2:样式值2;"></标签名>

     <div style="width: 150px;height: 150px;"></div>

2、内部式：使用比较多

格式：选择器样式块

            <style>
                选择器{
                    样式名1:样式值1;
                    样式名2:样式值2;
                }
            </style>

3、外部链接式（用的最多）

            <link rel="stylesheet" href="url地址">

4、外部导入式：

              <style>        
                @import url("url地址");
              </style>

CSS的注释：/* 代码 */

css选择器

1、标记选择器

css标签选择器就是来声明标签的

h1{
    color: red ;
  }
p{
    color: green;
}

2、通用选择器

用"*"表示，他对所有的元素都有效

<style>
    *{
        color:red;
    }
</style>

3、id选择器

#+名称格式：#+名称{属性值1：值1；属性值2：值2；....}

 <style>
    #div{
        color:red;
    }
</style>

4、类选择器

类选择器和ID选择器很相似，但是类选择器是".+名称"

<style>
    .div{
        color:red;
    }
</style>

5、属性选择器

具有特定属性的HTML元素样式，具有特定属性的HTML元素样式不仅仅是class和id。

input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}

6、子选择器：只能选择作为某种元素的子元素，子元素选择器使用大括号只找自己的子元素

语法：E1>E2{属性1：属性值1；属性2：属性值2}

7、后代选择器：又称为包含选择器，可以自己选择作为某元素的后代（外层标记在前，内层标记在后）

语法 E1 E2{属性1：属性值1；属性2：属性值2}

8、相邻选择器：两个元素具有同一个父元素，两个元素紧紧相连

语法；E1+E2{属性1：属性值1；属性2：属性值2}

父元素： 直接包含其他元素，这个元素就是包含元素的父元素
先元素：包含其他元素，这个元素就是包含元素的祖先元素 
子元素： 直接被包含的元素，这个被包含的元素就是包含元素的子元素 
后代元素： 被包含的元素，这个被包含的元素就是包含元素的后代元

9、伪类选择器

CSS伪类是用来添加一些选择器的特殊效果。

语法

伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。

背景颜色（background-color）

background-color属性定义了元素的背景颜色.

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"

text（文本）

文本的对齐方式：

文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.

css列表

CSS列表属性作用：

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

在HTML中，有两种类型的列表：

无序列表：列表项标记用特殊图形（如小黑点、小方框等）
有序列表：列表项的标记有数字或字母

盒子模型

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容） - 盒子的内容，显示文本和图像

计算公式：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

边框：

CSS边框属性允许你指定一个元素边框的样式和颜色
border-style属性用来定义边框的样式

border-style的值

none: 默认无边框
dotted: dotted:定义一个点线框
dashed: 定义一个虚线框
solid: 定义实线边界
double: 定义两个边界。 两个边界的宽度和border-width的值相同
groove: 定义3D沟槽边界。效果取决于边界的颜色值
ridge: 定义3D脊边界。效果取决于边界的颜色值
inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
outset: 定义一个3D突出边框。 效果取决于边界的颜色

外边距：margin

作用：改变盒子位置     
外边距合并：           
 件：相邻并且垂直的盒子模型     
 1、兄弟间的外边距合并        
取两者相交处外边距的最大值      
 2、父子元素外边距合并        
需要把父子元素的外边距分隔开才能避免

CSS Border(边框)_CSS教程_w3cschool

边框宽度

可以用border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值）和 thick，是CSS 没有定义 3 个关键字的具体宽度。

边框颜色

border-color属性用于设置边框的颜色。
border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

外边距（margin）：元素周围的空间

margin没有颜色是完全透明的， margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。

    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;

总结css样式