1.css3学习

1.css3学习

什么是css 如何学习

1.css是什么

2.css怎么用

3.css选择器(重点+难点)

4.美华网页(文字.阴影.超链接 .列表渐变.....)

5.盒子模型

6.浮动

7.定位

8.网页动画(特效效果)

1.1 什么是css

Cascading Style Sheet 层叠级联样是表

CSS：表现 (美华网页)

字体， 颜射 ，边框 ，高度，背景图片，网页定位，网页浮动....

1.2 Css发展

CSS1.0

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

CSS2.1 浮动. 定位

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

1.3 快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个css网页</title>
<!--  规范 <style>
  可以编写css代码，没有一个声明，最好使用分号结尾
  语法：
      选择器{
      声明1：
      声明2：
      声明3：
  }
-->
  <style>
       h1{
           color:red; 
<!--    冒号要小写       -->
       }
  </style>
</head>
​
<body>
<h1>第一个标题</h1>
</body>
</html>

可以单独建一个CSS页面 再用链接指向CSS

<link rel="stylesheet" href="CSS3/style.html">

 

CSS的优势：

1.内容和表现分离

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

3.样式十分丰富

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

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

1.4 优先级

就近远哲 谁离这个代码越近越先执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
   h1{
   color:green;
   }
  </style>
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red">标题一</h1>
​
</body>
</html>

扩展 ：外部样式两种写法

链接式：

<link rel="stylesheet" href="CSS3/style.html">

导入式：

<style>
    @import url(“css/style.css”)
</style>

2.选择器

2.1 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
<!--标签选择器，会选择到页面上所有的这个标签的元素  -->
    
  <style>
    h1{
    color:red;
    }
    p{
      font-size:80px;
    }
  </style>
​
</head>
<body>
    
<h1>小学生</h1>
<h1>初中生</h1>
<p>高中生</p>
    
</body>
</html>

2.2类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 类选择器的格式 .class的名称{}
     好处可以多个标签归类，是同一个class，可以复用
     可以跨 标签使用
 -->
    
  <style>
    .student{
    color:red;
    }
    .english{
    color:green;
    }
  </style>
    
</head>
<body>
    
<h1 class="student">标题一</h1>
<h1 class="english">标题一</h1>
<h1 class="student">标题一</h1>
<p class="english">p标签</p>
    
</body>
</html>

2.3 id选着器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
<!-- id 选择器
      ：id 必须保证 全局唯一
      #id 名称{}
-->
    
  <style>
  #student{
     color:red;
  }
</style>
    
</head>
    
<body>
<h1 id="student"   class="english">标签一</h1>
<h1 class="english">标签贰</h1>
<h1 class="english">标签叁</h1>
    
<p></p>
</body>
</html>

优先级 id > 类选择器> 标签选择器

3.层次选择器

1.后代选着器：在某个元素的后面所有

<!--后代选择器-->
<style>
    body p{
      background: red;
         }

2.子代选择器：子一代

<!--子代选择器-->
<style>
  body>p{
  background: red;
  }
</style>

3.相邻兄弟选择器：相邻的对下不对上

<!--相邻兄弟选择器-->
<style>
  .active + p{
  background: red;
  }
</style>
​
​
<body>
​
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
    <p>p5</p>
  </li>
  <li>
    <p>p6</p>
  </li>
</ul>

4.通用选择器：选着的向下所有的兄弟

<!--相邻兄弟选择器-->
<style>
  .active ~ p{
  background: red;
  }
</style>

 

4.结构伪类选着器

<!-- ul 的第一个元素 -->
​
  <style>
       ul li:first-child{
         background: red;
       }
  </style>
​
</head>
<body>
<p>p1</p>
<p >p2</p>
<p>p3</p>
     <ul>
             <li>l1</li>
             <li>l2</li>
             <li>l3</li>
     </ul>
<!-- ul 的最后一个元素 -->
  <style>
       ul li:last-child{
         background: red;
       }
  </style>
<!-- 选着p ：定位父级元素，选择当前的第一个元素
   选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素
   才生效！按顺序选着
-->
  <style>
      p:nth-child(1){
      background:red;
      }
  </style>
<!-- 选中父元素，下的p元素的第一个，类型
-->
  <style>
      p:nth-of-type(1){
      background:red;
      }
  </style>

5.属性选着器

=绝对等于
*=包含这个元素
^=以这个开头的
$=以这个结尾的
格式
 
a      []           {}
标签名  要用的属性名   =属性值

 

 

 

 

 

posted on 2021-06-29 14:53  小白jva  阅读(32)  评论(0)  编辑  收藏  举报

导航