【前端笔记】☞ CSS 基础

作者:分分快三计划

8. CSS布局

默认情况下,所有的网页标签都在标准流布局中

  从上到下,从左到右

脱离标准流的两种方法:

  1》float属性

    float属性的常用取值有:

      left:脱离标准流,浮动在父标签的最左边

      right:脱离标准流,浮动在父标签的最右边

    应用场景(用于制作菜单栏):

    图片 1  

  2》position属性(浮动在父标签的任意位置) 结合 left、right、top、bottom属性来使用

      图片 2    

    注意:如果是相对于body来浮动,无需再设置父标签的position。

       图片 3

      图片 4 

css中的优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            color: white;
        }
        .c2{
            font-size: 58px;
            #color:black;
        }

    </style>
</head>
<body>
    <div class="c1 c2">asdfas</div>
</body>
</html>

 上面我们设置了一个div有两个class名称,然后先设置了一个color:white,显示的效果如下:

图片 5

下面我们在.c2的css中把color:black的注释去掉,显示的效果如下:

图片 6

我们再在<div>标签中添加:style="color:blue",那么显示的效果如下:

图片 7

 

这就涉及到了css样式的优先级:(就近原则)

  style--->c2----c1(这里c2,c1的优先级是看在css中谁的样式写在下面,如果上面head标签的style标签中两个位置互换,那么就是c1的优先级大于c2)

1. 什么是CSS

  • CSS的全称是Cascading Style Sheets,层叠样式表。它用来控制HTML标签的样式,在美化网页中起到非常重要的作用。

  CSS的编写格式是键值对形式的,比如    

color: red;

background-color: blue;

font-size: 20px;

  冒号左边的是属性名,冒号右边的是属性值。

  CSS遵循一个规律:就近原则(同一个样式出现多次定义,以离内容最近的为准)、叠加原则(同一个样式只出现一次定义,以出现的为准)

选择器使用css

 1.标签选择器:

div{background-color:red; } 
<div > </div>

2.class选择器:

.bd{background-color:red; } 
<div class='bd'> </div> 

3.id选择器:

#idselect{background-color:red; } 
<div id='idselect' > </div>

4.关联选择器(空格)

#idselect p{background-color:red; } 
<div id='idselect' > <p> </p> </div>

5.组合选择器:(逗号)

input,div,p{ background-color:red; } 

6.属性选择器:

input[type='text']{ width:100px; height:200px; } 

5. CSS属性

  CSS有N多属性,根据继承性,主要可以分为2大类

  1》可继承属性:

    父标签的属性值会传递给子标签

    一般是文字控制属性

body {

    font-size: 30px;

    color: red;

    /*字体加粗*/

    font-weight: bolder;

}

下面列举一些可继承属性(红色表示常用):

  1. 所有标签可继承

    visibility(隐藏内容)、cursor(光标样式)

  1. 内联标签可继承

    line-height、color、font、font-family(文字字体)、font-size、font-weight(文字加粗)、text-decoration(文字下划线)、letter-spacing、word-spacing、white-space、font-style、font-variant、text-transform、direction

    /*去掉标签的下划线*/

    text-decoration: none;

  1. 块级标签可继承

    text-indent(文字首行缩进)、text-align(内容水平居中)

  1. 列表标签可继承

    list-style(列表样式)、list-style-type、list-style-position、list-style-image

   

div {

    background-color: red;

    width: 300px;

    height: 300px;

    /* 隐藏标签的内容和结构 */

    /* display: none; */

    /* 隐藏标签的内容,保留标签的结构,占位 */

    visibility: hidden;

    

    /*规定光标的样式(光标移到div上显示):pointer手指(跳转/超链接用);crosshair十字架(画图/画区域用)*/

    cursor: pointer;

}

 


 

p {

    color: blue;

    /* 段落首行缩进(根据像素/比例进行缩进)*/

    text-indent: 3%;

}

 

ul {

    /*列表样式属性:none无;square方块;circle圆*/

    list-style:square;

}

 


 

  2》不可继承属性

父标签的属性值不能传递给子标签

一般是区块控制属性

 

    下面列举一些不可继承属性(红色表示常用):

display、margin、border、padding、background(背景)

height、min-height、max-height、width、min-width、max-width

overflow、position、left、right、top、bottom、z-index

float、clear

table-layout、vertical-align

page-break-after、page-bread-before

unicode-bidi

 


 

div {

    /*背景属性:可以直接设置颜色,也可以设置图片*/

    /*background: red;*/

    background: url("img/a.png");

    /*背景图片大小:自适应标签的大小*/

    background-size: cover;

}

 


 

div {

    background-color: red;

    width: 100px;

    height: 30px;

    /* 溢出属性(内容超过显示的大小):auto 超出范围的部分自动滚动显示(类似于滚动视图);hidden 超出范围的部分隐藏 */

    overflow: auto;

}

前端学习---css基本知识,学习---css知识

7. 盒子模型

  网页上的每一个标签都是一个盒子

  图片 8

  每个盒子都有四个属性:

  1》内容(content)

    盒子里装的东西

    网页中通常是指文字和图片

  2》填充(padding,内边距)

    怕盒子里装的(贵重的)东西损坏,而添加的泡沫或者其它抗震的辅料

  3》边框(border):盒子本身

  4》边界(margin,外边距)

    盒子摆放的时候的不能全部堆在一起,盒子之间要留一定空隙保持通风,同时也为了方便取出

  

  W3C标准盒子模型:宽高是内容的宽度和高度

  图片 9 

  微软的标准盒子模型:宽高是盒子的宽度和高度

  图片 10

  边距属性:(padding,内边距; margin,外边距),复合属性,依次设置上右下左。

  图片 11

  图片 12

  

一、标签水平居中:

1》行内标签、行内块级标签:

    /* 当前标签的内容水平居中 */

    text-align: center;

2》块级标签:

    /*水平居中(左右边距自动),用于块级标签*/

    margin: 0px auto;

 

二、标签垂直居中:

div {

    background-color: red;

    width: 500px;

    height: 300px;

    /* 设置行高:值等于height,垂直居中 */

    line-height: 300px;

}

 

  复习CSS常用的属性:

  图片 13

css基本知识

 我们先看一个小例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color:#2459a2;height: 48px;">1</div>
    <div style="background-color:red;">2</div>
    <div style="background-color:green;">3</div>
</body>
</html>

 图片 14

我们可以看到我们在div中加了style,里面有background-color,height等属性,这样就使的原本什么都没有的div添加了背景色高度等。

css的编写

  • 在标签上设置style属性:width,height,background.......
  • 写在head里面,写一个<style>标签中写样式:
<head>
<style>
#i1{
  background-color:red;
  height:48px      
}
</style>
</head>
  •  单独创建一个.css格式的文件,在.css文件中写入样式,在html文件中的head标签中引入该.css文件:
<link rel="stylesheet" href="common.css" />

 css中的注释:/**/

3. CSS的两大重点

  属性:通过属性的复杂叠加才能做出漂亮的网页

  选择器的作用:通过选择器找到对应的标签设置样式(选择器就是用来找网页中的标签,去设置样式)

1》标签选择器
    /* 1.标签选择器 */
    div {
        color: red;
    }
    p {
        color: blue;
    }
    <div>11111</div>
    <p>222222</p>

2》类选择器的格式
    /* 2.类选择器 */
    .one {
        color: yellow;
    }
    <div class="one">3333333</div>
    <p class="one">444444</p>

3》id选择器的格式
    /* 3.id选择器 */
    #first {
        font-size: 40px;
    }
    <div id="first">555555</div>
    <!--id选择器只能用一次,是唯一标识,其它地方不能重复使用-->
    <!--<div id="first">666666</div>-->

4》并列选择器
    /* 并列选择器 */
    div,.one {
        color: blue;
    }
    说明:并列选择器是一种合并写法,即把多个标签相同的样式合并写到一起。

5》复合选择器
    /* 复合选择器 */
    div .one {
        background-color: lightgray;
    }
    #first div {
        color: #84ffdb;
    }
    说明:复合选择器是一种缩小定位范围的写法,方便快速定位。(首先先找div标签,然后再在div标签里去找设置了one的类选择器。)

6》直接后代选择器
    /*直接后代选择器*/
    div > p {
        color: red;
    }
    说明:定位div里面的p标签,包括所有儿子级的p标签,不包括孙子级的p标签。

7》相邻兄弟选择器
    /*相邻兄弟选择器*/
    div   p {
        color: red;
    }
    说明:定位与div并列同级且最近的一个p标签。

8》属性选择器
    /*属性选择器,定位带name属性的div */
    div[name] {
        color: red;
    }
    /*属性选择器,定位 name属性值为zhangsan div */
    div[name="zhangsan"] {
        color: blue;
    }
    /*属性选择器,定位带 name属性和age属性 的div */
    div[name][age]{
        color:gray;
    }
    <!--div有一个name属性-->
    <div name="zhangsan">11111</div>
    <div name="lisi">22222</div>
    <!--div有两个属性:name和age-->
   <div name="wangwu" age="23">333333</div>

9》伪类
    在选择器后加上“:属性”,当这个属性被触发的时候,可以去改变选择器对应标签的样式。
    标签:属性 {
        样式
    }
  

    div {
        background-color: red;
        width: 300px;
        height: 300px;
    }
    /* 伪类:当鼠标放到div区域上时,改变div的样式 (webView不支持,点击才能看到效果)*/
    div:hover {
        background-color: green;
        width: 100px;
        height: 100px;
    }
    /* 伪类:输入框获得焦点(处于编辑状态)时,改变input边框的样式 */
    input:focus {
        /* 去掉外边框的颜色 */
        outline: none;
        /* 边框:是一个复合属性。(1.边框宽度 2.边框样式:实线solid、虚线dashed、双环线double 3.边框颜色) */
        border: 1px solid yellow;
  }

常用的css中的样式

 1.边框

默认4个边都加上:

   border:1px solid/dotted red (1像素,实线/虚线,红色):

只加左边和右边:

  border-left-right:1px solid/dotted red 

 2.height,width,line-height,color,font-size,font-weight:

height,width:高度,宽度

  height:48px;width:200px     or     height:48px;width:80%(可以用具体的值也可以用百分比)

text-align:center,水平方向居中

图片 15

line-height行高:

  如果我们想要把文字垂直居中就可以用这个属性(行高像素==height像素),即height:48px,line-height:48px,则字体就居中了。

图片 16

图片 17

font-size字体大小:font-size:12px;

font-weight字体的样式:100-900,bold(加粗),bolder(更粗),inherit,initial,lighter,normal,unset

color字体颜色;

3.float属性:浮动

如果我们写了2个div,那这2个div就会每个各占一行,如果我们想让一个div在左边占20%,一个div在右边80%,想要两个div在一行对接起来,那就需要用到float

首先看看我们不用float的效果:

<div style="background-color: red;width:20%;">div1</div>
<div style="background-color: green;width:80%">div2</div>

 

图片 18

 如果我们让这两个div都向左浮动:

<div style="background-color: red;width:20%;float:left;">div1</div>
<div style="background-color: green;width:80%;float:left">div2</div>

 两个就重合在一起,并且一个站20%,一个占80%

图片 19

如果我改成div1占20%往左浮动,div2占60%往右浮动:那么中间就会空出20%

<div style="background-color: red;width:20%;float:left;">div1</div>
<div style="background-color: green;width:60%;float:right">div2</div>

图片 20

 现在我们写一个盒子,里面有一些div:

<div style="width: 300px; border: 1px solid red;">
        <div style="width:96px;height:30px;border:1px solid green;float:left"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left"></div>
</div>

 我们可以发现用了float我们就可以做到类似很多前端页面一块一块的样式,我们最外面的div的高度是随着里面小div不断的增多而增多的。

 图片 21

但是有一个问题,我们可以看到上面有一个红色的线,他是外层div的边框,为什么父div的边框没有了呢,只有一个了呢?这个就是使用float之后会产生的问题。

解决方法:

在父div中的最后加上这么一段:<div>

这样,父div的边框就显现了出来

4.display

首先我们看一段:

<div style="background-color: red;">div1</div>
span1

图片 22

现在我们想要让块级标签变成一个行内标签:display:inline

<div style="background-color: red;display:inline;">div1</div>
span1

图片 23

我们想要让span这个行内标签变成块级标签:display:block;

图片 24

********

行内标签:无法设置高度,宽度,padding,margin

块级标签:可以设置高度,宽度,padding,margin

span1
<a style="background-color: red;">chaolianjei</a>

 我们可以发现一点效果都没有

 图片 25 

display:inline-block;

  具有inline,默认自己有多少占多少;

  具有block,可以设置高度,宽度,padding,margin

span1
<a style="background-color: red;">chaolianjei</a>

 加了display:inline-block;之后,span就可以设置宽高了:

 图片 26

display:none;让标签消失:

 图片 27图片 28

5.padding margin(0 auto)内边距,外边距:

margin:

  margin:0 auto;上下为0,左右居中

6.position:

  • fixed---->固定在页面的某个位置,滚轮滚动,位置也不会变
  • absolute---->绝对定位,单用它,滚轮滚动时,位置会改变,要和relative一起使用
  • relative

fixed:

我们先看一串代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 50px;height:50px;background-color: black;color:white">返回顶部</div>
    <div style="height: 5000px;background-color: #dddddd"></div>
</body>
</html>

 图片 29

现在我们希望的是 “返回顶部” 这个div 固定在浏览器的右下角

<div style="width: 50px;height:50px;background-color: black;color:white;
    position:fixed;bottom:20px;right:20px;"
    >返回顶部</div>

 

 我在style中添加了

position:fixed;bottom:20px;right:20px;

 这样我们就把那个div固定在右下角了。

 

我们再看一个例子:有的网站,它的菜单栏是一直在浏览器的上面的,即使是滚动条滚动,头部的菜单栏也不会变,这个我们应该怎么做呢:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height:48px;
            background-color: black;
            color: #dddddd;
            position:fixed;
            top:0;
            right:0;
            left: 0;
        }
        .pg-body{
            background-color: #dddddd;
            height:5000px;
            margin-top:50px ;
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>
</html>

 

 其实只需要加上上面色的代码就可以了,下面的margin-top是为了让pg-body的能够往下来一点,显示出全部内容

 relative absolute:

我现在有3个div:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">div1</div>
    <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">div2</div>
    <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">div3</div>
</body>
</html>

图片 30

我想要在div1的左下角放一个黑色的小方框, div2的右下角放一个黑色的小方框,div3的左上角放一个黑色的小方框,应该怎么做 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">
        div1
        <div style="width:50px;height:50px;background-color: black;position:absolute;left:0;bottom:0"></div>
    </div>
    <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">
        div2
        <div style="width:50px;height:50px;background-color: black;position:absolute;right:0;bottom:0"></div>
    </div>
    <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">
        div3
        <div style="width:50px;height:50px;background-color: black;position:absolute;left:0;top:0"></div>
    </div>
</body>
</html>

只要relative 和 absolute 相配合,然后设置top,left,right,bottom的值就可以了,这个值可以是正数也可以是负数

 图片 31

还有一个场景:我们点一个按钮,然后就会跳出一个小窗口,这个时候窗口以外的东西就没有办法进行操作了,如:我点击了大模态框,之后跳出了large model,但是灰色的地方是没有办法进行操作的

图片 32

这就是一个典型的三层模式:本身文本是一层,灰色的遮罩是一层,弹出的框是一层。那我们怎么实现这个呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width:400px;height:100px;background-color: white;
        position: fixed;top:50%;left: 50%;
        margin-top: -50px;margin-left:-200px;
        z-index:10;"></div>
    <div style="position: fixed;background-color: black;top:0;bottom:0;right:0;left: 0; opacity: 0.6;z-index: 9;"></div>

    <div style="height:5000px;background-color: green;"></div>
</body>
</html>

 效果如图所示:下面有一个green的div,然后有一个black的div,只是设置了透明度,最上面有一个居中的白色div

图片 33

分析:首先我们先说两个新的属性:

opcity:0.6;设置透明度,值为0-1

z-index:9,设置优先级,值越高优先级越大

我们先实现两个div,一个是绿色的,一个是黑色的。这个很简单。下面要再加上第三层。最关键的就是这上面两个属性,如果透明属性没有的话,在做两层的时候,黑色的就会把绿色彻底覆盖住,如果没有优先级属性的话,那么在做第三个div的时候就会不知道谁覆盖了谁。

这里我们还要记录的是居中方法:

position: fixed;top:50%;left: 50%;
margin-top: -50px;margin-left:-200px;

 设置50%,然后用margin返回宽高的一半,这样就能够让一个div居中显示

 7.overflow

 我们设置了一个div的宽度和高度,现在想要在这个div中放入一个图片,那图片有自己的高度和宽度。如果直接发放进去就会超出div的范围显示,那我们怎么办呢?

在style中加入overflow属性:

  • hidden:超出的部分隐藏
  • auto:超出的部分会给滚动条

 图片 34图片 35

8.hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            top:0;
            right:0;
            left:0;
            height:48px;
            background-color: #2459a2;
            line-height:48px;
        }
        .pg-body{
            margin-top:50px;
        }
        .w{
            width:980px;
            margin:0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding:0 10px;
            color:white;
        }
        /*当鼠标移动到当前标签的时候,以下css属性才会生效*/
        .pg-header .menu:hover{

            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">logo</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="w"></div>
    </div>
</body>
</html>

 hover当鼠标移动到超链接的时候,就会对hover的css里的属性生效

 图片 36

9.background

background-image:url('image/4.jpg'):背景是一个图片,如果这个div比图片的尺寸还要大的话,图片就会一直重复着放

  应用场景:渐变色的背景,我们只需要一个很窄的图片,就可以利用这个属性,让整个背景都是这个渐变色的图片

 background-repeat:no-repeat/repeat-x/repeat-y:改属性设置图片是否要重复,水平重复还是垂直重复

background-position:10px 10px 选取一张图上的某一个位置进行显示

  应用场景:网站有的时候用一张图上存储了很多的图标,要用哪个图标就可以选哪个坐标

 

 

 

 

 

 

 

  

 

css基本知识 我们先看一个小例子: ! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title Title / title / h...

2. CSS有3种书写形式

  1》行内样式:(内联样式)直接在标签的style属性中书写

    <body style="color: red;">

  2》页内样式:在本网页的style标签中书写

<style>

  body {

    color: red;

  }

</style>

  3》外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用

    // relation 关系, 要告诉浏览器导入的是什么东西。(层叠样式表)

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

6. CSS3新增的属性

  1》RGBA透明度

div {

    /* RGB透明度 */

    /* font-size: 9pt; color: gray; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;" lang="en-US"> rgb(255,58,15); */

    background-color: rgba(255,56,14,1.0);

    /* 设置不透明度 */

    opacity: 0.2;

}

  2》阴影

    标签阴影:

    /* 块(标签)阴影:水平阴影的位置 垂直阴影的位置 模糊距离 阴影的颜色 */

    box-shadow: 5px 5px 10px red;

    文字阴影:

    /* 文字阴影:水平阴影的位置 垂直阴影的位置 模糊距离 阴影的颜色 */

    text-shadow: 5px 5px 10px #111534;

  3》边框

    /* 边框属性:边框宽度 边框样式(实线、虚线、双环线) 边框颜色 */

    border: 20px solid yellow;

    /* 边框的圆角半径 */

    border-radius: 10px;

4. 选择器的优先级

  选择器的针对性越强(范围越小),它的优先级就越高。

  如:id选择器 > 类选择器 > 标签选择器

  /* 强制改变优先级用important,important优先级最高,设置body标签里所有文字为黑色 */

* {

    color:black !important;

}

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划