HTML + CSS + JavaScript

结构 + 表现 + 交互

1、什么是CSS

如何学习？

1、CSS是什么？

2、CSS怎么用（快速入门）

3、CSS选择器（重点 + 难点）

4、美化网页（文字，阴影，超链接，列表，渐变…）

5、盒子模型

6、浮动

7、定位

8、网页动画（特效）

9、学习网站：菜鸟教程、W3C

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

什么是CSS

1.2、发展史

CSS1.0

CSS2.0 DIV （块）+ CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画…… 浏览器兼容性~

1.3、快速入门

style

基本入门

HTML与CSS未分离：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--规范 <style> 可以编写CSS的代码，每一个声明最好使用分号结尾
语法：
    选择器{
      声明1；
      声明2；
      声明3；
    }
-->
  <style>
    h1{
        color: red;
    }
  </style>
</head>
<body>

<h1>我是标题</h1>

</body>
</html>

HTML与CSS分离（建议使用这种规范）：

HTML与CSS分离

css的优势：

1、内容和表现分离

2、网页结构表现统一，可以实现复用

3、样式十分丰富

4、建议使用独立于html的css文件

5、利用SEO，容易被搜索引擎收录！

1.4、css的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <!--内部样式-->
  <style>
    h1{
      color: green;
    }
  </style>

  <!--外部样式-->
  <link rel="stylesheet" href="css/style.css">
  
</head>
<body>
<!--优先级：就近原则 行内样式最大，内部样式和外部样式谁靠前就是谁-->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>

</body>
</html>

/*外部样式*/
h1{
    color: yellow;
}

拓展：外部样式的两种写法

链接式

html

1 2	<!--外部样式--> <link rel="stylesheet" href="css/style.css">

导入式

@import 是 CSS2.1特有的！

<!--导入式-->
<style>
    @import url(css/style.css);
</style>

2、选择器

作用：选择页面上的某一个或者某一类元素

2.1、基本选择器

1、标签选择器：

选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*标签选择器，会选择到页面上所有的这个标签的元素*/
    h1{
      color: #1a4572;
      background: red;
      border-radius: 24px;
    }
    p{
        font-size: 80px;
    }
  </style>
</head>
<body>

<h1>学Java</h1>
<h1>学Java</h1>
<p>听Java</p>
</body>
</html>

2、类选择器 class：

选择所有class属性一致的标签，跨标签 .class{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /*类选择器的格式   .class的名称{}
    好处：可以多个标签归类，是同一个class，可以复用
    */
    .feilong{
      color: #8d5151;
    }
    .qianlong{
      color: purple;
    }
  </style>

</head>
<body>

<h1 class="feilong">标题1</h1>
<h1 class="qianlong">标题2</h1>
<h1  class="feilong">标题3</h1>

<p class="qianlong">P标签</p>

</body>
</html>

3、Id选择器：

全局唯一！ #id{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /*id选择器 ：id必须保证全局唯一！
      #id名称{}
      不遵循就近原则，固定的
      id选择器 > class选择器 > 标签选择器
    */
    #feilong{
      color: red;
    }
    .style1{
      color: blue;
    }
    h1{
      color: green;
    }
  </style>

</head>
<body>
<h1 id="feilong" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

优先级：id > class > 标签

2.2、层次选择器

1、后代选择器：

在某个元素的后面，祖爷爷，爷爷，爸爸，你

/* 后代选择器 */
  body p{
    background: red;
  }

2、子选择器

只有一代，儿子

/* 子选择器 */
  body>p{
    background: cornflowerblue;
  }

3、相邻兄弟选择器

同辈（弟弟选择器）

/* 相邻兄弟选择器，只有一个，相邻（向下） */
  .active+p{
    background: #1a4572;
  }

4、通用选择器

（所有弟弟选择器）

/* 通用兄弟选择器，当前选中元素的向下所有兄弟元素 */
  .active~p{
    background: blue;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*p{*/
    /*  background: green;*/
    /*}*/
  /* 后代选择器 */
  /*  body p{*/
  /*    background: red;*/
  /*  }*/
  /* 子选择器 */
  /*  body>p{*/
  /*    background: cornflowerblue;*/
  /*  }*/
  /* 相邻兄弟选择器，只有一个，相邻（向下） */
  /*  .active+p{*/
  /*    background: #1a4572;*/
  /*  }*/
  /* 通用兄弟选择器，当前选中元素的向下所有兄弟元素 */
    .active~p{
      background: blue;
    }
  </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
    <p>p5</p>
  </li>
  <li>
    <p>p6</p>
  </li>
</ul>
</body>
</html>

2.3、结构伪类选择器

伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 避免使用class,id选择器 -->
  <style>
    /*ul的第一个子元素*/
    ul li:first-child{
      background: blue;
    }
    /*ul的最后一个子元素*/
    ul li:last-child{
      background: red;
    }
  /* 选中p1：定位到父元素，选中当前的第一个元素
    选择当前p元素的父级元素，选中父级元素的第一个子元素，并且是当前元素
  */
    p:nth-child(1){
      background: green;
    }
    /*选中父元素下的p元素的第二个p类型*/
    p:nth-of-type(2){
      background: yellow;
    }
    /*a:hover{*/
    /*  background: black;*/
    /*}*/
  </style>
</head>
<body>
<!--<a href="https://www.baidu.com">打开百度</a>-->
<!--<h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>
</body>
</html>

CSS学习