Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS基础知识和案例
Blogger Information
Blog 13
fans 1
comment 0
visits 14975
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
885 people have browsed it

CSS基础知识和案例

线上演示地址:

http://www.fantianlong.com/php11/0405/homework1.html
http://www.fantianlong.com/php11/0405/homework2.html

1.CSS是什么

CSS中文全称层叠样式表,如果把HTML的功能比作搭建一个毛坯房,CSS的功能就是进行装修.

2.元素和元素框

页面中显示的内容称之为元素,而元素框outline则是元素外部的一个边框,相比于border是不同的,因为它不在盒子模型中.

根据元素框中的内容提供者,可以把元素分为两大类:

序号 类型 描述
1. 置换元素 元素框内容由外部资源提供,元素框就是占位符,如<img>,<input>…
2. 非置换元素 元素框内容由用户提供,浏览器生成,如<p>,<span>…

3.元素的显示方式

3.1元素类型

序号 类型 描述
1. 内联元素 不独占一行,宽高由内容决定,只有padding-left和padding-right可以设置
2. 块级元素 独占一行,可以设置宽高,padding四个方向都可以设置
3. 行内块元素 结合了内联元素和块级元素的特点,可以简单的理解为行内块元素 = 内联元素 + 块级元素.多个行内块元素可以水平排列,不独占一行,可以设置宽高,padding四个方向都可以设置

3.2display属性

可以通过display属性在内联元素,块级元素,行内块元素之间进行转换.

4.CSS的引用方式

  • 外部样式表:通过<link rel="stylesheet" href="url">方式引入,这是开发中用的最多的一种,可以进行代码复用.
  • 导入:通过@import url方式导入,可以放到<style>标签中,也可以放到外部样式表中,也可以进行代码的复用.但需要注意的是通过这种方式引入CSS的方式必须放到第一行,要不可能会出错.
  • 内联样式:通过在起始标签中添加style属性,仅在当前页面生效.

5.CSS文档的内容

5.1样式规则

选择器 {属性:值...}

  • 选择器代表选择了那个元素,只有选择了这个元素,才可以对其进行样式设置
  • 属性代表了对选择的元素添加了哪种样式
  • 值代表了度量

5.2厂商前缀

厂商前缀一般是浏览器厂商发布新属性,此时属于实验阶段,不同的浏览器前缀不同,需要加上前缀才可以使用.随着时间的推移,各个浏览器厂商都已经使用适配,这时就不需要前缀了.

各个浏览器厂商前缀,见下图:

序号 前缀 描述
1. -weblit- 谷歌浏览器
2. -moz- 火狐浏览器
3. -ms- IE
4. -o- 欧朋浏览器

5.3处理空白

处理方式和HTML类似,这里不多赘述.

5.4CSS注释

  • 单行或多行注释:/*注释内容*/
  • 注释不允许嵌套

6.媒体查询

  • 媒体查询: 设置浏览器使用指定的样式表的媒体
  • 常用的媒体类型:all(所有媒体类型),screen(屏幕),print(打印机)
  • 多种媒体类型之间用逗号分隔:@media screen,print

6.1媒体描述符

  • 媒体类型通常会添加”媒体描述符”进行精准限制,例如设置媒体尺寸,分辨率等
  • 媒体描述符的语法与 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: 设备分辨率的最大宽度,通常用于移动端

7.案例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <!-- <link rel="stylesheet" href="style.css"> -->
  8.     <style>
  9.         ul {
  10.             width: 200px;
  11.             border: 1px solid #cccccc;
  12.         }
  14.         a {
  15.             color: #000000;
  16.         }
  18.         a:hover {
  19.             color: #ff0000;
  20.         }
  21.     </style>
  22.     <title>CSS引用和列表综合案例</title>
  23. </head>
  25. <body>
  26.     <ul>
  27.         <li><a href="">花园式酒店正式成立</a></li>
  28.         <li><a href="">欧亚卖场店庆即将开始</a></li>
  29.         <li><a href="">万达影城优惠季欢乐来</a></li>
  30.         <li><a href="">新城吾悦广场盛大开业</a></li>
  31.         <li><a href="">美食广场欢迎您的到来</a></li>
  32.     </ul>
  33. </body>
  35. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  13.         .clearfix:after {
  14.             content: "";
  15.             display: block;
  16.             clear: both;
  17.         }
  19.         body {
  20.             font-size: 12px;
  21.         }
  23.         .wrap {
  24.             width: 1000px;
  25.             margin: 0 auto;
  26.         }
  28.         a {
  29.             text-decoration: none;
  30.         }
  32.         header {
  33.             height: 40px;
  34.             line-height: 40px;
  35.             background-color: rgb(68, 68, 68);
  36.         }
  38.         header p {
  39.             float: right;
  40.             color: rgb(168, 168, 170);
  41.         }
  43.         nav {
  44.             position: relative;
  45.             height: 44px;
  46.             line-height: 44px;
  47.             background-color: rgb(5, 5, 5);
  48.         }
  50.         nav>.wrap {
  51.             height: 44px;
  52.         }
  54.         nav ul>li {
  55.             width: 64px;
  56.             height: 44px;
  57.             line-height: 44px;
  58.             padding: 0 20px;
  59.             list-style: none;
  60.             float: left;
  61.         }
  63.         nav a {
  64.             color: #f5f5f7;
  65.         }
  67.         nav a:hover {
  68.             color: #ffffff;
  69.         }
  71.         nav li img {
  72.             margin: 12px 0;
  73.         }
  75.         /* menu */
  76.         .menu {
  77.             display: none;
  78.         }
  81.         @media screen and (max-width: 760px) {
  82.             nav ul {
  83.                 background-color: #000000;
  84.                 position: absolute;
  85.                 top: 0;
  86.                 left: 0;
  87.                 text-align: center;
  88.             }
  90.             nav ul>li {
  91.                 clear: both;
  92.                 border-bottom: 1px solid #cccccc;
  93.             }
  95.             nav a {
  96.                 color: #f5f5f7;
  97.             }
  99.             .menu {
  100.                 display: inline-block;
  101.             }
  103.             .menu~li {
  104.                 display: none;
  105.             }
  106.         }
  107.     </style>
  108.     <title>媒体查询仿苹果官网导航栏</title>
  109. </head>
  111. <body>
  112.     <div class="container">
  113.         <header>
  114.             <div class="wrap clearfix">
  115.                 <p>&lt;广告&gt;</p>
  116.             </div>
  117.         </header>
  118.         <nav>
  119.             <div class="wrap">
  120.                 <ul class="clearfix">
  121.                     <li class="menu"><a href="#"><img src="images/menu.png" alt="menu"></a></li>
  122.                     <li><a href="#"><img src="images/apple.png" width="20" height="20" alt="logo"></a></li>
  123.                     <li><a href="#">Mac</a></li>
  124.                     <li><a href="#">iPad</a></li>
  125.                     <li><a href="#">iPhone</a></li>
  126.                     <li><a href="#">Watch</a></li>
  127.                     <li><a href="#">Music</a></li>
  128.                     <li><a href="#">技术支持</a></li>
  129.                     <li><a href="#"><img src="images/search.png" alt="search"></a></li>
  130.                     <li><a href="#"><img src="images/bag.png" alt="bag"></a></li>
  131.                 </ul>
  132.             </div>
  133.         </nav>
  134.     </div>
  135. </body>
  137. </html>

8.效果图

9.总结

  • 媒体查询是响应式布局的一种技术，随着移动端的流行，所以要学好这块知识
  • 仿苹果首页导航栏手机端有点问题，背景色不能完全显示
  • 目前的效果为视口宽度变为760px以下，导航栏能隐藏，但是显示不出来
  • 多做些案例加强这块的学习
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