css 订阅
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]  CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 [2] 展开全文
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]  CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 [2]
信息
外文名
Cascading Style Sheets
外语缩写
CSS(也作文件扩展名)
中文名
层叠样式表
其他称呼
级联样式表
CSS发展历程
1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。 [3]  从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯(Bert Bos)正在设计一个名为Argo的浏览器,于是他们决定一起设计CSS。其实当时在互联网界已经有过一些统一样式表语言的建议了,但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中,一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合每个人的爱好。哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议,1995年的www网络会议上CSS又一次被提出,博斯演示了Argo浏览器支持CSS的例子,哈肯也展示了支持CSS的Arena浏览器。同年,W3C组织(World WideWeb Consortium)成立,CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准,层叠样式表的开发终于走上正轨。有越来越多的成员参与其中,例如微软公司的托马斯·莱尔顿(Thomas Reaxdon),他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底,CSS初稿已经完成,同年12月,层叠样式表的第一份正式标准(Cascading style Sheets Level 1)完成,成为w3c的推荐标准。1997年初,W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。 [4-5] 
收起全文
精华内容
参与话题
问答
  • HTML+CSS初级入门

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

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

    万次阅读 多人点赞 2014-05-05 11:02:24
    以我的经验,大部分技术,熟读下列四类书籍即可。  入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive ...

    以我的经验,大部分技术,熟读下列四类书籍即可。 

    1. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列
    2. 全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive Guide/Programming xx系列
    3. 实践,结合实际中经常遇到的情景环境,来描述如何设计和解决问题,如cookbook系列
    4. 深入,讲解一些文化,思路,甚至于哲学上的东西,真正做到深入一种语言去编程,如unix编程艺术,程序员修炼之道等等

    那么,目前为止我认为最好的书是: 

    css: 

    1. 入门: Head First HTML and CSS, XHTML (中文版,第二版)这本2005年底的书依然是最易懂,清晰和正确的入门读物,去看看amazon排名就知道了
    2. 全面: CSS, The Definitive Guide (3th Edition) (《CSS权威指南(第3版)》)Meyer可能是css领域最权威和知名的作者,他在这本书里讲解了每个细节的实现和原理,更详细的东西恐怕只能从w3c那几乎不可读的文档中去寻找了
    3. 实践:CSS Mastery (2th Edition) (《精通CSS:高级Web标准解决方案(第2版)》)Andy budd恐怕是英国最出色的css作者,这本书用简单直接的方式论述了很多实践中组件的正确实现以及可替代方法,包括css3
    4. 深入:很遗憾,css在这方面还没有一本必读著作,也可能并不需要,因为到了这个程度,多是用户体验和视觉设计了,目前最接近的是 Transcending CSS (《超越CSS:Web设计艺术精髓(修订版) 》), 但不断的技术进化使得书中某些部分感觉有些落伍。


    关于css3, 她是一个模块化的渐进式增强,且以2.1为基础,因此,请学好css2再学习css3,这方面我认为只需要一本实践书即可,告诉你css3能做到什么,毕竟,原理是共通的。 

    The Book of CSS3 推荐这本,一个技术人员写的组织清晰的css3模块描述和实践指南,还包括浏览器的实现情况,2011年5月出版,是目前为止最好的。 

    javascript: 

    1. 入门:Eloquent Javascript 一位hacker写的编程入门,书中向hacker,open source, free software的欣赏和痴迷比比皆是, 比如官网下边那个向emacs致敬的console。作者很聪明,这本书的目标读者,beginners, 是不会因为这些小细节而向他叫好的。他想要的,只是把在其中浸淫多年的,真正意义上的编程精神,传达给初学者们而已。 少见地打败了对应的HeadFirst系列(Headfirst Javascript)
    2. 全面:Javascript, The Definitive Guide(6th edition) (《JavaScript权威指南(第6版)》)伴随我们web开发者成长的一本javascript圣经,一直以来都是无可争议的最好与最全面的js书籍,2011年出版了最新版。
    3. 实践:在目前的web开发环境中,我们都是在使用各种js框架,很少自己写框架来开发,因此这本书的位置,应该留给你所使用的框架。如果是jquery,我推荐 Jquery: Novice to Ninja (《JQUERY从菜鸟到忍者(第2版) 》)这本,框架方面的书,经常一本入门的就够了,因为更新实在太快,之后的研究学习只能全靠网络了。
    4. 深入:与css不同,js是一种真正的编程语言,所以对他的深入研究是一个长期的过程,css的深入更偏向技艺/工匠,而js更偏向设计/架构/艺术,我推荐以下几本从不同方面深入js的书,他们都是业界最顶级的js开发团队(yahoo)的成员和同事,因此思路是很统一的,著名的高性能网站建设指南1和2都出自这个团队。
    • Javascipt, The Good Parts (《JavaScript语言精粹(修订版) 》)由JSON的发明者撰写
    • Javascript Patterns (《JavaScript模式》)YSlow的合作开发者撰写
    • High Performance Javascript 最好的zakas的书,虽然我不太喜欢他

    附上一些即将出版,我非常想看的书,有先睹为快的朋友可以分享一下心得: 

    • Secrets of Javascript Ninja (好像没有中文版)Jquery作者John Resig最新著作
    • Node: Up and Running 认识一下流行的no-block js server
    • Javascript Web Applications (《基于MVC的JavaScript Web富应用开发》)这本号称是对当下js landscape的总结
    展开全文
  • HTML5和CSS3

    千人学习 2017-11-23 11:21:58
    HTML5新特性和CSS3的使用案例,从入门到精通。
  • 水平方向调整元素位置 width: 300px; margin: auto; position: absolute; left: 0; right: 0; 水平方向调整背景图片 background-position-x: -600px;//水平方向,同理垂直y也可以调整 ... borde...

    水平方向调整元素位置 

    width: 300px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;

     水平方向调整背景图片

    background-position-x: -600px;//水平方向,同理垂直y也可以调整

     

    #triangle03{
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-top: 50px solid blue;
        }
    #triangle04{
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-right: 50px solid red;
        }
    #triangle05{
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-bottom: 50px solid green;
        }
    #triangle06{
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-left: 50px solid yellow;
        }

    上面的代码就可以实现,四个不同方向的三角形了。

    不同方向的四个三角形

    展开全文
  • 利用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;
    }
    

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

    展开全文
  • CSS梅兰商城项目实战

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

    万次阅读 2020-06-20 01:16:09
    先将html和body元素的height都设置为100%,然后将其overflow设置为hidden即可 html,body{ height:100%; overflow:hidden; }

    先将html和body元素的height都设置为100%,然后将其overflow设置为hidden即可

    html,body{
    	height:100%;
    	overflow:hidden;
    }
    
    展开全文
  • HTML(css+div)登录界面

    万次阅读 多人点赞 2018-05-31 23:53:39
    HTML(css+div)登录界面
  • css让图片居中

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

    千人学习 2019-07-19 10:05:13
    本课程包含7章45个小节课程,内容涵盖:CSS基础、CSS选择器、CSS属性和属性值、CSS 边框和背景、CSS盒子模型、文本样式等。
  • css文字阴影----渐渐模糊效果

    万次阅读 2020-06-17 19:03:02
    text-shadow 为文字添加阴影。可以为文字与 text-decorations 添加多个阴影,阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和...style type="text/css"> h1:hover{ color:rgba(0,0,0,0);
  • 滚动条的产生 滚动条在谁身上 初始包含块 <!DOCTYPE html> <... ...style type="text/css"> *{ margin: 0; padding: 0; } html{ height: 100%; overflow: hidden;
  • CSS设置背景透明度

    万次阅读 2018-04-16 09:05:53
    实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法:css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)IE...
  • 利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。...CSS中有一个resize属性,如果一个元素的overflow属性值不是visible,则通过设置resize属性可以拉伸这...
  • HTML5与CSS3实战视频课程采用「少必要知识 + 实例刻意练习」的学习方法,通过实例步步详解、模块刻意训练学习HTML5与CSS3开发响应式页面的技能。从入门到实战,用HTML5与CSS3设计响应式页面。 课程摆脱传统瀑布学习...
  • ./src/css/banner.css 6:570-597 @ ./src/css/banner.css @ ./src/js/index.js ERROR in ./src/imgs/right.png Module parse failed: C:\Users\Administrator\Desktop\test\src\imgs\right.png Unexpected ...
  • css鼠标点击的五种状态

    万次阅读 多人点赞 2017-08-19 15:34:34
    1、a:link{color:#fff} 未访问时的状态(鼠标点击前显示的状态) 2、a:hover{color:#fff} 鼠标悬停时的状态 3、a:visited{color:#fff} 已访问过的状态(鼠标点击后的状态) 4、a:active{color:#fff} 鼠标点击时的...
  • 本套html,div&css;课程完全初级, 通过学习DIV+CSS, 了解分清html div css三者关联&作用, 通过一个企业站首页排版掌握html,div+css
  • 最开始的时候了解下划线的属性是:text-decoration:underline;但是,很遗憾的是,对于设计做的下划线用浏览器默认属性样式很难调整,使用这个属性并不能调整下划线与文字的间距,而且对于下划线的颜色也不好调整,而...
  • CSS打造相册效果项目完整源码

    万次下载 热门讨论 2014-06-15 19:05:52
    代码为博客实例代码:http://blog.csdn.net/lmj623565791/article/details/30993277 有问题请博客留言
  • CSS控制文字,超出部分显示省略号

    万次阅读 多人点赞 2018-06-25 14:34:04
    CSS控制文字,超出部分显示省略号http://www.daqianduan.com/6179.html &lt;p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"&gt; 如果实现单行文本的...
  • html+css入门

    万人学习 2018-05-15 12:22:07
    本课程是专门为初级量身定制的入门课程,我们不讲学了以后就年薪几十万的鸡汤,也不拿成功学员说事情,我们只讲干货,我们把知识点...2.css入门 3.div+css布局 4.css选择器加强 5.百度云下载页实战 6.表格 7.表单
  • CSS 元素垂直居中的 6种方法

    万次阅读 多人点赞 2012-05-30 09:56:06
    转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的...
  • CSS 实现图片轮播

    万次阅读 多人点赞 2018-05-27 13:07:32
    CSS3 animation 属性和 @keyframes 规则 主体思想 准备相同大小的多个图片 将要展示图片横排放在一个图片容器里面 在图片容器外再加一个展示容器,展示容器大小为图片大小 给图片容器添加自定义动画,在动画...
  • 名师精讲CSS3

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

    万次阅读 多人点赞 2014-05-21 13:53:56
    html+css实现登录界面
  • css的两种盒模型

    万次阅读 多人点赞 2018-03-24 15:15:34
    初学 css 的时候 div 的一些宽高问题经常会引起一些不好理解的问题,这里做一个关于css盒模型的分享。 问题 下面的代码可以直接复制出去运行哦 &lt;!DOCTYPE html&gt; &lt;...

空空如也

1 2 3 4 5 ... 20
收藏数 696,599
精华内容 278,639
关键字:

css