英文css教程:Introduction CSS

2016-04-17css教程
15


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.
The End

相关推荐

Html5实现首页动态视频背景的示例代码
实现首页动态视频背景,可以使用HTML5的video标签,下面是具体的示例代码和操作步骤:...
2023-12-15 css教程
397

HTML blockquote 标签使用与美化
接下来我将详细讲解一下 HTML blockquote 标签使用与美化的完整攻略。...
2023-12-15 css教程
305

JavaScript原型对象原理与应用分析
在JavaScript中,每个函数都有一个prototype属性,我们称之为“原型对象”。原型对象是一个普通的对象,它有自己的属性和方法。通常情况下,我们为了让某个函数变成一个构造函数,会将它的prototype属性设置为一个新对象。...
2023-12-15 css教程
7

div css命名规范 css class命名规则(符合SEO规范)
DIV CSS命名规范是按照指定方式为HTML标记分配类名的规则,它为开发者带来了很多好处,包括更好的代码可读性、更好的可维护性、更好的结构化、可定位性和扩展性。...
2023-12-15 css教程
70

非常漂亮的Div+CSS布局入门教程第2/5页
下面我来详细讲解“非常漂亮的Div+CSS布局入门教程第2/5页”的完整攻略。...
2023-12-15 css教程
4

纯Css实现Div高度根据自适应宽度(百分比)调整
实现Div高度随宽度自动调整,其实主要是通过设置padding参数的百分比值或使用padding-top和padding-bottom属性实现。这样可以根据所给定的比例计算出高度,从而实现Div的高度自适应调整。...
2023-12-15 css教程
51