zoukankan html css js c++ java

css

一.引入css方式

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

　　HTML：超文本标记语言。从语义的角度描述页面结构。

　　CSS：层叠样式表。从审美的角度负责页面样式。

　　JS：JavaScript 。从交互的角度描述页面行为

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

CSS 层叠样式表作用：修饰网页结构

HTML的缺陷：

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

HTML的优点：

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

1. 行内样式

　　行内样式的优先级是最高的

1 <div>
2     <p style="color: green">我是一个段落</p>
3 </div>

2.内接样式

<style type="text/css">
    /*写我们的css代码*/
        
    span{
    color: yellow;
    }

</style>

3.外接样式--链接式

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

4.外接样式--导入式

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

二.CSS的选择器

　　包括基本选择器和高级选择器

基本选择器包含:

1.标签选择器 选中的是页面中共性的标签

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

body{
    color:gray;
    font-size: 12px;
}
/*标签选择器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}

View Code

2.id选择器 选中的是特性唯一的，不能重复
　　选中id

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

1 #box{
 2     background:green;
 3 }
 4             
 5 #s1{
 6     color: red;
 7 }
 8 
 9 #s2{
10     font-size: 30px;
11 }

View Code

3.类选择器 选中的也是页面中共性的标签，类名可以有多个

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

　　类的使用，能够决定前端工程师的css水平到底有多牛逼？

　　玩类了，一定要有”公共类“的概念。

<style>
 .lv{
     color: green;
 
 }
 .big{
     font-size: 40px;
 }
 .line{
    text-decoration: underline;

  }
</style>

 <div>
         <p class="lv big">段落1</p>
         <p class="lv line">段落2</p>
         <p class="line big">段落3</p>
 </div>

View Code

4.通配符选择器 通常是对页面进行重置样式表

总结:

　　不要去试图用一个类将我们的页面写完.这个标签要携带多个类,共同设置样式

　　每个类要尽可能的小,有公共的概念,能够让更多的标签使用

　　尽可能的用class.除非一些的特殊的可以用id

高级选择器包含:

1.后代选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*.father p{
            color: red;
        }*/
        .father .wu{
            color: green;
        }

    </style>
</head>
<body>

    <div class="father">
        <p>alex</p>
        <ul>
            <li>
                <p class="wu">wusir</p>
            </li>
        </ul>
    </div>

    <p class="wu">日天</p>
    
</body>
</html>

View Code

2.子代选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*.father>p{
            color: red;
        }*/
        .father>ul>li{
            width: 100px;
        }
        .container{
            color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <p>alex</p>
        <p>alex</p>
        <p>alex</p>
        <p>alex</p>
        <div class="content">
            <p>wusir</p>
        </div>
        <ul>
            <li>
                alex2
                <ul>
                    <li>wusir</li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="container">
        <p>日天</p>
    </div>

</body>
</html>

View Code

3.并集选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*body{
            font-size: 12px;
        }*/
        /**{
            padding: 0;
            margin: 0;
        }*/
        body,div,p,a,span{
            padding: 0;
            margin: 0;
        }

    </style>
</head>
<body>
    <div>
        alex
    </div>
    <p>alex2</p>
    <a href="#">日天</a>
    <span>wusir</span>
    
</body>
</html>

View Code

4.交集选择器

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*div{
            font-size: 30px;
        }
        .active{
            color: green;
        }
        div.active{
            text-decoration: underline;
        }*/
        div{
            color: red;
        }
        div.active{
            color: green;
        }
    </style>

</head>
<body>
    <div class="active">alex</div>
    
</body>
</html>

View Code

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

5.属性选择器 input[type='text']

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

语法:

1 /*根据属性查找*/
 2             /*[for]{
 3                 color: red;
 4             }*/
 5             
 6             /*找到for属性的等于username的元素 字体颜色设为红色*/
 7             /*[for='username']{
 8                 color: yellow;
 9             }*/
10             
11             /*以....开头  ^*/ 
12             /*[for^='user']{
13                 color: #008000;
14             }*/
15             
16             /*以....结尾   $*/
17             /*[for$='vvip']{
18                 color: red;
19             }*/
20             
21             /*包含某元素的标签*/
22             /*[for*="vip"]{
23                 color: #00BFFF;
24             }*/
25             
26             /**/
27             
28             /*指定单词的属性*/
29             label[for~='user1']{
30                 color: red;
31             }
32             
33             input[type='text']{
34                 background: red;
35             }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        form input[type='text']{
            background-color: red;
        }
        form input[type='password']{
            background-color: yellow;
        }
        form #user{
            background-color: green;            
        }
    </style>
</head>
<body>
    
    <form action="">
        <input type="text" id="user">
        <input type="password">
    </form>
</body>
</html>

View Code

6.伪类选择器

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

　　a:link 没有被访问的

　　a:visited 访问过后的

　　a:hover 鼠标悬停的时候

　　a:active 摁住的时候

1               /*没有被访问的a标签的样式*/
 2         .box ul li.item1 a:link{
 3             
 4             color: #666;
 5         }
 6         /*访问过后的a标签的样式*/
 7         .box ul li.item2 a:visited{
 8             
 9             color: yellow;
10         }
11         /*鼠标悬停时a标签的样式*/
12         .box ul li.item3 a:hover{
13             
14             color: green;
15         }
16         /*鼠标摁住的时候a标签的样式*/
17         .box ul li.item4 a:active{
18             
19             color: yellowgreen;
20         }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*a:hover{
            color: #ff6700
        }*/
        /*爱恨准则 LoVe HAte*/
        /*没有被访问的a标签的颜色*/
        a:link{
            color: green;
        }
        /*访问过后的a标签的颜色*/
        a:visited{
            color: yellow;
        }
        /*鼠标悬停的时候a标签的颜色*/
        a:hover{
            color: red;
        }

        a:active{
            color: blue;
        }
        span:hover{
            color: red;
            font-size: 24px;
            text-decoration: underline;
        }
        .child{
            display: none;
        }
        .father:hover .child{
            color: red;
            display: block;
        }

    </style>
</head>
<body>
    <a href="#">百度一下</a>

    <span>alex</span>

    <div class="father">
        wusir
        <p class="child">alex</p>
    </div>
    
</body>
</html>

View Code

一种css3的选择器nth-child()

      /*选中第一个元素*/
        div ul li:first-child{
            font-size: 20px;
            color: red;
        }
        /*选中最后一个元素*/
        div ul li:last-child{
            font-size: 20px;
            color: yellow;
        }
        
        /*选中当前指定的元素  数值从1开始*/
        div ul li:nth-child(3){
            font-size: 30px;
            color: purple;
        }
        
        /*n表示选中所有,这里面必须是n, 从0开始的  0的时候表示没有选中*/
        div ul li:nth-child(n){
            font-size: 40px;
            color: red;
        }
        
        /*偶数*/
        div ul li:nth-child(2n){
            font-size: 50px;
            color: gold;
        }
        /*奇数*/
        div ul li:nth-child(2n-1){
            font-size: 50px;
            color: yellow;
        }
        /*隔几换色  隔行换色
             隔4换色 就是5n+1,隔3换色就是4n+1
            */
        
        div ul li:nth-child(5n+1){
            font-size: 50px;
            color: red;
        }

7.伪元素选择器

　　p:before 在...的前面添加内容一定要结合content

　　p:after 在...的后面添加内容与后面的布局有很大关系

/*设置第一个首字母的样式*/
        p:first-letter{
            color: red;
            font-size: 30px;

        }
     
/* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
        p:before{
            content:'alex';
        }
        
        
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:first-letter{
            color: red;
            font-size: 26px;
        }
        /*用伪元素 属性一定是content*/

        /*伪元素选择器与后面的布局有很大关系*/
        p:before{
            content: '$'
        }
        p:after{
            content: '.'
        }
        .box2{

            /*需求：这个盒子一定是块级标签  span==>块 并且不再页面中占位置。未来与布局有很大关系 */

            /*隐藏元素 不占位置*/
            /*display: none;*/
            display: block;
            
            /*display: none;*/
            /*隐藏元素 占位置*/
            visibility: hidden;
            height: 0;

        }

    </style>
</head>
<body>
    <p class="box">
        <span>alex</span>
    </p>

    <span class="box2">alex</span>
    <div>wusir</div>
    
</body>
</html>

View Code

三.CSS的继承性和层叠性

1.继承性

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

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

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

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

　　继承性： color、text-xxx、font-xxx、line-xxx的属性是可以继承下来。盒模型的属性是不可以继承下来的
　　a标签有特殊情况，设置a标签的字体颜色一定要选中a，不要使用继承性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*.box p span{
            color: red;
        }*/
        .box{
            color: red;
        }
        .box a{
            color: yellow;
        }
        .box p{
            color: green;
            font-size: 30px;
            line-height: 30px;
            background-color: red;
            text-align: right;
        }
        span{
            background-color: transparent;
        }
    </style>
</head>
<body>

    <div class="box">
        日天
        <a href="#">百度</a>
        <p>
            wusir
            <span>alex</span>
        </p>
    </div>
    
</body>
</html>

View Code

2.层叠性

　　层叠性：权重的标签覆盖掉了权重小的标签，说白了，就是被干掉了

　　权重：谁的权重大，浏览器就会显示谁的属性

　　数：id的数量 class的数量标签的数量，顺序不能乱

　　（1）行内> id > class > 标签
　　　　1000 > 100 > 10 > 1

　　（2）数数数 id class 标签

　　（3）先选中标签，权重一样，以后设置为主

　　（4）继承来的属性它的权重为0 ，与选中的标签没有可比性

　　（5）如果都是继承来的属性，保证就近原则

　　（6）都是继承来的属性，选择的标签一样近，再去数权重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    /*css层叠性  权重 谁的权重大就会显示谁的样式*/

    /*如何看权重  数数选择器  id  class 标签*/
        
        /*1 0 0*/
        /*#box{
            color: yellow;
        }*/
        /*0 1 0*/
        .box{
            color: green;
        }
        /*0 0 1*/
        div{
            color: red;
        }
        /*  id > 类 > 标签*/
    </style>
</head>
<body>
    <div class="box" id="box">猜猜我是什么颜色</div>
    
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        
    </title>
    <style>
        /*1 3 0 */
        #father1 .box2 #father3 p{
            color: yellow;
        }
        
        /*0 4 0*/
        /*.box1 .box2 .box3 .box4{
            color: red;
        }*/
        /*2 1 1*/
        #father1 #father2 .box3 p{
            color: green;
        }

    </style>
</head>
<body>
    <div class="box1" id="father1">
        <ul class="box2" id="father2">
            <li class="box3" id="father3">
                <p class="box4" id="child">猜猜我的颜色</p>
            </li>
        </ul>
    </div>
</body>
</html>

深入1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        
    </title>
    <style>
    /*继承来的属性 它的权重为0，跟选中的标签没有可比性*/
        #father1 #father2 #father3{
            color: red;
        }
        #father1 .box2 .box3 p{
            color: green;
        }

    </style>
</head>
<body>
    <div class="box1" id="father1">
        <ul class="box2" id="father2">
            <li class="box3" id="father3">
                <p class="box4" id="child">猜猜我的颜色</p>
            </li>
        </ul>
    </div>
</body>
</html>

深入2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        
    </title>
    <style>
    /*继承来的属性 权重为0*/

    /*如果是继承来的熟悉，就近原则，谁更深入谁厉害*/
        /*#father1 .box2{
            color: red;
        }
        .box1{
            color: green;
        }*/
        /*都是继承来的 ，都一样深*/

        #father1 #father2 .box3{
            color: red;
        }
        #father1 .box2 .box3{
            color: green;
        }

    </style>
</head>
<body>
    <div class="box1" id="father1">
        <ul class="box2" id="father2">
            <li class="box3" id="father3">
                <p class="box4" id="child">猜猜我的颜色</p>
            </li>
        </ul>
    </div>
</body>
</html>

深入3

总结:

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

层叠性权重相同处理

　　第一种现象：当权重相同时，以后来设置的属性为准，前提一定要权重相同

#box2 .wrap3 p{
    color: yellow;
}
        
#box1 .wrap2 p{
    color: red;
}
结果: 红色

　　第二种现象：第一个选择器没有选中内层标签，那么它是通过继承来设置的属性，那么它的权重为0。第二个选择器选中了内层标签，有权重。

　　所以继承来的元素权重为0。跟选中的元素没有可比性。

#box1 #box2 .wrap3{
    color: red;
}
#box2 .wrap3 p{
    color: green;
}
结果: 绿色

　　第三种现象：如果都是继承来的属性，谁描述的近，显示谁的属性。'就近原则'

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

四.盒模型

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

盒模型有两种：标准模型和IE模型。

1.盒模型的属性

width：内容的宽度

height: 内容的高度

padding：内边距，边框到内容的距离

border: 边框，就是指的盒子的宽度

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
            border: 10px solid green;
            /*margin-left: 50px;*/
        }
    </style>
</head>
<body>
    <!-- 
    内容的宽度
    height:内容的高度
    padding:内边距
    border:边框
    margin:外边距
     -->
     <div class="box"></div>
    
</body>
</html>

View Code

2.盒模型的计算

如果一个盒子设置了padding，border，width，height，margin

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

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

标准盒模型，width不等于盒子真实的宽度。

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

(1)padding(内边距)

　　padding：就是内边距的意思，它是边框到内容之间的距离

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

　　padding有四个方向，分别描述4个方向的padding。

描述的方法有两种

　　1、写小属性,分别设置不同方向的padding

padding-top: 30px;      离上边30
padding-right: 30px;    离右边30
padding-bottom: 30px;   离下边30
padding-left: 30px;     离左边30

　　2、写综合属性，用空格隔开

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

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

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

一些标签默认有padding

　　比如ul标签，有默认的padding-left值。

我们现在初学可以使用通配符选择器

*{
  padding:0;
  margin:0;    
}

(2)border(边框)

　　border:边框的意思，描述盒子的边框

　　边框有三个要素：粗细线性样式颜色

如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。

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

按照方向划分

border-top- 10px;
border-top-color: red;
border-top-style: solid;

border-right- 10px;
border-right-color: red;
border-right-style: solid;

border-bottom- 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left- 10px;
border-left-color: red;
border-left-style:solid;

View Code

上面12条语句，相当于 bordr: 10px solid red;

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;

这样也可以

　　border:none；

　　border：0；

　　表示border没有设置样式。

使用border来制作小三角

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

View Code

(3)margin

　　margin：外边距的意思。表示边框到最近盒子的距离。

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

margin-bottom: 100px;

(4)标准文档流

　　a.什么是标准文档流

　　宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下，像 “织毛衣”。而设计软件，想往哪里画东西，就去哪里画

　　b.空白折叠现象

　　多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

　　c.高矮不齐.,底边对齐

　　文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐

　　d.自动换行

　　如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

总结：如果保证盒模型的大小不变，加padding 就一定要减width或者减height
前提是：在标准文档流
　　　　padding：父子之间调整位置
　　　　margin: 兄弟之间调整位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 180px;
            height: 180px;
            /*padding-left: 100px;*/
            /*padding-left: 100px;*/
            padding-left: 20px;
            padding-top: 20px;
            border: 1px solid red;
        }
        span{
            background-color: green;
        }
        .ttt{
            margin-left: 30px;
        }
    </style>
</head>
<body>

    <!-- 202*202 -->
    <div class="box">
        <span>alex</span>
        <span class="ttt">alex</span>

    </div>
    <div class="box">
        <span>alex</span>
    </div>
</body>
</html>

盒模型的计算

查看全文

相关阅读:
mysql自动备份shell
程序员,架构师有话对你说
 Chief Technology Officer
读《对软件开发的一点心得体会》有感
 shell编程值之shell流程控制(7)
shell编程值之正则表达式与字符截取(6)
shell编程之环境变量配置文件(4)
shell编程之运算符（3）
shell编程之BASH变量（2）
shell编程之SHELL基础（1）

原文地址：https://www.cnblogs.com/chenxi67/p/9671187.html