Java复习打卡day31

最新推荐文章于 2024-08-27 17:35:37 发布

weixin_51630304

最新推荐文章于 2024-08-27 17:35:37 发布

阅读量43

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_51630304/article/details/115566119

版权

Java复习打卡day31

html框架标签
html多媒体标签
CSS

html框架标签

html标签

html框架标签
    html的框架标签就是iframe标签，下面是他的一些属性值：
        src：框架显示的页面的URL路径
        name：该框架的名称
        iframeborder：外围的宽度
        width：框架的宽度
        height：框架的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>html标签 -- 框架标签</h1>
    <ul>
        <li><a href="./a.html" target="iframe">a.html</a></li>
        <li><a href="./b.html" target="iframe">b.html</a></li>
        <li><a href="./c.html" target="iframe">c.html</a></li>
    </ul>

    <iframe src="./e.html" frameborder="4" width="600" height="700" name="iframe"></iframe>
</body>
</html>

html多媒体标签

html多媒体标签
    html多媒体标签很多，这里我将介绍三类：
        1.音频标签：audio
        2.视屏标签：video
        3.动画标签：embed
    使用方法请见代码展示(非常抱歉，笔者上不会在电脑上面下载视频等文件，大家自己看看吧~~，基本的代码结构已经给到大家了)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>html标签 -- 多媒体标签</h1>
    <audio src=""></audio>
    <video src=""></video>
    <embed src="" type="">
</body>
</html>

CSS

CSS简介

CSS学习
    1.首先在学习CSS之前你必须先学会：
        HTML/XHTML.
    ------------------------------------------------------------------------
    2.CSS 简介：
        1.CSS指的是层叠样式表（Cascading Style Sheets）
        2.样式定义如何显示控制html元素，实现美化HTML页面的功能。
        3.样式通常存储在样式表中。
        4.外部样式可以显著的提升代码编写的效率。
        5.层叠样式可统一，外层样式会被内层样式覆盖。
    ------------------------------------------------------------------------
    3.CSS的样式层叠次序：（从上往下优先级增加）
        1.浏览器缺省设置：意思是有些浏览器对一些element本身就已经设置了一些通用的css属性，比如说input file这个element在Firefox和Chrome就不一样
        2.外部样式表
        3.内部样式表
        4.内联样式表
        上面的次序表明4的优先权最高，也就是说，挡确定了字体的颜色为红色的时候，
    不管1,2,3是怎么设置的，字体颜色都按照红色显示。

CSS基础语法

  4.CSS基础语法：选择器{属性：值；属性：值；属性：值……}
        （注：最后一个分号可加可不加。）
      CSS的注释：只有一种形式：/*注释的部分*/

CSS使用方式

5.CSS的使用
        如何插入样式表？
            插入样式表的方式有三种：
                1.外联样式表(External style sheet)
                2.内部样式表(Internal style sheet)
                3.内敛样式表(Inline style sheet)
        1.外部导入方式（外部链入）
            （推荐）在head标签中导入一个css文件，再作用于本文件，实现css样式设置
            两种导入方式：
                1.形如：<link href="css文件的URL地址" type="text/css" rel="stylesheet"/> 
                2.形如：<style>
                            @import "文件的URL路径 ";注意要加分号。
                        </style>
        2.内部方式（内嵌样式）
            在head标签中使用<style type="text/css">在这个区域里面设置css样式<style>
            方式特点：作用于整个页面。
        3.内联方式（行内样式）
            在html标签中使用style属性来设置css样式，形如：
                <html 标签 style="属性：值；属性：值……">被修饰的内容</html标签>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--外部导入方式-->
    <!-- <link rel="stylesheet" href="./a.css" type="text/css"/> -->
    <!--这里使用的标签是link标签，rel属性的含义应当是具体的例子来定，上面那行代码表明传入的文件是一个样式表文件-->
    <style>
        @import "./a.css";
    </style>
    <style>
        h1{color: green; background-color: greenyellow; font-size: 67;font-family: '宋体';}
    </style>
    <!-- 这是内部方式实现css样式设置 -->
</head>
<body>
    <h1>CSS的三种插入方式</h1>
    <ul>
        <li>CSS指的是层叠样式表（Cascading Style Sheets）</li>
        <li>样式定义如何显示控制html元素，实现美化HTML页面的功能。</li>
        <li>样式通常存储在样式表中。</li>
        <li style="color: blue; font-style: italic; font-weight: 400; font-size: unset;">外部样式可以显著的提升代码编写的效率。</li>
        <!-- 这是内联方式 -->
    </ul>

</body>
</html>

CSS常用选择器和不常用选择器

    6.常见的选择器：（css2 有的选择器）
        (1).html标签：html标签作为选择器
        (2).class：class值作为选择器
        (3).id：id值作为选择器
        (4).关联选择器：形如table a(表明table标签下的a标签才会使用此样式)
        (5).伪类选择器：
            -a:link{color:#F000FF;text-decoration:none}/*未访问的链接*/
            -a:visited{color:#00F0FF;text-decoration:none}/*访问过的链接*/
            -a:hover{color:#FFF0FF;text-decoration:underline}/*鼠标在链接上*/
            -a:active{color:#FFFFFF;text-decoration:underline}/*激活链接*/
        (6).组合选择器：形如选择器1，选择器2，选择器3,，……{}表明选择器1,2,3……都使用此样式。
    不常见的选择器（css3 才有的选择器）（要求熟悉）
        (1).关系选择器
            div>p选择div元素后面的所有子元素
            div+p选择紧贴着div的兄弟元素
            div~p选择div后的所有兄弟元素
        (2).属性选择器
            [attribute]包含attribute属性的元素使用该css样式
            [attribute=value]包含attribute属性,并且attribute值等于value的元素使用该css样式
            [attribute~=value]包含attribute属性，并且属性值为用空格分隔的字词组，并且之中包含value的元素使用该css样式
            [attribute|=value]包含attribute属性，并且属性值为用-分隔的字词组，并且之中包含value的元素使用该css样式
            [attribute$=value]包含attribute属性，且值以value结尾的元素使用该css样式
            [attribute^=value]包含attribute属性，且值以value开头的元素使用该css样式
            [attribute*=value]包含attribute属性，且值中含有value的元素使用该css样式
        (3).结构伪类选择器
            ::first-letter设置文本的第一个字符的样式
            ::first-line设置文本的第一行的样式
            :before设置在对象前（按照逻辑发生的次序）发生的内容
            :after设置在对象后（按照逻辑发生的次序）发生的内容
            :lang匹配需要是用特殊语言的元素
            :first-of-type匹配同类型中的第一个同级兄弟元素
            :last-of-type匹配同类型中的最后一个同级兄弟元素
            :only-of-type匹配同类型中的唯一一个同级兄弟元素
            :only-child匹配父元素仅有的一个兄弟元素
            :nth-child(n)匹配父元素的第n个子元素（重点）
            :nth-last-child(n)匹配父元素的倒数第n个子元素
            :first-child匹配父元素的第一个子元素（重点）
            :last-child匹配父元素的最后一个子元素（重点）
            :root匹配元素在文档的根元素，在html文件里，根元素永远是HTML
            :empty匹配没有任何子元素的元素
        (4).状态伪类选择器
            :link设置未被访问时状态
            :visited设置访问过后的状态
            :hover设置鼠标悬停时的状态（重点）
            :active设置激活元素后的状态
            :focus设置元素在其获取焦点时的状态（重点）
            :target匹配相关URL指向的元素
            :enable匹配用户页面上处于可用状态的元素
            :disable匹配用户界面上处于禁用状态的元素
            :checked设置元素处于选中状态的样式
            :not(selector)匹配不含有selector选择器的元素
            ::selection设置对象被选时的样式
        (5).其他选择器
            不太重要，这里不列举了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 常见选择器 */
        h1{color: blue;font:500;}
        table li{color:rgb(226, 41, 41);font: 400;font-family: '楷体';}
        .class{color:rgb(14, 13, 11);font-weight: 400;}
        .class0{color: rgb(31, 196, 31);font-family: 'Courier New', Courier, monospace;}
        #l{color: red;}
        #l,.class,h2{color:sandybrown;font-size: larger;}
        a:link{color: yellow;text-decoration: none;}
        a:visited{color: purple;text-decoration: none;}
        a:hover{color: red;text-decoration: underline;}
        a:active{color: blue;text-decoration: underline;}
        /* 不常见选择器 */
        div>li{color: tomato;font-size: small;}
        div~span{color: turquoise;font-size: x-large}
        div+span{color: thistle;font-size: xx-large;}
        [target="myiframe"]{color: turquoise; font-size: xx-large;}
        [id^=aa]{color: orange; font-size: larger;}
        :nth-child(1){color:greenyellow;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}
        :not(h1){color: blueviolet;font-weight: 400;}
        :link{color: brown;font-size: medium;}
        :hover{color: brown; font-size: larger;}
        :focus{color:cadetblue;font-weight: bold;}
    </style>
</head>
<body>
    <h1>CSS常见选择器和不常见选择器使用方法介绍</h1>
    <table>
        <ul>
            <li class='class'>html标签：html标签作为选择器</li>
            <li class='class0'>html标签：html标签作为选择器</li>
            <li class='class0'>html标签：html标签作为选择器</li>
            <li class='class0'>html标签：html标签作为选择器</li>
        </ul>
    </table>
    <table>
        <ul>
            <li class='class0'>class：class值作为选择器</li>
            <li class='class'>class：class值作为选择器</li>
            <li class='class'>class：class值作为选择器</li>
            <li class='class' id="l">class：class值作为选择器</li>
            <li class='class'>class：class值作为选择器</li>
        </ul>
    </table>
    <table>
        <ul>
            <li><a href="./a.html" target="myiframe">刚学网页</a></li>
            <li><a href="./b.html" target="myiframe">入门网页</a></li>
            <li><a href="./e.html" target="myiframe">注册网页</a></li>
        </ul>
    </table>
    <iframe src="./image.jpg" frameborder="4" width="700" height="1200" name="myiframe"></iframe>
    <h2 id="l">我是来凑数的</h2>
    <h2>我是来凑数的</h2>
    <h2>我是来凑数的</h2>
    <h2>我是来凑数的</h2>
    <h2>我是来凑数的</h2>
    <table>
        <ul>
            <div>
                <li>aaaaaaa</li>
                <li id="cc ee gg">aaaaaaa</li>
                <li id="aa bb">aaaaaaa</li>
                <li id="aa-bb">aaaaaaa</li>
            </div>
            <span>
                <li>bbbbbbb</li>
                <li>bbbbbbb</li>
                <li>bbbbbbb</li>
                <li>bbbbbbb</li>
            </span>
            <span>
                <li>bbbbbbb</li>
                <li>bbbbbbb</li>
                <li>bbbbbbb</li>
                <li>bbbbbbb</li>
            </span>

        </ul>
    </table>
</body>
</html>

weixin_51630304

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java复习打卡day31

Java复习打卡day31html框架标签html多媒体标签CSSCSS简介CSS基础语法CSS使用方式CSS常用选择器CSS关系和属性选择器CSS伪类选择器html框架标签html多媒体标签CSSCSS简介CSS基础语法CSS使用方式CSS常用选择器CSS关系和属性选择器CSS伪类选择器...
复制链接

扫一扫