学习内容:CSS企业开发经验等
学习语言:CSS
htmlcss寒假学习

CSS部分

伪类选择器

hover伪类选择器

概述

可以在鼠标进入选择区域的时候,再让目标CSS代码生效.

格式:

%s:hover{......}第一个字符串是任意一个选择器的选择范围

CSS开发思路

先定义功能再定义实体

举个例子:要定义数个大小与颜色有一定规范的盒子,然后通过调用功能来赋值.CSS一般可以对应多个HTML,作为工具包

<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="b.css"> 
    </head>
    <body>
        <div class="red size1"></div>
        <div class="green size2"></div>
        <div class="gray size3"></div>
    </body>
</html>

.green{
    background-color: green;
}
.gray{
    background-color: grey;
}
.red{
    background-color: red;
}
.size1{
    width: 100px;
    height:100px;
}
.size2{
    width: 200px;
    height: 200px;
}
.size3{
    width: 300px;
    height: 300px;
}

标签的自定义化

通过使用标签选择器,将html的原标签的作用属性改回没加之前,然后再添加想要改变的属性.以下就可以将斜体标签变成变红标签.
因为自带的标签会带有很多不需要的属性,重写拿CSS覆写一下会比较好.
比较好的例子就是下图,将内外边距置0.
如果一个属性没有被覆写,那么其保留原先的属性

em{
    font-style: normal;
    color: red;
}
*{
  margin:0;
  padding:0;
}

盒子模型

盒模型可以自己构建,构架完之后有利于网页的布置.div容器自己也带有padding.

计算盒子的大小

将水平,垂直长度分开算,然后撑起来.

盒子的组成部分

盒子壁(border)

内边距(padding)

复合属性,包含了四个方向的页边距,依次是:上右下左,如果只输出三个值,依次为上,左右,下,如果是两个值,上下,左右.
当然,也可以使用padding-left之类的进行单独调用.
同样的特征与其他的符合属性类似.
padding的默认值是8px.

外边距(margin)

盒子内容(width+height)

定位技术

标准的定位,会将目标连带着自己的子集合一起移动到目标位置.
一般来说,absolute用来定位,realative用来当作参照物.
可以通过z-index来设置层

绝对定位

使用position:absolute开启功能,然后使用left/top/right/bottom(一般不用)定义其物体该方向边缘的距离边沿的长度.其是相对于最近的有定位的父级定位,如果没有,则相对与整个浏览器定位.
脱离原来位置的定位.

层模型

一个被绝对定位的实体,可以被随意放到它想放到的位置,不受其他要素的影响.

依赖定位

使用position:realtive开启功能,相对于自己原来的位置进行定位.
保留原来位置进行定位.会在原先的层的位置上,保留它的位置,不能被占用.

广告定位(固定定位)

使用position:fixed,语法类似于absolutin,参照物从文档变成窗口.如果想要实现居中,那么需要以下代码:

div{
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-50px;
  margin-top:-50px;
  /*上面的两个数值可能是通过每个图片大小来计算*/
}

小作业

获得的知识:

待染色的组件与代表颜色的类不用嵌套,需要使用并列选择器将他们放在一起,但是用来当作锚点的父组件好像就可以用来嵌套,不是非常地清楚.

代码

.circle{
    border: 10px;
    border-style: solid;
    height: 100px;
    width: 100px;
    margin: auto;
    border-color: aquamarine;
    border-radius: 50%;
}
.pos{
    position: fixed;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -50px;
}
.red{
    border-color: red;
}
.blue{
    border-color: blue;
}
.orange{
    border-color: orange;
}
.black{
    border-color: black;
}
.green{
    border-color: green;
}
.bc{
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
}
.blc{
    position: absolute;
    left: -140px;
    top: 0px;
    z-index: 0;
}
.rc{
    position: absolute;
    left: 140px;
    top: 0px;
    z-index: 0;
}
.oc{
    position: absolute;
    left: -70;
    top: 70;
    z-index: 1;
}
.gc{
    position:absolute;
    left: 70;
    top: 70;
    z-index: 1;
}

<html>
    <head>
        <meta charset="utf-8">
        <link type="text/css" rel="stylesheet" href="b.css"/>
    </head>
    <body>
        <div class="pos">
            <div class="circle black bc"></div>
            <div class="circle blue blc"></div>
            <div class="circle red rc"></div>
            <div class="circle orange oc"></div>
            <div class="circle green gc"></div>
        </div>
    </body>
</html>

寒假学习记录

1月21日记录