简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css和媒体查询的初识
Blogger Information
Blog 26
fans 0
comment 0
visits 18367
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css和媒体查询的初识
雪~人胖胖
Original
628 people have browsed it

css

1.认识 css

css 是层叠样式表，是给 HTML 及其他文档添加样式的。
了解了什么是置换元素什么是费置换元素。
元素的类型分为块级元素、行内元素、行内块元素。
每个元素都可以通过style="display:type控制它的显示类型

  • display属性常用值
序号 属性值 描述
1 inline默认 行内元素,<span>, <a>
2 block 块级元素,<div>,<p>
3 inline-block 行内块级元素,<img>
4 list-item 块级: 列表元素,<li>
5 table 块级: 表格元素,<table>
6 flex 弹性元素
7 grid 网格元素

了解了常用厂商前缀:

序号 前缀 描述
1 -moz- 基于Mozilla的浏览器,如FireFox(火狐)
2 -ms- 基于微软Internet Explorer的浏览器
3 -o- 基于Opera(欧朋)的浏览器
4 -webkit- 基于WebKit内核的浏览器,如Chrome,Safari
5 -epub- 基于国际数字出版论坛制定的格式

2 应用到 html 的几种方法。

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

css 的语法

selector {property: value;...}
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.     <link rel="stylesheet" href="style.css" />
  8.     <style>
  9.       * {
  10.         outline: 1px solid #666;
  11.       }
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <h2 style="background-color: brown;">你好，很高兴认识你</h2>
  16.     <img src="image/1.jpg" />
  17.     <img src="image/1.jpg" />
  18.     <img src="image/1.jpg" />
  19.     <h4>php中文网</h4>
  20.     <ul>
  21.       <li>首页</li>
  22.       <li>关注</li>
  23.       <li>联系我们</li>
  24.     </ul>
  25.   </body>
  26. </html>

style.css

  1. /* @import url(style1.css); */
  2. @import "style1.css";
  3. h4 {
  4.   margin-left: auto;
  5.   background: #000;
  6.   font-size: large;
  7.   color: chartreuse;
  8. }

style1.css

  1. ul > li {
  2.   text-align: center;
  3.   color: blue;
  4. }

效果图

" class="reference-link">

媒体查询的使用方法

序号 场景 描述
1 <link> <link media="screen,print">
1 <style> <style media="screen,print">
1 @import @import url(...) screen,print;
1 @media @media screen,print {...}

媒体类型

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

常用 “媒体描述符”(显示区域相关)

序号 媒体描述符 描述
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 设备显示区域最大高度

实例

  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.         text-align: center;
  10.         color: chartreuse;
  11.       }
  12.       body {
  13.         background: #000;
  14.       }
  15.       @media screen and (min-width: 500px) {
  16.         h1 {
  17.           text-align: left;
  18.           color: cornflowerblue;
  19.         }
  20.         body {
  21.           background: #666;
  22.         }
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <h1>你好，世界</h1>
  28.   </body>
  29. </html>

当min-width小于500px时

当min-width大于等于500px时

总结

简单的了解了一下css的语法与应用到HTML文档的方法
简单的试用了一下媒体查询的方法
了解了常用厂商前缀

Correcting teacher：天蓬老师天蓬老师

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！