博客列表 >CSS入门:简单认识CSS和CSS使用方式,媒体查询的简单了解

CSS入门:简单认识CSS和CSS使用方式,媒体查询的简单了解

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2020年04月06日 17:54:08867浏览

CSS简单入门

一、css基础知识

1、CSS是一种作用于html文档影响其表现样式的层叠样式表
2、了解CSS需要先简单回顾html中的元素,通过*{outline:1px dashed red}可以设置元素框,通过元素框的排列方式,把元素分为:块级元素、行内元素和行内块元素
3、css样式规则:选择器和属性组成(属性可以多个,在一个大括号内)
4、css注释:/*注释内容*/
5、常见厂家前缀:-ms-(IE)、-webkit-(基于webkit内核的浏览器,谷歌等)
6、css中的空白符(空格,回车、制表符等)主要用来格式化文档,增强可读性;如当前属性有多个值时,必须由空白符(空格)隔开;

二、CSS的应用(html)

外部样式引用:

  • 1、link标签引用,例如<link rel="sytlesheet" href="样式表地址"/>
  • 2、@import指令引用,例如@import url(……);@import "……";@import指令引用外部样式表,@import指令必须在首行

内部样式的使用:

  • 1、在html>head中使用style,例如<style>/*样式规则*/</style>
  • 2、html元素中直接使用style=""属性,例如<span style="color:red;">中国人</span>

三、媒体查询(@media

1、常见媒体查询的标识符:
-all:所有媒体类型
-print:打印预览使用
-screen:屏幕,一般指用户代理(浏览器)
-projection:幻灯片(了解即可,不经常使用)
2、媒体描述:

  • a、媒体查询通过媒体描述进行精确控制
  • b、媒体描述由属性名和属性值组成,结束无分号由括号包括;
  • c、多个媒体描述之间通过逻辑关键字链接:and(必须同时满足),not(必须写在and前面,整个查询取反)

3、常见媒体描述符:主要以显示区域和设备显示区域的宽和高

  • a、显示区域(主要用于pc端浏览器):widthmin|max-widthhegihtmin|max-height
  • b、设备显示区域(主要用于移动端):device-widthmin|max-device-widthdevice-heightmin|max-device-height

    二、案例实操

    1、css/demo.css代码
  1. /*@import"……"或者@import url(……) 可以快速引用其他css 样式表*/
  2. h2 {
  3. color: #006200;
  4. }
  5. ul {
  6. background-color: #c0c0c0;
  7. list-style: none;
  8. }
  9. li {
  10. margin: 10px 0;
  11. padding: 5px 0;
  12. }

2.1、demo.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>css基础知识</title>
  7. <!-- 内联sytle标签样式的使用 -->
  8. <style>
  9. /* @import关键字导入外部样式 */
  10. @import url(css/demo.css);
  11. /* @import "css/demo.css"; */
  12. * {
  13. outline: 1px dashed #ff8080;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <!-- 块级元素 -->
  19. <p style="background-color: tomato;">p元素</p>
  20. <!-- 行内元素 -->
  21. <span style="background-color: teal;">span元素</span>
  22. <a href="">链接</a>
  23. <!-- 行内块元素 -->
  24. <img src="dy.png" alt="" width="80px" />
  25. <span>图片</span>
  26. <hr />
  27. <h2>标题</h2>
  28. <ul>
  29. <!-- 元素内style属性样式的使用 -->
  30. <li><span style="color: tomato;">题1:</span>内容………………</li>
  31. <li><span style="color: tomato;">题2:</span>内容………………</li>
  32. <li><span style="color: tomato;">题3:</span>内容………………</li>
  33. <li><span style="color: tomato;">题4:</span>内容………………</li>
  34. </ul>
  35. </body>
  36. </html>

2.2 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. <!-- 外部样式引用 -->
  7. <link rel="stylesheet" href="css/demo.css" />
  8. <title>列表</title>
  9. </head>
  10. <body>
  11. <h2>标题</h2>
  12. <ul>
  13. <!-- 元素内style属性样式的使用 -->
  14. <li><span style="color: tomato;">题1:</span>内容………………</li>
  15. <li><span style="color: tomato;">题2:</span>内容………………</li>
  16. <li><span style="color: tomato;">题3:</span>内容………………</li>
  17. <li><span style="color: tomato;">题4:</span>内容………………</li>
  18. </ul>
  19. </body>
  20. </html>

3、运行结果图


4、媒体查询代码演示和结果展示:利用(demo1.html演示)只上传css代码

  1. h2 {
  2. color: #006200;
  3. }
  4. ul {
  5. background-color: #c0c0c0;
  6. list-style: none;
  7. display: flex;
  8. }
  9. li {
  10. margin: 10px 0;
  11. padding: 5px 0;
  12. }
  13. @media screen and (max-width: 600px) {
  14. h2 {
  15. color: #f1ec14;
  16. }
  17. ul {
  18. background-color: #ff0080;
  19. list-style: none;
  20. display: list-item;
  21. }
  22. li {
  23. margin: 10px 0;
  24. padding: 5px 0;
  25. }
  26. }

媒体查询效果图

总结

1、CSS主要用于装饰html时期更好看,更易于人浏览
2、css核心在选择器和样式属性的使用
3、css对于网页布局也非常重要,媒体查询可以网页兼容不同的终端
4、border outline的常见样式:solid(实线)、double(双线)、dotted(点状边框)、dashed(虚线)等等

上一条:CSS与文档下一条:CSS与文档
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议