一、什么是css

1.CSS(Cascading style sheet) 称为层叠样式单
2.它是一种专门描述结构文档的表达方式的文档，主要用于网页风格设计，包括字体、大小、颜色、以及元素的精确定位等.
3.在传统的web网页设计里，使用css能让单调的html网页更富表现力

CSS与传统HTML描述数据方式比较有哪些优势

1.表达效果丰富
2.文档内容比较小
3.便于信息检索
4.可读性好

二、CSS引用方式

1.内部样式：优先等级1


        <p style="font-size: 40px;background-color: #777777;">正文内容3</p>

2.内联样式：优先等级2

<style type="text/css">
        h2{
            color: #FF0000;
            font-family: 黑体;
        }
    </style>

3.链接外部样式文件：link 优先等级3

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

4.导入外部样式文件：优先等级4

<style type="text/css">
 @import "路径"
</style>

三、css样式的语法定义格式

selector{
    property:value;
    property:value2;
}

对应翻译：
selector:选择器 (定义选择器的名称和类型,总的有3种类型)下面展开
property:属性
value:属性值：

四、选择器的类型

选择器的意思是指定对那些标签起作用

类选择器
语法

.类名{
   样式内容
}

调用类选择器样式

<标签 class="类名"></标签>

2.id选择器

ID名{

样式内容
}

调用类样式

<标签 id="ID名"></标签>

3.标签选器/标记选择器
标签名{
   样式内容
}

4.属性选择器只要包含有这个title属性的都会生效
[title]{
color:red;
}
五、调用类样式

<标签 ></标签>

上课案例分享：

html部份文件名为：index.html

<!DOCTYPE html>
<html>
<head>
    <title>css简介</title>
    <meta charset="utf-8">
    <!-- <link rel="stylesheet" type="text/css" href="mycss.css"> -->
    <style type="text/css">
        @import "mycss.css"
    </style>
</head>
<body>

    <h1 dir="rtl">春晓</h1>
    <h2 hidden>春城城夺</h2>
    <p class="mycss">春晓春晓春晓</p>
    <div id="auther" style="font-size: 40px;">作者：joychen</div>
    <h1 id="myid" class="myname" style="" >三班</h1>

</body>
</html>

css部分，文件名为mycss.css



h1{
    font-size: 70px;
    color: red;
}

h2{
    font-size: 30px;
    color: #abcdef;
}

.mycss{
    font-size: 24px;
    color: #ffcc11;
}

#auther{
    font-size: 20px;
    color: blue;
}

九、css简介