css常用组件

2024-01-11 17:04:52

优势

1.内容和表现分离

2.网页结构表现统一，可以实现复用

3.样式十分丰富

4.建议使用独立于html的css文件

5.利用SEO,容易被搜索引擎收录

模板

飞冰，模板之家

语法

每一个声明使用分号结尾

选择器{

声明1；

声明2；

声明3；

}

css的3种导入方式

链接式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css"> //地址
</head>

导入式
@impot url(“css/style.css”)

内部样式

外部样式

行内样式

<h1 style="color: red">我是标题</h1>

样式的优先级

优先级：就近原则（覆盖原则），谁离标签近就显示谁

选择器

作用：选择页面上的某一个或者某一类元素

基本选择器

1.标签选择器：选择一类标签

2.类选择器：选择所有class属性一致的标签，跨标签 .class

3.id选择器：全局唯一 #id

标签选择器

<style>
    /*标签选择器，会选择这个页面上所有的这个标签的元素*/
    h1{
        color: #f9f9fa;
        background: #72163b;
        border-radius: 24px;
    }
    p{
        font-size: 80px;

    }
</style>

类选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器的格式 .class的名称{}
        好处：可以多个标签归类，是同一个class，可以复用*/
    .bt1{
        color: red;
    }

        .bt2{
            color: blue;
        }
    </style>
</head>
<body>
<h1 class="bt1">标题1</h1>
<h1 class="bt2">标题2</h1>
<h1>标题3</h1>
</body>

id选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器 : id必须全局唯一
         #id名称{}
         */

        #bt1{
            color: red;
        }

     
    </style>
</head>

<h1 id="bt1">标题一</h1>

选择器优先级

不遵循就近原则，固定的

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

层次选择器

1.后代选择器：

在某个元素后面，祖爷爷，爷爷，爸爸，你

<style>
 /*后代选择器*/
 body p{
     background: red;
 }
</style>

2.子选择器

一代，儿子

/*子选择器*/
body>p{
    background: red;
}

3.相邻兄弟选择器

  /*相邻兄弟选择器：只有一个，相邻（向下）*/
    .active + p{
        color: red;
    }

<p class="active">p7</p>
<p>p8</p>

只有p8变色

4.通用选择器

<style>
 /*通用选择器*/
.active~p{
   background: red;
}
</style>

<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>p4</p>

选中的标签向下的所有兄弟都会变色

结构伪类选择器

伪类：

<style>
    /*ul的第一个子元素*/
    ul li:first-child{
        background: red;
    }
    /*ul的最后一个子元素*/
    ul li:last-child{
        background: blue;
    }

</style>

/*只选中p1:定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选择父级元素的第一个，并且是当前元素才生效
*/
    p:nth-child(3){
        background: green;
    }
    /*选择父元素下的p元素的第二个*/
    p:nth-of-type(2){
        background: aqua;
    }

伪类变色（鼠标移上去变色）

a:hover{
    background: red;
}

<a href="">32131</a>

属性选择器（常用）

id+class结合

/*属性名：属性名=属性值（正则）
  存在id属性的元素
  = 为绝对等于
  *= 为包含
  ^= 以..为开头
  $= 以...结尾
 */
   a[id=first]{
       background: yellow;
   }
   a[class*="links"]{
       background: yellow;
   }
   /*选中href中以http开头的元素*/
      a[href^=http]{
          background: green;
      }
      /*选中href中以doc结尾的元素*/
      a[href$=doc]{
          background: red;
      }

美化网页元素

为什么要美化网页？

1.有效的传递页面信息

2.美化网页，页面漂亮才能吸引用户

3.凸显页面主题

4.提高用户的体验

span标签

约定俗成：重点要突出的字，用span套起来

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title1{
            font-size: 50px;
        }

    </style>

</head>
<body>
欢迎学习 <span id="title1">java</span>
</body>

字体样式

!--
    font-family:字体
    font-size:字体大小
    font-weight: border 加粗
    font-style: oblique 斜体
    color:字体颜色
-->
    <style>
        body{
            font-family: 楷体;
        }

        h1{
            font-size: 50px;
        }
       .p1{

           font-style: oblique;
       }

    </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">B站的特色是悬浮于视频上方的实时评论功能，爱好者称其为“弹幕”，这种独特的视频体验让基于互联网的弹幕能够超越时空限制，</p>
<p>构建出一种奇妙的共时性的关系，形成一种虚拟的部落式观影氛围，让B站成为极具互动分享和二次创造的文化社区。</p>
<p>B站目前也是众多网络热门词汇的发源地之一。</p>

文本样式

1.颜色 color

2.文本对齐的方式 text-align = center

3.首行缩进 text-indent:2em

4.行高 line-height

5.装饰 text-decoration

6.文本图片水平对齐 vertical-align:middle

鼠标

鼠标悬浮时的字体颜色大小

/*鼠标悬浮的颜色*/
a:hover{
    color: red;
    font-size: 50px;
}

鼠标按住未释放的状态

/*鼠标按住未释放的状态*/
a:active{
    color: green;
}

列表

#nav{
    width: 300px;
    background: cadetblue;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/*ul li*/
/*
 list-style:
    none 去掉原点
    circle 空心圆
    decimal 数字
    square 正方形
*/
/*ul{*/
/*background: cadetblue;*/
/*}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent:1em
}

a{
    text-decoration: none;
    font-size: 14px;
    text-indent:1em
}

a:hover{
    color: orange;
    text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>

<div id="nav">
    <h2 class=title>全部商品分类</h2>

<ul>
<li>
    <a href="#">图书</a>
    <a href="#">音像</a>
    <a href="#">数字商品</a>
</li>
<li>
    <a href="#">家用电器</a>
    <a href="#">手机</a>
    <a href="#">数码</a>
</li>
<li>
    <a href="#">电脑</a>
    <a href="#">办公</a>
</li>
<li>
    <a href="#">家具</a>
    <a href="#">家装</a>
    <a href="#">厨具</a>
</li>
<li>
    <a href="#">服饰鞋帽</a>
    <a href="#">个性化妆</a>
</li>
<li>
    <a href="#">礼品箱包</a>
    <a href="#">钟表</a>
    <a href="#">珠宝</a>
</li>
<li>
<a href="#">食品饮料</a>
<a href="#">保健食品</a>
</li>
<li>
    <a href="#">彩票</a>
    <a href="#">旅行</a>
    <a href="#">充值</a>
    <a href="#">票务</a>
</li>
</ul>
</div>

</body>
</html>

背景

背景颜色

背景图片

渐变网站Grabient

背景边框

border: 1px solid red;

盒子模型

什么是盒子

margin：外边距

padding: 内边距

border:边框

边框

1.边框的粗细

2.边框的样式

3.边框的颜色

实线边框

solid

/*solid是实线*/
border: 2px solid black;

虚线边框

dashed

/*dashed是虚线*/
border: 2px dashed #000000;

外边距的居中妙用

#box{
    width: 300px;
    border: 1px solid red;
    margin: 0 auto;（外边距：上下间隔 左右间隔）要求：块元素，块元素有固定的宽度
}

盒子的计算方式：你这个元素到底多大

margin+borded+padding+内容宽度

圆角边框

<!--
左上 右上 右下 左下 顺时针方向-->

<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        border-radius: 50px 30px 20px 10px;
    }
</style>

圆圈

<!--圆圈：圆角=半径-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 100px;
        }

半圆

<style>
    div{
        width: 100px;
        height: 50px;
        background: red;
        border-radius: 50px 50px 0px 0px;
    }
</style>

图片变圆

img{
    border-radius: 图片半径;
}

<img src="images/臭鼬.jpg" alt="">

阴影

box-shadow

如：

x偏移 y偏移发光程度

box-shadow:10px 10px 100px yellow;

浮动

标准文档流（类似手机从上而下）

display

<style>
    div{
        width: 100px;
        height: 100px;
        border:1px solid red;
        display: inline;
    }

    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        /*display: block;变成块元素*/
        display: inline-block;
    }
</style>

实现行内元素排列方式，但是我们很多情况都是用float

float类似第二图层

左右浮动

float:left/right

块级元素：独占一行

h1~h6 p div 列表…

行内元素：不独占一行

行内元素可以包含在块级元素中，反之，不可以

清除浮动

clear

clear:reght;右侧不允许有浮动元素
clear:left; 左侧不允许有浮动元素
clear:both; 两侧不允许有浮动元素
clear:none;

父级边框塌陷的问题

解决方案：

1.增加父级元素

#father{
	border:1px #000 solid;
	height:800px
};

2.增加一个空的div标签，清除浮动

<div class="clear"><div>

.clear{
	clear:both;
	margin:0;
	padding:0;
}

3.overflow

在父级元素中增加一个 overflow:hidden;隐藏

4.父类添加一个伪类：after

#father:after{
	content: '';
	display:block;
	clear:both;
}

小结：

1.浮动元素后面增加空div

简单，代码中尽量避免空div

2.设置父元素的高度

简单，元素假设有了固定的高度，就会被限制

3.overflow

简单，下拉的一些场景避免使用

4.父类添加一个伪类：after(推荐)

写法稍微复杂，但是没有副作用，推荐使用

对比

display

方向不可以控制
float

浮动起来的话会脱落标准文档流，所以要解决父级边框塌陷的问题

定位

相对定位

body{
    padding: 20px;
}
div{
    margin:10px;
    padding: 5px;
    font-size:12px;
    line-height:25px;
}
#father{
    border: 1px solid #666;
}
#first{
    background: #081ee2;
    border: 1px solid #e20808;
    position: relative;/*相对定位：上下左右*/
    top: -20px;
    left: 20px;
}
#second{
    background: #e2a408;
    border: 1px solid #a8e208;
    position: relative;
    bottom: -10px;
    right: 20px;
}
#third{
    background: aquamarine;
    border: 1px solid #081ee2;
}

position:relative

相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在相对文档流中，原来的位置会被保留

top: -20px;
left: 20px;
bottom: -10px;
right: 20px;

绝对定位

定位：基于xxx定位，上下左右

1.没有父级元素定位的前提下，相对于浏览器定位

2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3.在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留

#first{
    background: #081ee2;
    border: 1px solid #e20808;
    position: relative;/*设定父级元素*/
    top: -20px;
    left: 20px;
}
#second{
    background: #e2a408;
    border: 1px solid #a8e208;
    position: absolute;/*相对于父级元素进行绝对定位*/
  right: 30px;
    top: 10px;
}

固定定位fixed

div:nth-of-type(2){/*fixed,固定定位*/
    width: 50px;
    height: 50px;
    background: #e2a408;
    position: fixed;
    right: 0;距离右边框为0
    bottom: 0;距离底部为0
}

z-index

图层！

z-index:默认是0，最高无限~999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="images/臭鼬.jpg" alt="" width="300px" height="200px"></li>
        <li class="tipText">你好</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>地点：月球一号基地</li>
    </ul>
</div>
</body>
</html>

透明度

opacity: 0.5; /背景透明度/

#content{
    width: 300px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 300px;
    height: 25px;
    top: 180px;
}
.tipText{
    z-index: 999;
    color: #f9f9fa;
}
.tipBg{
    background: #000;
    opacity: 0.5; /*背景透明度*/

}

码农公寓

优势

模板

语法