css3基础

最新推荐文章于 2024-06-13 09:45:33 发布
最新推荐文章于 2024-06-13 09:45:33 发布
阅读量47 收藏
点赞数
文章标签： css javascript firefox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66107214/article/details/126239924
版权

1、什么是css3?

  • 是css技术的升级版本，在css2的基础上，新增了许多特性，弥补了css2的不足，使web页面的开发变得更加高效、便捷

  • css3按模块化进行设计，比较重要的css3模块包含、 选择器、框模型、背景和边框、文本效果、2D|3D转换、动画、多列布局、用户界面

  • css3优点: CSS3是完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。

2、浏览器的私有前缀（兼容性前缀）

  • 有些css3的属性还只是最新版的预览版，还没有正式发版, 没有形成标准,只是某些浏览器的专属属性 ,就需要加前缀

  • 当一个属性或规则成为标准，并被主流浏览器的最新版普遍兼容的时候，可以去掉私有前缀

  • 书写顺序：先写私有css属性，然后再写标准css属性

  • 为了兼容老旧版本的浏 览器我们要写以下代码：

  • 浏览器、内核、私有前缀

    浏览器内核私有前缀
    chrome、safariwebkit-webkit-
    OperaPresto-o-
    FirefoxGecko-moz-
    IETrident-ms-

  • Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

  • autoprefixer

    • 在vscode中安装autoprefixer插件

    • 在外部的css文件中书写相关属性和属性值

    • 按下F1，选择autoprefixer:Run，之后会在css文件中添加私有前缀

    • 注意：若快捷键冲突，点击fn+f1

    input::-webkit-input-placeholder {
    color: tomato;
}
​
input::-moz-placeholder {
    color: tomato;
}
​
input:-ms-input-placeholder {
    color: tomato;
}
​
input::-ms-input-placeholder {
    color: tomato;
}
input::placeholder {
    color: tomato;
}
​
​
.box1 {
    width: 100px;
    height: 100px;
    background-color: tomato;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
}

3、新增选择器

1）属性选择器

  • css2属性选择器

    • ele[attr]{ } 指定了属性名为attr的ele元素

    • ele[attr=value]{ } 指定了属性名为attr且属性值为value的ele元素

    • ele[attr~=value]{ } 指定了属性名称attr,并且属性值词列表中包含value的ele元素

    • 注意：要有词列表的时候，属性名=属性值是选择不上的

        /*带有class属性的div元素*/
    .wrap div[class]{
        background: red;
    }
    /*带有class属性，并且属性值为box的div元素*/
    .wrap div[class=box]{
        background: pink;
    }
    /* 带有class属性，并且属性值的词列表中包含box的div元素 */
    .wrap div[class~=box]{
        background: yellow;
    }
    /*带有type属性，并且属性值为text的input元素*/
    .wrap input[type=text] {
        border: 10px solid red;
    }
​
    /*带有type属性，并且属性值为password的input元素*/
    .wrap input[type=password] {
        border: 10px dotted blue;
    }
​
注意：
​
        /*要有词列表的时候，属性名=属性值是选择不上的，用~选*/
       /* 选不上 */
        .warp div[class=box2] {
            background-color: burlywood;
        }
​
        .warp div[class~=box2] {
            background-color: burlywood;
        }
​
​
   <div class="box1 box2">box2</div>
   <div class="box3 box4">box4</div>

  • css3新增属性选择器

    • ele[attr^=value]{ } 指定了属性名attr，且属性值为value开头的ele元素

    • ele[attr$=value]{ } 指定了属性名attr，且属性值为value结尾的ele元素

    • ele[attr*=value]{ } 指定了属性名attr，且属性值包含value的ele元素

  • 注意哦：不能以数字结尾和开头

      div {
            width: 100px;
            height: 100px;
        }
​
        /*带有class属性类名以box开头的div元素*/
        .warp div[class^=box] {
            background-color: tomato;
        }
​
        /*带有class属性类名以b结尾的div元素*/
        .warp div[class$=b] {
            background-color: yellow;
        }
​
        /*带有id属性id名为box3的div元素*/
        .warp div[id=box3] {
            background-color: violet;
        }
​
        /*带有class属性，并且属性值有b的div元素*/
        .warp div[class*=b] {
            font-size: 30px;
        }
​
        /*带有id属性，并且属性值有b的div元素*/
        .warp div[id*=b] {
            font-size: 40px;
        }

2）结构伪类选择器

  • :root{ } 匹配文档根元素

  • ele:first-child{ } 选择一组相同元素中的第一个元素

  • ele:last-child{ } 选择一组相同元素中的最后一个元素

  • ele:nth-child(n){ } 选择一组相同元素中的第n个元素，n可以是数值、关键词、表达式

    • 数值

    • 关键词：odd(奇数)|even(偶数)

    • 表达式：2n(偶数)|2n+1(奇数)

  • ele:nth-last-child(n){ } 选择一组相同元素中的倒数第n个元素，n表示数值、关键词、表达式

    备注: 以上元素类型必须一样

  • ele:first-of-type 选择一组元素中特定类型的第一个子元素

  • ele:last-of-type 选择一组元素中特定类型的最后一个子元素

  • ele:nth-of-type(n){ } 选择一组元素中特定类型的第n个ele元素

  • ele:nth-last-of-type(n){ } 选择一组元素中特定类型的倒数第n个ele元素

备注 : 以上元素类型可以不一样

child一组与of-type一组的区别

  • nth-child强调结构 关系，查找子元素中的第几个

  • nth-of-type强调类型，查找类型中的第几个

**备注: 以上元素必须类型一样** 
​
/* 根元素 */
        :root {
            background-color: azure;
        }
​
        .wrap div {
            width: 100px;
            height: 100px;
        }
​
        /* **备注: 以上元素必须类型一样** */
​
        /* 第一个元素 */
        .wrap div:first-child {
            background-color: tomato;
        }
​
        /* 最后一个元素 */
        .wrap div:last-child {
            background-color: purple;
        }
​
        /* div第2个元素 */
        .wrap div:nth-child(2) {
            background-color: pink;
        }
​
        /* ele:nth-last-child(n) {}
​
        选择一组相同元素中的倒数第n个元素，n表示数值、关键词、表达式 */
        /* 倒数第2个div元素 */
        .wrap div:nth-last-child(2) {
            background-color: antiquewhite;
        }
​
    <div class="wrap">
        <div>第一 1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5倒数第2</div>
        <div>最后一个6</div>
    </div>
​
- ele:nth-of-type(n){ } 选择一组元素中特定类型的第n个ele元素
- ele:nth-last-of-type(n){ } 选择一组元素中特定类型的倒数第n个ele元素
​
​
        /* ele:first-of-type 选择一组元素中特定类型的第一个子元素的每个元素 */
        .wrap span:first-of-type {
            font-size: 40px;
        }
​
        .wrap p:first-of-type {
            background-color: yellowgreen;
        }
​
        .wrap h3:first-of-type {
            background-color: tomato;
        }
​
        /* - ele:last-of-type 选择一组元素中特定类型的最后一个子元素的每个元素 */
        .wrap span:last-of-type {
            font-size: 30px;
            color: tomato;
        }
​
        .wrap p:last-of-type {
            background-color: purple;
        }
​
        /* - ele:nth-of-type(n){ } 选择一组元素中特定类型的第n个ele元素  */
        .wrap p:nth-of-type(2) {
            color: blue;
            font-size: 30px;
        }
​
        .wrap span:nth-of-type(2) {
            color: blue;
            font-size: 30px;
        }
​
        /* - ele:nth-last-of-type(n){ } 选择一组元素中特定类型的倒数第n个ele元素 */
        .wrap p:nth-last-of-type(3) {
            color: tomato;
            font-size: 40px;
        }
​
    <div class="wrap">
        <span>0span</span>
        <p>p1</p>
        <p>p2</p>
        <h3>h3</h3>
        <p>p3</p>
        <p>p4</p>
        <p>p5</p>
        <span>6span</span>
        <span>7span</span>
    </div>

3）状态伪类选择器

  • ele:disabled{ } 选择界面上处于禁用状态的元素

  • ele:enabled{ } 选择界面上处于可用状态的元素

  • ele:checked{ } 选择界面上处于被选中状态的元素

          /* ele:enabled{ } 选择界面上处于可用状态的元素 */
        input:enabled {
            background-color: tomato;
        }
​
        input[type=password]:enabled {
            background-color: yellowgreen;
        }
​
        /* ele:disabled{ } 选择界面上处于禁用状态的元素 */
        input:disabled {
            background-color: purple;
        }
​
        /* ele:checked{ } 选择界面上处于被选中状态的元素 */
        input:checked {
            width: 50px;
            height: 50px;
            opacity: .5;
        }
​
        input[type=radio]:checked {
            width: 30px;
            height: 30px;
            opacity: .5;
        }
​
​
    <ol>
        <li>
            账号：<input type="text">
        </li>
        <li>
            密码：<input type="password">
        </li>
        <li>
            账号1：<input type="text" disabled>
        </li>
        <li>
            账号2：<input type="text" disabled>
        </li>
        <li>
            性别：<input type="radio" checked>男
            <input type="radio">女
        </li>
        <li>
            性别：<input type="checkbox">吃饭
            <input type="checkbox" checked>睡觉
            <input type="checkbox" checked>打豆豆
        </li>
    </ol>
​

4）修改表单元素的placeholder的样式

/*修改placeholder默认样式*/
input::placeholder {
    color: tomato;
}
​
​
/*修改获取焦点后placeholder的样式*/
input:focus::placeholder {
    color: yellowgreen;
}
​

4、背景属性

1）多背景

background-image: url(图片路径), url(图片路径);

  • 不同的背景图像【逗号】隔开，也可以给不同的图片设置多个不同的属性（如背景位置，背景重复等）

  • 书写顺序越靠前，显示越靠上

    • 单独定义

    .box { 
background-image: url(img_flwr.gif), url(paper.gif); 
background-position: right bottom, left top; 
background-repeat: no-repeat, repeat; 
}

    • 简写

    .box {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

2）背景图尺寸设置

  • background-size: 数值

    • px：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个 值会被设置为 “auto”。

    • percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如 果只设置一个值，则第二个值会被设置为 “auto”。

    • cover:覆盖，等比例缩放背景图片到铺满整个盒子，但是背景图可能会无法完整显示在盒子中（宽高给大点）

    • contain:包含，等比例缩放背景图片到完整显示在盒子中，有一边到达边界就停止放大, 可能导致另一边留白 但是背景图可能在区域范围内铺不满（宽高给大点）

 .wrap div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin: 5px;
        }
​
        /* 显示越靠前的背景，书写顺序越靠前 */
        .wrap .box {
            background-image: url(./img/bg1.jpg), url(./img/yd.jpg);
        }
​
        .wrap .box1 {
            background: url(./img/bg1.jpg), url(./img/7.jpg);
        }
​
        .wrap .box2 {
            background: url(./img/bg1.jpg) no-repeat, url(./img/7.jpg) no-repeat;
        }
​
        /* background-size: 数值 */
        /* px */
        .wrap .box3 {
            background: url(./img/yd.jpg) no-repeat;
            background-size: 100px 100px;
            background-size: 100px;
        }
​
        /* 百分比 */
        .wrap .box4 {
            background: url(./img/7.jpg) no-repeat;
            background-size: 50% 50%;
            background-size: 50%;
            background-size: 20%;
        }
​
        /* cover:覆盖，等比例缩放背景图片到铺满整个盒子，但是背景图可能会无法完整显示在盒子中（宽高给大点） */
        .wrap .box5 {
            width: 900px;
            height: 400px;
            background: url(./img/7.jpg) no-repeat;
            background-size: cover;
        }
​
        /* contain:包含，等比例缩放背景图片到完整显示在盒子中，但是背景图可能在区域范围内铺不满（宽高给大点） */
        .wrap .box6 {
            width: 600px;
            height: 400px;
            background: url(./img/7.jpg) no-repeat;
            background-size: contain;
        }

3)背景图定位区域——background-origin属性

  • background-origin: padding-box; 默认值，背景图相对于内填充区域来定位

  • background-origin: content-box; 背景图相对于内容来定位

  • background-origin: border-box; 背景图片相对于边框区域来定位

        .wrap div {
            width: 200px;
            height: 200px;
            border: 20px dotted red;
            margin: 50px;
            padding: 50px;
        }
​
        /* 默认值，背景图相对于内填充区域来定位 */
        .wrap .box1 {
            background: url(./img/bg2.jpg) no-repeat;
            background-origin: padding-box;
        }
​
        /* 背景图相对于内容来定位 */
        .wrap .box2 {
            background: url(./img/bg2.jpg) no-repeat;
            background-origin: content-box;
        }
​
        /* 背景图片相对于边框区域来定位 */
        .wrap .box3 {
            background: url(./img/bg2.jpg) no-repeat;
            background-origin: border-box;
        }

5、框模型

box-sizing属性

  • box-sizing: content-box;

    • 默认值，【标准盒模型】

    • 在width和height属性之外绘制元素的内填充和边框

  • box-sizing: border-box;

    • 【怪异盒模型】

    • 通过已有的设置好的width属性和height属性中分别减去内填充和边框宽度，得到内容宽和高

6、引入字体图标第二种方式：添加至项目

1.添加至项目

2.选择要添加的项目（如果没有项目点击右上角新建项目），点击确定

3.点击查看在线链接，复制在线链接即可

4.新添加图标后点击更新代码（ 下方新 icon 来袭，点击更新代码，更新后将支持 WOFF2 格式）

5.把之前的链接替换掉就可以了

    <!-- 在线链接 -->
​
    <!-- .css文件 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384465_pdfxvb7qtdg.css">
    
    <!-- .js文件 -->
    <script src="http://at.alicdn.com/t/font_2384465_pdfxvb7qtdg.js"></script>
​
    <span class="iconfont">&#xe6b7;</span>
​
    <span class="iconfont icon-meinv"></span>
​
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-qipao1"></use>
    </svg>
  

然1，
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3基础
weixin_47398531的博客
07-22 4184
CSS3基础一、圆角边框 border-radius（重点）二、盒子阴影 box-shadow（重点）三、文字阴影 text-shadow（了解） 一、圆角边框 border-radius（重点） 二、盒子阴影 box-shadow（重点） h-shadow: 越大越往右； v-shadow: 越大越往下； blur: 越大越模糊; spread: 越大阴影越大。 三、文字阴影 text-shadow（了解） ...
面试必考15道CSS3基础面试题（含答案）
weixin_45819386的博客
04-26 5592
文章目录前言1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？？2、box-sizing属性？3、CSS选择器有哪些？优先级顺序？哪些属性可以继承？4.垂直居中几种方式有哪些？总结 前言 随着CSS的不断的发展，现在出现了CSS3，CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块；CSS3的新特征有很多，例如圆角效果、图形化边界
js--DOM--笔记（四）
Yi_xuan_sky的博客
08-11 172
       节点         nodeType        节点类型        1---标签                         2---属性                      3---文本         nodeName      节点名            大写标签名---标签        小写属性名--属性        #text--文本    ...
HTML5+CSS、CSS3基础知识点总结
m0_51981718的博客
11-05 1万+
一、选择器 选择器分为基础选择器和复合选择器两大类。 基础选择器由单个选择器组成 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器（*） 标签选择器 优点 标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。 缺点 不能设置差异化样式，只能选择全部当前标签。 id 选择器与类选择器的区别 类选择器可以被多个元素调用。 id 选择器只能允许一个标签调用。 类选择器使用的较多，id 选择器用于唯一特性的标签。 基础选择器 作用 特点 使用情况 用法 标签选
关于HTML5 css3 基础知识的总结
Peking之成长路程
05-04 1199
缘由 最近几天在看HTML5 css3相关的入门视频，视频是一个外国人quentin watt在14年录制，总共有51期，每期大概6-9分钟。我大概断断续续看了3天才看完。在很久很以前，本人也认认真真的写过html代码，后来因为每天背英语4级单词，由于脑容量较小，那部分内容被清除了。 个人感受 HTML5做东西出来非常快。比如，在网页上播放视频、歌曲，只要一个控件就可以搞定： &l...
CSS3入门基础（详解）
qq_44709805的博客
10-03 3126
CSS3入门基础详解 一、基本概念 css:层叠样式表(Cascading Style Sheets) 样式定义如何显示html元素 样式是为了解决内容与表现分离的问题 多个样式定义可层叠为一 样式通常存储在css文件中 css3是最新上午css标准 二、样式定义形式 内联样式：嵌在元素的style属性中定义（局部） 内部样式：在<style>标签中定义（页面级） 外部样式：在css文件中定义（可被多个页面调用） 1. 内联样式 margin-left:20px，元素的左外边距 注：不要在
HTML网页设计基础笔记 • 【第4章 CSS3基础】
热门推荐
杨明金的博客
03-22 2万+
全部章节 >>>> 本章目录 4.1 CSS 概述 4.1.1 CSS 简介 4.1.2 CSS3 基本语法 4.1.3 样式表的分类 4.2 CSS 基本选择器 4.2.1 标签选择器 4.2.2 类选择器 4.2.3 ID 选择器 4.3 CSS 扩展选择器 4.3.1 组合选择器 4.3.2 包含选择器 4.3.3 交集选择器 4...
CSS/CSS3基础笔记
qq_43645678的博客
07-17 1364
CSS 基础笔记
CSS3基础题及答案20道——必刷前端题目
weixin_45189258的博客
07-04 4636
1.CSS 指的是？ 2.在以下的 HTML 中，哪个是正确引用外部样式表的方法？ 3.在 HTML 文档中，引用外部样式表的正确位置是？ 4.哪个 HTML 标签用于定义内部样式表？ 5.哪个 HTML 属性可用来定义内联样式？ 6.下列哪个选项的 CSS 语法是正确的？ 7.如何在 CSS 文件中插入注释？ 8.哪个属性可用于改变背景颜色？ 9.如何为所有的 元素添加背景颜色？ 10.如何改变某个元素的文本颜色？ 11....
CSS3基础题及答案20道——必刷前端题目(背)
weixin_45189258的博客
07-04 2110
1.CSS 指的是？ 2.在以下的 HTML 中，哪个是正确引用外部样式表的方法？ 3.在 HTML 文档中，引用外部样式表的正确位置是？ 4.哪个 HTML 标签用于定义内部样式表？ 5.哪个 HTML 属性可用来定义内联样式？ 6.下列哪个选项的 CSS 语法是正确的？ 7.如何在 CSS 文件中插入注释？ 8.哪个属性可用于改变背景颜色？ 9.如何为所有的元素添加背景颜色？ 10.如何改变某个元素的文本颜色？
CSS3基础.xmind
11-16
前端入门思维导图CSS3基础知识（1）原图。 1.CSS3新功能：相比CSS2增加了许多的新功能； 2.CSS3的基本语法； 3.CSS3的样式表； 4.CSS3的两个基本特性。
CSS，CSS3基础
11-05
这是CSS3的基础知识框架，帮助建立CSS知识的知识网络，适合入门前端使用，解压后使用xmind打开
HTML5与CSS3基础教程（中文第8版）.pdf
05-15
HTML5与CSS3基础教程（中文第8版） 本书自第1版至今，一直是讲解HTML和CSS入门知识的经典畅销书，全面系统地阐述HTML5和CSS3 基础知识以及实际运用技术，通过大量实例深入浅出地分析了网页制作的方方面面。最新第8版...
HTML+CSS3基础知识点资源
03-14
整理了很久，分享给初学者学习，让更多人学习HTML+CSS3
HTML5与CSS3基础教程(中文第8版）
03-13
HTML5与CSS3基础教程(中文第8版），kindle用户福利，kindle电子书mobi格式。
CSS中，设置 0.5px 会生效吗
Keep trying, keep going
06-12 339
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
CSS 列表样式（ul）全面解析
2401_83810323的博客
06-11 233
属性用于定义列表项的标记类型。常见的值包括disc（实心圆）、circle（空心圆）、square（方块）以及none（无标记）。此外，也可以使用decimal（十进制数字）、（小写字母）、（大写罗马数字）等来生成不同的编号效果。ul {/* 方块标记 */ol {/* 大写罗马数字 */
HOW - CSS 常见效果实现
weixin_58540586的博客
06-11 888
常见 CSS 效果实现总结。
px转rem插件postcss-plugin-px2rem使用方法（浏览器缩放页面自适应）
最新发布
x_XDGS的博客
06-13 427
浏览器缩放自适应，px转rem，postcss-plugin-px2rem插件
html5与css3基础教程(第8版)pdf
06-22
《HTML5与CSS3基础教程（第8版）》是一本很好的学习HTML与CSS的教材。本书内容详实，涵盖了HTML与CSS的基本知识，以及更高级的功能和技巧。此外，书中还提供了很多案例和练习，帮助读者更好地掌握学习内容。 本书...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值