search

博客列表 >2020年4月5日作业--CSS 基础知识及案例

2020年4月5日作业--CSS 基础知识及案例

暴宇
暴宇原创
2020年04月13日 21:08:29767浏览

CSS 基础知识

1.CSS 的定义

  • CSS 是 Cascading Style Sheets 的英文缩写，中文翻译为“层叠样式表”
  • CSS 可以影响一个或一组文档的表现样式
  • CSS 可以应用到 HTML、XML 等文档上

2.元素与元素框

  • 页面中显示的内容成为“元素”，元素显示在浏览器为它生成的“元素框”内。
  • 查看页面中所有元素的元素框使用*{outline: 1px dashed red}
  • 根据元素框中的内容来源，可将元素分为：
  • （1）置换元素：元素内容为引用的外部资源，元素框仅为占位符，如<img>、<input>、<video>等
  • （2）非置换元素：元素内容由编写者/用户提供，浏览器直接输出显示，如<p>、<span>、<textarea>等

3.元素显示方式

3.1 元素类型

  • 块级显示：元素占满一行，两侧不显示其他元素；
  • 行内显示：元素在行内显示，不可调整元素的宽高，两侧显示同行的其他元素；
  • 行内块级显示：元素在行内显示，可调整元素的宽高；
  • 浏览器根据元素的显示类型生成不同的元素框，分“块级元素框”、“行内元素框”

3.2 元素 dispaly 属性

  • 每个元素都可以通过style="dispaly=type" 来控制显示类型，即生成什么类型的显示框
  • dispaly 常用属性
序号 属性值 描述
1 inline默认 行内元素，元素在行内显示,<span>,<a>
2 block 块级元素，元素独占一行显示，<div>,<p>
3 inline-block 行内块级元素，元素在行内显示，可调节宽高，<img>
4 list-item 块级：列表元素<li>
5 table 块级：表格元素<table>
6 flex 弹性元素
7 grid 网格元素

4.CSS 应用到 HTML 页面

4.1 外部样式引用

  • link 方式引用：<link rel="stylesheet" href="path/name.css" />
  • @import 方式引用：@import url(path/name.css) | @import 'path/name.css'
  • 外部样式文件默认后缀名为.css

4.2 页内样式

  • style 标签方式：<style>.cssstyle{padding:10px;}</style>
  • style 属性方式：<a href="http://php.cn" style="color:blue" >PHP中文网</a>

5.CSS 文档内容

5.1 样式规则

  • 先用选择器选择要定义样式的标签/类/元素 id 等
  • 然后写一对大括号{}，大括号内写样式属性及属性值
  1. /* 选择标签定义样式 */
  2. body {
  3.   padding: 10px;
  4. }
  6. /* 选择类定义样式 */
  7. .class{
  8.     padding:10px;
  9. }
  11. /* 选择元素id定义样式 */
  12. #yuansuid{
  13.     padding：10px;
  14. }

5.2 厂商前缀

  • 厂商前缀: 各浏览器厂商用来测试专属规则的,具有实验性和先进性
  • 得到用户广泛认可的厂商前缀规则, 是有可能进入 W3C 标准的
  • 随着浏览器之间的差异逐渐消失, 厂商前缀最终会走向消亡

常用厂商前缀:

  • -moz- ：基于Mozilla的浏览器,如FireFox火狐
  • -ms-：基于微软Internet Explorer的浏览器
  • -o- ：基于Opera欧朋的浏览器
  • -webkit-：基于WebKit内核的浏览器,如Chrome,Safari
  • -epub- : 基于国际数字出版论坛格式

5.3 处理空白

  • 与 html 文档一样, css 也支持使用空白符来格式化文档,增强可读性
  • css 中的多个空白符, 会全部合并成一个空白符显示
  • 空白符,可以由空格, 制表符, 换行符生成
  • 当属性值可有多个关键字时, 必须使用空白符分开

5.4 css 注释

  • 单行/多行: /* 注释内容 */
  • 注释可以写到样式规则外部,也可以写到内部
  • 注释不允许嵌套

6. 媒体查询

  • 媒体查询: 根据浏览器窗口大小指定的相应样式表的媒体

6.1 使用场景

  • 与 css 的引入和编写一样，用<link>、@import引入，<style>、@media 直接编写

  • 外部引入代码示例

  1. <!-- link引入方式：当屏幕宽度在700px以下时执行cssname.css的样式 -->
  2. <link
  3.   rel="stylesheet"
  4.   href="cssname.css"
  5.   media="screen and (max-width:700px)"
  6. />
  1. <!-- @import的两种引入方式：当屏幕宽度在700px以下时执行cssname.css的样式  -->
  2. <style>
  3.   @import url(cssname.css) screen and (max-width: 700px);
  4.   @import "cssname.css" screen and (max-width: 700px);
  5. </style>
  1. /* css文件名为cssname */
  2. body {
  3.   background-color: #0080ff;
  4. }
  • 页面内部代码示例
  1. <!--写在style标签上的屏幕查询： 当屏幕宽度在700px以下时执行此样式  -->
  2. <style media="screen and (max-width:700px)">
  3.   .scc {
  4.     color: red;
  5.   }
  6. </style>
  7. <!-- 写在style标签内部的屏幕查询：当屏幕宽度在700px以上时执行@media内的样式  -->
  8. <style>
  9.   @media screen and (min-width: 700px) {
  10.     body {
  11.       color: red;
  12.     }
  13.   }
  14. </style>
序号 场景 描述
1 <link> <link media="screen,print">
2 <style> <style media="screen,print">
3 @import @import url(...) screen,print;
4 @media @media screen,print {...}

6.3 媒体类型

媒体类型是不同媒体的标识符

序号 类型 描述
1 all 所有媒体类型,即不限制
2 print 打印机,预打印预览使用
3 screen 屏幕,如浏览器等用户代理
4 projection 幻灯片

多种媒体类型之间使用逗号分隔: @media screen, print

6.4 媒体描述符

  • 媒体类型通常会添加”媒体描述符”进行精准限制,例如设置媒体尺寸,分辨率等
  • 媒体描述符的语法与 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 设备显示区域最大高度

max-width与max-device-width区别:

  • max-width: 浏览器显示区域宽度,与设备无关,通常用于 PC 端
  • max-device-width: 设备分辨率的最大宽度,通常用于移动端

案例重写

  • demo1.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       * {
  9.         outline: 1px dashed red;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <p style="background-color: lightgreen;">Hello World</p>
  15.     <img src="1.jpg" alt="" width="100" height="80" />
  16.     <input type="text" style="width: 50px;" />
  17.     <a href="" style="width: 50px;">php.cn</a>
  18.     <strong style="width: 100px;">PHP中文网</strong>
  19.   </body>
  20. </html>

demo1.html

  • demo2.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="style1.css" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <h2>php中文网第11期上课啦</h2>
  11.     <ul>
  12.       <li>前端基础：html5/css3/flex/grid</li>
  13.       <li>php开发：php+pdo+mvc+composer</li>
  14.       <li>前端进阶：javascript+jquery+layui</li>
  15.       <li>laravel:实战</li>
  16.     </ul>
  17.   </body>
  18. </html>
  • style1.css
  1. ul {
  2.   border-width: 1px;
  3.   border-style: solid;
  4.   border-color: #ccc;
  5.   border: 1px solid #ccc;
  6.   background-color: #efefef;
  7.   padding: 15px 30px 15px;
  8. }
  10. ul > li {
  11.   margin: 10px;
  12. }

demo2.html

  • demo3.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="style2.css" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <h2>我的购物车</h2>
  11.     <ul>
  12.       <li>水果</li>
  13.       <li>衣服</li>
  14.     </ul>
  15.   </body>
  16. </html>
  • style2.css
  1. @import "style1.css";
  2. h2 {
  3.   color: green;
  4. }

demo3.html

  • demo4.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       @import "style1.css";
  9.       h2 {
  10.         color: green;
  11.       }
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <h2>php中文网第11期上课啦</h2>
  16.     <ul>
  17.       <li>
  18.         <strong style="color: coral;">前端基础</strong>：html5/css3/flex/grid
  19.       </li>
  20.       <li>
  21.         <strong style="color: coral;">php开发</strong>：php+pdo+mvc+composer
  22.       </li>
  23.       <li>
  24.         <strong style="color: coral;">前端进阶</strong>：javascript+jquery+layui
  25.       </li>
  26.       <li><strong style="color: violet;">laravel</strong>:laravel实战</li>
  27.     </ul>
  28.   </body>
  29. </html>

demo4.html

  • demo5.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>媒体查询</title>
  7.     <style>
  8.       h1 {
  9.         color: green;
  10.       }
  11.       body {
  12.         background-color: cyan;
  13.       }
  14.       @media screen and (min-width: 500px) {
  15.         h1 {
  16.           color: red;
  17.         }
  18.         body {
  19.           background-color: wheat;
  20.         }
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <h1>hello,欢迎来学习我的课程</h1>
  26.   </body>
  27. </html>

demo5.html

  • demo6.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .nav {
  9.         height: 50px;
  10.         background-color: #eee;
  11.         display: flex;
  12.         align-items: center;
  13.       }
  14.       .nav ul {
  15.         display: flex;
  16.         list-style: none;
  17.       }
  18.       .nav ul a {
  19.         color: #666;
  20.         text-decoration: none;
  21.         padding: 0 15px;
  22.       }
  23.       @media screen and (max-width: 400px) {
  24.         .nav ul {
  25.           display: none;
  26.         }
  27.       }
  28.     </style>
  29.   </head>
  31.   <body>
  32.     <div class="nav">
  33.       <div class="log">LOGO</div>
  34.       <ul>
  35.         <li>
  36.           <a href="">首页</a>
  37.           <a href="">视频</a>
  38.           <a href="">问答</a>
  39.           <a href="">下载</a>
  40.         </li>
  41.       </ul>
  42.     </div>
  43.   </body>
  44. </html>

demo6.html

总结

  • 1.元素的 dispaly 属性可随时更改
  • 2.css 外部文件可通过 link 和@import 引用
  • 3.页内样式采用 style 标签和元素的 style 属性编写
  • 4.样式选择可采用标签、类、元素 id 进行选择
  • 5.媒体查询采用@media 进行查询。
  • 6.媒体类型有 print 打印，screen 屏幕，projection 幻灯片
  • 7.多个媒体查询描述符可使用 and 和 not 进行连接
  • 8.and 表示多个媒体描述符必须同时满足，not 则是整个查询取反，且必须写在 and 前面
上一条：html之仿站php.cn下一条：细说选择器：简单选择器、上下文选择器、伪类选择器、其它选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多