Three ways to introduce css: 1. Inline introduction, use the style attribute to insert CSS code into a specific HTML tag, the syntax is "
.."; 2. Embedded introduction, put the CSS code in the style tag pair in the head part of the document, the syntax is ""; 3. External introduction, put the CSS code in Into the external CSS file, use the link tag or "@import" rule to introduce it into the html document.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
CSS: Cascading style sheets are a computer language used to express document styles such as HTML or XML. CSS can not only statically modify web pages, but can also cooperate with various scripting languages to dynamically format various elements of web pages. CSS can perform pixel-level precise control of the layout of element positions in web pages, supports almost all font sizes and styles, and has The ability to edit web object and model styles
Basic syntax of CSS:
CSS rules consist of two main parts: selectors, As well as one or more statements, the selector is usually the HTML element whose style needs to be changed. Each statement consists of an attribute and a value.
1. Selector (Selector)
The selector consists of the id, class attribute or element name itself of the HTML element and some Special symbols are used to specify which HTML element to define the style for. For example, the selector p means to define the style for all
tags in the page;
2. Declaration
There can be one or countless declarations. These declarations tell the browser how to render the object specified by the selector. All declarations are placed within a pair of curly braces { }, immediately following the selector.
The statement must include two parts: attributes and attribute values, and use a semicolon to mark the end of a statement. The semicolon can be omitted for the last statement in a style.
Attribute: The style name you want to set for the HTML element, consisting of a series of keywords, such as color, border, font, etc., in CSS Provides many attributes, which you can view through the W3C official website;
Value: consists of a numerical value and a unit or keyword, used to control the display effect of a certain attribute, such as the value of the color attribute It can be red or #F1F1F1 etc.
Colon: is required to separate attributes and values. Each combination of attributes and values can be regarded as a statement. A semicolon is required at the end of each statement. ; At the end, declarations belonging to the same selector need to be wrapped in curly braces { }.
Three forms of CSS introduction
1. Inline style sheet (inline introduction)
Add the style attribute directly to a single HTML element tag to control the presentation style of the HTML tag.
This way of introducing CSS is decentralized, flexible and convenient, but it lacks integrity and planning, which is not conducive to later modification and maintenance. When the style of the website needs to be modified, the same modification may involve multiple places. , high maintenance costs. The style effect using the STYLE attribute is the strongest and will overwrite the same style effects of other introduction methods.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="PHP中文网">PHP中文网</h1>
<p style="color: blue;">https://www.php.cn/</p>
</body>
</html>
Although inline style (inline style) can easily give CSS styles to HTML tags, its shortcomings are also very obvious, and it is not recommended to use it too much.
Defining inline styles requires defining the style attribute in each HTML tag, which is very inconvenient;
Use double in inline styles Be especially careful when using quotation marks or single quotation marks, because the attributes of HTML tags usually use double quotation marks to wrap the attribute value, such as ;
- ## in The styles defined in inline styles cannot be reused anywhere else;
- Inline styles are very inconvenient in later maintenance, because a website usually consists of many pages. When modifying the page style Pages need to be modified one by one;
- Adding too many inline styles will increase the size of the HTML document.
2. Internal style sheet (embedded introduction)
Write the style code on the page语法：
<style type="text/css">
@import url("css文件路径");
</style>简单实例：
css外部样式表 style.css
h1{
color:red;
}
p{
font-size:14px;
color:green;
}HTML文档
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="styleSheet" href="style.css" />
<!-- <style>
@import url("style.cs");
</style> -->
</head>
<body>
<h1 id="link标签或-import的应用">link标签或@import的应用</h1>
<p>外部定义CSS样式表以.CSS为扩展名文件，然后在页面中通过link标签或@import链接到页面中。</p>
</body>
</html>实现效果：
link和@import的区别：
1、从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2、加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3、兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4、DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
（学习视频分享：web前端）
The above is the detailed content of What are the three different ways to introduce css?. For more information, please follow other related articles on the PHP Chinese website!
What are the limitations of React?May 02, 2025 am 12:26 AMReact'slimitationsinclude:1)asteeplearningcurveduetoitsvastecosystem,2)SEOchallengeswithclient-siderendering,3)potentialperformanceissuesinlargeapplications,4)complexstatemanagementasappsgrow,and5)theneedtokeepupwithitsrapidevolution.Thesefactorsshou
React's Learning Curve: Challenges for New DevelopersMay 02, 2025 am 12:24 AMReactischallengingforbeginnersduetoitssteeplearningcurveandparadigmshifttocomponent-basedarchitecture.1)Startwithofficialdocumentationforasolidfoundation.2)UnderstandJSXandhowtoembedJavaScriptwithinit.3)Learntousefunctionalcomponentswithhooksforstate
Generating Stable and Unique Keys for Dynamic Lists in ReactMay 02, 2025 am 12:22 AMThecorechallengeingeneratingstableanduniquekeysfordynamiclistsinReactisensuringconsistentidentifiersacrossre-rendersforefficientDOMupdates.1)Usenaturalkeyswhenpossible,astheyarereliableifuniqueandstable.2)Generatesynthetickeysbasedonmultipleattribute
JavaScript Fatigue: Staying Current with React and Its ToolsMay 02, 2025 am 12:19 AMJavaScriptfatigueinReactismanageablewithstrategieslikejust-in-timelearningandcuratedinformationsources.1)Learnwhatyouneedwhenyouneedit,focusingonprojectrelevance.2)FollowkeyblogsliketheofficialReactblogandengagewithcommunitieslikeReactifluxonDiscordt
Testing Components That Use the useState() HookMay 02, 2025 am 12:13 AMTotestReactcomponentsusingtheuseStatehook,useJestandReactTestingLibrarytosimulateinteractionsandverifystatechangesintheUI.1)Renderthecomponentandcheckinitialstate.2)Simulateuserinteractionslikeclicksorformsubmissions.3)Verifytheupdatedstatereflectsin
Keys in React: A Deep Dive into Performance Optimization TechniquesMay 01, 2025 am 12:25 AMKeysinReactarecrucialforoptimizingperformancebyaidinginefficientlistupdates.1)Usekeystoidentifyandtracklistelements.2)Avoidusingarrayindicesaskeystopreventperformanceissues.3)Choosestableidentifierslikeitem.idtomaintaincomponentstateandimproveperform
What are keys in React?May 01, 2025 am 12:25 AMReactkeysareuniqueidentifiersusedwhenrenderingliststoimprovereconciliationefficiency.1)TheyhelpReacttrackchangesinlistitems,2)usingstableanduniqueidentifierslikeitemIDsisrecommended,3)avoidusingarrayindicesaskeystopreventissueswithreordering,and4)ens
The Importance of Unique Keys in React: Avoiding Common PitfallsMay 01, 2025 am 12:19 AMUniquekeysarecrucialinReactforoptimizingrenderingandmaintainingcomponentstateintegrity.1)Useanaturaluniqueidentifierfromyourdataifavailable.2)Ifnonaturalidentifierexists,generateauniquekeyusingalibrarylikeuuid.3)Avoidusingarrayindicesaskeys,especiall
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot 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),
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
Dreamweaver CS6
Visual web development tools
