01_前端开发课程介绍与课程安排_录制于2018 08 27

字数统计: 1.4k字   |   阅读时长≈ 6分

1、css 概述

** **为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，css由此思想诞生。

  • CSS： Cascading Style Sheets** ** 层叠样式表
    • html 中大部分表现样式的标签废弃不用了
    • html只负责文档的结构和内容，表现形式完全交给css
    • html文档更加简洁

2、css 基本语法

1
选择器 {属性:值; 属性:值; 属性:值;}
  • 选择器是将样式和页面元素关联起来的名称
  • 属性是希望设置的样式属性
    • 每一个属性有一个或多个值
    • 属性和之间用冒号
    • 一个属性和值与下一个属性和值之间用分号
    • 最好一个分号可以省略
1
2
3
4
5
6
/*  样式中注释写法，单行或多行注释 */
div{
  width:1000px;
  height:1000px;
  background:red;
}

3、css 引入方式

  • 内嵌式
    • 通过标签的style属性，在标签上直接写样式。
  • 嵌入式
    • 通过style标签，在网页上创建嵌入的样式表。
    • style标签写在head里面
  • 外链式
    • 通过link标签，链接外部样式文件引入到页面中。

3.1、内嵌式

1
<div style="width:1000px;height:1000px;background:red"> </div>  /* html页面中，html和css一块写，不推荐 */     /* 利用style属性 */

3.2、嵌入式

1
2
3
4
<style type="text/css">   /* style 标签里面写样式，放在html的head中 */
  div{width:1000px;height:1000px;background:red}
  ...
</style>

****3.3、外链式

1
<link rel="stylesheet" type="text/css" href="css/main.css">   /* 彻底分开，将css写在main.css文件中，html页面进行引入使用 */

4、css 选择器

  • 标签选择器
    • 此种选择器影响范围大，一般用来做一些通用设置，或者用在层级选择器中。
  • 类选择器
    • 通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
  • 层级选择器
    • 主要应用于标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器，它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。

01、标签选择器

1
div{color:rea;}  /*影响范围大*/

02、类选择器

1
2
3
.blue{color:blue;}
.big{font-size:20px;}
.box{width:1000px;height:1000px;background:red}
1
2
<div class="blue"></div>
<div class="blue big box"></div>  <!--可以使用多个类选择器，中间用空格隔开-->

03、 层级选择器

1
2
3
4
.con {width:1000px;height:1000px;background:red}
.con span{color:red;}        /* 层级选择器 */
.con .pink{color:pink;}
.con .gold{color:gold;}
1
2
3
4
5
6
7
8
<div class="con">
  <span>
    ......
  </span>
  <a href="#" class="pink">...</a>
</div>
<span>xxx</span>
<a href="#" class="pink">....</a>

5、css 元素属性及盒子模型

1、盒子模型

元素在页面中显示成一个方块，类似一个盒子，css盒子模型就是使用现实中的盒子来做比喻。

帮助我们设置元素对应的样式。

![QQ截图20210924105744.png](resources/B6ED82AD7DF0ED95F2AD4FAC0DF4CB60.png =811x479)

把元素叫做盒子，设置对应的样式分别为：

  • 盒子的宽度 width
  • 盒子的高度 height
  • 盒子的边框border
  • 盒子内的内容和边框之间的间距 padding
  • 盒子与盒子之间的间距 margin

01、设置宽高 width&height

02、设置边框 border

03、设置内间距 padding

04、设置外间距 margin

2、盒子的真实尺寸

  • 盒子宽度=width+padding左右+border左右—————不含外间距 margin
  • 盒子高度=height+padding上下+border上下———— 不含外间距 margin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型相关样式属性</title>
    <style>
        .ljkBox{
            /* 01、设置宽度、高度*/
            width: 300px;       /* 这是设置的内容的尺寸 */
            height: 300px;      /* 这是设置的内容的尺寸 */
            background: chocolate;

            /*
                02、设置内间距
                    合并一起写：12点钟方向顺时针转
            */
            /*padding-top: 100px;*/
            /*padding-bottom: 50px;*/
            /*padding-left: 20px;*/
            /*padding-right: 40px;*/
            padding: 100px 40px 50px 20px;
            /*
                padding: 100px 40px 20px;
                上：100px，左右：40px，下：2opx
                padding: 100px 40px;
                上下：100px，左右：40px
            */


            /*
                03、设置边框
                    边框线型：
                        solid 实线
                        dashed 虚线
                        dotted 点线
            */
            border-top: 12px solid yellowgreen;
            border-left: 8px dashed lawngreen;
            border-right: 8px dotted yellow;
            border-bottom: 10px dashed black;

            /*04、设置外间距*/
            /*margin-left: 80px;*/
            /*margin-right: 10px;*/
            /*margin-top: 40px;*/
            /*margin-bottom: 100px;*/
            margin: 40px 10px 100px 80px;
        }
    </style>
</head>
<body>
    <h2>盒子模型相关样式属性</h2>
    <div class="ljkBox">
        <div >aaaa</div>
        <div >bbbbb</div>
        <span>这是盒子的效果01</span>
        <span>这是盒子的效果11</span>
    </div>
    <div class="ljkBox">这是盒子的效果2</div>
</body>
</html>

3、设置元素浮动属性float

浮动可以让块元素排列在一行，浮动分为

  • 左浮动：float：left；
  • 右浮动：float: right

4、设置元素背景属性background

设置元素背景色或者背景图片

****

  • Background:gold

5、块元素的居中技巧

块元素如果想设置相对页面水平居中，可以使用margin值中的auto关键字，“auto”只能用于左右的margin设置，不能用于上下的

1
2
3
4
5
6
7
8
.box{
  width:300px;
  height:300px;
  margin-left:0px;
  margin-top:0px;
  margin-left:auto;
  margin-right:auto;
}

6、css 文本属性

  • Color
  • Font-size
  • Font-family
  • Font-weight
  • Line-height
  • Text-decoration
  • Text-align
  • Text-indent

7、css 基本布局属性

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术：
三维数字孪生、虚拟仿真
三维平台数据展示、VR沉浸式开发、党建360/720全景开发

联系QQ:2583493258

很惭愧

只做了一点微小的工作
谢谢大家