Stylus-css framework usage, stylus-css framework

Last Update:2014-08-08 Source: Internet

Author: User

Tags border color install node

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Stylus-css framework usage, stylus-css framework

Stylus is a css language that needs to be compiled. Therefore, its own files cannot be directly called by html. You need to compile them into css files before loading them.

Stylus is an excellent css compilation language that requires node. js support. The first step is to install node. js.

    # apt-get update      # apt-get install -y python-software-properties software-properties-common      # add-apt-repository ppa:chris-lea/node.js      # apt-get update      # apt-get install nodejs

2. View node version information. If any information is returned, the installation is successful.

3. Install stylus

# npm install stylus

4. debug Stylus (Ctrl + D)

# styus
border-radius()  -webkit-border-radius arguments  -moz-border-radius arguments  border-radius arguments  body  font 12px Helvetica, Arial, sans-serif  a.button  border-radius(5px)

Check whether the returned result is returned.

body {  font: 12px Helvetica, Arial, sans-serif;}a.button {  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;}

5. Compiling styus files

Create a test. styl file with the following content:

 1 border-radius() 2   -webkit-border-radius arguments 3   -moz-border-radius arguments 4   border-radius arguments 5    6 body 7   font 12px Helvetica, Arial, sans-serif 8    9 a.button10   border-radius 5px

Save and close. Run the following command on the command line:

# stylus --compress < test.styl > test.css

Check whether it is a file named test.css and whether the content is as follows:

1 body{2 font:12px Helvetica,Arial,sans-serif3 }4 a.button{5 -webkit-border-radius:5px;6 -moz-border-radius:5px;7 border-radius:5px8 }

Such a stylus file is compiled into a css file that can be called by html.

Detailed usage of frame in html

Framework concept:
The so-called framework is to divide a webpage into several frames and obtain multiple URLs at the same time. You only need to <FRAMESET> <FRAME>, and all the FRAME tags should be placed in a total html file. This file only records how the framework is divided and does not display any information, therefore, you do not need to add the <BODY> flag. to browse this framework, you must read this file instead of the files in other frame windows. <FRAMESET> is used to divide a FRAME window. Each FRAME window is marked by a <FRAME> MARK. <FRAME> must be used in the <FRAMESET> range. For example:
<Frameset cols = "50%, *">

<Frame name = "hello" src = "up2u.html">
<Frame name = "hi" src = "me2.html">
</Frameset>
In this example, <FRAMESET> splits the image into the left and right sides, displays up2u.html on the left, and displays the me2.html file on the right, <FRAME> the marked window is always in the order of top, bottom, left to right.

<FRAMESET> <FRAME>:

<FRAMESET> frame tag, used to declare an HTML file as the frame mode and set how to split the windows.
<FRAME> only sets the parameter attributes in a window.
<FRAMESET> parameter settings:
Example: <frameset rows = "90, *" frameborder = "0" border = 0 framespacing = "2" bordercolor = "#008000">

COLS = "90 ,*"
Vertical Cut screen (such as divided between the left and right pictures), accept the integer, percentage, * represents the occupied space. The number of values indicates the number of windows to be divided by commas. For example, COLS = "30, *, 50%" can be divided into three windows. The first window is the width of 30 pixels, which is an absolute split, the second window is the space left after the first and third windows are allocated, and the third window occupies 50% of the width of the entire screen. You can adjust the number by yourself.
ROWS = "120 ,*"
It is horizontal cutting, which separates up and down the screen. The value is set to the same as above. The COLS parameter and the ROWS parameter should not be in the same <FRAMESET> flag, because Netacape occasionally cannot display this type of frame, so use multiple splits.
Frameborder = "0"
Set the frame border. The value is only 0 and 1. 0 indicates no border, and 1 indicates that the border is to be displayed. (Avoid using yes or no)
Border = "0"
Set the Border thickness of the frame, in pixels.
Bordercolor = "#008000"
Set the border color of the frame.
Framespacing = "5"
The gap between the framework and the framework.

<FRAME> parameter settings:
Example: <frame name = "top" src = "a.html &... full text>

How to use framework code in js

Not quite clear!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More