H5C3—入门第二节

最新推荐文章于 2024-10-18 19:19:52 发布
最新推荐文章于 2024-10-18 19:19:52 发布
阅读量85 收藏
点赞数 1
文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dcwal/article/details/132288107
版权

1. CSS3的兼容情况

  • Webkit引擎浏览器使用“-webkit-”作为私有属性，像Safari和Chrome浏览器。

  • Gecko引擎浏览器使用“-moz-”作为私有属性，像Firefox浏览器。

  • Presto引擎浏览器使用“-o-”作为私有属性,像Opera浏览器。

  • Trident引擎浏览器使用“-ms-”作为私有属性，只有IE8以上支持,像IE浏览器

2.1 选择相邻兄弟(+)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 相邻兄弟选择器  +  */
        span+div {
            color: red;
        }
    </style>
</head>

<body>
    <div class="content">
        <span>哈哈</span>
        <div>你好</div>
        <span>今天天气不错</span>
    </div>
</body>

</html>

2.2 匹配选择器(~)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 匹配选择器 ~ */
        /* 位于div后面的所有span */
       div ~ span{
           color: red;
       }

      .content div~span{
          color: springgreen;
      }
    </style>
</head>
<body>
    <div class="content">
        <span>123</span>
        <span>123</span>
        <span>123</span>
        <span>123</span>
        <div>哈哈哈</div>
        <span>123</span>
    </div>
    <div class="content1">
        <span>123</span>
        <span>123</span>
        <div>哈哈哈</div>
        <span>123</span>
    </div>
</body>
</html>

2.3 属性选择器(重点)

CSS3新增加了属性选择器，使选择器引入了通配符的概念。这3中常用的属性选择器如下所示：

选择器描述
[attribute]用于选取带有指定属性的元素。
[attribute=value]用于选取带有指定属性和值的元素。
[attribute^=value]匹配属性值以指定值开头的每个元素。
[attribute$=value]匹配属性值以指定值结尾的每个元素。
[attribute*=value]匹配属性值中包含指定值的每个元素。
[attribute~=value]用于选取属性值中（包含）指定词汇的元素，还可以空格为分隔符。
[attribute|=value]用于选取带有以指定值（开头）的属性值的元素，还可以连字符为分隔符。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       [title]{
           color: red; /*睡觉还看电视*/
       }

       [class="box"]{
           color: aqua; /*哈哈*/
       }
       [class^="box"]{
           font-weight: bold;
       }
       [class$="2"]{
           font-style: oblique; /*睡觉还看电视  大框架*/
       }

       [class*="x"]{
           color: saddlebrown; /*所有*/
       }

       [class~="box2"]{
           color: orange;/*睡觉还看电视  大框架*/
       }

       [class|="box"]{
           font-family: "华文彩云";/*哈哈 啦啦啦啦*/
       }
    </style>
</head>
<body>
    <div class="box">哈哈</div>
    <div class="box1">霓虹</div>
    <div class="box pc">懒蛋</div>
    <div class="box2" title="">睡觉还看电视</div>
    <div class="box box2">大框架</div>
    <div class="box box123">烧仙草</div>
    <div class="box box-data">额外热</div>
    <div class="box2-box-data">额外热</div>
    <div class="box-box-data">啦啦啦啦</div>
</body>
</html>

2.4 结构性伪类选择器

结构性伪类选择器是CSS3中新增加的类型选择器。常用的的结构性伪类选择器如下所示：

2.4.1 整体结构类型

  • :first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

  • :last-child 匹配的是某父元素的最后一个子元素，可以说是结构上的最后一个子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .content h1:first-child{
          color: springgreen;/*雨过天晴*/
      }

      .content h1:last-child{
          color: pink;  /*h1中的最后一个*/
      }

    </style>
</head>
<body>
    <div class="content">
        <h1>雨过天晴</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
    </div>
    <div class="content">
        <p>哈哈哈哈哈哈哈哈</p>
        <h1>雨过天晴</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
    </div>
</body>
</html>

2.4.2 标签结构类型

  • :first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

  • :last-of-type 匹配某个父元素中最后一个某一类型的元素。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

      .content h1:first-of-style{
          color: springgreen;/*雨过天晴*/
      }

      .content h1:last-of-style{
          color: pink;  /*h1中的最后一个*/
      }
    </style>
</head>
<body>
    <div class="content">
        <h1>雨过天晴</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
    </div>
    <div class="content">
        <p>哈哈哈哈哈哈哈哈</p>
        <h1>雨过天晴</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
        <h1>阳光总在风雨过</h1>
    </div>
</body>
</html>

2.4.3 指定子元素的序号

  • :nth-child(n) 对指定序号的子元素设置样式（从前往后数）。参数可以是数字（1、2、3）、关键字（odd、even）、公式（2n、2n+3 :使用公式时,n从0开始），参数的索引起始值时1，而不是0。

    .content p:nth-child(2n){
            font-family: "华文彩云"; /*在p标签中偶数改变字体家族*/
        }

  • :nth-last-child(n) 对指定序号的子元素设置样式（从后往前数第几个）。参数同上。

  • :nth-of-type(n) 匹配指定序号的同一种类型的子元素（从前往后数第几个）。参数同上。

  • :nth-last-of-type(n) 匹配 指定序号的同一种类型的子元素（从后往前数第几个）。参数同上。

2.4.4 其他伪类选择器

  • :root：将样式应用到页面的根元素中。root选择器就是将样式应用到根元素中。在整个HTML页面中，指的就是整个“html”部分。(内容改变样式)

  • :empty 指定当元素内容为空白时使用的样式。(为没添加内容的标签添加样式)

  • :not(selector)排除selector选择器选中的元素，不对它们应用样式解析。(去除所有与给定选择器匹配的元素，返回元素集合)

  • :target 对页面中某个target元素指定样式，该样式只在用户单击了页面中的链接，并且跳转到target元素后生效。(跳转之后才有反应)

2.5 文本选择伪元素

  • ::selection指定当前元素处于选中状态部分的样式。

2.6 表单中使用的状态伪类选择器

  • :disabled 指定当前元素处于不可用状态时的样式。(元素不可用时的样式)

  • :enabled 指定当前元素处于可用状态时的样式。(改变当前元素样式)

  • :checked 指定表单中单选框或复选框处于选中状态时的样式。

权重回顾

0,0,0,0

css的权重:行内样式,ID选择器,类选择器,标签

!important > 行内样式>ID选择器 > 类选择器|伪类|属性选择器 > 标签> 通配符 > 继承 > 浏览器默认属性

2.7 内容追加伪元素

  • ::before:向当前的元素前面追加内容(创建一个伪元素，其将成为匹配选中的元素的第一个子元素)

  • ::after:向当前的元素内容后面追加内容(创建一个伪元素，作为已选中元素的最后一个子元素)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .content:before{  /*添加到前面*/
          content: "欢迎来到这里";
          background-color: pink;
      }
      .content:after{  /*添加到后面*/
          content: "下次再来";
          background-color: pink;
      }
    </style>
</head>
<body>
    <div class="content">
        哈哈哈哈
    </div>
</body>
</html>
注意：

:before和::before写法的区别

  • 相同点

1.都可以用来表示伪类对象，用来设置对象前的内容，:before和::before写法是等效的

2.伪类对象要配合content属性一起使用

3.伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入

4.所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，

  • 不同点

    :before是css2的写法，::before是css3的写法，在H5开发中建议使用::before比较好。

伪元素和伪类区别

  • 伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

  • 伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。

2.8 JS新增的选择器（重点）

  • querySelector();获取标签

  • querySelectorAll();获取所有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="content">
        <div class="box"></div>
        单选按钮:<input type="radio">
    </div>
    <div class="box2">
        <h3>1234567890</h3>
        <h3>1234567890</h3>
        <h3>1234567890</h3>
        <h3>1234567890</h3>
        <h3>1234567890</h3>
    </div>
    <script>
    // querySelector();//获取标签
      var box=document.querySelector(".box");//<div class="box"></div>
      console.log(box);
      
      //获取表单
      var input=document.querySelector("[type='radio']");
      console.log(input); //<input type="radio">

    // 获取所有h3
      var _h3=document.querySelectorAll('h3');
      console.log(_h3);
      
    </script>
</body>
</html>

3. CSS3新增样式属性

3.1 background-image多重背景

在CSS3中可以在一个元素里显示多个背景图像，还可以将多个背景图像进行重叠显示(之间用逗号隔开)。（最后写在最下面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .box{
          width: 500px;
          height: 500px;
          border: 1px solid aqua;
          background-image: url(./a.jpg),url(./2a.jpg),url(./bj.jpg);/*可以获取多张图片*/
          background-repeat: no-repeat;
          background-size: 150px 150px;
          background-position: 0px 0px,center center,right bottom;
      }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

3.2 background-image的渐变

background-image: linear-gradient(方向,颜色1, 颜色2，...);

#grad {
  background-image: linear-gradient(to bottom right, red , yellow);
}
#grad {
  background-image: linear-gradient(to right, red , yellow);
}

3.2.2 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            /* 径向渐变 */
            width: 200px;
            height: 200px;
            /* background-image: radial-gradient(circle, red, yellow, green); */
            /* background-image: radial-gradient(black,white); */
            /* background-image: radial-gradient(circle, black, white); */
            background-image: radial-gradient(#00FFFF, #00FA9A, #000000);
        }
    </style>
</head>

<body>
    <div class="content"></div>
</body>

</html>

暗香盈袖@
关注
css高级技巧&h5新特性&c3新特性
m0_58425326的博客
06-04 289
因为在网页中我们经常要用到大大小小的一些图像，每获取一张图像就要浏览器向服务器发送一次请求，而当我们需要的图像较多时，就会频繁的向服务器发送请求，这时候服务器的压力就会过大。以前我们盒子都是用div表示，如果我们想表示一个页面的头部，也只能<div class=“header”>,但在h5我们可以用<header></header>等这样的标签来表示页面头部，导航栏，页面底部等…以后尽量把每天学习的内容都做成笔记，养成好习惯，接下来就是项目品优购了，让我感觉比这些枯燥的知识点有意思多了，冲！
web入门之H5C3
weixin_43079274的博客
05-09 597
HTML5新特性 概述 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 语义化标签 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div> <div class=“nav”> </div> <div class=“con
h5c3从入门到精通day02
m0_75016516的博客
08-14 119
径向渐变由它的中心定义。
第一天H5+C3学习《》
weixin_58459702的博客
07-08 133
day1：h5+css3基础第一天
复习H5 + C3
海棠的博客
02-07 713
【尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频】
H5+CSS+JavaScript入门学习
qq_40575302的博客
08-02 2560
第一部分 H5 1.认识HTML <!--使用html规范--> <!DOCTYPE html> <html lang="en"> <!--网页头部--> <head> <!--meta用于描述标签，用来描述网站的一些信息--> <meta charset="UTF-8"> <meta name="keywords" content="HTHL5"> <meta name="
你必须拿捏的h5+c3特性
热门推荐
Jdoit CW的博客
06-12 1万+
内容 什么是HTML5 HTML5新增标签 HTML5新增表单元素属性 CSS3结构选择器 CSS3结构伪类选择器 CSS3伪元素 CSS3-2D转换（translate） CSS3-2D转换（rotate、scale) 2D转换的案例 CSS3-动画的使用 CSS3-动画的属性 动画的案例 一：什么是 HTML5 HTML5 的概念与定义 定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 两个概念： 是一个新版本的 HTML 语言，定
28节---------3月30日-----H5C3开端
Z933143298的博客
03-29 1316
网页 网页是构成网站的基本元素，它通常由图片，链接，文字，声音，视频等元素组成。后缀常为.htm或.html，俗称为html文件。 HTML指的是超文本标记语言，标签语言是一套标记标签。 web标准的构成 结构：对网页元素进行分类整理（HTML） 表现：设置网页元素的板式，颜色，大小等外观（CSS） 行为：网页模型的定义及交互（JavaScript,简称JS） 分类 HTML标签都放在<>里，大多是成对出现 双标签：开始标签<html>，结束标签</html&g
算法竞赛入门经典（第二版） 答案汇总（持续更新）
宝付支的博客
06-15 8339
大佬们，更不动了啊，真的没时间啊 第二章 习题2-1 水仙花数（ daffodil） 输出   输出100～ 999中的所有水仙花数。 若3位数ABC满足ABC＝ A3＋ B3＋ C3， 则称其为水仙花 数。 例如153＝ 13＋ 53＋ 33， 所以153是水仙花数。     # include &lt;iostream&gt; using namespace std; i...
Excel快速入门
10-05
A:H,2,FALSE)`在原始数据的A到H列中查找与B3匹配的值，并返回对应第2列的值。参数`range_lookup`设为`FALSE`要求查找列必须有序。 掌握这些基本的引用和函数运用，能极大地提升Excel的使用效率，为数据分析和报告...
前端知识入门
codeprinter的博客
07-23 299
前端学习 学习路线 **HTML5基础 **： 主要学习最常见的没有兼容性的HTML标签 CSS3基础：没有兼容性的CSS样式，利用其那面学习的标签来完成传统的WEB网页布局 H5C3提高:学习新增的HTML标签、CSS样式。 ** Java Script入门**：变量、数据类型、常用函数等 HTML相关知识 网页 网站：指在因特网上根据一些规则，使用HTML的制作的用于展示特定内容的网页集合 网页：网站中的一“页”，通常是HTML文件，它要通过浏览器来阅读 网页是构成网站的基本元素，通
C语言程序设计 翁恺 中M2020春C入门练习第I段——变量、表达式、分支、循环 （2021/09/25 更新：AC代码 翻新至78题）
qq_38977714的博客
08-28 3366
入门练习第一段：变量、表达式、分支、循环 第一段：变量、表达式、分支、循环 重要的话说三遍 #include <stdio.h> int main(){ int i; for(i=0;i<3;++i) { printf("I'm gonna WIN!\n"); } return 0; } I Love GPLT #include <stdio.h> int main(){ printf("I\n \nL\no\nv\ne\n \nG\nP\nL\nT\
前端HTML与CSS入门-一份媲美黑马培训班2万学费的知识干货
前端从0到100000
08-15 731
前端HTML与CSS入门-一份媲美黑马培训班2万学费的知识干货 **1. HTML部分 2. CSS部分** 什么是HTML? 一:Html学习开始之前的知识铺垫: 初识HTML HTML的定义 何为"超文本" 何为"标签" 标签的并列与嵌套 单标签与双标签 何为"元素" 元素的属性与键值对 初识浏览器 前端开发常见的浏览器 浏览器的内核 网页与网站 字符编码 从写代码到浏览器展示页面之间,到底发生了什么? 第一步:将你写的
PAT 甲级-入门模拟
华鑫的学习记录
08-18 598
阅读原文 当时准备 PAT 竞赛时候，买了本《算法笔记》，书中将题型进行分类，是我最系统的一次算法学习，对题型判断、解题思路都有了新的认知，本篇文章主要记录当时刷的入门模拟题，算是比较简单的算法题（有些都不能称之为算法），就当是打基础了 包括分类：简单模拟、查找元素、图形输出、日期处理、进制转换、字符串处理 简单模拟 思想解释 根据题目的要求去做即可，主要考察代码的编写能力 类型练习 1042 题目：Shuffling Machine Shuffling is a procedure used to ra
HTML第一次作业
最新发布
qq_74541296的博客
10-18 144
制作一个表格表单相结合的网页。
使用Java实现PDF到HTML的转换
从改变自己开始
10-15 841
由于网上也有大量解析方法，但是适合自己的才是最好的，这里重点讲一个踩坑的，开始我通过com.spire.pdf.PdfDocument/3.9.0方式在本地解析成功了，但是发布到测试环境却解析报错，估计是版本低导致被发现了，后面通过升级版本后不报错了，但是因为包含表格又只能解析前面三页或者除了表格的那两页，其他都能解析出来。但是奈何需求没有那么简单，我的PDF是包含表格，且表格里的内容有残次不齐竖着的文本，而且还要去除首页内容，所以我这次用的方式是现将PDF截取首页后重新生成PDF，然后再转换成HTML。
前端学习---(1)HTML
Fuly的博客
10-18 163
span标签：和div的作用一致，但不换行。span只是文本级的标签 span里面只能放置文字、图片、表单元素。span里面不能放p、h、ul、dl、ol、div。不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。超文本: 图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。div标签：可以把标签中的内容分割为独立的区块。HTML 不是一种编程语言，是一种描述性的标记语言。
.net 根据html的input type=“week“控件的值获取星期一和星期日的日期
代码笔记
10-18 165
.net 根据html的input type="week"控件的值获取星期一和星期日的日期 说明： ①我选中了week控件的：第42周(即2024年的第42个周，值为：2024-W42，格式为：yyyy-WW) ②截取字符串，获得年：2024，和年度第几周：42，开始计算日期，见js部分 ③计算获得：第42周的，星期一是“2024-10-14”，星期日是“2024-10-20” ④传递着两个日期值到MVC后台，对数据库进行日期范围的SQL查询
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值