CSS3（一）概念与基本属性、盒子模型、动画基础

2021-07-25 | 阅读：次

CSS概念

HTML：结构

CSS: 美化

JS ：交互

Cascading Style Sheet ，CSS：层叠级样表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--规范：<style>可编写CSS代码
语法：
选择器{
声明1；
声明2；
声明3；
……
}
-->
  <style>
    h1{
      color: darkorchid;
    }
  </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

在这里插入图片描述

CSS分离

新建.css文件分离写不需要style标签

h1{
    color: darkorchid;
}

在html文件中引入该css文件

 <link rel="stylesheet" href="CSS/style.css">

href：写css文件路径

CSS的优势：

内容与表现分离
网页结构表现统一，实现复用
利用SEO，容易被搜索引擎收录

CSS的三种引入方式

行内样式
内部样式
外部样式 ```html <!DOCTYPE html>

Title

我是标题

```css
h1{
    color: #31db34;/*绿色*/
}

三种样式的优先级就近原则（行内样式最近，其次看内部样式与外部样式离目标位置远近）

外部CSS样式连接方式

链接式

`<link rel="stylesheet" href="CSS/style.css">`

导入式

  <style>
      @import url(CSS/style.css);
  </style>

选择器

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

基本选择器

标签选择器
类选择器
ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      /*标签选择器*/
    h1{
      color: #121313;
      /*background: antiquewhite;*/
      /*border-radius: 4px;;*/
    }
    /*********/
    /*类选择器的格式 .class的名称{}*/
    /*好处，可以多个标签归类*/
    .someclass1{
        color: #467e96;
    }
    .someclass2{
        color: #27f18f;
    }
    /*id选择器：需保证全局唯一*/
    /*语法：#id{}*/
    #1{
        color: darkorchid;
    }
  </style>
</head>
<body>
<h1>学习java</h1>
<h1>每天坚持</h1>
<h1 class="someclass1">class1</h1>
<h1 class="someclass2">class2</h1>
<br>
<h1 id="1">id选择器</h1>
</body>
</html>

选择器优先级顺序： id选择器>class选择器>标签选择器

高级选择器

层次选择器
1. 后代选择器：某个原色的后边，元素+空格
2. 子选择器：仅一代，元素>
3. 相邻兄弟选择器：仅一个（向下相邻）元素+
4. 通用选择器:当前选择的元素向下所有的兄弟，元素~
结构伪类选择器元素：first child/last child p:nth-child(2):选择p标签第二个元素

伪类：hover：鼠标放上边背景变换

属性选择器元素[属性名/属性名=属性值] 可用正则表达式：
1. =表示绝对等于
2. *=表示通配包含
3. ^=以这个符合开头
4. &=以这个符合结尾

美化网页元素

font-family：字体 font-weight：字宽（粗细） font-size：字大小 font:oblique：斜体 border：边框 text-align:center 居中 text-indent:2em 首行缩进2个字符 line-height: 50 行高 line-decoration:underline/through 下划线/中划线 vertical-align:middle 垂直居中对齐（要有参考物） eg： img,span{ vertical-align:middle //以图片为参考物，span修饰的文字放在图片垂直位置中间 }

背景图片应用

空标签：div，用于分割网页不同元素部分 background-image:url()//默认背景图片的方式的平铺 background-repeat: repeat-x//水平平铺一行 background-repeat: repeat-y//竖直平铺一列 background-repeat: no repeat//单个图片背景 background的其他属性：颜色，图片，平铺方式，位置

渐变色背景获取CSS源码网站：grabient 在这里插入图片描述

background-color: #4158D0;
background-image: linear-gradient(63deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

盒子模型

在这里插入图片描述 margin：外边距 padding：内边距 border：边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    border的属性：粗细 样式 颜色 1px solid red-->
    <style>
        body{
            margin: 0;
        }
        #app{
            border: 3px solid black;
            width:300px;
            background: antiquewhite;
            margin: 0 auto;
        }
        form{
            background: antiquewhite;
        }
        input{

        }
    </style>
</head>
<body>
<div id="app">
  <h2>登录会员</h2>
  <form action="#">
    <div>
      <span>姓名</span>
        <input type="text">
    </div>
    <div>
          <span>密码</span>
        <input type="password">
    </div>
  </form>
</div>
</body>
</html>

在这里插入图片描述

圆角边框与阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      margin: 30px;
      background: red;
      height: 50px;
      width: 100px;
      border-radius: 50px 50px 0px 0px;
    }
  </style>
</head>
<body>
<div></div>
</body>
</html>

在这里插入图片描述

  <style>
    img{
      border-radius: 100px;
      box-shadow: 50px 50px 10px #f5f508;
    }
  </style>
</head>
<body>
<div>
  <img src="../resources/images/1.jpg" alt="1">
</div>

在这里插入图片描述

display与浮动

display：显示方式 inline：行内元素 block：块元素 float：浮动，不限于背景边框

相对定位

相对于原来位置定位，原来位置将被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
#app{
    border: 2px solid red;
    margin: 20px;
    width: 300px;
    height: 300px;
    padding: 10px;
}
a{
    background: hotpink;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align:center;
    color:white;
    display: block;
    text-decoration: none;
}
a:hover{
    background: deepskyblue;
}
.a2{
    position: relative;
    right: -200px;
    top:-100px;
}
.a3{
    position: relative;
    right: -100px;
    top:-100px;
}
.a4{
    position: relative;
    top:-100px;
}
.a5{
    position: relative;
    right: -200px;
    top:-200px;
}
  </style>
</head>
<body>
<div id="app">
   <a href="#" class="a1">链接1</a>
   <a href="#" class="a2">链接2</a>
   <a href="#" class="a3">链接3</a>
   <a href="#" class="a4">链接4</a>
   <a href="#" class="a5">链接5</a>
</div>
</body>
</html>