第一节学习到的代码:
<!DOCTYPE html> <html> <head> <title>PHP中文网-视频教程</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="static/style.css"> <link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png"> <style type="text/css"> body{} /*标记选择器 标签选择器*/ a{color:red;} #box{width:100px;height:100px;background: pink;} /*id选择器*/ .main{width:100px;height:100px;background:green;} /*class选择器 类选择器 */ a[href="http://www.php.cn/"]{color: blue;} /*属性选择器*/ a[href="demo2.html"]{color: blue;} div a{color:*000;} /*派生选择器*/ </style> </head> <body> <img src=""> <a href="https://www.baidu.com/">百度</a> <a href="http://www.php.cn/">php中文网</a> <a href="demo2.html">demo2</a> <div id="box"> <a href="">php</a> </div> <div class="main"></div> </body> </html>
知识总结:
一、声明文档类型:
<!DOCTYPE html> 除html类型外,还有xml 、xhtml。
二、<head>中常用的标签:
<title> 定义网页文档标题
<meta> 定义网页信息,如文档编码:utf-8
<link>链接外部文件
1. 链接样式表 <link rel=“stylesheet” type=“text/css” href=“路径”>
2. 链接缩略图标<link rel = “shotcut-icon” type=“image/x-icon” href =“路径”>
rel 定义文档与文件的关系 type 文件类型 href 文件路径
<style> 定义内部样式
三、<body>中常用的标签:
<a> 定义超链接
<div> 定义区块
<img> 定义图片
四、CSS样式的调用方式
1. 内联样式:写在标签的尖括号内
<body style="background:blue;"> <div style="width:100px; height:100px; background:black;"></div> </body>
运行实例 »
2. 内部样式:写在“头”内
实例
<html> <head> <style> body{} a{color:pink;} </style> </head> <body> <a href="http://www.php.cn/">php中文网</a> </body> </html>
运行实例 »
3. 外部样式:单独的css文件
实例
<html> <head> <link rel ="stylesheet" type ="text/css" href="statics/style.css"> </head> <body> <div id="box">这是一个实验</div> </body> </html>
五 、CSS三种调用方式的优先级
内联样式>内部样式>外部样式
六、CSS常用选择器
1. 标签选择器(标记选择器)
2. ID选择器
3. Class选择器 (类选择器)
4. 派生选择器
5. 属性选择器