CSS Overview
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个HTML tags were originally designed to define the content of the document. By using <h1>, <p>, <table> tag such, HTML intention is expressed message "This is the title," "This is a paragraph", "This is a table" and the like. At the same time the document layout is done by the browser, without using any formatting tags.
All major browsers support Cascading Style Sheets
div and span of understanding
- div is a html tag, a block element (single display line), used alone has no meaning and must be used in conjunction with CSS, mainly for the page layout;
- span is a html tag, an inline element (display line), which alone has no meaning, must be used in conjunction css, mainly modified contents enclosed pattern;
Class selector
Before using class selectors century mark on the document in order to play the role of class selector.
.name{text-align:center}In the latter part of the document, by including style-related 'class' attribute, and in which a predefined style designated as 'name' value, an explicitly selected for the particular case of what style tags with
<p class=name>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.sheen{font-size: large;color: salmon}
</style>
</head>
<body>
<div class="sheen">
Sie sprechen gut Deutsch.
</div>
<div class="star">
Was machen Sie hier in Berlin?Arbeiten Sie hire?
</div>
<div class="sheen">
Nein,ich studiere.
</div>
</body>
</html>
ID selector
ID selector similar class selector with a number ID # front selector - also known as the board number or hash. Like the class selector, ID selector may ignore wildcard selector.
ID is a unique identifier that can only be used once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#sheen{font-size: x-large;color: rosybrown}
#star{font-size: large;color: #c0ffff}
#clotho{font-size: xx-large;color: darkgreen}
</style>
</head>
<body>
<div id="sheen">
Sheen:Sie sprechen gut Deutsch.
</div>
<div id="star">
Star:Was machen Sie hier in Berlin?Arbeiten Sie hire?
</div>
<div id="clotho">
Clotho:Nein,ich studiere.
</div>
</body>
</html>
Tag selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
div{margin: 0 auto;border: 1px;color: darkgreen;font-size: larger;text-align: center}
</style>
</head>
<body>
<h3>使用CSS</h3>
<div>
类选择器
</div>
<div>ID选择器</div>
<div>标签选择器</div>
</body>
</html>
Set linked style
Links can be set CSS style attributes There are many (such as color, font-family, background, etc.).
Link particularity that can be set according to the style of their state in which they are located.
Links of four states:
A: Link - ordinary, non-visited links
a: visited - the user has visited links
a: hover - mouse pointer is over the link
a: active - the link is clicked the moment
The introduction of CSS styles
The introduction of ways:
1). 行内引入: <a style="行内引入的样式">
2). 内部引入: 写在head标签里面的style标签里面的样式;
3). 外部引入: 将css样式独立成一个文件， 通过<link rel="stylesheet" href="css/main.css">与当前html文件链接在一起.
三种引入方式的优先级: 就近原则//CSS文件
div {
width: 80%;
margin: 0 auto;
padding: 0;
}
ul {
list-style-type: none
}
li {
display: inline-block;
width: 20%;
background: snow;
color: #333333;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-size: large;
text-transform: capitalize;
}
li:hover {
background: green;
color: snow;
}
a:hover {
color: snow;
}
<!--HTML文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
background: red;
}
</style>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div>
<ul>
<li style="background: blue">
<a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
</li>
<li>CSS</li>
<li>JS</li>
<li>python</li>
</ul>
</div>
</body>
</html>