css新手教程

css新手教程

课程：14、盒子模型及边框使用_哔哩哔哩_bilibili

一.什么是CSS

1.什么是CSS

Cascading Style Sheet 层叠样式表。

CSS：表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动。

2.CSS发展史

• CSS 1.0：1994年 10月提出；
• CSS 2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO；
• CSS 2.1：浮动，定位；
• CSS 3.0：圆角、阴影、动画…浏览器兼容性。

3.快速入门 

    
    
    
    


CSS3测试

• 建议使用这种规范（单独写一个css文件，用link标签引入css文件效果） 。

 

CSS的优势：

• 内容和表现分离；
• 网页结构表现统一，可以实现复用；
• 样式十分的丰富；
• 建议使用独立于html的css文件；
• 利用SEO，容易被搜索引擎收录！

4.CSS的3种常用导入方式 

    
    

    
    

    







CSS3测试

拓展：外部样式两种方法

1.链接式——HTML 

导入式—— @import是CSS2.1特有的！

二.CSS选择器 

 1.基本选择器

 (1).标签选择器。格式：标签名{}

    
    

    
    




标签选择器
Android
前端-CSS3

(2).类选择器class——选择所有class一致的标签，跨标签。格式：.类名{}

    
    
    
    





类选择器:Test01
类选择器:Test02
类选择器:Test03
类选择器:Test04

(3).id选择器——全局唯一。格式：#id名{}

    
    

    




id选择器:git01
id选择器:git02
id选择器:git03
id选择器:git01
id选择器:git03

• 优先级：id > class > 标签。

 2.层次选择器

 1.后代选择器：在某个元素的后面。

    
    

    




    
p1
    
p2
    
p3
   
    

        

            
p4
        
        

            
p5
        
        

            
p6
        
    
    

2.子选择器：一代。

    
    

    




    
p1
    
p2
    
p3
   
    

        

            
p4
        
        

            
p5
        
        

            
p6
        
    

 

3.相邻的兄弟选择器：同辈。

    
    

    




    
p1
    
p2
    
p3
   
    

        

            
p4
        
        

            
p5
        
        

            
p6
        
    

4.通用兄弟选择器，当前选中元素的向下的所有兄弟元素

    
    

    




    
p1
    
p2
    
p3
   
    

        

            
p4
        
        

            
p5
        
        

            
p6
        
    

3.结构伪类选择器 

    
    
    




9521
p1
p2
p3
h3

    
1li01
    
1li02
    
1li03
    
1li04


淘宝

4.属性选择器(常用) 

• id + class 结合

  
  
  
      
      
      
  
  
  
      淘宝
      链接
      网页
      png
      jpg
      链2
      pdf
      pdf2
      doc
      doc2
  
  
  

  

 三.美化网页

1.span标签

重点要突出的字，使用span标签套起来

    
    
    


编程语言:Java

2.字体样式 

    
    

    




标题
正文6699
正文4444444
Study English and Computer

3.文本样式 

    
    

    





4399-7k7k
123123123
123123123
123123123

概述

    看到有人说fcu是混凝土立方体抗压强度设计值，特来纠正一下。混凝土立方体抗压强度没有设计值，fcu是实测的混凝土立方体抗压强度，它是一个代表值。立方体抗压强度和轴心抗压强度是一组测试（3个试块为一组）的结果（一般是取其平均值。详见GBT 50081-2019 第5.0.5条）；而立方体抗压标准强度是试验结果经概率统计后得到的（一般是95%的保证率）。对于同一种配比的混凝土，立方体抗压强度大于立方体抗压标准强度。即使是在土木工程这一学科中，不同的方向fcu的意义也不相同。我见到的用到fcu（或类似的如fcm等）等一般是在论文中给出材性试验数据时，一般计算用到的并不是fcu而是fcu，k以及其他的量。在混凝土规范（这里指GB 50010）里是没有fcu的，只有fcu,k


    在1963年，我把核子的基本构成命名为“夸克”（quark），我先有的是声音，而没有拼法，所以当时也可以写成“郭克”（kwork）。不久之后，在我偶尔翻阅詹姆斯·乔伊斯所著的《芬尼根守灵夜》时，我在“向麦克老大三呼夸克”这句中看到夸克这个词。由于“夸克”（字面上意为海鸥的叫声）很明显是要跟“麦克”及其他这样的词押韵，所以我要找个借口让它读起来像“郭克”。但是书中代表的是酒馆老板伊厄威克的梦，词源多是同时有好几种。书中的词很多时候是酒馆点酒用的词。所以我认为或许“向麦克老大三呼夸克”源头可能是“敬麦克老大三个夸脱”，那么我要它读“郭克”也不是完全没根据。再怎么样，字句里的三跟自然中夸克的性质完全不谋而合。


    茨威格则用“埃斯”（Ace）来称呼他所理论化的粒子，但是在夸克模型被广泛接纳时，盖尔曼的用词就变得很有名。很多中国物理学家则称夸克为“层子”，在台湾地区亦曾翻译“亏子”，但并不普遍使用。

4.文本阴影和超链接伪类 

    
    

    




    


    Java博客


    哇哈哈

5.列表ul、li 

    
    

    
    



    

    
全部商品分类
    

        

            图书
            影视
            家电
        
        

            配件
            手机
            数码
        
        

            电脑
            办公
        
        

            家居
            家装
            厨具
        
        

            服饰鞋帽
            个性化妆
        
        

            礼品箱包
            钟表
            珠宝
        
        

            食品饮料
            保健食品
        
        

            彩票
            旅行
            充值
            票务
        
    

#nav{
    width: 300px;
    background: beige;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;/*缩进*/
    line-height: 35px;
    background: gold;
}

/*  ul li
list-style:
    1.non 去掉实心圆
    2.circle 空心圆
    3.square 正方形
*/

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: darkorange;
}

a:hover{
    color: dodgerblue;
    text-decoration: underline;
}

6.背景 

下面的图片效果有问题 

7.渐变 

• 渐变背景网址：https://www.grabient.com

四.盒子模型 

 1.什么是盒子模型

• margin：外边距；
• padding：内边框；
• border：边框

2.边框 

    
    
    





    
会员登陆
    

        

            用户名:
            
        
        

            密 码:
            
        
        

            邮 箱:
            
        
    

3.外边距 

/* 分别表示上、右、下、左；从上开始顺时针 */
margin:0 0 0 0 

/* 例1: 居中 auto表示左右自动 */
margin:0 auto 

/* 例2：表示上、右、下、左都为4px */
margin:4px 

/* 例3: 表示上为10px，左右为20px，下为30px */
margin:10px 20px 30px

    
    
    



    
会员登陆
    

        

            用户名:
            
        
        

            密 码:
            
        
        

            邮 箱:
            
        
    

4.圆角边框

  

5.盒子阴影 

  

五.浮动 

1.标准文档流 

（1）块级元素：独占一行

h1~h6 、p、div、 列表…

（2）行内元素：不独占一行

span、a、img、strong

注： 行内元素可以包含在块级元素中，反之则不可以

2.dispaly 

    
    
    


div块元素
span行内元素

    
    
    


div块元素
span行内元素

3.float:left/right 

    
    
    



    

    

    

    

        浮动的盒子可以向左浮动，也可以向右浮动，知道他的外边缘碰到包含框或另一个浮动盒子为止。
    

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float: right;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
}
/* 
clear：
  right：右侧不允许有浮动元素；
  left：左侧不允许有浮动元素；
  both：两侧不允许有浮动元素；
  none 
*/
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    clear: both;
}

可以看出右边的图片超出了父级边框，所有下面我们会解决这个问题 

4.父级边框塌陷的问题 

18、overflow及父级边框塌陷问题_哔哩哔哩_bilibili

• 方案一：增加父级元素的高度；

  #father{
      border:1px #000 solid;
      height:800px;
  }

  

• 方案二：增加一个空的div标签，清除浮动。

  .clear{
      clear:both;
      margin:0;
      padding:0;
  }

  

• 方案三：在父级元素中增加一个overflow属性。

      overflow:hidden; /* 隐藏超出部分 */
      overflow:scroll; /* 滚动 */

  

• 方案四：父类添加一个伪类:after。

  #father:after{
      content:'';
      display:block;
      clear:both;
  }

  

小结：

• 浮动元素增加空div——> 简单、代码尽量避免空div；
• 设置父元素的高度——-> 简单，但是元素假设有了固定的高度，可能就会超出范围；
• overflow——> 简单，下拉的一些场景避免使用；
• 父类添加一个伪类:after（推荐）——> 写法稍微复杂，但是没有副作用，推荐使；

 

display与float对比：

• display：方向不可以控制；
• float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。。

 

 

六.定位 

1.相对定位 

• 相对定位：positon：relstive；
• 相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置会被保留

top:-20px; /* 向上偏移20px */
left:20px; /* 向右偏移20px */
bottom:10px; /* 向上偏移10px */
right:20px; /* 向左偏移20px */

    
    
    



    
连接1
    
连接2
    
连接3
    
连接4
    
连接5

 

2.绝对定位

• 定位：基于xxx定位，上下左右；
  1. 没有父级元素定位的前提下，相对于浏览器定位；
  2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移；
  3. 在父级元素范围内移动。

总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。

3.固定定位 

    
    
    


div1
div2

 

 4.z-index及透明度

• 图层-z-index：默认是0，最高无限~999。

  
  
  
      
      
      
      
  
  
  
      
  
          
  
          
  Java后端学习
          
  
          
  时间:1202-06-15
          
  地点:水星基地核心仓
      
  
  
  

  #content{
      width: 450px;
      padding: 0px;
      margin: 0px;
      overflow: hidden;
      font-size: 12px;
      line-height: 25px;
      border: 1px solid #1079f6;
  }
  ul,li{
      padding: 0px;
      margin: 0px;
      list-style: none;
  }
  /* 父级元素相对定位 */
  #content ul{
      position: relative;
  }
  .tipText,.tipBg{
      position: absolute;
      width: 380px;
      height: 25px;
      top:216px
  }
  .tipText{
      color: #ffffff;
      z-index: 999;
  }
  .tipBg{
      background: #33f13d;
      opacity: 0.5; /* 背景透明度 */
      filter: alpha(opacity=50);
  }

 七.网页动画

CSS3 动画 | 菜鸟教程 (runoob.com)