初识css - 学习 - php中文网博客

首页 > 博客列表 > 初识css

博主信息

博文 26

粉丝 0

访问量 27949

专题推荐

更多>

css 是什么

-就是网页的皮肤

元素框

-网页中每个被叠起来的块就是元素框，框里面的东西就是元素
-元素分为两大类置换元素和非置换元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>这是非内元素</p>
<span>这是非内元素</span>
<a href="">这是置换元素</a>
<img src="" alt="我也是置换元素">
</body>
</html>

display 属性

-dinslpay 有7个属性值

序号	属性值	描述
1	`inline`默认	行内元素,`<span>`, `<a>`
2	`block`	块级元素,`<div>`,`<p>`
3	`inline-block`	行内块级元素,`<img>`
4	`list-item`	块级: 列表元素,`<li>`
5	`table`	块级: 表格元素,`<table>`
6	`flex`	弹性元素
7	`grid`	网格元素
8	`none`	还有个none 是不显示

css的引入方式

-css的四种引入方式

序号	属性值	描述	备注
1	`link`标签	`<link rel="stylesheet" href="..." />`	外部样式
3	`@import`指令	`@import url(...) , @import '...'`	外部样式
2	`<style>`元素	`<style>...</style>`	内部样式
4	`style=""`属性	`<tag style="...">`	行内样式


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--第一种-->
    <link rel="stylesheet" href="./css.css">
   <!--第二种-->
    <style>
        /*第三种*/
        @import "./css.css";
        /* 将style1.css复制到这个位置 */
        h2 {
            color: green;
        }
    </style>
</head>
<body>
<div>
    <!--第四种-->
    <h2 style="color: red;">你猜猜</h2>
    <ul>
        <li>我的</li>
        <li>你的</li>
        <li>她的</li>
    </ul>
</div>
</body>
</html>

css注释

单行/多行: /* 注释内容 */
媒体查询
媒体类型通常会添加”媒体描述符”进行精准限制,例如设置媒体尺寸,分辨率等
媒体描述符的语法与 css 样式声明非常类似,如min-width: 500px
与 css 声明的不同之处在于,媒体描述符允许没有值,如print and (color)
多个 “媒体描述符” 之间使用 “逻辑关键字” 连接, 如 and 和 not
and表示多个”媒体描述符”必须同时满足, not则是整个查询取反,且必须写在and前面

序号	媒体描述符	描述
1	`width`	显示区域宽度
2	`min-width`	显示区域最小宽度
3	`max-width`	显示区域最大宽度
4	`device-width`	设备显示区域宽度
5	`min-device-width`	设备显示区域最小宽度
6	`max-device-width`	设备显示区域最大宽度
7	`height`	显示区域高度
8	`min-height`	显示区域最小高度
9	`max-height`	显示区域最大高度
10	`device-height`	设备显示区域高度
11	`min-device-height`	设备显示区域最小高度
12	`max-device-height`	设备显示区域最大高度


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css.css">
    <style>
        @media screen and (max-width: 500px){body{background: red} .show{color: gold;display: block}.heidn{display: none}  }
        @media screen and (min-width: 500px){   body{background: #666666} .heidn{color: aqua;display: block}  .show{display: none}  }
    </style>
</head>
<body>
<div>
  <h1 class="show">小于500px 我就显示了 我的背景变红了 </h1>
  <h1 class="heidn">大于500px 我就显示了 我的背景变灰了 </h1>
</div>
</body>
</html>

总结 css就是html的皮肤可以改变html原始的样式暂时学到的又display 和媒体查询媒体查询在手机端时和pc端页面大小不一时改变他的样式

批改老师：

天蓬老师

批改状态：合格

老师批语：大于500没看到变化?

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

offset 的用法

2022-03-01 16:40:59

css 是什么

元素框

display 属性

css的引入方式

css注释

媒体查询

总结 css就是html的皮肤 可以改变html原始的样式 暂时学到的又display 和媒体查询 媒体查询在手机端时和pc端页面大小不一时改变他的样式

总结 css就是html的皮肤可以改变html原始的样式暂时学到的又display 和媒体查询媒体查询在手机端时和pc端页面大小不一时改变他的样式