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>