CSS styles can be introduced into HTML documents as separate files ( .css type files) or written directly in HTML documents. They can be roughly divided into the following four methods:
The first and second methods both write CSS styles into the current HTML document. The third and fourth methods both place the CSS styles in external files and then import them into the current HTML document.
Inline style is to put the CSS style directly in the tag within the line of code, usually in style attribute of the tag. Since the inline style is directly inserted into the tag, it is the most direct way, and it is also the most inconvenient to modify. style.
[Example 1] Apply CSS inline styles to paragraphs, <h2> tags, <em> tags, <strong> tags, and <div> tags respectively.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Inline styles</title>
</head>
<body>
<p style="background-color: #999900">Inline element, control paragraph-1</p>
<h2 style="background-color: #FF6633">Inline element, h2 title element</h2>
<p style="background-color: #999900">Inline elements, control paragraph-2</p>
<strong style="font-size:30px;">Inline elements, strong is more effective than em</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">Inline elements, div block-level elements</div>
<em style="font-size:2em;">Inline elements, em emphasis</em>
</body>
</html>The page demonstration effect is as shown below:
In the above example, the inline style is embedded by the style attribute of the HTML element, that is, the CSS code can be placed within style="" quotes, and multiple CSS attribute values are separated by semicolons ; For example, the <div> tag in the example:
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">Inline elements, div block-level elements</div>
The paragraph <p> tag sets the background color to brown (background-color: #999900), and the title <h2> tag sets the background color to red (background-color: #FF6633).
The <strong> tag sets the font to 30 pixels (font-size:30px;), the <div> tag sets the height and line height to 30 pixels and sets the background color and color (background-color: #66CC99; color: #993300 ; height:30px; line-height:30px;), the <em> tag sets the font size to relative units (font-size: 2em;).
Although the content of the two paragraph <p> tags is different, they use the same background color setting, but add the CSS inline attribute twice to set the background color background-color: #999900.
Although inline elements are simple to write, the following defects can be found through examples:
Each tag needs to be styled by adding the style attribute. Different from the past when web page producers mixed HTML tags and styles together, now inline styles are written through CSS, and in the past, HTML tag attributes were used to achieve style effects. Although the methods are different, the consequences are the same: high maintenance costs in the future, that is, when modifying the page, you need to open each page of the website one by one and modify it one by one, and you cannot see the role of CSS at all. Adding so many inline styles will make the page large. If the portal is written in this way, it will waste server bandwidth and traffic.Some web pages on the Internet can see this way of writing by looking at the source files. Although only part of a web page is done this way, it needs to be differentiated according to the situation:
If a web page creator writes such an inline style, the current style can be quickly changed without having to consider the conflict of previously written styles. If this situation exists in the web page, it is because the style is generated by the editor during background editing, or the background is not fully developed. , it is necessary to develop options for editors to select styles instead of directly changing color, thickness, background color, tilt and other effects through the editor.Inline styles write CSS at the head of the web page source file, that is, between <head> and <head>, and surround it by using the <style> tag in the HTML tag. Its characteristic is that the style can only be used here. Use page to solve the disadvantage of writing inline styles multiple times.
[Example 2] Set an inline style writing method for paragraphs to reduce the amount of code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Embedded</title>
<style type="text/css">
p{
text-align: left; /*text left aligned*/
font-size: 18px; /*Font size 18 pixels*/
line-height: 25px; /*Line height 25 pixels*/
text-indent: 2em; /*Indent the first line by 2 text-size spaces*/
width: 500px; /*Paragraph width 500 pixels*/
margin: 0 auto; /*Centered under browser*/
margin-bottom: 20px; /*paragraph bottom margin 20 pixels*/
}
</style>
</head>
<body>
<p>The name of the company "Baidu" comes from the Song Dynasty poem "Looking for him in thousands of Baidu". (The conference room of Baidu Company is named Qingyu Case, which is the word card of this poem). The idea of the "bear paw" icon came from the stimulation of "hunters patrolling bear paws", which is very similar to Dr. Li's "analytical search technology", thus forming Baidu's search concept and eventually becoming Baidu's icon image. After that, because most of the search engines were represented by animal images, such as SOHU's fox, such as GOOGLE's dog, Baidu naturally called it a bear. Baidu Bear has become the image of Baidu Company. </p>
<p>In Baidu's plan to change its LOGO, the three new LOGO designs proposed by Baidu were all rejected by netizens' votes. More netizens voted for the original bear paw logo. </p>
<p>A total of three rounds of voting were conducted to change the LOGO. Until the end of the second round of voting, the new smiling face LOGO had an absolute advantage. But in the final round of voting, the original bear paw logo dramatically won the most votes from netizens, thus completely rejecting the three new LOGO plans. </p>
</body>
</html>The page demonstration effect is as shown below:
In the above example, the paragraphs are set as follows: the text is left aligned, the font is size 14, the line height is 25 pixels, the width is 500 pixels, the bottom margin is 20 pixels, the browser is centered under the browser, and the first line is indented by two text-size spaces. The first line indentation uses relative units. The purpose of this setting is that when the font size changes (such as font-size: 18px; ), it can still be indented by two text size spaces.
Inline styles bring inconvenience in style modification. For example, in the previous example, both paragraphs use the same style, but they need to be written twice. With inline styles, all paragraph styles can be put together.
Style can not only define CSS styles, but also JavaScript scripts, so you need to pay attention when using style. When the type value of style is text/css , the CSS style is written internally; if the type value of style is text/javascript , the JavaScript script is written internally.
The title attribute of the style tag
There is a special attribute title in style. You can use title to set a title for different styles. The viewer can choose different styles according to the title to achieve the effect of switching in the browser. However, IE browser does not support it, and Firefox browser supports it. This effect.
[Example 3] Set two font size styles for Firefox browser respectively, and modify them through the Firefox "View" menu.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css" title="Font size 14">
p{
text-align: left; /*text left aligned*/
font-size: 14px; /*Font size 14 pixels*/
line-height: 25px; /*Line height 25 pixels*/
text-indent: 2em; /*Indent the first line by two text-size spaces*/
width: 500px; /*Paragraph width 500 pixels*/
margin: 0 auto; /*Centered under browser*/
}
</style>
<style type="text/css" title="Font size 18">
p{
text-align: left; /*text left aligned*/
font-size: 18px; /*Font size 18 pixels*/
line-height: 25px; /*Line height 25 pixels*/
text-indent: 2em; /*Indent the first line by two text-size spaces*/
width: 500px; /*Paragraph width 500 pixels*/
margin: 0 auto; /*Centered under browser*/
color: #6699FF; /*Change font color*/
}
</style>
</head>
<body>
<p>The name of the company "Baidu" comes from the Song Dynasty poem "Looking for him in thousands of Baidu". (The conference room of Baidu Company is named Qingyu Case, which is the word card of this poem). The idea of the "bear paw" icon came from the stimulation of "hunters patrolling bear paws", which is very similar to Dr. Li's "analytical search technology", thus forming Baidu's search concept and eventually becoming Baidu's icon image. </p>
</body>
</html>The page demonstration effect is shown in the figure below.
In the above example, two font sizes are defined through <style type="text/css" title="名称"> , and there are two options in the "Page Style" submenu under the "View" menu in Firefox. : Font size 14, font size 18. By default, the first written <style type="text/css" title="名称"> is displayed. The page style can be changed through the menu.
The link method links external style sheet files to HTML documents through the <link> tag of HTML. This is the most commonly used method on websites on the Internet, and it is also the most practical method. This method completely separates HTML documents and CSS files, achieves complete separation of the structure layer and the presentation layer, and enhances the scalability of the web page structure and the maintainability of CSS styles.
[Example 4] Use link style to apply styles to HTML code, which is easy to write and change.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>I am controlled by the lianjie-2.css file. How about you downstairs? ? </p>
<h3>Upstairs, the <span>lianjie.css</span> file gave me a colorful dress. </h3>
</body>
</html>The page demonstration effect is as shown below:
In the above example, two CSS files are linked through link, and both are valid. This is why the website creator puts the common part into a CSS file, and writes a new style file for the current page style.
lianjie.css file code:
h3{
font-weight: normal; /*Cancel the default bold effect of the title*/
background-color: #66CC99; /* Set background color*/
height: 50px; /*Set the height of the label*/
line-height:50px; /* Set the line height of the label*/
}
span{
color: #FFOOOO; /* font color*/
font-weight:bold; /* bold font*/
}lianjie-2.css file code:
p{
color: #FF3333; /*Font color setting*/
font-weight: bold; /* bold font*/
border-bottom: 3px dashed #009933; /* Set the bottom border line*/
line-height: 30px; /* Set line height*/
}Linked styles completely separate CSS code and HTML code, achieving the separation of structure and style, allowing HTML code to specifically build the page structure, while the beautification work is completed by CSS.
The benefits of linking imported CSS styles:
CSS files can be placed in different HTML files to unify the styles of all pages of the website; furthermore, putting the CSS code into one CSS file facilitates management and reduces code and maintenance time; when the CSS file is modified, all pages that apply this CSS file will All HTML files will be updated without having to retrieve all pages from the server and then upload them after modification.Importing styles Use the @import command to import external style sheets. There are 6 writing methods for imported styles:
@import daoru.css;
@import 'daomxss';
@import "daoru.css";
@import url(daoru.css);
@import url('daoru.css');
@import url("daoru.css");[Example 5] Import the style sheets lianjie.css and daoru.css and write the background color of the <body> tag. Note that the imported style sheet and <body> tag styles cannot be reversed.
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@import url(lianjie.css);
@import url(daoru.css);
body { background-color: #e4e929; }
</style>
</head>
<body>
<div>
<p>I am controlled by the lianjie-2.css file. How about you downstairs? ? </p>
<h3>On the jacket, the <span>lianjie.css</span> file gave me a floral dress. </h3>
</div>
</body>
</html>The page demonstration effect is shown in the figure below.
In the above example, it must be @import url("lianjie-2.css"); p{text-indent: 3em;} , but not p{text-indent:3em;} @import url("lianjie-2.css"); otherwise the import effect will be invalid. In the CSS file, @import also needs to be placed at the front and the CSS style is added at the end, otherwise it will be invalid.
lianjie.css file code, the same as the previous example, that is, link type.
daoru.css file code:
@import url("lianjie-2.css");
p { text-indent: 3em; }This concludes this article on the four implementation methods of HTML embedded CSS styles. For more related HTML embedded CSS styles, please search the previous articles of downcodes.com or continue to browse the following related articles. I hope you will read more in the future. Support downcodes.com!