css basics
1. Introduction to css
2. CSS Basic Syntax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css引用样式</title>
<!-- 3.引入外部样式文件：link:css -->
<link rel="stylesheet" href="style.css">
<!-- 2.内部样式表 -->
<style type="text/css">
@import"style.css";
p{
background-color: #eeeeee;
font-size: 18px;
font-style: italic;
}
</style>
</head>
<body>
<!-- 1.行间样式 -->
<div style="color:olive;width:100px;border:1px solid blue;">行间样式测试1</div>
<div>行间样式测试2</div>
<p>duanluo 1</p>
<p>duanluo 2</p>
<span>外部样式测试</span>
<div class="box">导入外部样式</div>
<div class="box">导入外部样式</div>
<div class="box">导入外部样式</div>
</body>
</html>
3. css selector
xuan<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css选择器</title>
<!-- 1.*匹配所有标签，性能较差，因为要匹配所有元素 -->
<style>
*{
color:red;
}
<!-- 2.标签选择器 -->
span
{
display:block;
margin-right: 20px;
border: 1px solid gray;
}
<!-- 3.类选择器 -->
.wrapper{
color: aqua;
}
<!-- 4.id选择器 -->
#content{
color: pink;
}
</style>
</head>
<body>
<p>这是p标签</p>
<strong>这是strong标签</strong>
<span>这是span标签</span>
<div>这是div标签</div>
<div class="wrapper">这是div标签</div>
<p id="content">这是内容</p>
<p id="content">这是内容</p>
</body>
</html>
4. Priority
5. css font properties
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css字体</title>
<style>
p{
font-size: 28px;
font-family: 1体,宋体;
font-style: italic;
font-weight: 800;
line-height: 50px;
}
p span{
font-weight: 200;
color:red ;
}
em{
text-decoration: line-through;
}
</style>
</head>
<body>
<p><span>W3School </span>简体中文版提供的内容仅用于培训和测试，
不保证内容的正确性。<em>通过使用本站内容随之</em>而来的风险
与本站无关。版权所有，保留一切权利。</p>
</body>
</html>
6. css background
7. css pseudo class selector
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css伪类选择器</title>
<style>
a:link{/* 可以省略 */
color: red;
}
a:visited{
color: green;
}
a:hover{
color:yellow ;
}
a:active{
color: blue;
}
input:focus{
outline: 1px solid #f00;
}
ul li:first-child{
color: #ff1299;
}
ul li:last-child{
color: #55ff00;
}
ul li:nth-child(2){
color: #ff5500;
}
</style>
</head>
<body>
<a href="#">单击我跳转</a>
<input type="text">
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ul>
</body>
</html>
8. Attribute and relationship selectors
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
div.content[title]{
font-weight: bold;
}
input[name=usr]{
background-color: #fff999;
}
</style>
</head>
<body>
<div class="content" title="内容">content1</div>
<div class="content">content1</div>
<form action="">
<input type="text" name="usr">
<input type="text" name="account">
</form>
</body>
</html>
9. css pseudo-elements
