前端基础:CSS总结

  • Post author:
  • Post category:其他




二.CSS



1.CSS是什么

1.1 Cascading Style Sheet 层叠

  • 美化网页,表现标准语言,决定网页的表现样式
  • 是标记语言,不是编程语言,不能自定义变量,引用等,不具备语法支持
  • 操作:字体、颜色、边距、高度、背景图片、网页定位,网页浮动

1.2 发展史

  • css1.0
  • css2.0 DIV(块)+CSS,html和css结构分离的思想,网页变得简单,便于搜索引擎优化SEO
  • css2.1 浮动+定位
  • css3.0 圆角,阴影,动画…浏览器兼容性

1.3 缺陷:

  • 语法不够强大,无法嵌套书写,模块化开发需要书写重复的选择器
  • 没有变量和合理的样式复用机制,使得逻辑相关的属性值必须以字面量的形式重复输出,导致难以维护

1.4 解决方法Vue

  • 为减少这部分工作量,使用CSS预处理器的工具,提供缺失的样式层复用机制,减少冗余代码,提高演示代码的可维护性。提高前端在样式上的开发效率
  • CSS预处理器:定义一种新的语言,即一种专门的编程语言,为CSS增加一些编程特性,生成CSS 目标文件,开发者使用这种语言进行CSS编码工作。

    用一种专门的编程语言,进行web页面样式设计,通过编译器转换为css文件,供项目使用
  • 常用的CSS预处理器:SASS,基于Ruby通过服务端处理,功能强大,解析效率高。要学习Ruby语言,上手难度高于Less
  • Less:基于NodeJs,通过客户端处理,使用简单,功能比sass简单。解析效率低于sass.实际开发中够用,后台人员推荐使用



2.CSS怎么用(快速入门):推荐结构+样式分离

/*规范<style>可以编写css的代码,每个声明,最号以分号结尾
<style>中间的代码时css代码片段,不同与html*/
/*语法:
选择器{
声明1;
声明2;
声明3}*/

2.1 css优势

  • 内容和表现分离
  • 网页结构表现统一,可以实现复用
  • 样式十分丰富
  • html+css分离
  • 利于SEO,利于被搜索引擎收录(Vue框架网站,不容易被SEO)

2.2 3种导入方式

  • 行内样式
<!--优先级,就近原则,离元素越近,选谁,如:内部样式和外部样式位置颠倒-->
<!--行内样式,在标签元素中,编写个style属性,编写样式即可,有多个样式用;间隔-->
<h2 style="color: blueviolet">2号标题</h2>
  • 内部样式表
  • 外部样式表:方式
    • 链接式:一块渲染后显示出来
<link rel="stylesheet" href="css/demo01style.css">
    • 导入式:css2.1 html先出来,效果后渲染
<style>
	@import "css/demo01styletest.css";
	@import url("css/demo01styletest.css");
</style>
  • 不同点:link和import语法结构不同,前者式html标签,只能放入html源代码中,后者作为css样式,作用引入css样式功能。import需要在



3. CSS选择器(*****):在浏览器中调试好在复制到css中

作用:选择页面(html页面元素布局可认为是Dom树)上的某一个或某一类元素

3.1 基本选择器

3.1.1 标签选择器:会选择页面上所有这个标签元素

  • color: #1b6556; //输入#111112 3位数字,点击左侧的颜色框,可出现色彩板。
    

3.1.2 类选择器 class:可以多个标签归类,是同一个class,可以复用,跨标签

3.1.3 ID选择器:唯一性,必须保证全局唯一

  • 优先级:不遵循就近原则,固定
  • id>class>标签

3.2 高级选择器

3.2.1 层次选择器

  • 后代选择器:在某个元素的后面,所有代系
//空格
body li p{
    background-color: aquamarine;
}
  • 子选择器:一代
/*子选择器*/
body>p{
    background-color: #112233;
}
  • 相邻弟选择器:同辈,只有一个,相邻(向下)
/*相邻弟选择器*/
.p2 + p{
    background-color: #112233
}
<p>P1</p>
<p class="p2">P2</p>
<p>P3</p>
  • 通用选择器:当前选中元素的”向下”的所有兄弟元素
/*通用兄弟选择器,当前选中元素的"向下"的所有兄弟元素*/
.p2~p{
    background-color: #112233
}
<p>P1</p>
<p class="p2">P2</p>
<p>P3</p>
<ul>
    <li><p>l-p-1</p></li>
    <li><p>l-p-2</p></li>
    <li><p>l-p-3</p></li>
</ul>
<p>P4</p>
<p>P5</p>

3.2.2 结构 伪类选择器:加了条件,过滤

/*ui的第一个子元素*/
ul li:first-child{
    background-color: blueviolet;
}
/*ui的最后一个子元素*/
ul li:last-child{
    background-color: aquamarine;
}
/*选中p1:定位到父元素,选择当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效!顺序选择 ~~不分类型,加了逻辑*/
/*p:nth-child(2){
    background-color: antiquewhite;
}*/
/*选中父元素下的p元素的第二个,按类型选*/
p:nth-of-type(1){
    background-color: brown;
}
a:hover{
	background-color: brown;
}

<a href="#">haha</a>      
<h1>h1</h1>
<p>P1</p>
<p>P2</p>
<p>P3</p>
<ul>
    <li>l-p-1</li>
    <li>l-p-2</li>
    <li>l-p-3</li>
</ul>
<p>P4</p>
<p>P5</p>

3.2.3 属性选择器(常用)ID+Class结合

.demo a{
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: antiquewhite;
    text-align: center;
    text-decoration-line: none;
    color: cadetblue;
    margin-right: 30px;
    /*line-height: 50px;*/  /*垂直居中*/
    font: bold 20px/50px Arial;

}
/*标签[属性]  标签[属性名=属性值] 属性值可用正则*/
/*
=是绝对等于
~=/*=是通配元素
^=以开头
$=以结尾
*/
/*存在ID属性的元素  a[] ID只有一个不用带""""*/
/*a[id]{
    background-color: cadetblue;
}*/
/*id=baidu的元素*/
/*a[id=baidu]{
    background-color: aquamarine;
}*/
/*class中有item的元素 class有多个加""*/
/*a[class~="item"]{
    background-color: chartreuse;
}*/
/*a[class*="item"]{
    background-color: chartreuse;
}*/
/*href属性中以http开头的元素*/
/*a[href^=http] {
    background-color: chartreuse;
}*/
/*以com结尾的元素*/
a[href$=com]{
    background-color: chartreuse;
}
<p class="demo">
    <a href="http://www.baidu.org" class="links item first" id = "baidu">a1</a>
    <a href="https://www.baidu.cn" class="links item first" id = "Tencent">b2</a>
    <a href="http://www.baidu.com" class="links first" target="_blank">c3</a>
    <a href="../resource/image/1.jpg" class="links first" title="d4">d4</a>
    <a href="../resource/image/1.png" class="links first" id = "google">e5</a>
</p>



4.美化网页(文字,阴影,超链接,列表,渐变…)

4.1 为什么?

  • 有效传递页面信息

  • 美化网页,页面漂亮,才能吸引用户

  • 凸显页面主题

  • 提高用户的体验

  • span标签:重点要突出的字,使用span套起来,给span加id属性,之后对id加样式

4.2 字体样式

/*  font-weight:字体粗细,bold/900
    color:字体颜色
    font-family:Arial, 楷体;  //中英文多种字体
    font-style: oblique;  //风格斜体
    px
    em //缩进2em两个缩进
    */

4.3文本样式

/*
color:颜色单词/RGB16进制。#ff00ff/rgb()。rgb颜色值
rgba(12,12,126,0.5)  a--透明度(0-1)
text-indent: 2em; //首行缩进
 height: 200px;//块高度
line-height: 200px; //行高,单行文字上下居中
行高和块高度一致可以高度居中
text-decoration-line: line-through; //中划线
text-decoration-line: overline;  //上划线
img,span{
    vertical-align: middle;
}
水平对齐要有参照物。a/b
*/

4.4文本阴影和超链接伪类

/*超链接默认状态,未访问*/
a:link{
    text-decoration-line: none;
    color: chartreuse;
}
/*以访问的状态*/
a:visited{
    color: blueviolet;
}
/*鼠标悬浮状态:重点*/
a:hover{
    color: aqua;
}
/*鼠标点击为释放状态*/
a:active{
    color: antiquewhite;
    font-size: 30px;
}
text-shadow: cadetblue 20px 20px 2px;
阴影颜色,水平偏移,垂直偏移,阴影半径

4.5 列表

/*list-style: none;无实心圆
square 实心方块
circle 空心园
decimal 数字
*/
ul li{
    list-style: none;
    text-indent: 1em;
    height: 30px;
}

4.6 背景

/*颜色,图片,位置,平铺方式*/
background: darkgray url("../resource/image/向右.svg") 322px 2px no-repeat;

background-repeat: repeat-y;垂直平铺
background-repeat: repeat-x;水平平铺
 background-repeat: no-repeat;不平铺
 
//默认平铺
 background-image: url("../resource/image/下载.svg");
 background-repeat: no-repeat;
 background-position: 362px 10px;

4.7 渐变:用网站进行搭配

/*径向渐变、圆形渐变*/
background-color: #e9ad00;
background-image: linear-gradient(160deg, #e9ad00 32%, #80D0C7 100%);



5.盒子模型

5.1 啥是盒子模型

margin

padding

border

5.2 边框

  • 边框样式,粗细,颜色
/*body总有一个默认的外边距margin: 0,内边距padding: 0;常见操作统一样式
body,ul,h1,a{margin: 0;
padding: 0;}*/
*{
margin: 0;
padding: 0;
text-decoration-line: none;
}
/*border:颜色,粗细,样式*/
#box{
    width: 280px;
    border: #52ACFF 3px solid;
}
h2{
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    background: #80D0C7;
}
form{
    background-color: #e9ad00;
    background-image: linear-gradient(160deg, #e9ad00 32%, #80D0C7 100%);

}
form div:nth-of-type(1) input{
    border: #52ACFF 2px dashed;
}
form div:nth-of-type(2) input{
    border: #e9ad00 2px solid;
}
form div:nth-of-type(3) input{
    border:#52ACFF 5px dotted;
}

5.3 外边距:作用居中元素,内边距

  • margin: 0 auto;居中要求:外部是块元素,有固定的宽度,否则相对body无边界的空间无法居中
/*border:颜色,粗细,样式
顺时针旋转
上、右、下、左
padding: 10px 20px 15px 25px;
上下、左右
padding: 10px 20px;
上、左右、下
padding: 10px 20px 15px;
*/
/*margin外边距居中元素
上下、左右
margin: 0 auto;*/
#box{
    width: 280px;
    border: #52ACFF 3px solid;
    padding: 0;
    margin: 0 auto;
}
  • 盒子的计算方式:margin+padding+border+内容宽度=元素大小

5.4 圆角边框

/*border-radius圆角
上,右,下,左,顺时针方向
border-radius: 55px 20px; 上下、左右
圆圈:圆角=半径*/
#content{
    width: 100px;
    height: 50px;
    border: 5px seagreen solid;
    border-radius: 55px 55px 0px 0px;
}
<div id="content">

</div>

5.5 阴影

文字阴影
text-shadow: #52ACFF 10px 20px 0.5px;
box-shadow: #52ACFF 10px 20px 0.5px;
#content{
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border: 5px seagreen solid;
    border-radius: 55px;
    /*文字阴影:颜色 偏移X 偏移Y 偏移半径*/
    /*text-shadow: #52ACFF 10px 20px 0.5px;*/
    /*边框阴影:颜色 偏移X 偏移Y 偏移半径*/
    box-shadow: #52ACFF 10px 20px 100px;
     /*使里面元素居中*/
    text-align: center;
    line-height: 100px;
}
img{
    margin: 0 auto
}
<div id="content">
    <img src="../resource/image/向下(1).png" alt="">
</div>



6.浮动

6.1 块级元素

h1 p div 列表…

  • 行内元素:不独占一行,可以被块级元素包含,反之不可以

span a img strong

6.2 display:是实现行内元素排列的方式,但是大部分情况使用float,还在文档流中

/*display:block块级元素
inline-block:是块元素,但可以内联,在一行
inline:行内元素
none:不显示
*/
/*将列表元素行转为列,首页菜单栏*/
ul li{
    display: inline-block;
    background: #52ACFF;
    border: #e9ad00 solid 5px;
    border-radius: 10px;
}
<ul>
    <li><p>l-p-1</p></li>
    <li><p>l-p-2</p></li>
    <li><p>l-p-3</p></li>
</ul>

6.3 float:脱离文档流中,可以做其他的事

/*clear: both 两侧清除浮动
clear: left 左侧清除浮动
clear: right 右侧清除浮动
none:可以浮动
*/
//浮动:将元素脱离文档流,向右排列
float: right;
/*在浮动的基础上打破线性排列,转为块级元素*/
clear: both;

6.4 父级边框塌陷问题

  • 增加父级元素的高度-包住浮动元素

  • 在浮动块内增加空的div,清除两侧浮动

  • overflow:溢出

.footer{
    clear: both;
    margin: 0;
    padding: 0;
}
<div id="father">
    <div id="content">
        <img src="../resource/image/向下(1).png" alt="">
    </div>
    <div id="content2">
        <img src="../resource/image/向下(1).png" alt="">
    </div>
    <div class="footer"></div>
</div>
#father{
    border: #52ACFF 3px solid;
    overflow: auto;
}
  • 父类添加一个伪类:after:过滤
/*相当于添加一个空的div,==手动清除div*/
#father:after{
    content: "";
    display: block;
    clear: both;
}

6.4.2 总结

  • 浮动元素后面增加空的div:简单,但代码中尽量避免空的div
  • 设置父元素的高度:简单,元素假设有了固定,就会被限制,会超出父级元素
  • overflow:简单,下拉的一些场景避免使用,宁愿被切掉,也不要滚动条
  • 父类添加一个伪类:after(推荐)写法稍微复杂点,但无副作用推荐使用。不改动原来基础上新增代码

6.5 对比

  • display:方向不可控制,在标准文档流,无父级边框塌陷问题
  • float:浮动后脱离标准文档流,解决父级边框塌陷问题



7.定位

7.1 相对定位(静态定位。默认):相对于自己原来的位置进行指定偏移,原位置保留,任然在标准文档流

/*position: relative;相对定位原位置
left:左方向,正值右移动,负值左移动,其他方向同理*/
#first{
    position: relative;
    left: 10px;
}
#second{
    position: relative;
    top: 10px;
}
#third{
    position: relative;
    left: 10px;
    bottom: -20px;
}

<div id="father">
        <div id="first">第一框</div>
        <div id="second">第二框</div>
        <div id="third">第三框</div>
    </div>
#father2{
    width: 300px;
    height: 300px;
    padding: 20px;
    border: 2px red solid;
}
a{
    width: 100px;
    height: 100px;
    text-decoration-line: none;
    background: #d971d7;
    line-height: 100px;
    text-align: center;
    display: block;/*变为块元素*/
}
a:hover{
    background: #52ACFF;
}
.a2,.a4{
    position: relative;
    top: -100px;
    left: 200px;
}
.a5{
    position: relative;
    top: -300px;
    left: 100px;
}
<div id="father2">
    <a href="#" class="a1">a1</a>
    <a href="#" class="a2">a2</a>
    <a href="#" class="a3">a3</a>
    <a href="#" class="a4">a4</a>
    <a href="#" class="a5">a5</a>
</div>

7.2 绝对定位:基于XX定位,上下左右

  • 没有父级元素定位的前提下,相对于浏览器定位
  • 假设父级元素存在定位(相对定位),则相对于父元素偏移
  • 在父级元素范围内移动。负值:不超过父元素。左右同时为负值,则元素拉伸
  • 相对于父级或浏览器位置进行指定偏移,绝对定位时,原位置不保留,不在在标准文档流
#father3{
    width: 500px;
    height: 200px;
    border: #e9ad00 5px solid;
    position: relative;
}
#father3 div{
    border: #52ACFF 2px solid;
    margin: 20px;
}
#first3{
    position: absolute;
    right: 30px;
}

<div id="father3">
        <div id="first3">第一框</div>
        <div id="second3">第二框</div>
        <div id="third3">第三框</div>
    </div>

7.3 固定定位:相对于浏览器位置进行指定偏移,固定定位时,原位置不保留,不在在标准文档流

#father4 div{
    border: #52ACFF 2px solid;
    margin: 20px;
}
#father4 div:nth-of-type(1){
    position: absolute;
    bottom: 0px;
    left: 100px;
}
#father4 div:nth-of-type(2){
    position: fixed;
    bottom: 0px;
    left: 100px;
}

7.4 z-index:最低0,最高无线~999,有定位,才浮起来,才有层级,不然就是平铺概念

  • b站缩略图在地址栏可以调宽、高https://i2.hdslb.com/bfs/archive/b539be0b5560e2d6ec044473db7cb00c64db314e.png@64w_40h_1c.webp (64w_40h)
<style>
    #content{
        width: 300px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        /*12/25常用配套大小*/
        font-size: 12px;
        line-height: 25px;
        border: #e9ad00 2px solid;
    }
    img{
        width: 300px;
        height: 50px;
    }
    ul,li{
        margin: 0;
        padding: 0;  /*li中圆点消失在padding: 0*/
        list-style: none;
    }
    /*父级元素相对定位*/
    #content ul{
        position: relative;
    }
    .tipText, .tipBg{
        position: absolute;
        width: 300px;
        top:36px;
        height: 25px;

    }
    .tipText{
        color: #e9ad00;
        /*z-index: 2;*/
    }
    .tipBg{
        background: #112233;
        opacity: 0.5;/*背景透明都0-1*/
        filter: alpha(opacity=50);/*IE8之前浏览器使用0-100*/
    }
</style>

<div id="content">
    <ul>
        <li><img src="../resource/image/1.png" alt=""></li>
        <li class="tipText">集合学习</li>
        <li class="tipBg"></li>
        <li>出版:2022.4.12</li>
        <li>地点:earth</li>
    </ul>
</div>



8.网页动画(特效)



下一篇:前端基础-02-

JavaScript基础总结



版权声明:本文为weixin_42045639原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。