• HTML—css


    css概述

    C S S 是 C a s c a d i n g S t y l e S h e e t s ( 级 联 样 式 表 ) 。
    C S S 是 一 种 样 式 表 语 言 , 用 于 为 H T M L 文 档 控 制 外 观 , 定 义 布 局 。 例 如 ,
    C S S 涉 及 字 体 、 颜 色 、 边 距 、 高 度 、 宽 度 、 背 景 图 像 、 高 级 定 位 等 方 面 。
    可 将 页 面 的 内 容 与 表 现 形 式 分 离 , 页 面 内 容 存 放 在 H T M L 文 档 中 , 而 用
    于 定 义 表 现 形 式 的 C S S 在 一 个 . c s s 文 件 中 或 H T M L 文 档 的 某 一 部 分 。

    基本语法

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>title>
    6. /* 外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通
    7. 过link标签将外部样式表文件链接到HTML文档中. */
    8. <link href="css/index.css" rel="stylesheet" />
    9. <style>
    10. /* css注释 */
    11. /* 内嵌样式表,也可以叫类选择器 */
    12. .p1{
    13. color: black;
    14. }
    15. /* 标签选择器,这个html文件里面所有的a标签,优先级小于前面三种 */
    16. a{
    17. color: bisque;
    18. size: 800px;
    19. font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    20. }
    21. /* 统配选择器 给所有标签修饰 优先级最低*/
    22. *{
    23. color: brown;
    24. }
    25. /* id选择器 唯一的*/
    26. #pp{
    27. color: crimson;
    28. }
    29. style>
    30. head>
    31. <body>
    32. id选择器-->类选择器-->标签选择器-->统配选择器
    33. -->
    34. <a href="" class="p1" style="color: aqua;size: 70px;font-family: 楷体;">元神a>
    35. <a href="" class="p1">元神a>
    36. <a href="" class="p2">元神a>
    37. <a>123a><br />
    38. <a id="pp">元神a>
    39. body>
    40. html>

     伪类

    C S S 伪 类 专 门 用 来 表 示 标 签 的 一 种 的 特 殊 的 状 态 , 当 我 们 需 要 为 处 在 这 些 特 殊 状
    态 的 标 签 设 置 样 式 时 , 就 可 以 使 用 伪 类 。

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>title>
    6. <style>
    7. a{
    8. color: aqua;
    9. }
    10. /* 鼠标移入切换样式 */
    11. a:hover{
    12. color: purple;
    13. }
    14. /* 鼠标点击标签时自动切换样式 */
    15. a:active{
    16. color: black;
    17. }
    18. /* :focus鼠标聚集到这个标签,标签的样式切换到这个样式 */
    19. input:focus{
    20. background-color: purple;
    21. }
    22. img:hover{
    23. /* opacity透明度,1不透明,0.5半透明,0透明 */
    24. opacity: 0.5;
    25. }
    26. img:active{
    27. opacity: 0;
    28. }
    29. style>
    30. head>
    31. <body>
    32. <a href="">百度a>
    33. <input type="button" class="p" value="保存"/><br />
    34. <input type="text" /><br />
    35. <input type="text" /><br />
    36. <img src="img/1.png" alt="" />
    37. body>
    38. html>

    块级,行级,行级块标签

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>title>
    6. head>
    7. <body>
    8. aaa
    9. <img src="img/1.png" width="100" height="100" alt="" />
    10. aaa <br />
    11. <div style="width: 100px; height: 100px; background-color: purple;display: inline;">aaadiv>
    12. <span style="width: 100px;height: 100px;background-color: purple;display: block;">aaaspan>
    13. body>
    14. html>

    盒子模型 

     C S S 处 理 网 页 时 , 它 认 为 每 个 标 签 都 包 含 在 一 个 不 可 见 的 盒 子 里 。
    如 果 把 所 有 的 标 签 都 想 象 成 盒 子 , 那 么 我 们 对 网 页 的 布 局 就 相 当 于 是 摆
    放 盒 子 。
    我 们 只 需 要 将 相 应 的 盒 子 摆 放 到 网 页 中 相 应 的 位 置 即 可 完 成 网 页 的 布 局 。

     盒子模型我们分为四个区域,内容区,内边距,边框,外边距。

    盒子模型-内边距 

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>title>
    6. <style>
    7. .p{
    8. width: 100px;
    9. height: 100px;
    10. background-color: purple;
    11. /* 设置内边距 */
    12. padding: 10px;
    13. }
    14. style>
    15. head>
    16. <body>
    17. <div class="p">盒子模型div>
    18. body>
    19. html>

    盒子模型-边框 

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>title>
    6. <style>
    7. div{
    8. background-color: purple;
    9. height: 100px;
    10. padding: 20px 304px;
    11. border: 1px gray solid;
    12. /* 盒子模型边框设计 */
    13. border-radius: 50px;
    14. /* 边框原型 */
    15. }
    16. input{
    17. width: 600px;
    18. height: 30px;
    19. }
    20. style>
    21. head>
    22. <body>
    23. <div>
    24. <input type="text" class="p" />
    25. div>
    26. body>
    27. html>

    盒子模型-外边距

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>title>
    6. <style>
    7. div{
    8. width: 100px;
    9. height: 100px;background-color: purple;
    10. margin-left: auto;
    11. margin-right: auto;
    12. /* 设置div居中 ,注意高度不可以这样设置,会默认为0*/
    13. }
    14. .p{
    15. width: 100px;
    16. height: 100px;background-color: gray;
    17. margin: 10px;
    18. }
    19. style>
    20. head>
    21. <body>
    22. <div class="p">
    23. div>
    24. <div>
    25. div>
    26. body>
    27. html>

    浮动

    文档流

    文 档 流 指 的 是 文 档 中 的 标 签 在 排 列 时 所 占 用 的 位 置 。 将 窗 体 自 上 而 下 分
    成 一 行 行 , 并 在 每 行 中 按 从 左 至 右 的 顺 序 排 放 标 签 , 即 为 文 档 流 。
    也 就 是 说 在 文 档 流 中 标 签 默 认 会 紧 贴 到 上 一 个 标 签 的 右 边 , 如 果 右 边 不
    足 以 放 下 标 签 , 标 签 则 会 另 起 一 行 , 在 新 的 一 行 中 继 续 从 左 至 右 摆 放 。
    这 样 一 来 每 一 个 块 标 签 都 会 另 起 一 行 , 那 么 我 们 如 果 想 在 文 档 流 中 进 行
    布 局 就 会 变 得 比 较 麻 烦。

    给标签添加浮动便可以摆脱文档流。

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>title>
    6. <style>
    7. .p{
    8. padding: 10px 30px;
    9. background-color: purple;
    10. float: left;
    11. }
    12. .p:hover{
    13. background-color: aliceblue;
    14. }
    15. .p1{
    16. width: 368px;
    17. margin: auto;
    18. }
    19. .main{
    20. width: 300px;
    21. margin: auto;
    22. }
    23. .main-box{
    24. float: left;
    25. width: 100px;
    26. background-color: papayawhip;
    27. }
    28. style>
    29. head>
    30. <body>
    31. <div class="p1">
    32. <div class="p">新闻div>
    33. <div class="p">体育div>
    34. <div class="p">娱乐div>
    35. <div class="p">游戏div>
    36. <div style="clear: left;">div>
    37. div>
    38. <div>wwwdiv>
    39. <div class="main">
    40. <div class="main-box">leftdiv>
    41. <div class="main-box">centerdiv>
    42. <div class="main-box">rightdiv>
    43. <div style="clear: left;">div>
    44. <div style="width: 300px; background-color: azure;">bottomdiv>
    45. div>
    46. body>
    47. html>

    定位

    相对定位

    相对定位是一个非常容易掌握的概念. 相对于它
    的起点进行移动,移动后原来的位置还被占用。
    可以通过position:relative; 开启相对定位,
    left right top bottom四个属性来设置标签的偏移量。

    相对定位的特点
    当标签的position属性设置为relative时,则开启了标签的相对定位
    1.当开启了标签的相对定位以后,而不设置偏移量时,标签不会发生任何变化
    2.相对定位是相对于标签在文档流中原来的位置进行定位
    3.相对定位的标签不会脱离文档流

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>title>
    6. <style>
    7. .div1{
    8. background-color: aliceblue;
    9. width: 100px;
    10. height: 100px;
    11. position: relative;
    12. /* 相对定位 */
    13. left: 100px;
    14. /* 相对定位以自身位置为定位参照,不会让标签脱离文档流(二维平面) */
    15. }
    16. .div2{
    17. background-color: gray;
    18. width: 100px;
    19. height: 100px;
    20. position: relative;
    21. /* 相对定位 */
    22. top: 50px;
    23. /* 相对定位以自身位置为定位参照,不会让标签脱离文档流(二维平面) */
    24. }
    25. style>
    26. head>
    27. <body>
    28. <div class="div1">div1div>
    29. <div class="div2">div2div>
    30. body>
    31. html>

    绝对定位

    绝对定位是不占空间的,运用了
    绝对定位的标签会脱离原来的文档
    流,浮动起来,因此视觉上会其他
    的标签重叠。
    可以通过position: absolute; 开启
    绝对定位,
    left right top bottom四个属性来
    设置标签的偏移量

    绝对定位的特点
    1.开启绝对定位,会使标签脱离文档流
    2.开启绝对定位以后,如果不设置偏移量,则标签的位置不会发生变化
    3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位(一般情况,开启了子标签
    的绝对定位都会同时开启父标签的相对定位)
    如果所有的祖先标签都没有开启定位,则会相对于浏览器窗口进行定位

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>title>
    6. <style>
    7. .div1{
    8. background-color: aliceblue;
    9. width: 100px;
    10. height: 100px;
    11. position: absolute;
    12. /* 开启绝对定位标签立即脱离文档流 */
    13. left: 50px;
    14. /*
    15. 绝对定位的参照物,离他最近的开启了定位的父级标签,一般父级开相对定位
    16. */
    17. }
    18. .div2{
    19. background-color: gray;
    20. width: 100px;
    21. height: 100px;
    22. position: relative;
    23. /* 相对定位 */
    24. top: 50px;
    25. /* 相对定位以自身位置为定位参照,不会让标签脱离文档流(二维平面) */
    26. }
    27. .div3{
    28. background-color: aqua;
    29. width: 300px;
    30. height: 300px;
    31. position: relative;
    32. }
    33. style>
    34. head>
    35. <body>
    36. <div class="div3">
    37. div3
    38. <div class="div1">div1div>
    39. div>
    40. <div class="div2">div2div>
    41. body>
    42. html>

     

  • 相关阅读:
    Java里面int、Integer、String相互转换
    Worthington核糖核酸测定详细攻略
    软考-第一节.计算机与体系结构
    SecureCRT for Mac注册激活版:专业终端SSH工具
    06-引入Express创建web服务器、接口封装并使用postman测试,静态资源托管
    大数据学习之一文学会Spark【Spark知识点总结】
    macOS - mdls, mdfind, mdutil, xargs 命令使用
    虚拟机开启网络代理设置
    新特性解读 | MySQL 8.0 对 limit 的优化
    集合-ArrayList源码分析(面试)
  • 原文地址:https://blog.csdn.net/2302_78076476/article/details/141280977