1. Introduction to CSS
1. Definition of
CSS: Cascading Style Sheets (English full name: Cascading Style Sheets) is a file used to represent HTML (an application of standard universal markup language) or XML (a subset of standard universal markup language) Style of computer language.
CSS can not only statically modify web pages, but also dynamically format various elements of web pages with various scripting languages.
CSS can perform precise pixel-level control of the layout of element positions in web pages, support almost all font size styles, and has the ability to edit web page objects and model styles.
To put it simply: CSS refers to Cascading Style Sheets (Cascading Style Sheets) defines how to display and control HTML elements, so as to beautify HTML web pages.
2. Features and advantages
1) Features:
CSS provides a style description for the HTML markup language and defines how the elements are displayed. CSS is a breakthrough in the field of web design. It can be used to modify a small style to update all page elements related to it. Overall, CSS has the following characteristics:
Rich style definition. CSS provides a rich document style appearance, and the ability to set text and background properties; allows you to create borders for any element, and the distance between the element border and other elements, and the distance between the element border and element content; allows to change the text Capitalization, modification, and other page effects.
Easy to use and modify. CSS can define the style in the style attribute of the HTML element, or it can be defined in the header part of the HTML document, or it can declare the style in a special CSS file for reference by the HTML page. In short, CSS style sheets can store all style declarations for unified management. In addition, you can classify elements of the same style and define them with the same style, you can also apply a style to all HTML tags with the same name, or you can assign a CSS style to a page element. If we want to modify the style, we only need to find the corresponding style declaration in the style list to modify.
Multi-page application. CSS style sheets can be stored separately in a CSS file, so that we can use the same CSS style sheet in multiple pages. CSS style sheets do not belong to any page file in theory, they can be referenced in any page file. This can achieve the unity of multiple page styles.
Cascade. Simply put, cascading is to set the same style for an element multiple times, which will use the last set attribute value. For example, the same set of CSS style sheets are used for multiple pages in a site, and some elements in some pages want to use other styles, you can define a style sheet for these styles and apply them to the page. These later defined styles will rewrite the previous style settings, and what you see in the browser will be the style effects set last.
Page compression. In websites that use HTML to define page effects, a large number or repeated forms and font elements are often required to form text styles of various specifications. The consequence of this is that a large number of HTML tags will be generated, thereby increasing the size of the page file. Putting the style declarations separately in the CSS style sheet can greatly reduce the size of the page, so that the time used when loading the page will also be greatly reduced. In addition, the reuse of CSS style sheets reduces the size of the page to a greater extent and reduces the download time. In order to enrich the style of web page elements and to separate the content and style of the web page, CSS was born from this idea. With CSS, most of the tags that express style in html are discarded and html is only responsible for documents The structure and content of the form are completely handed over to CSS, and the html document becomes more concise.
2) Advantages:
In order to enrich the style of web page elements and to separate the content and style of the web page, CSS was born from this idea. With CSS, most of the tags that express style in html are discarded and html is only responsible for documents The structure and content of the form are completely handed over to CSS, and the html document becomes more concise.
2. Basic syntax
1. Introduction of CSS page
Format: selector {attribute: value; attribute: value; attribute: value;…}
Method 1: Inline style
Inline style: Write the style directly on the label through the style attribute of the label. The
simple code is implemented as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css内联式引入</title>
</head>
<body>
<div style="color: red ;font-size:50px">css页面引入方法1</div>
</body>
</html>
As shown in the above code, I directly write the style through the style attribute in the div tag. So here we set the font color to red and the font size to 50px.
Note: This method is the least commonly used in development, because writing the method in the label will make the code look messy, and it is not conducive to management and search, so it will only be used in certain situations. Way to write styles.
Method two: Embedded
Embedded: Create an embedded style sheet on the web page through the style tag. It is more commonly used and needs to be written in the head
The simple code is implemented as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌入式引入 </title>
<!--
css样式的声明：写在head标签里面
1、div是最简单的标签选择器
-->
<style type="text/css">
div {
border:1px solid red;
width:700px;
height:200px
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
Web page implementation result display:
Note: This method is a more common one. Generally, this method is usually used when writing the home page, because the speed of loading the home page of the website will directly affect the user experience, so the loading speed of the web page is necessary. fast. Then this method will not affect the loading speed, and the style is integrated into the label, so it is more applicable. But it will not be used in large quantities. The last one is the way we often use.
Method 3: Out-of-line type
Out-of-line type: Link to external style sheets to the page through the link tag. The most commonly used, written in the head.
The simple code is implemented as follows:
main.css file:
/*外联式css样式信息*/
div {
border: 1px solid red;
width: 700px;
height: 200px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外联式：通过link标签，链接到外部样式表到页面中。-->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
The webpage implementation results are as follows:
Note: It is recommended to write a relative path for the location of the style sheet. It is recommended to store the CSS style file directly in the CSS directory, create a CSS directory, and then create a main.css file in it to edit style code.
In addition: we can see that two files are used this time, one is a css file and one is an html file. The things written in the css file are exactly the same as those written in the style tag. Just write it in a separate file. Then introduce the css style file to the page through the link tag. We don't care about the content in rel, the path in herf is the logical path of the css file. Let's take a look at the effect.
3. Common CSS styles
1. Text settings
2. Color notation When
we first started to imitate other people ’s pages, if we saw people ’s beautiful colors and wanted to use them, just look at the source code of the page. Arrows click on the desired color area, on the right side to view the color used by the source code.
There are many styles of CSS, you can go to the official website to check when you use it, click to enter:
Rookie tutorial
W3C
A simple code example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*标签名叫a*/
a{
text-decoration: none; /*text-...用来去掉超链接的文本装饰下划线*/
}
ul>li{
/*list...用来去掉列表的文本装饰前面的点*/
list-style: none; #用来去掉ul列表前的样式
line-height: 30px; #设置ul列表的行高为30px
}
</style>
</head>
<body>
<a href="#">
百度一下
</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
Web page display results:
