1. What is CSS
Cascading Style Sheet laminated cascading style sheets, used to represent an HTML (an application of Standard Generalized Markup Language) or XML (a subset of the Standard Generalized Markup Language) document style like computer language. CSS can not be statically modified pages, with a variety of scripting languages can also be dynamically formatted for each element on the page.
CSS page layout can be on positions of the elements pixel-level precision control, supports almost all of the fonts in style, with the ability to model a web object and style editor.
css performance for the beautification of the page, including fonts, colors, margins, height, width, background images, page positioning, web float ....
History 2.CSS development
- CSS1.0
- CSS2.0 DIV (block) + CSS, HTML and CSS structural separation of thought, the page becomes simple, SEO
- CSS2.1 floating positioning
- CSS3.0 rounded corners, shadows, animation ... Browser Compatibility -
3.CSS Quick Start
styleBasic entry
- My first css code: Internal Style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style> 可以编写css的代码 ，每一个声明，最好使用分号结尾
语法：
选择器 {
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
- My first css code: external style,(Recommended in this way)
4.CSS advantage
1, separation of content and presentation
2, page structure unified performance can be achieved reuse
3, the style is very rich
4, it is recommended to use a separate html css file
5, the use of SEO (search engine optimization), easily indexed by search engines
Three ways to import 5.CSS
- Internal Style
- External style
- Inline style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则 -->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style="color:red;">我是标题</h1>
</body>
</html>
Development: external style two way
- 1. Link type:
HTML
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
- 2. Import type
@import CSS 2.1 is unique!
<!--导入式-->
<style>
@import url("css/style.css");
</style>
