css元素与元素框，元素的显示方式，媒体查询

css层叠样式表
元素与元素框
http://182.92.4.86:90/0405/demo1.html
置换元素：元素框中的内容由外部引入，如img，input
非置换元素：元素框中的内容由用户输入，如p，div
元素类型
块级元素：默认占元素框中的一行，如p,div
行内元素:一行内可以有多个元素，如input,a
行内块元素：一行内可以有多个元素，且支持设置宽高，如img

<!-- 非置换元素:双标签 -->
    <p style="background-color: lightgreen;">hello world</p>

    <!-- 置换元素:单标签，双标签 -->
    <img src="1.jpg" alt="" width="100" height="80">
    <input type="text" name="" id="" style="width: 50px;">
    <!-- <video src="girl.mp4">浏览器不支持该元素</video>
    <script src="demo.js"></script>
    <link rel="stylesheet" href=""> -->

    <a href="" style="width: 50px;">php.cn</a>
    <strong style="width: 100px;">PHP中文网</strong>
    <!-- 行内元素，如果是非置换元素，不能设置大小
    如果是置换元素（外部导入的资源），可以设置宽高，对于这类元素，称之为行内块元素 -->

4.css应用到html

link标签引入，@import引入，style元素以及style属性来设置

http://182.92.4.86:90/0405/demo2.html

http://182.92.4.86:90/0405/demo3.html

http://182.92.4.86:90/0405/demo4.html

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <link rel="stylesheet" href="style/style2.css">    
    <title>Document</title>
</head>
<body>    
    <h2>php中文网第11期上课啦</h2>    
    <ul>        
        <li>前端基础：html5/css.flex/grid</li>       
         <li>PHP开发：php+pdo+mvc+composer</li>        
         <li>前端进阶：JavaScript + jQuery +layUI</li>        
         <li>laravel：实战</li>    </ul>
</body></html>

5.媒体查询

设置浏览器使用指定的样式表

http://182.92.4.86:90/0405/demo5.html

http://182.92.4.86:90/0405/demo6.html

<!DOCTYPE html>
<html lang="en">
<head>   
     <meta charset="UTF-8">   
      <meta name="viewport" content="width=device-width, initial-scale=1.0">    
      <title>媒体查询</title>   
       <style>        
           h1 {
             color: green;        
          }        
          body {   
                   background-color: cyan;       
          }        
          /* 大于等于500px以下样式有效 */   
         @media screen and (min-width:500px){  
            h1 {   
                    color: red;           
                }            
            body {   
                  background-color: wheat;      
              }           
         }    
     </style>
 </head>
 <body>   
      <h1>hello，欢迎来学习我的课程</h1>
</body>
</html>

<style>
        .nav {
            height: 50px;
            background-color: #eee;
            display: flex;
            align-items: center;
        }
        .nav ul {
            display: flex;
            list-style: none;
        }
        .nav ul a {
            color: #666;
            text-decoration: none;
            padding: 0 15px;
        }
        /* 局部媒体查询，当屏幕宽度小于400px，不要显示菜单了 */
        @media screen and (max-width: 400px) {
            .nav ul {
                display: none;
            }
        }

    </style>
    <body>
    <div class="nav">
        <div class="log">LOGO</div>
        <ul>
            <li>
                <a href="">首页</a>
                <a href="">视频</a>
                <a href="">问答</a>
                <a href="">下载</a>
            </li>
        </ul>
    </div>
</body>

总结：今天是学习css的第一天，第一次听说置换元素以及非置换元素的概念，以前只知道有行内元素、块内元素今天知道还有这种行内块元素（占一行也可以设置宽高）。对于如何将css引入到html中有四种方式，分别是外部文件、@import复制过来、style元素以及style属性来设置。最后一部分是媒体查询，这个名字第一次听说，但是这种应用比较多，如手机和web网站显示不一样就是这种，但是以前不清楚这个是通过css来控制的，通过学习知道了是通过css控制屏幕大小来控制。

相关文章