css基本语法及页面引用
css基本语法
css的定义方法是：
选择器 { 属性:值; 属性:值; 属性:值;}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：
div{ width:100px; height:100px; color:red }
css页面引入方法：
1、外联式：通过link标签，链接到外部样式表到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
2、嵌入式：通过style标签，在网页上创建嵌入的样式表。
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>
3、内联式：通过标签的style属性，在标签上直接写样式。
<div style="width:100px; height:100px; color:red ">......</div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="color:red;font-size:12px;font-family:'微软雅黑';line-height:40px;"> Python 的 3.0 版本，常被称为 Python 3000，或简称 Py3k。相对于 Python的早期版本，这是一个较大的升级。为了不带入过多的累赘，Python3.0在设计的时候没有考虑向下兼容。Python介绍及安装教程我们在Python2.X版本的教程中已有介绍，这里就不再赘述。你也可以点击 Python2.x与3.x版本区别来查看两者的不同。本教程主要针对Python 3.x版本的学习，如果你使用的是 Python 2.x 版本请移步至 Python 2.X 版本的教程。 </div> </body> </html>
内嵌式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
color:red;
font-size:12px;
font-family:'微软雅黑';
line-height:40px;
}
</style>
</head>
<body>
<div>
Python 的 3.0 版本，常被称为 Python 3000，或简称 Py3k。相对于 Python的早期版本，这是一个较大的升级。为了不带入过多的累赘，Python3.0在设计的时候没有考虑向下兼容。Python介绍及安装教程我们在Python2.X版本的教程中已有介绍，这里就不再赘述。你也可以点击 Python2.x与3.x版本区别来查看两者的不同。本教程主要针对Python 3.x版本的学习，如果你使用的是 Python 2.x 版本请移步至 Python 2.X 版本的教程。
</div>
</body>
</html>
外链式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div> Python 的 3.0 版本，常被称为 Python 3000，或简称 Py3k。相对于 Python的早期版本，这是一个较大的升级。为了不带入过多的累赘，Python3.0在设计的时候没有考虑向下兼容。Python介绍及安装教程我们在Python2.X版本的教程中已有介绍，这里就不再赘述。你也可以点击 Python2.x与3.x版本区别来查看两者的不同。本教程主要针对Python 3.x版本的学习，如果你使用的是 Python 2.x 版本请移步至 Python 2.X 版本的教程。 </div> </body> </html>
css/main.css
div{
color:red;
font-size:12px;
font-family:'微软雅黑';
line-height:40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
color:red;
font-size:20px;
font-family:'微软雅黑';
line-height:40px;
text-indent: 40px;
}
em{
font-style: normal;
}
span{
font-weight: bold;
}
h2{
/*font-family: '微软雅黑';
font-weight: normal;*/
font:normal 30px/40px 'Microsoft Yahei';
text-align: center;
/*color: gold;*/
/*color:rgb(255,0,0);*/
/*color:#ff0000;*/
color:#f00;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<h2>这是一个标题</h2>
<div>
<em>Python 的 3.0 版本，常被称为 Python 3000</em>，或简称 Py3k。相对于 Python的早期版本，<b>这是一个较大的升级。</b>为了不带入过多的累赘，Python3.0在设计的时候<span>没有考虑向下</span>兼容。Python介绍及安装教程我们在Python2.X版本的教程中已有介绍，这里就不再赘述。你也可以点击 Python2.x与3.x版本区别来查看两者的不同。本教程主要针对Python 3.x版本的学习，如果你使用的是 Python 2.x 版本请移步至 Python 2.X 版本的教程。
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
div{
color:red;
}
#box{
color:green;
}
.blue{
color:blue;
}
.bold{
font-weight: bold;
}
.yahei{
font-family: 'Microsoft Yahei';
}
.duanluo{
text-indent: 40px;
font-size: 20px;
}
.duanluo em{
font-style: normal;
color:pink;
}
.list{
list-style:none;
}
.list li{
height: 30px;
}
.list li a{
text-decoration: none;
font-family: 'Microsoft Yahei';
font-size:14px;
}
</style>
</head>
<body>
<div>这是一个div</div>
<div id="box">这是第二个div</div>
<div class="blue">这是第三个div</div>
<div class="blue bold yahei">这是第四个div</div>
<div class="yahei">这是第五个div</div>
<p class="duanluo yahei">
Python 的 3.0 版本，常被称为 Python 3000，或简称 Py3k。<em>相对于 Python的早期版本，这是一个较大的升级。</em>为了不带入过多的累赘，Python3.0在设计的时候没有考虑向下兼容。Python介绍及安装教程我们在Python2.X版本的教程中已有介绍，这里就不再赘述。你也可以点击 Python2.x与3.x版本区别来查看两者的不同。本教程主要针对Python 3.x版本的学习，如果你使用的是 Python 2.x 版本请移步至 Python 2.X 版本的教程。
</p>
<p>
这是一段<em>文字，</em>正在学习html语言．
</p>
<ul class='list'>
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
</ul>
</body>
</html>
浙公网安备 33010602011771号