Blogger Information
Blog 6
fans 0
comment 0
visits 4395
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML/CSS的基本知识总结——20180810(第01课)
PHP作业本
Original
543 people have browsed it

第一节学习到的代码:

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

Correction status:qualified

Teacher's comments:手写代码记得补上!!!
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post