博客列表 >HTML/CSS的基本知识总结——20180810(第01课)

HTML/CSS的基本知识总结——20180810(第01课)

PHP作业本
PHP作业本原创
2018年08月17日 18:49:58539浏览

第一节学习到的代码:

<!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>  定义超链接

<a href="http://www.php.cn/">php中文网</a>

运行实例 »


        <div> 定义区块

<div style="background:pink;width:200px;height:200px;"></div>

运行实例 »


        <img> 定义图片

实例

<img src="http://mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png">

运行实例 »


四、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. 属性选择器

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议