• 3 CSS

    第一节/介绍

    CSS 全称层叠样式表，给网页标签添加显示效果的技术，也是网页美化的技术，web2.0建议把一个网页拆分成3个技术来编写，其中HTML负责网页的 结构(清水房), 其中CSS负责美化(装修)，其中JavaScript负责交互(智能家居)。

    第二节/语法

    **选择器 { ** **样式名 **: **值 **; …；样式名 : 值 }

    1. 引入样式的方式 行内样式
    <img src="images/jt.jpg"  style="width:200px;height:100px" >


    • 1
    • 2

    在开始标签中编写。不可重用样式，但是便捷。

    1. **内部样式 **
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
         img{
             width: 300px;
             height: 200px;
         }
    style>
head>
<body>
   
   <img src="images/jt.jpg">
   <img src="images/jt.jpg">
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    head 嵌套 style 标签。

    1. 外部样式
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link href="css/style.css" rel="stylesheet" >  引入外部的单独的样式控制文件
head> 
<body>
   <img src="images/jt.jpg">  要美化的元素
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    css/style.css

    img{
    width: 300px;
    height: 200px;
}

    • 1
    • 2
    • 3
    • 4

    样式和标签代码分离开。

    第三节/选择器

    3.1 基本选择器

    a) 元素选择器

    根据标签的单词名称来选择

    img {
    width: 100px;
    height: 200px;
}

    • 1
    • 2
    • 3
    • 4

    b) ID 选择器

    根据 id 属性值来选择

    #abc{
    width: 200px;
    height: 100px;
}

    • 1
    • 2
    • 3
    • 4

    c) 类选择器

    class 属性值拉选择

    .ccc{
    width: 120px;
    height: 200px;
}

.ddd{
    border: 10px solid red;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    3.2 层级选择器

    a) 后代

    指定选择器 下级选择器 元素

    #pics img{
    width: 200px;
    height: 200px;
}

    • 1
    • 2
    • 3
    • 4

    b) 父子

    指定选择器 下一级选择器 元素

    
#pics > img{
    width: 200px;
    height: 200px;
}

    • 1
    • 2
    • 3
    • 4
    • 5

    c) 紧邻

    指定选择器 后面一个选择器 元素

    .hz + img{
    width: 100px;
    height: 100px;
}

    • 1
    • 2
    • 3
    • 4

    3.3 伪类选择器

    a:link{   新链接没有访问过时运用这个选择器
   color: orangered;
}
a:visited{  访问过的链接运用这个选择器
    color: grey;
}
a:hover{   关标悬浮时 运用这个选择器
    color: red;
}
a:active{  鼠标点击时 运用这个选择器
    color: blueviolet;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    *{ } 表示全选，*是一个通配符，表示全部选择器。

    第四节/样式控制

    大小

    width : 16 单位
height: 34 单位

    • 1
    • 2

    关于长度衡量，网页中可以使用** px **像素 ** %**百分百 ** rem **比例

    显示

    display: none 隐藏
display: inline 显示(当作 内联元素显示)
display: block  显示( 当中 块显示 )
display: inline-block( 行内块 )

    • 1
    • 2
    • 3
    • 4

    可以改变元素性质。

    溢出

    overflow: hidden 溢出隐藏
overflow: scroll 滚动

    • 1
    • 2

    颜色

    color: 颜色值;                  字体色
backgorund-color: 颜色值；        背景色

    • 1
    • 2

    颜色赋值 1. 单词(red) 2.#xxxxxx(#ff0000) 3.rbg/rgba()(rgba(0,0,0,0.4))

    背景

    backgorund-color: 颜色
backgorund-image: url(图片路径)
backgorund-repeat: no-repeat|repeat-x | repeat-y
backgorund-size: 大小值
backgorund-position: 值1  值2

    • 1
    • 2
    • 3
    • 4
    • 5

    字体

    font-family: 字体名
font-size: 字体大小
color: 颜色
font-weight: (100-800) | bold
font-style: 斜体风格

    • 1
    • 2
    • 3
    • 4
    • 5
    .font{
  color: red;
  font-family: 楷体;
  font-weight: bold;
  font-style: italic;
  font-size: 20px;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    盒模型

    margin: 值 [值] [值] [值]
boder: 粗细 样式 颜色
padding: 值 [值] [值] [值]
box-sizing: content-box (默认) | border-box (边框盒子) 

    • 1
    • 2
    • 3
    • 4
    #box{
  width: 200px;
  height: 200px;
  background-color: chocolate;
   margin: 50px 100px 40px 20px; 
   border: 10px solid red; 
   padding: 10px;
   box-sizing: border-box; 
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    圆角

      border-radius:10px;

    • 1

    四个角可以单独设置例如： border-top-right

    投影

     box-shadow: 4px 4px 10px 2px rgba(0,0,0,.3) ;

    • 1

    box-shadow: x y 模糊度 大小 颜色 ;

    动画

    transition: all 1s;  让全部有变化的 样式改变 在1s中完成过渡。

    • 1
    transform: translateY(-100px);
transform: rotateX(360deg);

    • 1
    • 2

    还是需要 transition 配合使用

    定义关键帧动画
@keyframes zhuan{
  0% { transform: rotate(0deg);   }
  100% { transform: rotate(360deg);   }
}

    • 1
    • 2
    • 3
    • 4
    • 5
     调用         动画名  时间    线性动画   次数循环
 animation: zhuan    2s    linear     infinite;

    • 1
    • 2
    #box{
  width: 300px;
  height: 100px;
  background-color: black;
  margin: 100px 0px 0px 50px;
  border: 2px solid orangered;
  color: white;
  text-align: center ; /*让文字在容器中水平居中*/
  line-height: 100px;  /*让文字在容器中国垂直居中*/
  border-radius:10px;
  box-shadow: 6px 4px 10px 2px rgba(0,0,0,.3) ;

  transition: all 1s;
  animation: zhuan 2s linear infinite;
}

#box:hover{
  /*background-color: red;
  height: 140px;
  width: 400px;*/

  /*transform: translateY(-100px);*/
  /*transform: rotateX(360deg);*/

}

@keyframes zhuan{
  0% { transform: rotate(0deg);   }
  100% { transform: rotate(360deg);   }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    sfwefwfe

    第五节/布局

    1. 浮动
    float : left | right
clear : both | left | right

    • 1
    • 2

    a. 浮动可以实现让两个块平排，一个块元素浮动，这块儿脱离文档流，释放行margin空间。
    b. 一个元素浮动后，后面的元素就会钻空。一个元素浮动后，可能引发父容器高度坍塌。
    c. 如果不希望一个元素 左边 或者 右边 出现浮动的元素，就通过 clear 清理。

    1. 定位

    a）相对定位

    position: relative
top: xx px;

    • 1
    • 2

    让一个元素相对于自己本身的位置来偏移，偏移需要借助方位词，top bottom left right。不会释放原来的空间。

    b) 绝对定位

    position: absolute
top: xx px;

    • 1
    • 2

    让一个元素相对于父级为relative定位的元素来偏移，如果没有父级为relative的父级，那么会选取body来当参考。经验: 通常对要移动的元素做决定定位，移动范围元素作为相对定位。

    c) 固定定位

    position: fixed
top: xx px;

    • 1
    • 2

    让一个元素始终参考浏览器窗口来移动。

    1. 弹性盒子

    https://www.w3cschool.cn/css3/2h6g5xoy.html

  • 相关阅读:
    Flutter开发- iOS 问题CocoaPods not installed or not in valid state
    PSINS中19维组合导航模块sinsgps详解(时间同步部分)
    大数据高级开发工程师——Spark学习笔记（6）
    基于springboot+vue的旅游系统(前后端分离)
    入门力扣自学笔记145 C++ （题目编号828）
    代码随想录算法训练营第五十九天 | 647. 回文子串、516.最长回文子序列
    数据结构复盘——第一章：绪论
    【C++进阶】二叉树进阶
    Linux文件权限管理：chomd命令和chown命令
    【数据库】数据库中的备份与恢复，保障容灾时的数据一致性与完整性
  • 原文地址：https://blog.csdn.net/yc_Cabbage/article/details/126295346