Home›Docs›Basic›Reset Style Initialization

Reset Style Initialization

Last updated: 19 days ago

Category: Basic

This framework resets the styles of some commonly used native HTML elements to align with the framework's design language. While it overrides default element styles, it preserves their core functional...

Reset Style Initialization19 days ago

前言

Native HTML tags comply with HTML5 specifications and come with semantic meaning. Unlike other frontend frameworks that reset all tag properties to zero, we preserve the native state of tags without class styling and enhance them based on their original state.

UL+LI

ul+li is used for unordered lists. This framework modifies its default appearance, but if users apply the _reset CSS class to dl tags, the indentation will be removed.

Output
HTML

- Africa
  - Northern Africa
    - Egypt
    - Morocco
    - Algeria
    - Tunisia
  - Sub-Saharan Africa
  - Central Africa
- Asia
- Europe
- North America
- South America
- Oceania
```
                
                
            
```

OL+LI

ol+li is used for ordered lists. This framework modifies its default appearance, but if users apply the _reset CSS class to dl tags, the indentation will be removed.

Output
HTML

1. Africa
  1. Egypt
  2. Morocco
2. Asia
  1. China
  2. Japan
3. Europe
  1. France
  2. Germany
  3. United Kingdom
  4. Netherlands
```
                
                
            
```

DL+DT+DD

dl represents a group of list items, dt represents the head of a list item, and dd represents the content of a list item. This framework modifies its default appearance, but if users apply the _reset CSS class to dl tags, the indentation will be removed.

Output
HTML

Earth, the third planet from the Sun, is the only known celestial body to support life.

Formation

The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.

After formation

Earth's atmosphere and oceans were formed by volcanic activity and outgassing.

Origin of life and evolution

Chemical reactions led to the first self-replicating molecules about four billion years ago.

Its protective atmosphere (78% nitrogen, 21% oxygen) and moderate temperatures enable liquid water—the foundation of life.
```
                
                
            
```

H1~H6

This framework resets the font size and line height for h1~h6 headings with the following specifications:

h1: 32px font size, 1.5em line height, bold - should appear only once per page
h2: 28px font size, 1.5em line height, bold - can be used as section subheadings, may appear multiple times
h3: 22px font size, 1.5em line height, bold - can be used as section subheadings, may appear multiple times
h4: 18px font size, 1.5em line height, bold - can be used as list item titles
h5: 16px font size, 1.5em line height, bold - can emphasize text within content
h6: 14px font size, 1.5em line height, bold - smallest heading size

Output
HTML

H1-28px-The United States of America is a diverse and influential federal republic in North America.

H2-22px-The United States of America is a diverse and influential federal republic in North America.

H3-18px-The United States of America is a diverse and influential federal republic in North America.

H4-16px-The United States of America is a diverse and influential federal republic in North America.

H5-14px-The United States of America is a diverse and influential federal republic in North America.

H6-12px-The United States of America is a diverse and influential federal republic in North America.

P-14px - The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.

P-14px - 中国是世界四大文明古国之一，拥有五千年悠久历史，如今作为世界第二大经济体、人口最多的社会主义国家，兼具灿烂文化遗产与现代发展活力。

P-14px - 日本は東アジアに位置する島国で、先進技術と伝統文化が調和した国であり、世界第三位の経済大国です。

P-14px - العالم العربي هو مهد الحضارات وقلب الشرق الأوسط، يجمع بين التراث الثقافي العريق والثروات النفطية، ويضم 22 دولة تتحدث العربية من المحيط إلى الخليج.
```
                
                
            
```

HR

The original horizontal rule appears outdated and unattractive. This framework enhances it with: 1px height + margin before and after.

Output
HTML

The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.

Earth's atmosphere and oceans were formed by volcanic activity and outgassing. Water vapor from these sources condensed into the oceans, augmented by water and ice from asteroids, protoplanets, and comets.

Chemical reactions led to the first self-replicating molecules about four billion years ago.
```
                
                
            
```

SUP

No modifications were made to the sup superscript tag itself, but we enhanced anchor tags within superscripts: using the primary color (prim).

Output
HTML

The oldest material found in the Solar System is dated to 4.5682^[1] Ga (billion years) ago. By 4.54±0.04 Ga the primordial Earth had formed. The bodies in the Solar System formed and evolved with the Sun^SUP.
```
                
                
            
```

CODE

The code tag is typically used for displaying code. This framework enhances it with: primary color + light background.

Output
HTML

The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago. By 4.54±0.04 Ga the primordial Earth had formed. The bodies in the Solar System formed and evolved with the Sun.
```
                
                
            
```

Supports theme attribute with optional values: prim, succ, error, warn, info, issue and text.

Output
HTML

The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago. By 4.54±0.04 Ga the primordial Earth had formed. The bodies in the Solar System formed and evolved with the Sun.
```
                
                
            
```

PRE

The pre tag is typically used for displaying code and other text requiring preserved formatting. This framework enhances it with: padding + light background.

Output
HTML

The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago. By 4.54±0.04 Ga the primordial Earth had formed. The bodies in the Solar System formed and evolved with the Sun.


    #include <stdio.h>
    #include <stdlib.h>
    #include <time.h>
    int main() {
    int i;
    int rotationSpeed = 1000; 
    srand(time(NULL));
    for (i = 0; i < 10; i++) {
        printf("running...\n");
        usleep(rotationSpeed * 1000);
    }
    return 0;
    }

```
                
                
            
```

KBD

The kbd tag is typically used to display keyboard shortcut information.

Output
HTML

The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago. By 4.54±0.04Ctrl + C Ga the primordial Earth had formed. The bodies in the Solar System formed and evolved with the SunCtrl + V. In theory, a solar nebula partitions a volume out of a molecular cloud by gravitational collapse, which begins to spin and flatten into a circumstellar disk, and then the planets grow out of that disk with the Sun. A nebula contains gas, ice grains, and dust (including primordial nuclides).
```
                
                
            
```

BLOCKQUOTE

The blockquote tag is typically used to represent quotes or introductions.

Output
HTML

The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago. By 4.54±0.04 Ga the primordial Earth had formed. The bodies in the Solar System formed and evolved with the Sun.
```
                
                
            
```

CITE

The cite tag is typically used to indicate titles of books, songs, or other creative works. Text wrapped in cite tags will display with a wavy underline effect.

Output
HTML

Hey kids! Check out these awesome classic books full of adventures: 《Charlotte's Web》 tells a touching friendship between a pig and spider, 《Alice in Wonderland》 takes you to a magical world with crazy characters, 《The Little Prince》 shares beautiful life lessons from space, and 《Peter Pan》 lets you fly to Neverland forever - they're all super fun stories that'll make you laugh, think, and dream big! Ask your parents to read them with you for extra fun!
```
                
                
            
```

EM

em is short for "emphasize". This framework modifies its default styling - text wrapped in em tags will display with small dots above.

Output
HTML

The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago. By 4.54±0.04 Ga the primordial Earth had formed. The bodies in the Solar System formed and evolved with the Sun.
```
                
                
            
```

MARK

The mark tag is used to highlight or emphasize text. Its background color uses this framework's warn color scheme.

Output
HTML

The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago. By 4.54±0.04 Ga the primordial Earth had formed. The bodies in the Solar System formed and evolved with the Sun.
```
                
                
            
```

TIME

The time tag is used to display dates or times. This framework modifies its color and font size.

Output
HTML

Article published: April 8, 2024

文章发布时间：2024年4月8日

기사 게시일: 2024년 4월 8일
```
                
                
            
```

ADDRESS

The address tag is used to display addresses or map locations. This framework modifies its styling to match regular text.

Output
HTML

Location: New York, USA

所在位置：美国-纽约

위치: 미국 뉴욕
```
                
                
            
```

RUBY

ruby+rt tags are used for phonetic annotations like pinyin. This framework adjusts the spacing of rt tags.

Note: Since ruby and rt are inline elements, there should be no spaces between the tags for proper alignment.

Output
HTML

The French phrase bon appétit /ˌbɒn æp.eˈtiː/means "enjoy your meal".

中Zhong华Hua文Wen明Ming
```
                
                
            
```

I, S, U

The native i, s, and u tags have been removed from HTML5 standards and are not recommended for use. However, since these tags are concise, this framework repurposes them as small containers for tiny elements like icon fonts. Their original styling has been removed - do not apply reset styles to them.

Output
HTML

```
                
                
            
```

ARTICLE

The native article tag semantically represents article content, typically used for text from rich text editors.

Output
HTML

　　The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.

　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。

　　AI（人工知能）やロボットが日常生活に深く浸透し、家事や単純作業は自動化されます。例えば、自律走行車が普及し、渋滞や事故が激減するかもしれません。また、バーチャルリアリティ（VR）と拡張現実（AR）の発展により、教育や仕事の形が一変する可能性があります。遠隔地の学生が仮想教室で学んだり、医師が遠隔手術を行ったりするのが当たり前になるでしょう。
```
                
                
            
```

FORM

Forms involve various input controls including:

input (types: text, datetime, range, password, number, color, search, etc.)
checkbox
radio
select (including multiple selection)
textarea
button

Beyond styling enhancements, we preserve native behaviors like focus, active, disabled, and readonly states, with full tab-key navigation support.

Output
HTML

Title:

Name:

Gender:
Male Female

Hobbies:
Reading Sports Travel Games

Birthday:

Avatar:

Album:

Planet:

Planet:

Search:

Color:

Size:

Subject:

Summary:

Phone:
Required

Email:

Website:
Read-only

Number:

Password:
```
                
                
            
```

BUTTON

Native button elements include:

input[type=submit]
input[type=reset]
input[type=button] (behavior same as reset)
button tag variants:
- button[type=button]
- button[type=submit]
- button[type=reset]
- button (no type)

Submit buttons use primary color fills while others are neutral. Additional size attribute options:

xs, sm, md (default), lg (matches ax-btn component)

Note: button[type=submit/reset] behave like input buttons when inside forms.

Output
HTML

```
                
                
            
```

To customize colors, use these CSS variables:

--_btn-c: Text color
--_btn-c-hov: Text color on hover
--_btn-c-foc: Text color on focus
--_btn-bw: Border width
--_btn-bc: Border color
--_btn-bg: Background color

For advanced styling needs, use the oc-btn component instead.

Output
HTML

```
                
                
            
```

FIELDSET

The fieldset element groups related form controls, typically used with legend tags.

Output
HTML

Properties
Phone:

Number:

Password:

Summary

Subjects
```
                
                
            
```

METER

The meter element displays static ratings. Uses framework's color scheme.

Output
HTML

Rating:
Rating:
Rating:
```
                
                
            
```

PROGRESS

The progress element shows static progress. Uses framework's color scheme.

Output
HTML

Progress:
```
                
                
            
```

A (Anchor)

The a tag creates hyperlinks. Styled with primary color for visibility.

Output
HTML

The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago. By 4.54±0.04 Ga the primordial Earth had formed. The bodies in the Solar System formed and evolved with the Sun.
```
                
                
            
```

For matching link color with body text, apply _reset class:

Output
HTML

The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago. By 4.54±0.04 Ga the primordial Earth had formed. The bodies in the Solar System formed and evolved with the Sun.
```
                
                
            
```

IMG

Images support native lazy loading via loading="lazy" attribute.

Note: Cached images won't trigger lazy loading (expected behavior). For advanced lazy loading, use the Lazy module.

Output
HTML

```
                
                
            
```

IFRAME

Iframes support native lazy loading via loading="lazy".

Note: Unlike images, iframes will lazy load again after page refresh. For advanced handling, use the Lazy module.

Output
HTML

```
                
                
            
```

VIDEO/AUDIO

Media elements don't support loading="lazy" but can use preload="none" for on-demand loading (note: removes default cover image).

This isn't true lazy loading - just a media control placeholder.

Output
HTML

```
                
                
            
```

TABLE

The table element displays tabular data. Fully styled in this framework.

Output
HTML

Product ID	Name	Category	Price (USD)
1001	Wireless Mouse	Electronics	24.99
1002	Yoga Mat	Fitness	29.95
1003	Stainless Bottle	Home	18.50
1004	Bluetooth Speaker	Electronics	45.00

```
                
                
            
```