zoukankan      html  css  js  c++  java

  • CSS 笔记

    一、什么是css,他有什么作用？

    现在的互联网前端分三层：

    （1）简介

    • HTML：超文本标记语言。从语义的角度描述页面结构。
    • CSS：层叠样式表。从审美的角度负责页面样式。
    • JS：JavaScript 。从交互的角度描述页面行为

    CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

    css的最新版本是css3，我们目前学习的是css2.1

    （2）Css 的作用

    HTML的缺陷：

    1. 不能够适应多种设备
    2. 要求浏览器必须智能化足够庞大
    3. 数据和显示没有分开
    4. 功能不够强大

    CSS 优点：

    　　

    1. 使数据和显示分开
    2. 降低网络流量
    3. 使整个网站视觉效果一致
    4. 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

    比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

    　　（3） CSS的引入方式

    　　

    在HTML中引入css方式总共有三种：

    1. 行内样式     （写在标签的style属性中）
    2. 内接样式      （写在head中）
    3. 外接样式     

    　　　　　3.1 链接式    （通过url连接导入）

    　　　　　　　　　　<link rel="stylesheet" href="./index.css">

    　　　　　3.1 导入式  （写在一个.css文件中）　　　　　　　　　

       　　　　　　　　<style type="text/css">
        　　　　　　　　@import url('./index.css');
　　　　　　　　　　</style>

    二 CSS选择器介绍　

    css的选择器：1.基本选择器 2.高级选择器

    1.基本选择器

    　　（1）标签选择器：标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“。

    　　　　　　p{

    　　　　　　　　}

    　　(2) id选择器:同一个页面中id不能重复。任何的标签都可以设置id ; id命名规范: 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

    　　　　# idname{

    　　　　　　}

    　　(3)类选择器：所谓类 就是class ，class与id非常相似 任何的标签都可以加类但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开

    　　　　.classname{

    　　　　　　}

    2.高级选择器

    高级选择器分为：后代选择器、子代选择器、并集选择器、交集选择器

    　　1.后代选择器：使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

    .container p{
    color: red;        
}
.container .item p{
    color: yellow;
}
    后代选择器

    　　2.子代选择器：使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

    .container>p{
    color: yellowgreen;
 }
    子代选择器

    　　3.并集选择器：多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器

    /*并集选择器*/
h3,a{
    color: #008000;
    text-decoration: none;
                
}
    并集选择器

    　　4.交集选择器：

    　　　　使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active

    　　比如有一个<h4 class='active'></h4>这样的标签。那么

    

    

    

    h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集选择器 */
h4.active{
    background: #00BFFF;
}
    

    
并集选择器
    

    

    它表示两者选中之后元素共有的特性。
    

    　　5.属性选择器：属性选择器，字面意思就是根据标签中的属性，选中当前的标签。
    

    

    

    /*根据属性查找*/
            /*[for]{
                color: red;
            }*/
            
            /*找到for属性的等于username的元素 字体颜色设为红色*/
            /*[for='username']{
                color: yellow;
            }*/
            
            /*以....开头  ^*/ 
            /*[for^='user']{
                color: #008000;
            }*/
            
            /*以....结尾   $*/
            /*[for$='vvip']{
                color: red;
            }*/
            
            /*包含某元素的标签*/
            /*[for*="vip"]{
                color: #00BFFF;
            }*/
            
            /**/
            
            /*指定单词的属性*/
            label[for~='user1']{
                color: red;
            }
            
            input[type='text']{
                background: red;
            }
    

    
属性选择器
    

    　　6.伪类选择器:伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则"  LoVe HAte
    

    

    

    /*没有被访问的a标签的样式*/
        .box ul li.item1 a:link{
            
            color: #666;
        }
        /*访问过后的a标签的样式*/
        .box ul li.item2 a:visited{
            
            color: yellow;
        }
        /*鼠标悬停时a标签的样式*/
        .box ul li.item3 a:hover{
            
            color: green;
        }
        /*鼠标摁住的时候a标签的样式*/
        .box ul li.item4 a:active{
            
            color: yellowgreen;
        }
    

    
伪类选择器
    

    　　7，伪元素选择器：
    

    

    

     1 /*设置第一个首字母的样式*/
 2         p:first-letter{
 3             color: red;
 4             font-size: 30px;
 5 
 6         }
 7         
 8 /* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
 9         p:before{
10             content:'alex';
11         }
12         
13         
14 /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
15         p:after{
16             content:'&';
17             color: red;
18             font-size: 40px;
19         }
    

    
伪元素选择器
    


    三、CSS的继承性和层叠性
    

    　　　css有两大特性：继承性和层叠性
    

    1.继承性：
    

      　　面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。
    

    　　继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
    

    　　记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
    

    但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
    

    2.层叠性：
    

    层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
    权重： 谁的权重大，浏览器就会显示谁的属性
    谁的权重大？ 非常简单就是小学的数数。
    数：id的数量 class的数量 标签的数量，顺序不能乱
    

    

    

    /*1  0  0 */显示红色
#box{


    color: red; 
}
/*0  1  0*/
.container{
    color: yellow;
}
/*0  0  1*/
p{
    color: purple;
}
    

    
View Code
    

    是不是感觉明白了呢？好的，再给大家加深点难度。
    

    

    

    <div id='box1' class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p>再来猜猜我是什么颜色？</p>
            </div>
        </div>
    </div>
    

    
View Code
    

    

    

    #box1 #box2 p{
            color: yellow;
        }
        
        #box2 .wrap3 p{
            color: red;
        }
        
        div div #box3 p{
            color: purple;
        }
        
        
        div.wrap1 div.wrap2 div.wrap3 p{
            color: blue;
        }
    

    
View Code
    

    好的。那么上面的这个案例大家是否懂了呢？那么接下来我们继续看案例
    

    还是上面那个html结构，如果我设置以下css，会显示什么颜色呢。
    

    

    

    #box2 .wrap3 p{
            color: yellow;
        }
        
        #box1 .wrap2 p{
            color: red;
        }
    

    
View Code
    

    答案是红色的。结论：当权重一样的时候 是以后来设置的属性为准，前提必须权重一样 。‘后来者居上 ’。
    

    Good,我们继续看下面的css，你来猜以下此时字什么颜色？
    

    

    

    #box1 #box2 .wrap3{
    color: red;
}
        
#box2 .wrap3 p{
    color: green;
}
    

    
View Code
    

    答案是绿色。哈哈，是不是感觉快懵掉了。其实大家只要记住这点特性就可以。第一条css设置的属性值，是通过继承性设置成的红色，那么继承来的属性，它的权重为0。它没有资格跟我们下面选中的标签对比。
    

    那大家猜想一下如果都是被继承来的属性，那么字会显示什么颜色呢？
    

    

    

    #box1 #box2 .wrap3{
    color: red;
}
.wrap1 #box2{
    color: green;
}
    

    
View Code
    

    小案例证明：权重都是0:那么就是"就近原则" ： 谁描述的近，就显示谁的属性。所谓描述的近，就是选中到最内层的距离越近。
    

    总结：
    1.先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
    2.如果没有被选中标签元素，权重为0。
    如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性
    


    四、盒模型
    

    1，何为盒模型
    

    　　在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。
    

    盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。
    

    2，盒模型的属性
    

    　　1，width：内容的宽度
    

    　　2，height: 内容的高度
    

    　　3，padding：内边距，边框到内容的距离，另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域
    

    

    

    /*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/*上 左右  下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;
            
/*上下左右*/
padding: 20px;
    

    
padding赋值
    

    　　4，border: 边框，就是指的盒子的宽度。边框有三个要素： 粗细 线性样式 颜色
    

    

    

    border- 3px;
border-style: solid;
border-color: red;
/*
border- 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/
    

    
border设置
    

    　　
    

    

    

    /*小三角 箭头指向下方*/
        div{
            width: 0;
            height: 0;
            border-bottom: 20px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }
    

    
用border制作三角形
    

    　　5，margin：外边距，盒子边框到附近最近盒子的距离　
    

    

    

    /*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;

margin-bottom: 100px;
    

    
View Code
    


    如果让你做一个宽高402*402的盒子，您如何来设计呢？
    

    答案有上万种，甚至上一种。
    

    3 盒模型的计算
    

    如果一个盒子设置了padding，border，width，height，margin(咱们先不要设置margin，margin有坑，后面课程会讲解)
    

    盒子的真实宽度=width+2*padding+2*border
    

    盒子的真实宽度=height+2*padding+2*border
    


    那么在这里要注意看了。标准盒模型，width不等于盒子真实的宽度。
    

    另外如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。真实高度一样设置。
    


    五、浮动                                                                                             
    

    　　1.浮动
    

    浮动是css里面布局最多的一个属性，也是很重要的一个属性。
    

    float：表示浮动的意思。它有四个值。
    

      

    • none: 表示不浮动，默认
      • 

    • left: 表示左浮动
      • 

    • right：表示右浮动
      • 

    

     　　2，浮动的特性：
    

    1.浮动的元素脱标 ----------------------脱标：就是脱离了标准文档流
    

    2.浮动的元素互相贴靠  
    

    3.浮动的元素由"子围"效果
    

    4.收缩的效果
    

    　　关于浮动，我们初期一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动
    

    　　3清除浮动
    

    　　大家想，如果我第一版的页面的写完了，感觉非常爽，突然隔了一个月，老板说页面某一块的区域，我要加点内容，或者我觉得图片要缩小一下。
    

    这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白，肯定是去每个地方加内容，改图片，然后修改父盒子的高度。那问题来了，
    

    这样不影响开发效率吗？答案是肯定的。
    

    　　如果不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.father2的盒子就会跑到第一个位置上，影响页面布局。
    

    那么我们知道，浮动元素确实能实现我们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！所以我们要清除浮动
    

     　　清除浮动的办法：
    

      

    1. 给父盒子设置高度
        

      1. 这个方法给大家上个代码介绍，它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏
        2. 

      2. 

    2. clear:both
        

      1. 

        clear：意思就是清除的意思。
        

        有三个值：
        

        left：当前元素左边不允许有浮动元素
        

        right：当前元素右边不允许有浮动元素
        

        both：当前元素左右两边不允许有浮动元素
        

        给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。
        

        2. 

      3. 

    3. 伪元素清除法
        

      1. 给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置

        

        

        .clearfix:after{
    /*必须要写这三句话*/
    content: '.';
    clear: both;
    display: block;
}
        

        
View Code
        

        

        /*新浪首页清除浮动伪元素方法*/
              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden
        

        


        2. 

      4. 

    4. overflow：hidden　　　
      5. 

    

    　　　　overflow属性规定当内容溢出元素框时发生的事情。
    

    　　说明：
    

    　　　　这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
    

    有五个值：
    

    


    值描述
    

    
visible
默认值。内容不会被修剪，会呈现在元素框之外。

    

    
hidden
内容会被修剪，并且其余内容是不可见的。

    

    
scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

    

    
auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

    

    
inherit
规定应该从父元素继承 overflow 属性的值。

    
    

    

    逐渐演变成overflow：hidden清除法。
    

    其实它是一个BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522
    

    到此为止。关于浮动的实现并排、清除浮动的四个用法已经介绍完毕，大家一定要熟记于心。
    


    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  12月上旬的一些记录
                    
    11月底的记录
                    
    备考 19号
                    
    在android 中开发java.net.SocketException: socket failed: EACCES (Permission denied) 报错
                    
    使用JAVA NIO实现的UDP client和server
                    
    ANSI X9.8标准 PIN xor PAN获取PIN BlOCK
                    
    直接拿来用！最火的iOS开源项目（一）
                    
    Anroid ListView分组和悬浮Header实现
                    
    Android 联网监控抓包工具的制作(tcpdump的使用)
                    
    Android tcpdump抓包应用实现
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/ltk-python/p/9449561.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看