CSS笔记

最新推荐文章于 2022-04-18 17:26:07 发布
最新推荐文章于 2022-04-18 17:26:07 发布
阅读量543 收藏
点赞数
分类专栏： 笔记 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ross415/article/details/120891768
版权

CSS

视频地址：https://www.bilibili.com/video/BV1YJ411a7dy?p=23
如何学习CSS:

  1. CSS是什么
  2. CSS怎么用
  3. CSS选择器（重点+难度）
  4. 美化网页（文字、阴影、超链接、渐变……）
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画

1.什么是CSS

1.1.什么是CSS

  • CSS指的是层叠样式表（Cascading Style SheetsS)
  • CSS:表现（美化网页）
    • ​ 字体、颜色、边距、宽高、背景图片、网页定位、网页浮动

​

1.2CSS发展史

  • CSS 1.0：1994年 10月提出；
  • CSS 2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO；
  • CSS 2.1：浮动，定位；
  • CSS 3.0：圆角、阴影、动画…浏览器兼容性。

1.3快速入门

  • CSS注释以 /* 开始, 以 */ 结束
  • CSS声明总是以分号(;)结束，声明总以大括号({})括起来:
  • CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3快速入门</title>
    <!-- 规范：<style>可以编写CSS的代码，每一个声明最好以“；”结尾
        语法：
            选择器{
                    声明1；
                    声明2；
                    声明3；
                    }
                    -->
    <style>
        h1{
            color: blue;
        }
    </style>
</head>
<body>

<h1>CSS测试</h1>
</body>
</html>

image-20211020195047155

建议使用这种规范（单独写一个CSS文件，用link标签引入CSS文件效果）

image-20211020195514207

1.4 CSS的3种导入方式

CSS的优势：

  • 内容和表现分离；
  • 网页结构表现统一，可以实现复用；
  • 样式十分的丰富；
  • 建议使用独立于html的css文件；
  • 利用SEO，容易被搜索引擎收录！

这里说3种常见的导入方式

优先级：就近原则 
     行内样式> 内部样式> 外部样式
  • 外部样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OUTlROxQ-1634810516982)(C:/Users/%E6%98%9F%E6%98%9F%E4%B9%8B%E7%81%AB/AppData/Roaming/Typora/typora-user-images/image-20211020195916926.png)]

  • 内部样式

​ image-20211020200007452

  • 行业样式

    ​ image-20211020200415156

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3快速入门</title>
    <!-- 外部样式-->
    <link rel="stylesheet" href="style.css">
    <!-- 规范：<style>可以编写CSS的代码，每一个声明最好以“；”结尾
        语法：
            选择器{
                    声明1；
                    声明2；
                    声明3；
                    }
                    -->
    <style>
        h1{
            color: blue;
        }
    </style>
</head>
<body>
<!--优先级：就近原则
       行内样式> 内部样式> 外部样式-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: aquamarine">CSS测试</h1>
</body>
</html>

扩展：外部样式两种方法

  • 链接式–HTML

        <!--外部样式-->

  • 导入式：——@import是CSS2.1特有的

2.CSS选择器

2.1基本选择器

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

2.1.1标签选择器
  • 作用：选择一类标签
  • 格式：标签名{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        h1{
            color: #000000;
            background: blue;
            border-radius: 10px;
        }
        h3{
            color: aquamarine;
            background: bisque;
            border-radius: 20px;
        }
        p{
            font-size: 90px;
        }
    </style>
</head>
<body>

<h1>标签选择器</h1>
<p>加油啊</p>
<h2>
    你好
</h2>
<h3>CSS3学习</h3>
</body>
</html>

image-20211020201455169

2.1.2类选择器
  • 作用：选择所有class一致的标签，可以跨标签
  • 格式： .类名{}
.center {text-align:center;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test01{
            color: cyan;
        }
        .test2{
            color: #009000;
        }
        .test3{
            color: #9f0000;
        }
    </style>
</head>
<body>

<h1 class="test01">类选择器：Test01</h1>
<h1 class="test2">类选择器：Test</h1>
<h1 class="test3">类选择器：Test9</h1>
<h1 class="test01">类选择器：Test10</h1>
</body>
</html>

image-20211020211932865

2.1.3id选择器
  • 作用：id必须保证全局唯一
  • 格式：#id名{}
  • 注意：id选择器不遵循就近原则，优先级固定
    • ​ id选择器>class>标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #id02{
            color: #012;
        }
        #id03{
            color: #999;
        }
        #id09{
            color: oldlace;
        }
        #id08{
            color: #178;
        }
        h1{
            color: oldlace;
        }
    </style>
</head>
<body>

<h1 id="id02" class="text">id选择器1</h1>
<h1 id="id03" class="text">id选择器2</h1>
<h1 class="text">id选择器23</h1>
<h1 id="id08" class="text">id选择器234</h1>
<h1>id选择器2345</h1>

</body>
</html>

image-20211020213042884

2.2层次选择器

  • 后代选择器：在某个元素的后面

  • image-20211020214008866

  • 子选择器：下一代

    • 子选择器除了有 A >B{…} 的形式外（A和B都是标签），还可以有这种形式：.A >B{…} 的形式（A是类名，B是标签）。

      image-20211020214622704

  • 相邻的兄弟选择器：同辈

A+B{
    声明1; 
    声明;
    ...
}

image-20211020214641074

  • 通用选择器：

    image-20211020215023705

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        后代选择器
         */
        body p{
            background: deeppink;
        }
        /*
        子选择器
         */
        body>p{
            background: orange;
        }
        /*
        相邻兄弟选择器：只选择一个
         */
        .active+p{
            background: cadetblue;
        }
    </style>
</head>
<body>

<p>后代选择器</p>
<p class="active">子选择器p2</p>
<p>相邻兄弟选择p3</p>
</body>
</html>

image-20211020214700490

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        后代选择器
         */
        body p{
            background: deeppink;
        }
        /*
        子选择器
         */
        body>p{
            background: orange;
        }
        /*
        相邻兄弟选择器：只选择一个
         */
        .active+p{
            background: cadetblue;
        }
        /*
        通用兄弟选择器：选中当前元素的向下的所有的兄弟元素
         */
        .naive~p{
            background: lawngreen;
        }
    </style>
</head>
<body>

<p>后代选择器</p>
<p class="active">子选择器p2</p>
<p>相邻兄弟选择p3</p>
<p class="naive">通用兄弟选择器</p>
<p>通用兄弟选择器1</p>
</body>
</html>

image-20211020215259124

2.3结构伪类选择器

伪类：用来添加一些选择器的特殊效果。

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*
           ul的第一个元素
            */
        ul li:first-child{
           background: cadetblue;
        }
        /*
           ul的最后一个元素
            */
        ul li:last-child{
            background: darkblue;
        }
        /*

        选中p1:定位到父元素,选择当前的第一个元素
            选择当前P元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
         */
        p:nth-child(1){
            background: darksalmon;
        }
        /*
            选中父元素下的第二个p元素
            */
        p:nth-of-type(2){
            background: limegreen;
        }
    </style>
</head>

<body>

<a href="">9999999</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h3>h3hahaha</h3>
<ul>
    <li>1239</li>
    <li>12398</li>
    <li>123985</li>
    <li>1239856</li>
</ul>
<ul>
    <li>12eer</li>
    <li>12qwee</li>
    <li>12adad85</li>
    <li>123xcvz6</li>
</ul>
<a href="www.baidu.com">百度</a>
</body>
</html>

image-20211020221146986

2.4属性选择器

  • id + class 结合

属性名,属性名 = 属性值（正则）

  • = 表示绝对等于
  • *= 表示包含
  • ^= 表示以...开头
  • $= 表示以...结尾
  • 存在id属性的元素`` a[]{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 60px;
            border-radius: 20px;
            background: cadetblue;
            text-align: center;
            color: darkslateblue;
            text-decoration: none;
            margin-inside: 5px;
            line-height: 50px;
            font: bold 20px/50px Arial;
        }

      a[id]{
          background: deeppink;
      }

      a[id=first]{
          background: bisque;
      }

      a[class *="links"]{
          background: gold;
      }

      a[href^=http]{
          background: lightslategray;
      }

      a[href $= pdf]{
          background: coral;
      }
      
    </style>
</head>
<body>

<p class="demo">
    <a href="hhtp://www.taobao.com/" class="links" id="first">淘宝</a>
    <a href="hhtp://www.baidu.com/" class="links1" >百度</a>
    <a href="" class="links 4" >网页</a>
    <a href="img/hello.html" class="links item">网页</a>
    <a href="img/str1.png" class="links item">png</a>
    <a href="img/str2.jpg" class="links item">jpg</a>
    <a href="abc" class="links item">链2</a>
    <a href="/fy.pdf" class="links item">pdf</a>
    <a href="/quit.pdf" class="links item">pdf2</a>
    <a href="dump.doc" class="links item">doc</a>
    <a href="kiko.doc" class="links item last">doc2</a>

</p>
</body>
</html>

image-20211020222806769

3.美化网页

3.1为什么要美化网页

  1. 有效的传递页面信息
  2. 美化网页，页面漂亮才能吸引客户
  3. 凸显页面的主题
  4. 提高用户的体验

span标签：重点要突出的字，使用span标签套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美化网页</title>
    <style>
        #title{
            font-size: 100px;
        }
    </style>
</head>
<body>

编程语言：神奇<span id="title">Java</span>
</body>
</html>

image-20211020223259156

3.2字体样式

  • font-family：字体
  • font-size：字体大小
  • font-weight：字体粗细
  • color：字体颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family: Arial;
            color: lightslategray;
            font-size: 90px;
            mso-font-width: 20px;
        }
        h1{
            font-size: 19px;
        }
        .p1{
            font-weight: 300;
            color: deepskyblue;
        }
    </style>
</head>
<body>

<h1>懂了嘛</h1>
<P>哈哈哈哈哈</P>
<p>66666666</p>
<p class="p1">come</p>
</body>
</html>

image-20211020223926138

  • 常用写法：
1. /* 也可以填px，但不能超过900,相当于bloder */
2. font-weight:bolder;
3. /*常用写法：*/
4. font:oblique bloder 12px "楷体"

3.3文本样式

  • 图片、文字水平对齐
img,span{
    vertical-align: middle;
}
  • 颜色–>color:agb / rgba()
  • 文本对齐方式–>text-align：center;
  • 首行缩进–>text-indent：2em;
  • 行高–>line-height：300px;
  • 下划线–>text-decoration;
/*下划线*/
text-decoration:underline
/*中划线*/
text-decoration:line-through
/*上划线*/
text-decoration:overline
/*超链接去下划线*/
text-decoration:none

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p2{
            line-height: 30px;
            background: orange;
        }
        .p3{
            text-decoration: underline;
        }
        .p4{
            text-decoration: overline;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>

<a href="">come</a>

<p class="p1">12334566789</p>
<p class="p2">jiayou</p>
<p class="p3">xuexi </p>
<p class="p4">come on</p>

<h1>概述</h1>
<p class="p1">
    信星爷，得永生
</p>

<p>
    嘿嘿
</p>

<p class="p2">
    真的，信我
</p>
</body>
</html>

image-20211020225057062

3.4文本阴影和超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration: hotpink;
            color: #000000;
        }
        /*
        鼠标悬浮的状态
         */
        a:hover{
            color: yellow;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: gold;
        }
        /*
        点击后的状态
         */
        a:visited{
            color: deepskyblue;
        }

        /*
            text-shadow:5px 5px 5px 颜色
            第一个参数：表示水平偏移
            第二个参数：表示垂直偏移
            第三个参数：表示模糊半径
            第四个参数：表示颜色
        */
        #come{
            text-shadow: hotpink 10px 10px 5px;
        }

        /*
        固定阴影
         */
        a:link{
            background: coral;
        }
    </style>
</head>
<body>

<a href="......">
    <img src="1.jpg" width="100" height="100" alt="">
</a>

<p>
    <a href="heihei ">Java</a>
</p>

<p id="come">
    <a href="on ">python</a>
</p>
</body>
</html>

image-20211020230342402

3.5列表

image-20211021104031199

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="Lie表.css" rel="stylesheet" type="text/css">
    <style>

    </style>
</head>
<body>

<div id="hei">
    <h2 class="title">全部商品分类</h2>
    <Ul>
        <li>
            <a href="#">图书</a>
            <a href="#">书本</a>
            <a href="#">电影</a>
        </li>

        <li>
            <a href="#">手机</a>
            <a href="#">平板</a>
            <a href="#">电脑</a>
        </li>

        <li>
            <a href="#">软件</a>
            <a href="#">app</a>
            <a href="#">网页</a>
        </li>

    </Ul>
</div>

</body>
</html>

#hei{
    width: 300px;
    background: #ffe4c4;
}
.title{
    font-size: 20px;
    font-family: "Arial Black";
    text-indent: 2em;
    line-height: 30px;
    background: gold;
}

ul li{
    height: 30px;
    list-style: none;
    text-indent: 2em;

}

a{
    text-decoration: none;
    font-size: 14px;
    color:darkblue;
}

a:hover{
    color: dodgerblue;
    text-decoration: burlywood;
}

image-20211021104101964

3.6背景

  • 背景颜色：background
  • 背景图片
background-image:url(""); /* 默认是全部平铺的 */
background-repeat:repeat-x; /* 水平平铺 */
background-repeat:repeat-y; /* 垂直平铺 */
background-repeat:no-repeat; /* 不平铺 */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        div{
            width: 5000px;
            height: 5000px;
            border: 1px solid mediumaquamarine;
            background-image: url("1.jpg");
        }
        .div1{
            background-repeat:repeat-x;
        }

        .div2{
            background-repeat: repeat-y;
        }

        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

image-20211021105023316

3.7渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        body{
            background-color: #0cd7f3;
            background-image: linear-gradient(43deg, #0093E9 0%, #80D0C7 46%, #23F549 100%);
        }
        div{
            width: 500px;
            height: 200px;
            border: 1px solid mediumaquamarine;
            background-image: url("1.jpg");
        }
        .div1{
            background-repeat:repeat-x;
        }

        .div2{
            background-repeat: repeat-y;
        }

        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

image-20211021110300089

4.盒子模型

4.1什么是盒子模型

  • margin：外边距；
  • padding：内边框；
  • border：边框；

image-20211020230858173

4.2边框border

  • border：粗细 样式 颜色

    • 边框的粗细；
    • 边框的样式；
    • 边框的颜色。

  • html空格代码

    | 名称 | 描述 |
    | ————- | ————————————- |
    | &nbsp ; | 不断行的空白(1个字符宽度) |
    | &ensp ; | 半个空白(1字符宽度) |
    | &emsp ; | 一个空白(2个字符宽度) |
    | &thinsp ; | 窄空白(小于1个字符宽度) |

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子边框</title>
    <style>
        /*body总有一个默认的外边距为0*/
        /*h1,ul,li,a,body{*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*    text-decoration: none;*/
        /*}*/
        /*border：粗细 样式 颜色*/
        #box{
            width: 300px;
            border: 1px solid peru;
        }
        h2{
            font-size: 16px;
            background-color: mediumaquamarine;
            line-height: 30px;
            margin: 0;
            color: hotpink;
        }

        form{
            background: coral;
        }

        div:nth-of-type(1) input{
            border: 2+px,solid seagreen;
        }
        div:nth-of-type(2) input{
            border: 2px dashed gray;
        }

        div:nth-of-type(3) input{
            border: 2px solid coral;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <from action="#">
        <div>
            <span>用户名</span>
            <input type="text">
        </div>
        <div>
            <span>密&emsp;码</span>
            <input type="text">
        </div>
        <div>
            <span>邮&emsp;箱</span>
            <input type="text">
        </div>
    </from>
</div>
</body>
</html>

image-20211021113001456

4.3外边距

  • margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下 .
/* 分别表示上、右、下、左；从上开始顺时针 */
margin:0 0 0 0 
/* 例1: 居中 auto表示左右自动 */
margin:0 auto 
/* 例2：表示上、右、下、左都为4px */
margin:4px 
/* 例3: 表示上为10px，左右为20px，下为30px */
margin:10px 20px 30px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子边框</title>
    <style>
        /*body总有一个默认的外边距为0*/
        /*h1,ul,li,a,body{*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*    text-decoration: none;*/
        /*}*/
        /*border：粗细 样式 颜色*/
        #box{
            width: 300px;
            border: 1px solid peru;
            margin: 0 auto;
        }
        h2{
            font-size: 16px;
            background-color: mediumaquamarine;
            line-height: 30px;
            margin: 0;
            color: hotpink;
        }

        form{
            background: coral;
        }

        div:nth-of-type(1) input{
            border: 2+px,solid seagreen;
            padding: 10px;
        }
        div:nth-of-type(2) input{
            border: 2px dashed gray;
            padding: 15px;
        }

        div:nth-of-type(3) input{
            border: 2px solid coral;
            padding: 5px;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <from action="#">
        <div>
            <span>用户名</span>
            <input type="text">
        </div>
        <div>
            <span>密&emsp;码</span>
            <input type="text">
        </div>
        <div>
            <span>邮&emsp;箱</span>
            <input type="text">
        </div>
    </from>
</div>
</body>
</html>

image-20211021115915657

  • 盒子的计算方式：
    • margin+border+padding+内容的大小。
  • 总结：
    • body总有一个默认的外边距 margin:0
    • 常见操作：初始化。

4.4圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid orange;
            /* 一个border-radius只管一个圆的1/4 */
            border-radius:50px 20px 20px 50px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

image-20211021120258313

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <style>
        img{
            border:  25px;
            width: 500px;
            height: 500px;
            background: yellow;
        }
    </style>
</head>
<body>
<img src="1.jpg" alt="#">
</body>
</html>

image-20211021121201103

4.5盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <style>
       div{
           width: 100px;
           height: 100px;
           border: 10px solid hotpink;
           border-radius: 10px 10px 20px 30px;
       }
       #box{
           box-shadow: 10px 10px 1px navy;
       }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>

image-20211021121723190

5.浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

5.1标准文档流

在这里插入图片描述

  • 块级元素：独占一行
h1~h6 、p、div、 列表…
  • 行内元素：不独占一行
span、a、img、strong
  • 注： 行内元素可以包含在块级元素中，反之则不可以。

5.2display

  • block：块元素；
  • inline：行内元素；
  • inline-block：是块元素，但是可以内联，在一行；
  • 这也是一种实现行内元素排列的方式，但是我们很多情况用float。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dispaly</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid darkslateblue;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid darkgoldenrod;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

image-20211021154023239

5.3float

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊

  • clear: both
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="father">
    <div class="layer1"><img src="2.jpg"  width="10px" height="10px" alt=""></div>
    <div class="layer2"><img src="2.jpg" alt=""></div>
    <div class="lay03"><img src="3.jpg" alt=""></div>
    <div class="layer4">
        浮动的盒子可以向左浮动，也可以向右浮动，知道他的外边缘碰到包含框或另一个浮动盒子为止。
    </div>
</div>
</body>
</html>

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float: right;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    clear: both;
}

image-20211021160621152

5.4父级边框塌陷的问题

  • clear：

    • right：右侧不允许有浮动元素；
    • left：左侧不允许有浮动元素；
    • both：两侧不允许有浮动元素；
    • none：

  • 解决塌陷问题方案：

    • 方案一：增加父级元素的高度；
    #father{   
border:1px #000 solid;    height:800px;
}
    • 方案二：增加一个空的div标签，清除浮动。
<div class = "clear"></div>
<style>
    .clear{
        clear:both;
        margin:0;
        padding:0;
    }
</style>
  • 方案三：在父级元素中增加一个overflow属性。
    overflow:hidden; /* 隐藏超出部分 */   
    overflow:scroll; /* 滚动 */
  • 方案四：父类添加一个伪类:after。
#father:after{
		content:'';    
		display:block;    
		clear:both;
}

image-20211021162941354

  • 小结：

    • 浮动元素增加空div——> 简单、代码尽量避免空div；
    • 设置父元素的高度——-> 简单，但是元素假设有了固定的高度，可能就会超出范围；
    • overflow——> 简单，下拉的一些场景避免使用；
    • 父类添加一个伪类:after（推荐）——> 写法稍微复杂，但是没有副作用，推荐使；

    display与float对比：

    • display：方向不可以控制；
    • float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。。

6.定位

position 属性指定了元素的定位类型。

position 属性的五个值：

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

6.1相对定位

  • 相对定位：positon：relstive；

  • 相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置会被保留。

  • 相对定位元素经常被用来作为绝对定位元素的容器块

top:-20px; /* 向上偏移20px */
left:20px; /* 向右偏移20px */
bottom:10px; /* 向上偏移10px */
right:20px; /* 向左偏移20px */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: hotpink 1px dashed;
        }
        #first{
            border: orange 1px solid;
            background-color: yellow;
            position: relative;
            top: -20px;         /*;向上偏移20px*/
            left: 20px           /*;向右偏移20px*/
        }
        #second{
            border: blue 1px solid;
            background-color: mediumaquamarine;
        }
        #third{
            background-color: cornsilk;
            border: cornflowerblue 1px solid;
            position: relative;
            bottom: 10px;   /*;向上偏移10px*/
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

image-20211021172135987

  • 练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style>
        #box{
            height: 300px;
            width: 300px;
            border: 2px red solid;
            padding: 10px;
        }
        a{
            height: 100px;
            width: 100px;
            background-color: coral;
            color: gold;
            text-align: center;
            text-decoration: none;
            line-height: 100px; /* 设置行距100px */
            display: block;  /* 设置方块 */
        }
        a:hover{
            background: blue;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;

        }
    </style>
</head>
<body>
<div id="box">
    <div class="a1"><a href="#">连接1</a></div>
    <div class="a2"><a href="#">连接2</a></div>
    <div class="a3"><a href="#">连接3</a></div>
    <div class="a4"><a href="#">连接4</a></div>
    <div class="a5"><a href="#">连接5</a></div>
</div>
</body>
</html>

image-20211021173033841

6.2绝对定位与固定定位

  • 定位：基于xxx定位，上下左右；

    1. 没有父级元素定位的前提下，相对于浏览器定位；
    2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移；
    3. 在父级元素范围内移动。

  • 总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。

  • absolute 定位

    • 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

  • fixed 定位

    • 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        body{
            height: 1000px;
            width: 1000px;
        }
        div:nth-of-type(1){
            width: 200px;
            height: 600px;
            background-color: orange;
            position: absolute;
            right: 100px;
            bottom: 100px;
        }
        div:nth-of-type(2){
            width: 150px;
            height: 150px;
            background-color: yellow;
            position: fixed;
            right: 200px;
            bottom: 100px;
        }
    </style>
</head>
<body>

<div>div1</div>
<div>div2</div>
</body>
</html>

image-20211021173943976

6.3z-index以及透明度

在这里插入图片描述

图层-z-index：默认是0，最高无限~999。

opacity: 0.5; /* 背景透明度 */

image-20211021174645418

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <style>
    </style>
</head>
<body>
<div id="content">
    <ul>
        <li><img src="1.jpg" alt=""></li>
        <li class="tipText">Java后端学习</li>
        <li class="come"></li>
        <li>时间:1202-06-14</li>
        <li>地点:永恒国度</li>
    </ul>
</div>
</body>
</html>

#content{
    width: 450px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #1079f6;
}
ul,li{
    font-size: 20px;
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/* 父级元素相对定位 */
#content ul{
    position: relative;
}
.tipText,.come{
    position: absolute;
    width: 380px;
    height: 25px;
    top:216px
}
.tipText{
    color: #ffffff;
    z-index: 999;
}
.come{
    background: #33f13d;
    opacity: 0.5; /* 背景透明度 */
    filter: alpha(opacity=50);
}

image-20211021174723036

7.网页动画(了解)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Canvas模拟飞机航班线路动画DEMO演示</title>
    <style>
        *{margin:0;padding:0;}
        canvas {
            background:#111;
            background-size:cover;
            display:block;
        }
        body{overflow: hidden;}
    </style>
</head>
<body>
<div></div>
<script>
    window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)} }();
    $ = {};
    $.util = {
        rand: function( min, max ) {
            return Math.random() * ( max - min ) + min;
        },
        randInt: function( min, max ) {
            return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
        },
        norm: function( val, min, max ) {
            return ( val - min ) / ( max - min );
        },
        lerp: function( norm, min, max ) {
            return ( max - min ) * norm + min;
        },
        map: function( val, sMin, sMax, dMin, dMax ) {
            return $.util.lerp( $.util.norm( val, sMin, sMax), dMin, dMax );
        },
        clamp: function( val, min, max ) {
            return Math.min( Math.max( val, Math.min( min, max ) ), Math.max( min, max ) );
        },
        distance: function( p1, p2 ) {
            var dx = p1.x - p2.x,
                dy = p1.y - p2.y;
            return Math.sqrt( dx * dx + dy * dy );
        },
        angle: function( p1, p2 ) {
            return Math.atan2( p1.y - p2.y, p1.x - p2.x );
        },
        inRange: function( val, min, max ) {
            return val >= Math.min( min, max ) && val <= Math.max( min, max );
        },
        pointInRect: function( x, y, rect ) {
            return $.util.inRange( x, rect.x, rect.x + rect.width ) &&
                $.util.inRange( y, rect.y, rect.y + rect.height );
        },
        pointInArc: function( p, a ) {
            return distance( p, a ) <= a.radius;
        },
        setProps: function( obj, props ) {
            for( var k in props ) {
                obj[ k ] = props[ k ];
            }
        },
        multicurve: function( points, ctx ) {
            var p0, p1, midx, midy;
            ctx.moveTo(points[0].x, points[0].y);
            for(var i = 1; i < points.length - 2; i += 1) {
                p0 = points[i];
                p1 = points[i + 1];
                midx = (p0.x + p1.x) / 2;
                midy = (p0.y + p1.y) / 2;
                ctx.quadraticCurveTo(p0.x, p0.y, midx, midy);
            }
            p0 = points[points.length - 2];
            p1 = points[points.length - 1];
            ctx.quadraticCurveTo(p0.x, p0.y, p1.x, p1.y);
        }
    };
    $.init = function() {
        // setup
        $.c = document.createElement( 'canvas' );
        $.ctx = $.c.getContext( '2d' );
        document.body.appendChild( $.c );
        // collections
        $.ports = [];
        $.planes = [];
        // events
        window.addEventListener( 'resize', $.reset, false );
        window.addEventListener( 'click', $.reset, false );
        $.reset();
        $.step();
    };
    $.reset = function() {
        // dimensions
        $.cw = $.c.width = window.innerWidth;
        $.ch = $.c.height = window.innerHeight;
        $.dimAvg = ( $.cw + $.ch ) / 2;
        // type / font
        $.ctx.textAlign = 'center';
        $.ctx.textBaseline = 'middle';
        $.ctx.font = '16px monospace';
        // options / settings
        $.opt = {};
        $.opt.portCount = 6;
        $.opt.planeCount = 80;
        $.opt.portSpacingDist = $.dimAvg / $.opt.portCount;
        $.opt.holdingDist = 5;
        $.opt.approachDist = 80;
        $.opt.planeDist = 20;
        $.opt.pathSpacing = 15;
        $.opt.pathCount = 40;
        $.opt.avoidRadius = 30;
        $.opt.avoidMult = 0.025;
        // collections
        $.ports.length = 0;
        $.planes.length = 0;
        // delta
        $.lt = Date.now();
        $.dt = 1;
        $.et = 0;
        $.tick = 0;
        // setup ports
        for( var i = 0; i < $.opt.portCount; i++ ) {
            $.ports.push( new $.Port() );
        }
        // setup planes
        for( var i = 0; i < $.opt.planeCount; i++ ) {
            $.planes.push( new $.Plane() );
        }
    };
    $.Port = function() {
        this.x = $.util.rand( $.cw * 0.1, $.cw * 0.9 );
        this.y = $.util.rand( $.ch * 0.1, $.ch * 0.9 );
        while( !this.validSpacing() ) {
            this.x = $.util.rand( $.cw * 0.1, $.cw * 0.9 );
            this.y = $.util.rand( $.ch * 0.1, $.ch * 0.9 );
        }
    };
    $.Port.prototype.validSpacing = function() {
        var spaced = true,
            i = $.ports.length;
        while( i-- ) {
            var otherPort = $.ports[ i ];
            if( $.util.distance( otherPort, this ) < $.opt.portSpacingDist ) {
                spaced = false;
                break;
            }
        }
        return spaced;
    };
    $.Port.prototype.update = function( i ) {
        var j = $.planes.length;
        this.approachingCount = 0;
        while( j-- ) {
            var plane = $.planes[ j ];
            if( plane.destIndex == i && plane.approaching ) {
                this.approachingCount++;
            }
        }
    };
    $.Port.prototype.render = function( i ) {
        $.ctx.beginPath();
        $.ctx.arc( this.x, this.y, 3 + ( this.approachingCount + 5 ), 0, Math.PI * 2 );
        $.ctx.fillStyle = 'hsla(120, 90%, 80%, ' + ( 0.35 + Math.sin( $.et / 20 ) * 0.2 ) + ')';
        $.ctx.fill();
        $.ctx.fillStyle = '#fff';
        $.ctx.fillText( this.approachingCount, this.x, this.y - 30 );
    };
    $.Plane = function( opt ) {
        this.originIndex = $.util.randInt( 0, $.ports.length - 1 );
        this.origin = $.ports[ this.originIndex ];
        this.path = [];
        this.x = this.origin.x;
        this.y = this.origin.y;
        this.vx = $.util.rand( -0.35, 0.35 );
        this.vy = $.util.rand( -0.35, 0.35 );
        this.vmax = 1;
        this.accel = 0.01;
        this.decel = 0.96;
        this.angle = 0;
        this.approaching = false;
        this.holding = false;
        this.setDest();
    };
    $.Plane.prototype.setDest = function() {
        if( this.destIndex != undefined ) {
            this.originIndex = this.destIndex;
            this.origin = $.ports[ this.originIndex ];
        }
        this.destIndex = $.util.randInt( 0, $.ports.length - 1 );
        while( this.destIndex == this.originIndex ) {
            this.destIndex = $.util.randInt( 0, $.ports.length - 1 );
        }
        this.dest = $.ports[ this.destIndex ];
        this.approaching = false;
        this.holding = false;
    }
    $.Plane.prototype.update = function( i ) {
        this.ox = this.x;
        this.oy = this.y;
        if( $.tick % $.opt.pathSpacing == 0 ) {
            this.path.push( { x: this.x, y: this.y } );
        }
        if( this.path.length > $.opt.pathCount ) {
            this.path.shift();
        }
        this.angle = $.util.angle( this.dest, this );
        this.speed = ( Math.abs( this.vx ) + Math.abs( this.vy ) ) / 2;
        if( !$.util.pointInRect( this.x, this.y, { x: 0, y: 0, width: $.cw, height: $.ch } ) ) {
            this.vx *= this.decel;
            this.vy *= this.decel;
        }
        if( this.speed > 0.1 ) {
            if( $.util.distance( this.dest, this ) < $.opt.approachDist ) {
                this.vx *= this.decel;
                this.vy *= this.decel;
                this.approaching = true;
            }
        }
        if( $.util.distance( this.dest, this ) < $.opt.holdingDist ) {
            this.holding = true;
            this.setDest();
        }
        this.vx += Math.cos( this.angle ) * this.accel;
        this.vy += Math.sin( this.angle ) * this.accel;
        if( this.speed > this.vmax ) {
            this.vx *= this.decel;
            this.vy *= this.decel;
        }
        this.x += this.vx * $.dt;
        this.y += this.vy * $.dt;
    };
    $.Plane.prototype.render = function( i ) {
        if( this.approaching ) {
            $.ctx.strokeStyle = 'hsla(0, 80%, 50%, 1)';
        } else {
            $.ctx.strokeStyle = 'hsla(180, 80%, 50%, 1)';
        }
        $.ctx.beginPath();
        $.ctx.moveTo( this.x, this.y );
        var angle = $.util.angle( { x: this.ox, y: this.oy }, this );
        $.ctx.lineWidth = 2;
        $.ctx.lineTo(
            this.x - Math.cos( angle ) * ( 3 + this.speed * 2 ),
            this.y - Math.sin( angle ) * ( 3 + this.speed * 2 )
        );
        $.ctx.stroke();
        var pathLength = this.path.length;
        if( pathLength > 1) {
            $.ctx.strokeStyle = 'hsla(0, 0%, 100%, 0.15)';
            $.ctx.lineWidth = 1;
            $.ctx.beginPath();
            if( pathLength >= $.opt.pathCount ) {
                var angle = $.util.angle( this.path[ 1 ], this.path[ 0 ] ),
                    dx = this.path[ 0 ].x - this.path[ 1 ].x,
                    dy = this.path[ 0 ].y - this.path[ 1 ].y,
                    dist = Math.sqrt( dx * dx + dy * dy ),
                    x = this.path[ 0 ].x + Math.cos( angle ) * ( dist * ( ( $.tick % $.opt.pathSpacing ) / $.opt.pathSpacing ) ),
                    y = this.path[ 0 ].y + Math.sin( angle ) * ( dist * ( ( $.tick % $.opt.pathSpacing ) / $.opt.pathSpacing ) );
            } else {
                var x = this.path[ 0 ].x,
                    y = this.path[ 0 ].y
            }
            $.ctx.moveTo( x, y );
            for( var i = 1; i < pathLength; i++ ) {
                var point = this.path[ i ];
                $.ctx.lineTo( point.x, point.y );
            }
            $.ctx.lineTo( this.x, this.y );
            $.ctx.stroke();
        }
    };
    $.step = function() {
        requestAnimFrame( $.step );
        // clear
        $.ctx.globalCompositeOperation = 'destination-out';
        $.ctx.fillStyle = 'hsla(0, 0%, 0%, 1)';
        $.ctx.fillRect( 0, 0, $.cw, $.ch );
        $.ctx.globalCompositeOperation = 'lighter';
        // collections
        var i;
        i = $.ports.length; while( i-- ) { $.ports[ i ].update( i ) }
        i = $.planes.length; while( i-- ) { $.planes[ i ].update( i ) }
        i = $.ports.length; while( i-- ) { $.ports[ i ].render( i ) }
        i = $.planes.length; while( i-- ) { $.planes[ i ].render( i ) }
        // delta
        var now = Date.now();
        $.dt = $.util.clamp( ( now - $.lt ) / ( 1000 / 60 ), 0.001, 10 );
        $.lt = now;
        $.et += $.dt;
        $.tick++;
    };
    $.init();
</script>
</body>
</html>

      $.ctx.strokeStyle = 'hsla(0, 0%, 100%, 0.15)';
        $.ctx.lineWidth = 1;
        $.ctx.beginPath();
        if( pathLength >= $.opt.pathCount ) {
            var angle = $.util.angle( this.path[ 1 ], this.path[ 0 ] ),
                dx = this.path[ 0 ].x - this.path[ 1 ].x,
                dy = this.path[ 0 ].y - this.path[ 1 ].y,
                dist = Math.sqrt( dx * dx + dy * dy ),
                x = this.path[ 0 ].x + Math.cos( angle ) * ( dist * ( ( $.tick % $.opt.pathSpacing ) / $.opt.pathSpacing ) ),
                y = this.path[ 0 ].y + Math.sin( angle ) * ( dist * ( ( $.tick % $.opt.pathSpacing ) / $.opt.pathSpacing ) );
        } else {
            var x = this.path[ 0 ].x,
                y = this.path[ 0 ].y
        }
        $.ctx.moveTo( x, y );
        for( var i = 1; i < pathLength; i++ ) {
            var point = this.path[ i ];
            $.ctx.lineTo( point.x, point.y );
        }
        $.ctx.lineTo( this.x, this.y );
        $.ctx.stroke();
    }
};
$.step = function() {
    requestAnimFrame( $.step );
    // clear
    $.ctx.globalCompositeOperation = 'destination-out';
    $.ctx.fillStyle = 'hsla(0, 0%, 0%, 1)';
    $.ctx.fillRect( 0, 0, $.cw, $.ch );
    $.ctx.globalCompositeOperation = 'lighter';
    // collections
    var i;
    i = $.ports.length; while( i-- ) { $.ports[ i ].update( i ) }
    i = $.planes.length; while( i-- ) { $.planes[ i ].update( i ) }
    i = $.ports.length; while( i-- ) { $.ports[ i ].render( i ) }
    i = $.planes.length; while( i-- ) { $.planes[ i ].render( i ) }
    // delta
    var now = Date.now();
    $.dt = $.util.clamp( ( now - $.lt ) / ( 1000 / 60 ), 0.001, 10 );
    $.lt = now;
    $.et += $.dt;
    $.tick++;
};
$.init();
```

image-20211021180030661

若有南墙 撞穿便是
关注
专栏目录
CSS样式
pengjianglilive的专栏
08-01 1981
CSS简介 CSS 指层叠样式表 (CascadingStyleSheets) 样式定义如何显示HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在CSS 文件中 多个样式定义可层叠为一个 CSS语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属...
第22期《杂聊1：易破解密码列表》
热门推荐
joe_zxq21的博客
02-27 4万+
下面是从被黑的服务器上看到的暴力破解密码列表，看看能不能找到你的密码？ ----------- 123 123456 123654 cx0123456 cx0000 cx00000 111111 222222 popmedia 2803290 zhangping sanrenchuanqi xiaozhuchuanqi cb1986619 yuwu866442 xiaobing521 wytsidcabc 13860745234 qwert!@#$% aini520
css基本样式
Martind的博客
09-10 304
css样式 引入外部css样式 &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;my.css&quot;&amp;gt; 常用字体属性 属性名 含义 font-family 设置字体 font-size 设置字体大小 font-style 设置字体风格 font-wight 设置字体粗细 font 在一个声明...
《CSS 语法》
yexiangCSDN的专栏
06-25 838
CSS 实例 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 CSS 实例 CSS声明总是以分号(;)结束，声明组以大括号({})括起来: p {color:r...
CSS属性大全
aflyeagle的专栏
08-08 5345
<br /> <!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 680460288 22 0 262145 0;}
css笔记
04-02
这本“css笔记”是对CSS技术的深入理解和实践的总结，旨在帮助开发者巩固基础知识，提升技能水平。 **基本概念** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p`）、类选择器（`.myClass`）、ID...
狂神说视频-CSS笔记.pdf
11-12
CSS 笔记 CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...
CSS笔记(1).pdf
01-26
CSS笔记 CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML，让HTML专注于结构呈现，而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...
css笔记css笔记css笔记
最新发布
04-03
在网页设计领域，CSS（层叠样式表）扮演着至关重要的角色，它使得网页的布局、字体、颜色、背景等视觉元素得以精确控制。CSS 的引入解决了早期纯 HTML 页面表现与结构混合的问题，实现了内容与样式的分离，提高了...
HTMLCSS笔记.pdf
07-14
HTML与CSS笔记 HTML（HyperText Markup Language，超文本标记语言）是构成网页内容的骨架，用于创建网页的结构，并通过不同的标签来描述网页的各个部分。CSS（Cascading Style Sheets，层叠样式表）则负责网页的...
HTML小技巧的一些小技巧
饭饭的专栏
02-06 797
Normal 0 0 2 <!-- /* Font Definitions */@font-face {font-family:SimSun; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:宋体
css3 - 样式 盒子模型（盒子装饰，阴影、圆角以及边框）
闲时不练功，忙时一场空
09-16 410
边框颜色 强调 同时设置4个边框颜色时，顺序为上右下左 边框粗细 边框样式 border-style border简写 margin 属性 padding属性 盒子型模 border-radius 圆角边框 取值：px | em | rem | 百分比…… 设置给：块、行内块、行内元素 作用：设置元素边框的圆角 ...
css选择器，匹配以某个字符开头或结尾
CrazBarry的博客
06-21 1万+
1. div[class$="-btn"]:active{ opacity:.8 } <div class="user-btn"></div> 可匹配到div,class为“-btn”结尾的元素 2. div:[id^="item-"]{ color:red } <div id="item-op"></div> 可...
CSS部分内容知识总结
旺仔好吃糖的博客
11-07 340
CSS:一个简单的文档改变所有页面的布局和外观 1.css简单语法 主要规则：以选择器和一个或多个声明组成 每条声明由一个属性和一个值组成（每个属性有值。属性和值被冒号分开） CSS声明总是以分号(;)结束，声明总以大括号({})括起来 CSS注释以 /* 开始, 以 */ 结束 2.css选择器 （1）id选择器： 以"#"来定义 #para1 { text-align:center; color:red; } <p id="para1">Hello World!</p&g
亚信科技2019届实习生招聘笔试题（前端）
weixin_41435591的博客
05-19 2万+
亚信来我们学校宣讲，提前让我们做了笔试题，我选择了前端方向，下面是我的试题整理还有我的答案知识点整理，如果有错误请大神们指正。
指定开始字符串和结束字符串,截取中间的字符
lee576的专栏
04-09 6434
/// /// 指定开始字符串和结束字符串,截取中间的字符 /// /// 要截取的字符串 /// 开始字符串 /// 结束字符串 /// public static string GetValue(string str, string s, stri
CSS命名与书写规范
W2279567793的博客
04-18 6156
命名与书写规范 引入css的三种方式 1.内联样式，在HTML元素中使用"style" 属性。 当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在标签中使用样式属性，样式属性可以是任何 CSS 属性。其作用范围是在当前标签内，使用较少 <body> <div style = "color:blue; font-size:15px">文章</div> <p>我是第一段文章内容</p> <p>我是第二段文章内容&
css样式定义
小知识折射大智慧
03-20 3067
转载地址：ther 二、定义CSS规则 CSS样式表由一些规则组成，每个规则由选择符和属性声明两部分组成，其中，选择符用于标识格式元素（如p、h3标记、类名或id），属性声明则用于定义元素的样式。 定义CSS规则的语法如下： 选择符{属性:值;属性:值;...} 属性声明用花括号括起来，其内容由一些属性-值对组成，属性名称与属性值用冒号（:）分割，
CSS笔记整理：HTML与CSS基础，字符编码及网页结构
"这是一份关于CSS的个人学习笔记，作者分享了自己在学习CSS过程中的理解和总结，旨在帮助读者更好地理解和应用CSS。...通过这份CSS笔记，读者可以系统地学习和复习CSS的基础知识，为进一步深入学习和实践打下坚实基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值