css can be divided into three categories: 1. Inline (inline) style, using the style attribute to insert CSS code within the HTML tag, the syntax "
..< ;/tag name>"; 2. Embedded style sheet, put CSS code in the style tag pair in the head part of the document, the syntax is ""; 3. External style sheet, put Put the CSS code into the ".css" file and introduce it into the html document using the link tag or "@import" rule.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
To achieve some effects in HTML code, it is often necessary to add CSS modifications. There are three types of CSS in HTML: inline styles, embedded style sheets, and external style sheets.
1. Inline (inline) style
Inline style is to define the style information directly in the style attribute of the HTML tag. Because Inline styles are defined inside tags, so they are only valid for the tag in which they are placed.
<body style="background-color:black;">
<h1 id="Hostinger-nbsp-Tutorials">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
</body>
It is recommended not to use inline CSS because each HTML tag needs to be styled separately, and if you only use inline CSS, it may become very difficult to manage the website . However, it can be useful in certain situations. For example, in situations where you don't have access to CSS files or only need to apply styles to a single element.
Disadvantages:
Defining inline styles requires defining the style attribute in each HTML tag, which is very inconvenient;
Be especially careful when using double quotes or single quotes in inline styles, because attributes of HTML tags usually use double quotes to wrap the attribute value, such as ;
Styles defined in inline styles cannot be reused anywhere else;
Inline styles are very inconvenient for later maintenance , because a website usually consists of many pages, and when modifying the page style, the pages need to be modified one by one;
Adding too many inline styles will cause the size of the HTML document to increase.
2. Embedded style sheet
Write the style code on the page<style>...</style>> ;Among tags
<style>
bdoy{font-size:14px;}
</style><style>...</style>The tag structure can be located anywhere in the page tag, or it can be multiple appears. Usually the entire <style>...</style> structure is written in the
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1 id="PHP中文网">PHP中文网</h1>
<p>https://www.php.cn/</p>
</body>
</html>
Because the embedded style sheet needs to define the CSS style inside the HTML document, it will cause the size of the document to become larger, and when there are other documents, it also needs to be used. When the same style is embedded in a style sheet, it cannot be introduced into other documents and must be redefined in other documents, which will lead to code redundancy and is not conducive to later maintenance.
3. External style sheets
are used in actual development. Suitable for situations with many styles. The styles are written separately into CSS files, and then the CSS files are introduced into HTML for use.
1) Using link
link style means to define a CSS style sheet externally and form a file with the extension .CSS, and then Link to the page through the <link> link tag, and the link statement must be placed in the
Syntax:
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
Description of each attribute:
href attribute sets the address of the external style sheet file, which can be a relative address or is an absolute address.
The rel attribute defines the associated document, which here indicates that the associated document is a style sheet.
The type attribute defines the type of imported file. Like the style element, text/css indicates a CSS text file.
Generally when defining the <link> tag, three basic attributes should be defined, among which href is a must-set attribute.
You can also add the title attribute in the link element to set the title of the optional style sheet. That is, when a web document imports multiple style sheets, you can select the style sheet file to be applied through the title attribute value.
Tip: In the Firefox browser, you can select the "View --> Page Style" option in the menu, and then the title attribute value will be displayed in the submenu. Just select a different title attribute value. Selectively apply required style sheet files. IE browser does not support this feature.
另外，title 属性与 rel 属性存在联系，按 W3C 组织的计划，未来的网页文档会使用多个 <link> 元素导入不同的外部文件，如样式表文件、脚本文件、主题文件，甚至可以包括个人自定义的其他补充文件。导入这么多不同类型、名称各异的文件后，可以使用 title 属性进行选择，这时 rel 属性的作用就显现出来了，它可以指定网页文件初始显示时应用的导入文件类型，目前只能关联 CSS 样式表类型。
外部样式是 CSS 应用的最佳方案，一个样式表文件可以被多个网页文件引用，同时一个网页文件可以导入多个样式表，方法是重复使用 link 元素导入不同的样式表文件。
2）、使用@import
导入式是通过@import在
语法：
<style type="text/css">
@import url("css文件路径");
</style>在 @import 关键字后面，利用 url() 函数包含具体的外部样式表文件的地址。
简单实例：
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>实现效果：
两种导入样式表的方法比较：
1、从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2、加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3、权重区别
link 方式的样式的权重高于 @import 权重。
4、兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
5、DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
说明：
一般推荐使用 link 导入样式表的方法，@import 可以作为补充方法使用。
（学习视频分享：web前端）
The above is the detailed content of There are several categories of css in html. For more information, please follow other related articles on the PHP Chinese website!
css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。
css与xml的区别是什么Apr 24, 2022 am 11:21 AM区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。
css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。
rtl在css是什么意思Apr 24, 2022 am 11:07 AM在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。
css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。
css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。
怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM在css3中，可以用“transform-origin”属性设置rotate的旋转中心点，该属性可更改转换元素的位置，第一个参数设置x轴的旋转位置，第二个参数设置y轴旋转位置，语法为“transform-origin:x轴位置 y轴位置”。
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
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),
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.
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
Atom editor mac version download
The most popular open source editor
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.
