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.

　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>

##　 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". 　

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

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

　　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开头。

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

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