一： css语法

二： css的四种引入方式

三： css选择器

四： css属性操作

五： caution

六： 后台管理布局

七： 课下作业

一： css语法

css规则由两个主要的部分构成： 选择器，以及一条或者多条声明

 

selector {

　　　　　proterty: value;

　　　　　　proterty:value;

}

二： css的四种引入方式

1 行内式

　　<p style="background-color: rebeccapurple">hello yuan</p>

2 嵌入式：

　　嵌入式是将css样式集中卸载网页的<head></head>标签的<style></style>标签中。格式如下：

<head>
    <meta charset="UTF-8">
    <title>c1</title>
    <style>
        p {
            background-color: chocolate;
        }
    </style>
</head>
<body>
<p>123</p>

 3  链接式：

　　将一个.css 文件引入到html文件中

　　

<link rel="stylesheet" href="my.css" type="text/css">

 4  导入式：

　　将一个独立的.css文件引入html文件中，导入式使用css规则引入外部css文件，<style><style>也是写在<head>标记中，使用的语法如下：

<style type="text/css">
 
          @import"mystyle.css"; 此处要注意.css文件的路径
 
</style>　

 三： css选择器

　　1 基本选择器：

　　　　

　　2 组合选择器

　　E，F 多元素选择器 同时匹配所有E元素和F元素，中间用逗号分隔

　　

div,p {
    background-color: bisque;
}

 　　E F 后代元素选择器   匹配所有属于E元素后代的F元素，E和F用空格分隔     这个比子代的范围大

div p {
    background-color: bisque;
}

 　　E>F 子元素选择器， 匹配所有E元素的子元素F

div>p {
    background-color: bisque;
}

 　　E+F毗邻元素选择器 匹配所有紧邻E元素之后的同级元素F

div+p {
    background-color: bisque;
}

 　　E~F 普通兄弟选择器  以破折号分隔

注意，关于标签嵌套：

一般，块级元素可以包含内联元素或者块级元素，但内联元素不能包含块级元素，它只能包含其他内联元素。需要注意的是，p标签不能包含块级标签

3 属性选择器