


How to insert CSS in html? Introduction to four methods of inserting css into html (with code)
The content of this article is about how to insert CSS into html? An introduction to the four methods of inserting CSS into HTML (with code attached) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. Comments:
(1).HTML comments:
(2).CSS comments: /* *
2.Insert CSS into HTML (Cascading style sheet) method
(1). Inline style (write the style directly after the tag)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>行内样式</title> </head> <body> <p style="font-famliy:宋体; text-align:center;font-style:italic; text-transform:uppercase; font-size:22px; text-decoration:underline; font-weight:bold; letter-spacing:13px">html中插入css样式的方法:</br>1 行内样式;2 内部样式; <br/>3 外部样式; 4 导入样式;</p> </body> </html>
(2) Embedded (write the style and html language separately)
<!doctype html><html><head> <meta charset="utf-8"> <title>行内样式</title> <style type="text/css"> p{ text-decoration:underline; text-align:center; font-size:26px; font-family:宋体; font-weight:bolder; text-transform:lowercase; letter-spacing:4px; color:pink; background-color:green; } </style></head><body> <p >HTML中插入CSS样式的方法:</br> 1 行内样式;2 内部样式; <br/> 3 外部样式; 4 导入样式; </p></body></html>
3. External style (link style: write CSS and HTML separately)! ! ! ! Most commonly used
first.html
<!doctype html><html><head> <meta charset="utf-8"> <title>行内样式</title> <link href="first.css" type="text/css" rel="stylesheet"></head><body> <p >HTML中插入CSS样式的方法:</br> 1 行内样式;2 内部样式; <br/> 3 外部样式; 4 导入样式; </p></body></html>
first.css
p{ text-decoration:underline;/*加下划线*/ text-transform:lowercase;/*大写字母全部小写*/ text-align:center;/*居中*/ font-size:23px;/*字体大小*/ font-family:黑体;/*设置字体*/ font-style:italic;/*设置字倾斜*/ text-indent:3px;/*设置首行缩进*/ color:red;/*设置字体颜色*/ background-color:#ddd;/*设置背景颜色*/ letter-spacing:4px;}
4.Import
first.html
<!doctype html><html><head> <meta charset="utf-8"> <title>行内样式</title> <style type="text/css"> @import url(first.css); </style></head><body> <p >HTML中插入CSS样式的方法:</br> 1 行内样式;2 内部样式; <br/> 3 外部样式; 4 导入样式; </p></body></html>
first.css
p{ text-decoration:underline;/*加下划线*/ text-transform:lowercase;/*大写字母全部小写*/ text-align:center;/*居中*/ font-size:33px;/*字体大小*/ font-family:黑体;/*设置字体*/ font-style:italic;/*设置字倾斜*/ text-indent:3px;/*设置首行缩进*/ color:red;/*设置字体颜色*/ background-color:#ddd;/*设置背景颜色*/ letter-spacing:4px;}
Related recommendations:
JavaScript method of dynamically inserting CSS_javascript skills
How to introduce CSS into HTML
The above is the detailed content of How to insert CSS in html? Introduction to four methods of inserting css into html (with code). For more information, please follow other related articles on the PHP Chinese website!

There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.

Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that

Page reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Wufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Atom editor mac version download
The most popular open source editor

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

Dreamweaver CS6
Visual web development tools

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),