css3 订阅
CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 [1]  。CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性,这也让跨浏览器开发变得复杂 [2]  。 展开全文
CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 [1]  。CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性,这也让跨浏览器开发变得复杂 [2]  。
信息
外文名
Cascading Style Sheets Level 3
草案完成时间
2001年5月23日
简    称
CSS3
中文名
层叠样式表3级
制订时间
1999年
CSS3发展进程
早在2001年W3C就完成了CSS3的草案规范。CSS3规范的一个新特点是被分为若干个相互独立的模块。一方面分成若干较小的模块较利于规范及时更新和发布,及时调整模块的内容,这些模块独立实现和发布,也为日后CSS的扩展奠定了基础。另外一方面,由于受支持设备和浏览器厂商的限制,设备或者厂商可以有选择的支持一部分模块,支持CSS3的一个子集,这样有利于CSS3的推广 [3]  。以下为截至2019年12月,CSS3各模块的规范情况: [35] 
收起全文
精华内容
参与话题
问答
  • HTML+CSS初级入门

    万人学习 2017-07-22 13:34:05
    本课程主要目标是教给大家: 1)HTML和CSS能干什么? 2)HTML和CSS是什么?...3)HTML和CSS怎么用,这里会讲解常用到的HTML和CSS的使用规则 4)一步一步开发一个响应式的页面 QQ交流群:659123270
  • HTML5和CSS3

    千人学习 2017-11-23 11:21:58
    HTML5新特性和CSS3的使用案例,从入门到精通。
  • HTML&CSS;实战教程

    万人学习 2017-03-20 12:00:26
    创建标准网页的初学者指南,也适合深入学习Html,CSS的同学,后面课程有深入的讲解,本课程会初级介绍Html和CSS,让你从入门到精通轻松掌握Web开发语言,从元素标签到CSS样式每个部分都详细进行了介绍和讲解,讲解了...
  • 细说CSS(CSS+CSS3)

    千人学习 2019-07-19 10:05:13
    本课程包含7章45个小节课程,内容涵盖:CSS基础、CSS选择器、CSS属性和属性值、CSS 边框和背景、CSS盒子模型、文本样式等。
  • 利用DIV+CSS布局来制作一个登录页面 login.html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <!--引入字体图标库--> ....

    利用DIV+CSS布局来制作一个登录页面

    login.html部分:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title></title>
            <!--引入字体图标库-->
            <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
            <link rel="stylesheet" href="css/reset.css">
            <link rel="stylesheet" href="css/login.css">
        </head>
        <body>
    
            <div class="wrap">
                <h1>易购商城后台管理系统</h1>
                <form action="">
                    <div class="input-group">
                        //输入框左边的类似图标的东西是一种字体
                        //可在网上下载文件font-awesome-4.7.0后直接粘贴在项目目录下使用
                        <i class="icon-user fa fa-user"></i>
                        <input type="text" name="" class="form-control" placeholder="请输入用户名">
                    </div>
                    <div class="input-group">
                        <i class="icon-user fa fa-lock"></i>
                        <input type="password" name="" class="form-control" placeholder="请输入密码">
                    </div>
                    <div class="input-group btn-group">
                        <button>登录</button>
                    </div>
                </form>
                <p>&copy;xx集团&nbsp;版权所有</p>
            </div>
    
        </body>
    </html>
    

    reset.css部分(重置部分)

    *{
    	margin:0;
    	padding:0;
    }
    a{
    	font-size: 12px;
    	text-decoration: 0;
    	color:#222;
    }
    a,
    input,
    button{
    	outline: none;
    }
    ul,ol,li{
    	list-style: none;
    }
    h1,h2,h3,h4,h5,h6{
    	font-weight: 100;
    }
    img{
    	display: block;
    	border: 0;
    }
    

    关于重置样式文件:

    因为不同的浏览器对html标签的渲染有各自不同,即使开发者不对html页面写一行css代码,打开的页面也总会存在样式,但不同的浏览器的默认样式略有不同,这在一定程度上给开发者创造了麻烦,所以一般在开始写css代码的之前总是会先重置样式表,使得所有浏览器中html元素的样式统一,前端工程师通过自定义样式文件进行样式的统一,从而提高了前端界面的兼容性。

    login.css部分

    y{
    	background: rgba(0,0,0,0.8);
    }
    body{
        //为网页设置背景图片
    	background-image: url(../img/xx.jpg);
    }
    .wrap{
        //使界面主体在浏览器居中
    	position: absolute;//绝对定位
    	left: 50%;
    	top: 50%;
    	margin: -175px 0 0 -250px;
    	padding: 20px;
    	width: 500px;
    	height: 350px;
    	background: #333333;
    	box-shadow:0 0 10px rgba(255,255,255,0.5);
    	box-sizing: border-box;//padding和border被包含在定义的width和height之内
    }
    h1{
    	height: 50px;
    	font-size: 1.6em;
    	text-align: center;
    	border-bottom: 1px solid rgba(255,255,255,0.5);
    }
    .input-group{
    	margin: 20px auto;
    	height: 40px;
    	width: 300px;
    	border: 1px solid rgba(0,0,0,0.2);
    }
    i{
    	float: left;//左浮
    	width: 40px;
    	height: 40px;
    	text-align: center;
    	line-height: 40px !important;
    	background: rgb(22,160,93);
    	color: #fff;
    	font-size: 22px !important;
    	
    }
    .form-control{
    	float: left;
    	padding: 0 10px;
    	height: 40px;
    	border: 0;
    	width: 260px;
    	font-size: 18px;
    	box-sizing: border-box;
    }
    .btn-group{
    	border: 0;
    	margin-top: 40px;
    }
    button{
    	display: block;
    	width: 100%;
    	height: 40px;
    	font-size: 1.2em;
    	letter-spacing: 10px;
    	border: 1px solid rgb(22,160,93);
    	color: rgb(22,160,93);
    	background: #fff;
    	cursor: pointer;
    }
    button:hover{
        //为按钮元素设置鼠标悬浮的动态效果
    	color: #fff;
    	background: rgb(22,160,93);
    }
    p{
    	font-size: 12px;
    	text-align: center;
    	color: #888;
    }
    

    设计结果在浏览器上的效果
    在这里插入图片描述

    展开全文
  • HTML5与CSS3实战视频课程采用「少必要知识 + 实例刻意练习」的学习方法,通过实例步步详解、模块刻意训练学习HTML5与CSS3开发响应式页面的技能。从入门到实战,用HTML5与CSS3设计响应式页面。 课程摆脱传统瀑布学习...
  • css1 css2 css3 区别

    千次阅读 2018-02-10 13:28:16
    css1 css2 css3 区别 CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。 但自从CSS1的版本之后,又在1998年5月发布了CSS2版本,样式单得到了更多的充实...

    css1 css2 css3 区别


            CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。

            但自从CSS1的版本之后,又在1998年5月发布了CSS2版本,样式单得到了更多的充实。

            CSS2.0提供给我们了一个机制,让程序员开发时可以不考虑显示和界面就可以制作表单和界面,显示问题可由美工或是程序员后期再来编写相应的 CSS2.0样式来解决。

            CSS2.0是一套全新的样式表结构,是由W3C推行的,同以往的CSS1.0或CSS1.2完全不一样,CSS2.0推荐的是一套内容和表现效果分离的方式,HTML元素可以通过CSS2.0的样式控制显示效果,可完全不使用以往HTML中的table和td来定位表单的外观和样式,只需使用div和 Li此类HTML标签来分割元素,之后即可通过CSS2.0样式来定义表单界面的外观。

            CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。

            简单来说就是css2有的属性css3都有,但是css3有的属性css2不一定有。 CSS3是最新的版本,效果上CSS2是比不了的,css3可以说是css2的进阶,因为css3是在css2的基础上增加了一些新的属性。比如定义圆角、背景颜色渐变、背景图片大小控制和定义多个背景图片等很多,这个是CSS2上没有的效果,现在新版本的浏览器基本都支持CSS3,比如IE9、FF4+、chrome11+,但是要用CSS3开发网站的话,要考虑的是还在用低版本浏览器的用户。


        




    展开全文
  • 利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。...CSS中有一个resize属性,如果一个元素的overflow属性值不是visible,则通过设置resize属性可以拉伸这...

    利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。

    webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar的大小,于是,我们可以将整个拉伸区域变成和容器一样高。

    实现原理

    CSS中有一个resize属性,如果一个元素的overflow属性值不是visible,则通过设置resize属性可以拉伸这个元素尺寸。

    但是,这种拉伸却有一个问题,那就是拖拽的区域太小了,就右下角那么一丢丢地方:

     

    那有什么办法可以把这个拖拽区域变大呢?

    后来经过我的研究发现,resize属性的拖拽bar和滚动条的拖拽bar是一个体系里面的东西,只需要对滚动条进行自定义,就能间接设置resize bar的尺寸。

    例如:

    .resize-bar::-webkit-scrollbar {
        width: 200px; height: 200px;
    }

    此时,拉伸区域就很大了:

    接下来做的事情就是把这个拖拽区域藏在某一栏布局的后面,然后透出部分宽度可以用来拖拽,如下图所示:

     

    最后,我们的左右分栏采用自适应布局就能实现我们想要的效果。

    您可以狠狠地点击这里:纯CSS实现分栏宽度拉伸demo

     

    代码如下:

     

    .column {
        overflow: hidden;
    }
    .column-left {
        height: 400px;
        background-color: #fff;
        position: relative;
        float: left;
    }
    .column-right {
        height: 400px;
        padding: 16px;
        background-color: #eee;
        box-sizing: border-box;
        overflow: hidden;
    }
    .resize-save {
        position: absolute;
        top: 0; right: 5px; bottom: 0; left: 0;
        padding: 16px;
        overflow-x: hidden;
    }
    .resize-bar {
        width: 200px; height: inherit;
        resize: horizontal;
        cursor: ew-resize; 
        opacity: 0;
        overflow: scroll;
    }
    /* 拖拽线 */
    .resize-line {
        position: absolute;
        right: 0; top: 0; bottom: 0;
        border-right: 2px solid #eee;
        border-left: 1px solid #bbb;
        pointer-events: none;
    }
    .resize-bar:hover ~ .resize-line,
    .resize-bar:active ~ .resize-line {
        border-left: 1px dashed skyblue;
    }
    .resize-bar::-webkit-scrollbar {
        width: 200px; height: inherit;
    }
    
    /* Firefox只有下面一小块区域可以拉伸 */
    @supports (-moz-user-select: none) {
        .resize-bar:hover ~ .resize-line,
        .resize-bar:active ~ .resize-line {
            border-left: 1px solid #bbb;
        }
        .resize-bar:hover ~ .resize-line::after,
        .resize-bar:active ~ .resize-line::after {
            content: '';
            position: absolute;
            width: 16px; height: 16px;
            bottom: 0; right: -8px;
            background: url(./resize.svg);
            background-size: 100% 100%;
        }
    }
    <div class="column">
        <div class="column-left">
            <div class="resize-bar"></div>
            <div class="resize-line"></div>
            <div class="resize-save">
                左侧的内容,左侧的内容,左侧的内容,左侧的内容
            </div>                                            
        </div>
        <div class="column-right">
            右侧的内容,右侧的内容,右侧的内容,右侧的内容
        </div>
    </div>

    利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。

    webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar的大小,于是,我们可以将整个拉伸区域变成和容器一样高。

    展开全文
  • 名师精讲CSS3

    千人学习 2015-12-28 14:05:09
    CSS3即层叠样式表(Cascading Style Sheet), 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的...
  • css让图片居中

    万次阅读 2017-12-08 20:24:47
    css让图片居中,不管图片是方图、竖图、横图,都可以让图片在父框架下居中,即方图则占满整个父框架;横图则左右填充上下居中;竖图则左右居中上下填充 1、html如下: /*这里的图片路径自己设置*/ 2、css...

    css让图片居中,不管图片是方图、竖图、横图,都可以让图片在父框架下居中,即方图则占满整个父框架;横图则左右填充上下居中;竖图则左右居中上下填充

    1、html如下:

        <body>
            <div id="redblock">
                <img src="katong.png" >  /*这里的图片路径自己设置*/
            </div>
        </body>
    

    2、css如下

    	body{
    		
    		background-color: gray;
    	}
    
    	#redblock{
    		text-align: center;
    		display: table-cell;
    		vertical-align: middle;
    		width:400px;
    		height: 400px;
    		background-color: red;
    		
    	}
    
    	img{
    		max-width: 100%;
    		max-height: 100%;
    	}
    
    
    3、给父级元素设置样式:

         a、设定宽度和高度width、height

         b、设置text-align:center     vertical-align:middle

         c、设置display:table-cell

    4、给Img设置max-width:100%     max-height:100%

    5、显示的效果如下:


             横图



    方图



    竖图


         

    展开全文
  • HTML5 CSS3专题 纯CSS打造相册效果

    万次阅读 多人点赞 2014-06-15 16:15:50
    今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下。 效果图: 效果是不是还是很不错的,最主要的是没有... 纯CSS3相册效果
  • 第3版共分为19章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及基于JavaScript语言的网页特效制作,还介绍了新的HTML5和CSS3知识。为了便于读者学习,...
  • CSS3: calc计算属性

    万次阅读 2016-04-30 11:23:01
    前言正如其名,calc是css3中新增的计算属性,让很多属性增加了一个表达式的说法;标准的写法: .class{ /* area: expression; */ width:calc(); padding:calc(); margin-top:calc(); ... }兼容性基本理论 ...
  • CSS3属性名大全

    千次阅读 2015-08-15 12:15:32
    :active additive-symbols ::after (:after) align-content align-items align-self all
  • CSS3样式设计

    千人学习 2018-03-14 14:15:20
    在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
  • 一款很漂亮的CSS3登录界面

    万次阅读 多人点赞 2015-07-29 13:19:54
    一款很漂亮的CSS3登录界面-随着高级浏览器的出现,对css3的支持也很不错了,下面我展现自己用CSS3做的一款登陆界面。 -效果如图 -代码如下:<!DOCTYPE html> 一款很漂亮的CSS3登录界面 <style type="text/
  • css和css3的区别

    千次阅读 2018-04-27 09:05:13
    什么是CSSCSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。CSS 是一种标记语言,属于浏览器解释型语言,可以直接由浏览器执行,不需要编译。CSS 是用来表现HTML或XML的标记语言。CSS 是由W3C的CSS工作组发布...
  • HTML5 3D/CSS3 3D爱心动画项目实例源码

    千次下载 热门讨论 2014-08-20 11:30:37
    大家可以点解DEMO来看看。CSS3代码,对这些线条进行渲染,以便其有3D的视觉效果。很多div,主要是构造爱心的线条区域。
  • CSS3 3D旋转立方

    千次阅读 2018-06-04 15:42:54
    一、3D中的透视 &amp;nbsp; &amp;nbsp; &amp;...在美术学中,有一种画法叫做透视画法,他让我们对所观察的物体从二维拓展到三维,也就是说,平面的物体变成了立体,占据了独自的空间。...
  • CSS3 3D立体旋转

    千次阅读 2018-08-18 11:07:58
    用到的知识点 最重要的一个属性 transform-style:flat|preserve-3d;该属性默认值为 flat。...当我们指定一个容器的 transform-style 的属性值为 preserve-3d 时,容器的子元素便会相对父元素所在平面进行3D变换...
  • CSS3打造磨砂玻璃的背景

    万次阅读 2016-01-05 15:17:50
    简介这个效果是在看这书上看到的,感觉很不错; 实现原理也挺简单的;效果图及实现效果图代码实现<!DOCTYPE html> <title>Document /**
  • 目前Animate.css只能在Apple Safari, Google Chrome, and Mozilla Firefox中运行,不过微软承诺未来的IE10会支持CSS 3。 从目前看,使用Animate.css制作的动画性能要高于JQuery,因此,如果你的客户不纠结于IE的话...
  • HTML5+CSS3 精美登陆界面源码

    千次下载 热门讨论 2016-01-19 09:52:44
    3个很精美的登陆界面,全都是用HTML5+CSS3开发的,所以可能不适合低版本IE浏览器。大家可以下来看看,做的超级漂亮的。
  • CSS3】8款好看的纯CSS3搜索框

    万次阅读 多人点赞 2017-03-17 15:14:08
    演示效果:全部代码如下:<!DOCTYPE html> , initial-scale=1.0"> <title>8款纯CSS3搜索框</title> <link href="ht
  • CSS梅兰商城项目实战

    万人学习 2016-03-17 17:13:25
    本套CSS项目实战课程为制作梅兰商城首页,以网页布局定位的基础知识为依托,灵活运用CSS的全部知识和小技巧,带你深入剖析经典网页的制作过程,同时涉及到了CSS样式的初始化、版心控制、精灵图的使用、搜索引擎优化...
  • CSS3动画 文档

    万次阅读 2020-06-04 10:21:02
    keyframes-selector {css-styles;} } 值 说明 animationname 动画名称 keyframes-selector 0-100%;from (和0%相同);to (和100%相同) css-styles 一个或多个合法的CSS样式属性 在某个元素上使用动画 ...
  • CSS3实现3D立体效果

    万次阅读 2016-09-02 17:04:12
    CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate)。 这里涉及到3d转换的主要介绍旋转。 下面通过一组rotate效果直观理解rotateX...
  • webpack 配置自动添加 CSS3 前缀

    千次阅读 2018-07-25 13:01:40
    webpack4 配置 postcss-loader 和 autoprefixer 插件 npm install postcss-loader autoprefixer --save-dev webpack.config.js module.exports = { module: { rules: [ { ...
  • IE6/7并不支持CSS3的属性,IE8也不能很好的支持CSS3。如何让IE 6/7/8支持border-radius (rounded),box-shadow ( shadow),text-shadow等这些属性呢?这里介绍一个通过htc脚本实现这些属性的方法。 首先下载ie-...
  • CSS CSS3 pdf 电子书大全 百度云

    千次阅读 2019-04-16 18:24:22
    超越CSS Web设计艺术精髓 PDF版(500m+) http://pan.baidu.com/s/1dE36VPR css彻底设计研究 温谦中文pdf扫描版 /do/plus/download1.php?open=1&aid=34682&cid=3&link=ZWQyazovL3xmaWxlfCU1...

空空如也

1 2 3 4 5 ... 20
收藏数 675,684
精华内容 270,273
关键字:

css3