html5与css3知识点总结笔记

已于 2023-02-02 20:01:15 修改
阅读量1.2k 收藏 24
点赞数 6
文章标签： css html
于 2023-02-02 19:07:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WJ070209/article/details/128855584
版权

html5中文全称：超文本标记语言

超：超链接

超越普通文本

标记：标签，语言的特征是由很多的< >标签构成

基本结构

<!DOCTYPE html>
<!-- 声明：当前的html文件遵循html5的语言规范 -->
<html lang="en">
    <!-- 语言=“英文”   中文zh-CN -->
<head>
    <meta charset="UTF-8">
    <!-- meta是一个单标签； charset="UTF-8"：规定字符集编码。万国码 -->
    <title>我的个人空间</title>
    <!-- 设置标签卡名字 -->
</head>
<body>
    <!-- 网页主体中有什么，写在body中————html标签————放在主体中-->
    <!-- 注释： -->
    我的地带
    <!-- 文本    图  超链接  板块盒子    视频音频    文本输入框  按钮。。。。-->
     <!-- 搭建页面。写入标签的思维：
        从外到内
        从上到下
        从左到右
      -->
</body>
</html>

基础标签

标题标签
    h1-h6:字的大小依次变小
            语义重要性降低
            h1在同一个网页中，最好只出现一次
            
超链接 :供我们点击的内容：文字/图片/板块/..
        跳到那里去：链接地址
        <a href="http://cn.chinadaily.com.cn">点这里呀</a>
        
一条横线 
    <hr>
换行
    <br>
图片标签
    <img src="C:\Users\w5725\Desktop\中秋学习\0909\新闻1.png" alt="图片丢失啦">
    <img src="./img/新闻1.png" alt="">
    <img src="../../新闻1.png" alt="">
    
段落
    p
一个块级元素
    div
一个行内元素
    span

注意点一

直接放在代码中的换行或者多个空格，最终只能显示一个空格

注意点二

文件的路径写法：

绝对路径：从根目录（某个盘）开始的存储路径

相对路径：

邻居关系:直接写名字,或者写./名字

下一级关系：/

上一级关系: ../ 上升一级../../上升两级

标签的分类与嵌套规则

分类：

块级元素：div p h1~h6 table ul li

可以设置宽高

独占一行

行内元素：a span

设置宽高无效，大小只能由内容撑开

可以和其他的行内元素处在一行上

可替换元素：img

嵌套：

块级可以嵌套块级和行内

特殊的：p h1-h6 dt不能嵌套块级

行内可以嵌套行内，不能嵌套块级

比如：a可以嵌套span，a嵌套img，span嵌套span

特殊的：a不能嵌套自身

超链接标签

三种跳转功能：

  1. 站外跳转：地址是外链接，比如，在本地的html文件中跳转到百度，京东。。。

  2. 站内跳转：从项目内的html文件1跳转到html文件2

  3. 页面内跳转：通过绑定id选择器为之地，点击后将对应的id标签显示在窗口的最上方

CSS3样式的书写

位置：

行内样式 
    <p style="width:700px ;background-color: aqua;color: red;"></p>
内部样式 
         <style>
            p{
                width: 700px;
                background-color: yellowgreen;
            }
        </style>
<link rel="stylesheet" href="../css/1_style.css">
​
1_style.css是一个css类型文件

宗旨：结构与样式分离

特点：

行内：精确，效率低，复用性低，不建议大量使用

内部：在当前的html文件中可以复用，少量样式代码适合

外部：复用性高

优先级：行内>内部>外部

css的特性

层叠性：写在后面的相同样式属性，不同取值，会把前面的覆盖（权重至少和前面的选择器一样高或更高）

继承性：有些属性会继承给子元素

继承的属性权重非常低

描述的越准确的选择器，权重越高

权重的计算

*  === 0
标签选择器 === 1
类选择器 === 10
id选择器 ===100
:hover === 10
a:hover === 10
前后包含关系的相加

复合选择器————+与~

兄弟选择器

p+a{
会选择上所有紧跟在p标签后面的那一个a标签
}

小弟选择器

p~span{
会选择上所有跟随在p标签后面的所有span标签，前提是span标签与p在同一层次下
}

结构伪类选择器

1.:first-child 首个子元素选择器（长子选择器）

plate :first-child{}

plate :orange:first-child{}

注意： 在父容器中不是第一个子元素的，结合上:first-child也没有用

2.:only-child 唯一子元素选择器（独生子选择器）

ul li:only-child

选择在ul中唯一的一个li子元素

注意： 在父容器中只能存在一个元素才有效

3.:last-child 最后一个元素选择器（最小孩子选择器）

ul li:last-child

选择ul列表中最后一个li，前提是，li的后面没有其他子元素了

4.:nth-child(A) 选择第A个子元素

ul :nth-child(4){          

background-color: hotpink;      

}

5.ul :nth-child(2n+3)

ul :nth-child(2n+3){          

background-color: hotpink;      

}      

选择的是第3，5，7，9....个元素                      

n:第几次选择，n是从0开始计算的，0，1，2，3，4，5.。。          

An+B:选择出的结果                        

特殊情况：

:nth-child(2n)选择的是偶数个 :nth-child(2n+1)选择的是奇数个

6.:nth-of-type()

分标签类型

css三大板块

  1. 盒子模型

    1. 块级元素，可以看作是盒子

      1. 外边距margin

      2. 边框border

      3. 内边距padding

      4. 内容宽高width，height

    2. 两种盒子计算方式

      1. 标准盒子

        1. 元素的实际大小=设置的宽高+内边距+边框

        2. 也就是设置完宽高后，内边距和边框会撑大元元素

      2. 怪异盒子

        1. 元素的实际大小=设置的宽高

        2. 设置宽高一次成型

    3. 内边距，边框，外边距的设置

      1. 外边距

        4个参数：上开始，顺时针，上右下左

        3个参数：上 左右 下

        2个参数：上下 左右

        1个参数：都一样

          /* margin: 400px; */
            /* margin-left: 600px; */
            /* margin: 10px 40px 100px 200px; */
            /* margin: 10px 40px 100px; */
            /* margin: 10px 100px; */

        使用外边距将元素水平居中的方法：margin: 0 auto;或margin:auto;

        外边距塌陷与溢出

        1.相邻外边距塌陷：上下两个盒子之间的外边距，会只保留较大的值

        2.嵌套型上外边距溢出：父容器没有设置边框或者内边距，开放性的盒子，内部元素的上外边距就会溢出

        解决方法     /*方法一：将父容器设置为溢出隐藏 */
         /* overflow: hidden; */
         /* 方法二：设置透明的上边框transparent:透明色 */
         /* border-top: 0.5px solid transparent; */
         /* 方法三：设置非常窄的上内边距 */
         /* padding-top: 1px; */

      2. 内边距四个方向分开设置

        padding-top: 20px;

        padding-right: 30px;

        padding-bottom: 40px;

        padding-left: 50px;

        外边距同样使用这四个关键词

      3. 边框设置

        颜色，样式，粗细可以拆开设置

        border-color: transparent red red transparent ;

        border-width: 50px;

        border-style: solid;

        小提示：背景颜色会延申到边框底部

  2. 浮动

    1. 作用：让独占一行的元素可以与别的元素处在一行上

    2. 写法：float:left/right左浮动或右浮动

      1. 左浮动：在父容器中从左往右排列

      2. 右浮动：在父容器中从右往左排列

    3. 特性一：浮动的元素原本在结构中的位置消失，也叫做文档流中的位置消失

    4. 特性二：文本会环绕在浮动的元素周围

    5. 带来的问题

      1. 父容器高度塌陷

        1. 解决方法：

          方法一：直接设置高度, 极不推荐，不能灵活适应子元素高度变化             方法二：给父元素设置溢出隐藏 ，不推荐overflow: hidden;形成BFC区域 方法三：在浮动元素的最后，父容器的内部放一个空的块级元素，给这个元素设定clear: both;属性，截停浮动，不太推荐，无意义的结构代码会造成代码冗余                                                                                                         方法四：给父容器这是伪元素选择器，原理与方法三一样                               
          .box::after{
            /* 内容属性必须写 */
            content: "";
            /* 模拟出来的伪元素都是行内类型的元素，要把它变成块级的 */
            display: block;
            clear: both;
            /* 元素隐身 :作用是防止内容里放入东西占位，避免元素显现出来*/
            visibility: hidden;
            height: 0;
        }

字体引入

第一步：下载字体文件，放在项目里

第二步：使用@font-face引入字体文件及命名

如：

@font-face {

            font-family: kai;

            src: url(./字体.ttf);

        }

第三步：设置字体

如：

 p {

            font-family: kai;

        }

动画入门

关键帧动画:变化的本质属性取值的变化，载体:整段动画过程的时间

方法:通过0%-100%中关键节点也就是关键帧的属性设置﹐从而规定了一段动画规则

第一步:制定关键帧动画规则 自定义动画规则名称

 @keyframes run {

            0% {

                width: 100px;

            }

            50% {

                width: 1000px;

            }

            100% {

                width: 100px;

            }

        }

 注意：0%===from； 100%===to； 但是不建议和中间的百分数混用

第二步：使用动画属性引入动画规则，并设定相关参数

参数取值：动画规则的名称  执行一次动画需要的时间  运动曲线  执行次数（infinite是无限次）

animation: run 1s linear 3;

精灵图的使用

第一步：插入图片

 background-image: url(./img/spirit-v8.png);

第二步：图片移动位置

 background-position: 0 -8px;

当元素的大小和背景图标的尺寸不是1：1时，用background-size将精灵图的宽高缩放，使小图标的尺寸和元素大小一致

同时，位移值也要缩放相同比例

运动曲线  

end表示前一阶段的最后一帧；start表示后一阶段的第一帧

animation: name duration timing-function delay iteration-count direction fill-mode;

    animation-name: ; 动画名称

    animation-duration: ;  动画执行时间

    animation-timing-function: ;  运动曲线，linear是匀速

    animation-delay: ;  动画开始时间，单位可以是秒（s）或毫秒（ms），负值表示延迟，

    animation-iteration-count: ;  动画执行次数，一个数字，定义应该播放多少次动画；                                                             infinite指 播放无限次

animation-direction: ;  规定动画执行的方向

normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次正向播放，在偶数次反向播放。

alternate-reverse 动画在奇数次反向播放，在偶数次正向播放。

animation-fill-mode:backwards ;  规定动画不播放时（规定延迟开始时和动画结束后这两                                                           个时间段保持的样式，是否是动画的开始和结束帧

backwards:开始时保持第一帧

forwards：结束时保持最后一帧

both动画遵循forwards和backwards的规则。也就是说，动画会在两个方向上扩展动画属性。

animation-play-state:paused ;  控制动画运行或暂停

 暂停实例 

线性渐变

最基础的渐变，至少写两个颜色值，默认的渐变方向是上——下

.a1 {

            background-image: linear-gradient(red, blue);

        }

不设度数时默认方向是上——下，设度数时默认方向是下——上

.a2 {

            background-image: linear-gradient(-45deg, red, blue);

        }

to right top:渐变到右上角（蓝色在右上角）

.a3 {

            background-image: linear-gradient(to right top, red, blue);

        }

前后设定范围一样时才会出现明确的界限，不一样时是渐变

.a8 {

            background-image: linear-gradient(pink 30px, blue 30px, blue 100px, red 100px);

        }

复合写法时用逗号隔开

 .a10 {

            background-image: linear-gradient(rgba(255, 192, 203, 0.463) 30px, rgba(0, 0, 255, 0) 30px, rgba(0, 0, 255, 0) 100px, rgba(255, 0, 0, 0.443) 100px), linear-gradient(to right, orange 50px, rgba(0, 0, 255, 0) 50px, rgba(0, 0, 255, 0) 150px, hotpink 150px);

        }

文字颜色渐变

第一步：设置背景颜色渐变

 background-image: linear-gradient(to right, rgb(47, 47, 170), rgb(86, 177, 234), rgb(47, 57, 170));

第二步：文本裁切，只保留字后面的背景颜色

 -webkit-background-clip: text;

第三步：将文字设置为透明色

 color: transparent;

动效渐变按钮模板的使用

从网站上复制模板；依据模板创建类名；设宽高

径向渐变

 .a1 {

            background-image: radial-gradient(red, pink, blue);

        }

颜色默认均分渐变距离

改变渐变的起始点：at x坐标 y坐标

.a2 {

            background-image: radial-gradient(at 50% 20%, red, pink, blue);

        }

径向渐变在长方形中默认是椭圆形（主要看宽高）

    .a3 {

            width: 200px;

            height: 300px;

            background-image: radial-gradient(red, pink, blue);

        }

设定椭圆形渐变为圆形：circle

.a4 {

            width: 200px;

            height: 300px;

            background-image: radial-gradient(circle, red, pink, blue);

            background-image: radial-gradient(circle at 50% 20%, red, pink, blue);

        }

重复性径向渐变（靶子）

 .a6 {

            background-image: repeating-radial-gradient(blue 0px, blue 10px, #fff 10px, #fff 20px);

            border-radius: 50%;

        }

前面没有at的一对数字，指的是限定了渐变的区域

 .a9 {

            background-image: radial-gradient(30px 30px, red, blue, pink);

        }

弹性盒

设置弹性盒子

   display: flex;

此时，弹性容器中的子元素（只有亲子元素），就都变成了弹性项目

容器属性

1、设置主方向

flex-direction: column;

弹性项目跟随主方向排列

    row：默认值，从左到右

    row-reverse：从右到左

    column：从上到下

column-reverse：从下到上

2、设置弹性项目在主方向上的对齐方式，也可以是分配主方向上的剩余空间的设置

justify-content: flex-start;

center：将项目都居中对齐

flex-end：将项目在主方向的结束位置对齐（flex可有可无）

flex-start:在主方向的开始位置对齐（flex可有可无）

space-evenly：所有的项目之间以及左右两边均分主方向上的剩余宽度

space-around：将主方向上剩余的宽度平均分给每个项目的左右两边

space-between：项目两端对齐，中间平均分配剩余宽度

3、控制行在侧方向的对齐

align-items: stretch;

stretch：默认值，项目在侧方向上没有设置尺寸时，会自动把侧方向空间占满（前提是没有设置align-content）

flex-start：将一行内容对齐侧方向的开始位置

flex-end：将一行内容对齐侧方向的结束位置

center：侧方向上居中对齐

4、控制项目多的时候是否能折行

flex-wrap: wrap;

nowrap:默认值，不换行

wrap：允许换行

5、一个复合写法，结合了两个属性，将flex-direction: column; flex-wrap: wrap;合并

flex-flow: column wrap;        

6、分配侧方向上剩余空间，可以更加灵活的控制多行之间的位置，

可以参考justify-content的取值

align-content: space-evenly;

基线对齐（按字对齐）

   只能控制自己所在的行(主方向)

align-items:baseline;

项目属性

   1、弹性项目自动填充主方向剩余空间，默认值是0，取值为几就分到几份

   flex-grow: 1;

   2、分配压力的项目属性,默认值是1,与换行冲突，不能同时设置

      分配压力也是根据宽度比例来分配的

   flex-shrink: 0;

3、设置元素在分配剩余空间之前的在主方向上的空间，默认auto

flex-basis: 1;

flex-basis: 0px;表示所有的元素都不占居主方向上的空间，则主方向上的的所有空间都会按比例分配，同时不会影响元素内容撑开的宽度

4、合并写法:排列顺序是flex-grow、flex-shrink、flex-basis；

flex: ；

flex:auto;时flex-grow: 1;flex-shrink: 1;flex-basis: auto;

flex:1;时flex-grow: 1;flex-shrink: 1;flex-basis: 0%;

flex:0;时flex-grow: 0;flex-shrink: 1;flex-basis: 0%;

5、flex-shrink实例解析

在默认没有专门改变flex-shrink取值时,各项目承担的压力比例=各项目的宽度比例2:1:1:1:1==2:1:1:1:1，所以压力被平均分成了6份,第一个分配到了2份,后面的各分配到了1份。flex-shrink: 2;设置了2之后,第一个项目,在宽度是别的项目的2倍基础上,又承担了原来的2倍压力,所以2*2=4,此时的压力分配就是4:1:1:1:1，所以压力实际被分为了8份,一份25px

 6、排列项目前后顺序，默认值是0，值越小越靠前

order: -1;

7、单独设置一个项目自己在侧方向上的对齐方式

align-self: flex-end;

HTML5 新增语义化标签（video,audio）及应用场景

a. <article> 标记定义一篇文章

b. <header> 标记定义一个页面或一个区域的头部

c. <nav> 标记定义导航链接

d. <section> 标记定义一个区域

e. <aside> 标记定义页面内容部分的侧边栏

f. <hgroup> 标记定义文件中一个区块的相关信息

g. <figure> 标记定义一组媒体内容以及它们的标题

h. <figcaption> 标签定义 figure 元素的标题。

i. <footer> 标记定义一个页面或一个区域的底部

j. <dialog> 标记定义一个对话框(会话框)类似微信

k. <video> 标记定义一个视频

l. <source> 标记定义媒体资源

m. <canvas> 标记定义图片

n. <embed> 标记定义外部的可交互的内容或插件 比如 flash

o. HTML5 的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体

    文件，极大地提升了用户体验

p. Main 主体

  • 这种语义化标准主要针对搜索引擎的

  • 这些新标签页面中可以使用多次的

  • 在IE9中，需要把这些元素转换为块级元素

  • 其实，我们移动端更喜欢使用这些标签

表单新增属性

  1. placeholder=“提示内容”，在开始输入后消失。

  2. autofocus 自动获得光标焦点，给文本框、选择框或者按钮控件加上该属性，当网页打开时该控件自动获得光标焦点，注意不要滥用，一个页面中只能有一个控件可以有该属性

  3. list 给input标签加上了list属性，取值是某个datalist标签的id值，就可以绑定该datalist标签，datalist类似于下拉列表，在使用了list属性的input标签获得把光标焦点后会datalist中的列表内容可供提示选择

     <input type="text" list="weblist">
    <datalist id="weblist">
      <!-- 和下拉列表中嵌套的是同一种标签option -->
        <option value="https://www.baidu.com/" label="baidu"></option>
        <option value="https://www.jd.com/" label="jingdong"></option>
        <option value="https://www.baidu.com/">百度</option>
    </datalist>

  4. multiple 多个输入或提交

    可以用于下拉列表多选，需要按住ctrl键使用

    也可用于多个文件提交，在选择文件时按住CTRL键可以选择多个文件

  5. required 必填项属性

  6. disabled 设置不可以被选择的项，注意区分下拉列表中和datalist中的区别，下拉列表中变灰色，datalist中直接消失

  7. pattern="[0-9]{2}[A-Z]{3}" 设定输入的内容格式在方括号中设置可以输入的类型，在大括号中设定可以输入的个数

WJ070209
关注
  • 6
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Html5 + Css3笔记详细汇总大全
weixin_50637054的博客
04-10 4107
Html5 + Css3笔记详细汇总大全
最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
m0_67401270的博客
03-07 1万+
基于黑马前端视频学习的CSS3笔记，每一天的知识点都放在一起，方便学习查阅 ==CSS第一天== 一、css简介 二、css语法规范 三、css代码风格 四、css选择器的作用 五、css基础选择器 1、标签选择器： 2、类选择器 3、多类名选择器 4、id选择器： 5、id选择器和类选择器的区别 6、通配符选择器 7、选择器总结 六、css字体属性: 1、字体大小： 2、字体粗细： 3、字体样式： 4、字体的综合写法 5、字体总结： 七、css文本属性： 1、文本颜色： 2、文本
html教程padding,HTML CSS——margin和padding的学习
weixin_42350101的博客
06-07 400
一、什么是边距CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间)。二、什么是内边距，什么是外边距代码2-1：htmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">body{margin:0px;}.test1{1...
HTML5+CSS3学习总结.docx
11-22
HTML5+CSS3学习总结.docx
HTML5+CSS、CSS3基础知识点总结
热门推荐
m0_51981718的博客
11-05 1万+
一、选择器 选择器分为基础选择器和复合选择器两大类。 基础选择器由单个选择器组成 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器（*） 标签选择器 优点 标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。 缺点 不能设置差异化样式，只能选择全部当前标签。 id 选择器与类选择器的区别 类选择器可以被多个元素调用。 id 选择器只能允许一个标签调用。 类选择器使用的较多，id 选择器用于唯一特性的标签。 基础选择器 作用 特点 使用情况 用法 标签选
HTML5+CSS3
09-17
该文档是HTML5+CSS3的总结笔记，把工作中的常用的知识点个记录下来，仅供学习和工作的参考资料，不做商业用途，版权归本人所有，侵权必究！
H5+CSS学习资料+笔记+项目资料
07-13
可能是HTML5和CSS3的学习笔记，包含了作者在学习过程中的总结和心得，对于理解和记忆相关知识非常有帮助。 总的来说，这个资料包是一个全面的前端学习资源，通过它你可以深入理解HTML5和CSS3的核心概念，同时通过...
html+css笔记总结
11-06
以下是对这两门技术的一些关键知识点的详细说明： 一、HTML基础知识 1. **HTML元素**: HTML由一系列的元素组成，每个元素都有其特定的含义，比如`<p>`代表段落，`<h1>`到`<h6>`代表标题等级。 2. **标签对**: ...
html+css笔记总结1
08-04
HTML 和 CSS 是网页设计的基础，本笔记主要涵盖了HTML和CSS的一些关键知识点，包括元素的布局、样式设置以及一些实用技巧。 1. **padding, border, margin的关系**：这三者决定了元素的尺寸和间距。`width` 和 `...
前端课堂笔记知识总结. html css的相关知识点
09-06
学习俩星期的总结，为自己写个交代
HTML5和CSS3详细总结
04-26
涉及了H5新增的一些接口API，如网络监听接口、全屏接口、拖拽接口等，H5新增语义标签，flex伸缩布局等内容，总结了H5常见常用的大部分知识。
韩顺平Web相关视频全部笔记整理（HTML/html5+css3/div+css/JS/php全套+教学全套视频）绝对全
07-24
本笔记是本人下载了无数资料整理所得包括韩顺平老师的全部笔记：HTML/html5+css3/div+css/JS/php全套+教学全套视频，已经学习完毕，经本人验证与韩顺平老师视频中一致，并且全，完整。
html css笔记
01-27
html css 笔记
HTML5+CSS笔记教程（CSS教程篇）
studhappy的博客
03-06 1434
一
前端HTML5+CSS3学习笔记
Baucd的小博客
11-17 8583
前端HTML5+CSS3学习笔记
HTML5+CSS3知识点统计~全面超详细
最新发布
qq_39804538的博客
11-28 249
align-content：子元素各行对齐方式，与主轴上的子元素的对齐方式很像，多了一个stretch拉升效果。* align-self：子元素自己侧轴对齐方式，使用方式与主轴上justify-content差不多。* flex使用后：子元素的宽度会受父元素的控制（如果空间不够，子元素的空间会被压缩）* flex-start：从主轴确定的位置开始，挨着排。* flex-end：从主轴确定的方向位置开始，挨着排。* justify-content：子元素主轴对齐方式。
HTML5+CSS3学习笔记（一）HTML5基础知识
Lindsay_jie的博客
03-02 244
一. 标题和段落 1.1 排版标签 1.1.1 标题标签：用来突出文章主题 h1~h6系列标签，重要程度依次递减，文字加粗程度减小，文字逐渐变小、并且独占一行，是一个块级标签。 1.1.2 段落标签 p标签在新闻和文章中使用，用于分段明显，段落之间存在间隙，独占一行。 1.1.3 换行标签 br单标签，让文字强制换行显示。 1.1.4 水平线标签 hr单标签实现在页面中显示一条直线，主题分割线 2.1文本格式化标签 需要让文字加粗、下划线、倾斜、删除线等效果 标签 说明 strong 加粗
HTML5+CSS3学习笔记（二）CSS3基础知识
Lindsay_jie的博客
03-04 217
一. 基础认知 1.1 CSS引入方式 1.1.1 内嵌式：CSS写在style标签中 提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中 1.1.2 外联式：CSS写在一个单独的.CSS文件中 提示：需要通过link标签在网页中引入 <link rel="stylesheet" href=" "></link> 1.1.3 行内式：CSS写在标签的style属性中，不推荐使用 二. 基础选择器 1.1 标签选择器：以标签命名的选择器 结构：标签名{
定义一个简单的CSS3动画
weixin_46236141的博客
02-23 666
通过CSS3，我们无需javascript也可以创建一些简易的动画效果，下面我们来看一下相关的属性和规则。 CSS3 animation属性 通过animation属性，我们可以给元素附加动画效果及样式，下表列出了animation属性的值： 属性 功能 animation-name 定义动画的名称 animation-duration 定义动画运行一个周期花费的时间 an...
html5和css笔记.docx
04-09
这是我做的一点关于html5和css3 一部分相关知识点的总结，分享给诸君观赏还有学习，有更好的建议可以提出来哦~

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值