How to use CSS in web design and its characteristics

Let’s introduce CSS features to beginners and how to use already set CSS in web pages.

W3C (The World Wide Web Consortium) divides dynamic HTML (Dynamic HTML) into three parts to implement: scripting language (including JavaScript, Vbscript, etc.), browsers that support dynamic effects (including Internet Explorer, Netscape Navigator, etc.) and CSS style sheets.

　Characteristics of Cascading Style Sheets

Not to mention that the past web pages lacked dynamism, even in the layout of the web page content. There are many difficulties. If you are not a professional or a particularly patient person, it is difficult to make the web page display information according to your own ideas and creativity. Even those who have mastered the essence of the HTML language must pass many tests before they can master the layout of this information. The process is very long and painful.

The style sheet was born under this demand. The first thing it has to do is to accurately position the elements on the web page, allowing the web designer to control it easily like a director. The actors composed of words and pictures perform well according to the script on the stage of the web page.

Secondly, it separates the content structure and format control on the web page. What viewers want to see is the content structure on the web page, and in order to allow viewers to better see this information, format control must be used to help. In the past, the distribution of the two on the web page was staggered and combined, which was very inconvenient to view and modify. Now, separating the two will greatly facilitate web designers. The content structure and format control are separated, so that a web page can be composed solely of content, and the format control of all web pages is directed to a certain CSS style sheet file. This is beneficial in two aspects:

First, the format code of the web page is simplified, and the external style sheet will also be saved in the cache by the browser, speeding up The speed of downloading displays also reduces the amount of code that needs to be uploaded (because repeated formats will only be saved once).

Second, you can change the style and characteristics of the entire site by simply modifying the CSS style sheet file that stores the website format. This is particularly useful when modifying a site with a large number of pages. Avoiding the modification of web pages one by one, greatly reducing the workload of repeated work

　How to add cascading style sheets

There are four ways to add a style sheet to a web page:

1. The simplest method is to add it directly to the HTML identifier (tag):

##　< Tag style=”properties”>Web page content< /tag>

## For example:

　< p style=”color: blue; font-size: 10pt”>CSS Example< /p>

##　 Code Description:

Display "CSS Example" with a font size of 10pt in blue. Although it is simple to use and intuitive to display, this method is not commonly used because such addition cannot fully take advantage of the style sheet "content structure and format control are saved separately". 　

2. Add it to the HTML header information identifier < head>:

The following is a quotation fragment: 　

< head> 
　　< style type=”text/css”> 
　　< !-- 样式表的具体内容 --> 
　　< /style> 
　　< /head>

　　type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“< !--注释内容-->”。

　　3、链接样式表

　　同样是添加在HTML的头信息标识符< head>里:

以下是引用片段：　　

< head> 
　　< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”> 
　　< /head>

　　*.css是单独保存的样式表文件，其中不能包含< style>标识符，并且只能以css为后缀。

　　Media是可选的属性，表示使用样式表的网页将用什么媒体输出。取值范围:

　　·Screen(默认):输出到电脑屏幕

　　·Print:输出到打印机

　　·TV:输出到电视机

　　·Projection:输出到投影仪

　　·Aural:输出到扬声器

　　·Braille:输出到凸字触觉感知设备

　　·Tty:输出到电传打字机

　　·All:输出到以上所有设备

　　如果要输出到多种媒体，可以用逗号分隔取值表。

　　Rel属性表示样式表将以何种方式与HTML文档结合。取值范围:

　　·Stylesheet:指定一个外部的样式表

　　·Alternate stylesheet:指定使用一个交互样式表

　　4、联合使用样式表

　　同样是添加在HTML的头信息标识符< head>里:

以下是引用片段：　　

< head> 
　　< style type=”text/css”> 
　　< !-- 
　　@import “*.css” 
　　其他样式表的声明 
　　--> 
　　< /style> 
　　< /head>

　　以@import开头的联合样式表输入方法和链接样式表的方法很相似，但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时，针对该网页的具体情况，做出别的网页不需要的样式规则。

　　需要注意的是:

　　·联合法输入样式表必须以@import开头。

　　·如果同时输入多个样式表有冲突的时候，将按照第一个输入的样式表对网页排版。

　　·如果输入的样式表和网页里的样式规则冲突时，使用外部的样式表。

The above is the detailed content of How to use CSS in web design and its characteristics. For more information, please follow other related articles on the PHP Chinese website!