英文css教程:Introduction CSS

所属分类: 网页制作 / CSS 阅读数: 1125
收藏 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.
更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之 首先声明: 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2、水平居中 问题:div里的内容,ie默认为center,而ff默认left 解决:mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序,刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多