1、什么是CSS

最新推荐文章于 2024-07-24 13:52:24 发布

Jacob程序员

最新推荐文章于 2024-07-24 13:52:24 发布

阅读量229

点赞数

分类专栏：前端三大件文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45609702/article/details/121298385

版权

前端三大件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、什么是CSS

1.1、就近原则

样式的优先级别:就近原则！

1.2、css的四种导入方式

分为行内样式，内部样式，外部样式、外部样式。

行内样式：

<h1 style="color: antiquewhite">行内样式</h1>

内部样式：

<style>
    h1{
        color: blue;
    }
</style>

外部样式：

<link rel="stylesheet" href="CSS/style02.css">

导入式：

<style>
    @import "CSS/style02.css";
</style>

2、选择器

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

2.1、基本选择器

基本选择器：选择一类标签

<STYLE>
    h1{
        background: aquamarine;
        color: black;
        border-radius: 20px;
    }
</STYLE>

类选择器：class全局标签

类选择器的样式 .class的名称{}

好处，可以多个标签归类，是同一个类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .day01{
            color: aqua;
        }
        .day02{
            color: blue;
        }
        .day03{
            color: #8c2782;
        }
    </style>
</head>
<body>

<h1 class="day01">跟着狂神学JAVA01</h1>
<h1 class="day02">跟着狂神学JAVA02</h1>
<h1 class="day02">跟着狂神学JAVA03</h1>

</body>
</html>

id选择器

注意：id选择器标识名不能用数字开头

id选择器：id必须保证全局唯一

跨标签，类名

<style>
        #diy01{
            color: black;
            background: aquamarine;
        }
        #diy02{
            color: #8c2782;
            background: red;
        }
        #diy03{
            color: antiquewhite;
        }
    </style>
</head>
<body>
<h1 id="diy01">跟着狂神学JAVA01</h1>
<h1 id="diy02">跟着狂神学JAVA02</h1>
<h1 id="diy03">简介</h1>

优先级别：不遵循就近原则，固定的！

id>class>标签选择器

2.2、层次选择器

后代选择器祖父爷爷爸爸你

 /*后代选择器*/
        body p{
            background: gainsboro;
        }

子代选择器

/*子代选择器*/
        body>p{
            background: #8c2782;
        }

通用选择器

 /*通用选择器，后面全部*/
        .activ~p{
            background: red;
        }

相邻兄弟选择器，兄弟选择器

 /*相邻兄弟选择器*/
        .activ+p{
            background: #8c2782;
        }

思维树结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ttqF9kdT-1636732162091)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211003171906277.png)]

2.3、结构伪类选择器

结构图-如上图

伪类选择器:选择ul的第一个孩子

ul li:first-child{
    background: #8c2782;
}

伪类选择器：选择ul的最好一个孩子

ul li:last-child{
            background: red;
        }

伪类选择器：定位到当前父级元素下的第一元素，如果没有该元素则不会生效顺序

/*选中p1：定位到父元素，选择当前的第一个元素并且有元素才会生效，按顺序，如果是父级下的第一个不是p标签那不会生效*/
        p:nth-child(1){
            background: chartreuse;
        }

伪类选择器：定位到当前父元素，选择当前该元素类型的第n个类型
```
 p:nth-of-type(2){
            background: #288c67;
        }
```

a标签的小特效

点击这该区域查看才发生的属性

 a:hover{
            background: blueviolet;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pbGQLVzc-1636732162095)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211003201653356.png)]

2.4、属性选择器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*后代选择器*/
        .demo a{
            background: blueviolet;
            color: aliceblue;
            text-align: center;/*文本居中*/
            size: 10px;
            margin-right: 20px;/*外边框*/
            height: 40px;
            width: 40px;
            float: left;/*浮动*/
            display: block;/*消除浮动*/
            text-decoration: none;/*消除下划线*/
            border-radius: 5px;/*圆角边框*/
        }
        /*a[id="diy"]{
            background:red;
        }*/
        /*开头查询*/
        a[href^=http]{
            background: chartreuse;
        }
        /*模糊查询/包含*/
       /* a[hred*=http]{
            background: #8c2782;
        }*/
    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com" id="diy" class="bd">1</a>
    <a href="CSS/image" title="悬浮文字">2</a>
    <a href="" class="demo1">3</a>
    <a href="https">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="">8</a>
</p>
</body>
</html>

正则表达式：

^=以什么开头

*=包含

&=以什么结尾

3、美化网页

3.1、为什么要美化网页

有效的传递页面消息
美化网页，页面漂亮，才能吸引用户
凸出页面的主题
提高用户的体验

span标签：重点要突出的字，使用span标签套起来

<style>
        .sp{
            font-size: 20px;
            color: #8c2782;
        }
    </style>
</head>
<body>
跟着狂神学<span class="sp">java</span>

3.2、字体样式

<style>
        .whw{
            font-family: 楷体;/*字体*/
            font-size: 10px;/*大小*/
            font-weight: bold;/*粗细*/
            color: #8c2782;/*颜色*/
        }
	</style>

3.3、文本样式

颜色 color RGB RGBA(透明度)
文本对齐的方式 text-align:center;
首行缩进 text-indent:2em
行高 line-hight（块高度和行高相等可以使文字居中）
装饰 text-decoration：none

文本图片对齐

/*颜色RGB 0-F*/
    /*RGBA:A 透明度*/
        .whw{
          text-align: center;/*居中*/
          text-indent: 2em;/*首行缩进*/
          height: 60px;/*高度*/
          line-height: 60px;/*行高和高度一样可以居中*/
          text-decoration: none;/*下划线方式：none去除*/
        }
        /*参照物对齐图片和文字居中*/
       img,span{
           vertical-align: middle;/*垂直对齐*/
       }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lb8YCutC-1636732162098)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211004101645613.png)]

3.4、阴影

/*阴影*/
#price{
    text-shadow: blue  10px -6px 10px;
}

3.5、超链接伪类

/*鼠标悬浮的状态*/
a:hover{
    color: #8c2782;
    font-size: 20px;
}
/*鼠标按住不放的状态*/
a:active{
    color: red;
}

3.6列表的样式

list-style：空心圆，方块，没有图标

.diy66{
    color:red;
    line-height:10px;
    background: aquamarine;
    height: 60px;
    line-height: 60px;
}
#nav{
    background: darkgrey;
    width: 250px;
}
a{
    text-decoration: none;
    color: white;
    size: 14px;
}
a:hover{
    text-decoration: underline;
    color: orange;
}
ul li{
    height: 40px;
    list-style: none;/*无序图标*/
    text-indent: 2em;
}

![img](file:///C:\Users\陈明伟\AppData\Roaming\Tencent\Users\1092705638\QQ\WinTemp\RichOle{E{3A71MH{{}BK8C(2)TD.png)

3.7、背景

背景颜色

背景图片

.title{
    color:red;
    line-height:10px;
    background: aquamarine url("../image/d.jpg") no-repeat 260px 24px;
    height: 60px;
    line-height:60px;
}
#nav{
    background:darkgrey;
    width:300px;
   background: darkgrey;
}
a{
    text-decoration: none;
    color: white;
    size: 14px;
}
a:hover{
    text-decoration: underline;
    color: orange;
}
ul li{
    height: 40px;
    list-style: none;
    text-indent: 2em;
    line-height: 40px;
    background: url("../image/d.jpg") no-repeat 219px 11px;
}

3.8、渐变

    background:linear-gradient(blue, pink);
  background-color:red;

https://www.grabient.com/

4.盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z5QBi3M0-1636732162101)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211004163948221.png)]

外边距：margin

边框：border

内边距：padding

内容：

4.1、什么是盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IPcNtUtu-1636732162103)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211004172800789.png)]

<style>
       /* body{
            margin: 0px;
            padding: 0px;
            text-decoration: none;
        }*/
        #box{
            border:  2px  solid red;
            width: 340px;
            height: 240px;
        }
        .username{
            border: darkslategrey 1px solid;
            width: 304px;
            height: 38px;
            margin: 10px;
            line-height: 38px;
        }
        .psd{
            border: darkslategrey 1px solid;
            width: 304px;
            height: 38px;
            margin: 10px;
            line-height: 38px;
        }
        .dl{
            width: 302px;
            height: 31px;
            background:#E4393C;
            color: white;
            text-align: center;
            line-height: 31px;
            margin: 10px;
        }
       a:hover{
            color: #E4393C;
        }

    </style>

4.2、边框

边框：boder 大小颜色样式

实线：solid

虚线：dashed

boder top right down left

顺时针

<style>
h{
  boder :left;
}
</style>

4.3、内外边距

外边距：(实现居中)

上下外边距为0，左右自动对齐auto

要求：必须是块元素，有固定的宽度

 #box{
            border:  2px  solid red;
            width: 340px;
            height: 240px;
            margin: 0 auto;
        }

盒子大小的计算方式：

margin+boder+padding+内容宽度

4.4、圆角边框

边框

<style>
        /*左上 右上  右下  左下，顺时针方向*/
        .yuan{
            height: 100px;
            width: 100px;
            border: 5px solid red;
            border-radius: 50px;/*一个用于设置所有四个边框- *-半径属性的速记属性*/
        }
    </style>

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同

圆形

<style>
        .o{
            height: 100px;
            width: 100px;
            border: 5px solid red;
            border-radius: 100px 0px 0px 0px;/*扇形*/
        }

<style>
        .o{
            height: 100px;
            width: 100px;
            border: 5px solid red;
            border-radius: 100px;/*圆形*/
        }
    </style>

<style>
        .o{
            height: 50px;
            width: 100px;
            border: 5px solid red;
            border-radius: 50px 50px 0px 0px;/*半圆*/
        }
    </style>

4.5、盒子阴影

 .o{
            height: 100px;
            width: 100px;
            border: 1px solid ;
            border-radius: 100px;/*圆形*/
            box-shadow: 10px 10px 5px #dddddd;/*第三个值模糊半径：制作发光背景*/
        }

5、浮动

5.1、标准文档流

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VboBuY1B-1636732162104)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211008160024235.png)]

块元素：独占一行

h1~h6 p div  列表

行内元素：不占一行

span  a  img  strong

行内元素可以被包含在块级元素种，反之，则不可以

5.2、display

行内元素，不受高宽度影响,除非使用disolay：block 变为块元素

  /*block   块元素*/
  /*inline  行内元素*/
  /*inline-blolck：可以内联在一行*/
        .divys{
            height: 100px;
            width: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            height: 100px;
            width: 100px;
            border: 1px solid red;
            display: inline-block;
        }

display也可以实现行内元素，一般情况用float

5.3、float

.wode{
    height: 100px;
    display: inline-block;
    line-height: 100px;
    float: left;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ItV4ePpL-1636732162106)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211008212314626.png)]

5.4、父级边框塌陷的问题

clear

/*
clear:left  不允许左侧有浮动
clear:right   不运行右侧有浮动
clear:both    两侧都不允许有浮动
clear:none
*/

使用float，外面的大盒子不需要浮动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SHHHnDCu-1636732162108)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211008214722957.png)]

1、增加父级元素的高度

#tushu{
    height: 1000px;/*增加高度*/
    width: 175px;
    display: inline-block;
    line-height: 50px;
}

2、增加一个空div

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

3、overflow：hidden

在父级元素种增加一个 overflow ：hidden;

侧边栏滚动条

4、父类添加一个伪类

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

总结

解决方案：

增加父级元素高度
底部增加一个空div，清楚浮动
overflow 侧边栏 hidden 隐藏侧边栏/侧边栏滚动条（避免使用）
添加一个伪类选择器，过滤（类似于一个小的div盒子）（推荐）
没有副作用

5.5、对比

display

方向不能控制

float

方向能控制，但是要解决父级边框塌陷

脱离标准文档流

6、定位

6.1、相对定位

position:relative

相对与原来的位置偏移，保留原来的位置

top/bottom/right/left

 .denglu{
    display: inline-block;
    border-radius: 10px;
    border: orange;
    float: right;
    line-height: 100px;
    position: relative;/*相对定位*/
    right: 180px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OCu8Uv7J-1636732162109)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211009141402338.png)]

小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style>
        #father{
            width: 200px;
            height: 200px;
            border:2px solid red;
            background: #288c67;
        }
        #father div{
            width: 30px;
            height: 30px;
            border:1px solid black;
            /*position: relative;
            top: 5px;
            margin: 5px;*/
        }
        #first{
            position: relative;
            left: 30px;
            top: 16px;
        }
        #second{
            position: relative;
            left: 140px;
            top: -17px;
        }
        #fourth{
            position: relative;
            left: 140px;
            top: 17px;
        }
        #third{
            position: relative;
            left: 85px;
        }
        #fifth{
            position: relative;
            left: 30px;
            top: -16px;
        }
        #father div:hover{
            background: red;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first" ></div>
    <div id="second"></div>
    <div id="third" ></div>
    <div id="fourth"></div>
    <div id="fifth" ></divid>
</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iCgKeNcF-1636732162111)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211009144824132.png)]

内边距产生的问题
会撑大原来的盒子，通过设置了宽高的盒子，减去相应的内边距的值，维持了盒子原来的大小。
padding不影响盒子大小的使用方法
如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding，则不会撑开盒子。

6.2、绝对定位

position:absolute

基于xxx定位，上下左右~

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移~
父级元素范围移动

相对与父级或者浏览器的位置偏移，不保留原来的位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZibWyEwn-1636732162113)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211009155309046.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6RLL4QhS-1636732162114)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211009155504111.png)]

#third{
    background: blue;
    position:absolute;
    left: 30px;
}

6.3、固定定位fixed

position：fixed

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vySq5cqV-1636732162116)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211009155759456.png)]

  #third{
            background: blue;
            position:fixed;
        }

6.4、Z-index/背景透明度

图层~

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gu1bQYST-1636732162117)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211009160754536.png)]

.bg{
    background: black;
    height: 40px;
    width: 265px;
    position:absolute;/*绝对定位*/
    top: 128px;
    opacity: 0.5;/*透明度（背景）*/
}
.text{
    color: white;
    position: absolute;
    top: 30px;
    z-index: 99;/*图层*/
}

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nGhCRRWg-1636732162118)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211009202157539.png)]

7、动画

8、总结

HTML

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Igovljtp-1636732162120)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211009202519072.png)]

CSS

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wsuiclf7-1636732162121)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211009204735878.png)]

位的前提下，相对于浏览器定位

假设父级元素存在定位，我们通常会相对于父级元素进行偏移~
父级元素范围移动

相对与父级或者浏览器的位置偏移，不保留原来的位置

[外链图片转存中…(img-ZibWyEwn-1636732162113)]

[外链图片转存中…(img-6RLL4QhS-1636732162114)]

#third{
    background: blue;
    position:absolute;
    left: 30px;
}

6.3、固定定位fixed

position：fixed

[外链图片转存中…(img-vySq5cqV-1636732162116)]

  #third{
            background: blue;
            position:fixed;
        }

6.4、Z-index/背景透明度

图层~

[外链图片转存中…(img-gu1bQYST-1636732162117)]

.bg{
    background: black;
    height: 40px;
    width: 265px;
    position:absolute;/*绝对定位*/
    top: 128px;
    opacity: 0.5;/*透明度（背景）*/
}
.text{
    color: white;
    position: absolute;
    top: 30px;
    z-index: 99;/*图层*/
}

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

[外链图片转存中…(img-nGhCRRWg-1636732162118)]

7、动画

8、总结

HTML

[外链图片转存中…(img-Igovljtp-1636732162120)]

CSS

[外链图片转存中…(img-Wsuiclf7-1636732162121)]

Jacob程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1、什么是CSS

1、什么是CSS1.1、就近原则样式的优先级别:就近原则！1.2、css的四种导入方式分为行内样式，内部样式，外部样式、外部样式。行内样式：<h1 style="color: antiquewhite">行内样式</h1>内部样式：<style> h1{ color: blue; }</style>外部样式：<link rel="stylesheet" href="CSS/style02.css"
复制链接

扫一扫