Introduction to CSS style classification (basic knowledge)

Classification of CSS styles

1. Internal style ---- inline style

Using the style tag

<style type="text/css">
/* Style */
</style>

Learn one more trick: write the common style of the page (if there are not many) in the style tag

2. Inline styles

Write it directly in the style attribute on the tag

<div style="color:red;">
    I am a box</div>

Learn one more trick: Usually used by backend programmers to modify the page

3. External Style

Create a new css file and associate it with the html page

a) Use tag association

<!-- In the head tag of the html -->
<link rel="stylesheet" type="text/css" href="css file path">

b) Use instruction association

<style type="text/css">
/* In the style tag */
    @import url("css file path")
</style>

Learn one more trick: The most commonly used external style and link tag in projects

Summary of three style sheets

Knowledge point supplement: CSS style classification

CSS styles can be divided into three categories: inline styles, internal style sheets, and external style sheets

1. Inline style (the style is written in the HTML tag and only works on the content of the tag)

Hello World!

2. Internal style (the style is written between the head tags of the HTML and only works on the content of the HTML)

<html>
    <head>  
    <title></title>
    <style type="text/css">
    body{font-size:12px}    
    </style>
    </head>
    <body></body>
</html>

3. External style (style reference is written between the head tags and works on the web page that references the CSS file)

<html>
    <head>  
    <title></title>
    <link href="common.css" rel="stylesheet" type="text/css"> 
    </head>
    <body></body>
</html>

In the css style, # represents the id selector, and . represents the class selector

<div class="font"></div>

<div id="top"></div> In HTML, the id cannot be repeated.

Summarize

This is the end of this article about the classification introduction of CSS styles (basic knowledge). For more relevant CSS style classification content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: How to write the introduction content of the About page of the website

>>: MySQL Query Cache Graphical Explanation

Use neat HTML markup to build your pages

Introduction to CSS style classification (basic knowledge)

Use neat HTML markup to build your pages

Introduction to Spark and comparison with Hadoop

Steps to build a Docker image using Dockerfile

How to run Spring Boot application in Docker

React realizes secondary linkage (left and right linkage)

JavaScript implements constellation query function with detailed code

Writing a web calculator using javascript

A brief talk about MySQL semi-synchronous replication

Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS

Recommend

mysql obtains statistical data within a specified time period

Vue implements graphic verification code login

How to count the number of specific characters in a file in Linux

Element table header row height problem solution

Robots.txt detailed introduction

Use of Linux ln command

JS function call, apply and bind super detailed method

How to install the standalone version of spark in linux environment without using hadoop

In-depth understanding of the use of Vue

Detailed steps to install Sogou input method on Ubuntu 20.04

Linux Operation and Maintenance Basic System Disk Management Tutorial

Tutorial on installing MySQL 5.6 using RPM in CentOS

WeChat applet scroll-view realizes left-right linkage effect

Summary of the use of Datetime and Timestamp in MySQL

Some things to note about varchar type in Mysql