英文css教程:Introduction CSS

所属分类: 网页制作 / CSS 阅读数: 1159
收藏 0 赞 0 分享

CSS actually means Cascading Style Sheets. Styles are used to define how HTML elements are displayed. They are usually stored in STYLE SHEETS and were first seen included in HTML 4.0, with the purpose of solving a problem that appeared. These are bas
Few people really know what CSS really is. That is why we need to discuss this in the following set of tutorials that we will hand out as fast as possible. We will cover basic, medium and advanced CSS in a set of CSS Tutorials that you will surely enjoy utilizing. Remember that you do need basic knowledge about HTML/XHTML in order to work with CSS. This is highly important and if you do not know HTML then you should first focus on that and then on learning from CSS Tutorials.
What is CSS?
CSS actually means Cascading Style Sheets. Styles are used to define how HTML elements are displayed. They are usually stored in STYLE SHEETS and were first seen included in HTML 4.0, with the purpose of solving a problem that appeared. These are basically external, in the sense that they are not actually included in your HTML coding. External Style Sheets are used in order to SAVE YOU WORK. CSS files are utilized to store them and you need to understand that we have the advantage of using multiple style definitions that will eventually cascade in just one.
Why did CSS appear?
As already mentioned, CSS was developed in order to solve a problem with HTML. Regular HTML tags have been built to define the actual content of one document. We were faced with simple HTML tags like <h1>, <table>, <p> etc. There was no need to use formatting tags because the actual document was taken care of by your browser. As time passed we were faced with browsers adding HTML attributes and tags. This complicated everything and eventually led to difficulty in creating web sites. The statement is extremely true when talking about sites that showed a separation between the actual presentation and the content. As a result of this problem STYLES were added to HTML 4.0 by W3C. Now we can clearly notice that all of the main web browsers out there support CSS.
Time Saved through CSS
Style sheets will save you time because they will define how some or all HTML elements are displayed. The most basic examples of HTML elements’ appearance that can be controlled stands in the color tag and font tag, which appeared in HTML 3.2. In most cases the web master/designer/admin will store all styles in .css files. These are basically the External Style Sheets mentioned above. The actual time saving comes from the fact that you will just need to edit on .css file instead of many of your web pages. For instance, let us think that you will want to change the color of the links on all of your html files. You would normally do this by doing modifications on every single file. Through the use of CSS you will just need to modify ONE FILE. You will be able to define one style for each web element that you want. Then the style can be applied to as many html files as needed. A global change is done in just one file.
What is the deal with Multiple Styles Cascading in One?
We did notice that there is a little problem with understanding this concept so we do need to add it to our CSS tutorial introduction. All style sheets will allow you to define info about style and the info can be given in various ways. You can specify styles in External Style Sheets, in an HTML element inside the web page or in one HTML element. There is a posibility to have more than one style defined for 1 HTML element. In this case we are faced with order cascading. Every style present will be read by the browser and cascade into one new styles sheet, which we can consider virtual. This is done by obeying a simple list of order defined by priority. The way you see an element will be given by the element with the highest priority. The order is:
1.Inline Style (defined inside the HTML element)
2.Internal Style Sheet (defined inside a tag)
3.External Style Sheet
4.Browser default settings.
更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多