CSS笔记

大器晚成i

于 2022-03-14 13:38:57 发布

阅读量245

点赞数

分类专栏： JavaWeb 文章标签： css css3 html

本文链接：https://blog.csdn.net/A_Pluto_i/article/details/123476593

版权

JavaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS

1.什么是CSS
2.CSS怎么用（快速入门)
3.css选择器(重点＋难点)
4.美化网页(文字，阴影，超链接，列表,渐变…)
5.盒子模型
6.浮动
7.定位
8.网页动画（特效效果)

一、什么是CSS

1.什么是css

在这里插入图片描述

2.css发展史

CSS1.0
CSS2.0—— DIⅣ(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1 浮动，定位
CSS3.0——圆角，阴影，动画…浏览器兼容性~

3.快速入门

1. 规范学习！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS规范学习</title>
    <!--规范，<style>, 可以编写CSS代码，
   每一个声明最好使用分号结尾！



     语法：

     选择器{
           声明1；
           声明2；
           声明3；
     }

     -->
    
    <style>
        h1{
           color: darkred;
        }
    </style>
    
</head>

<body>

<h1> CSS规范学习</h1>

</body>
</html>

建议使用html+css

<link rel="stylesheet" href="CSS文件名">

在这里插入图片描述

2.css的优势

内容和表现分离
网页结构表现统一
样式十分的丰富
建议使用独立的html的css文件
利用SEO，容易被搜索引擎收录

4.四种css导入方式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS规范学习</title>
    <!--规范，<style>, 可以编写CSS代码，每一个声明最好使用分号结尾！
     语法：
     选择器{
           声明1；
           声明2；
           声明3；
     }
     -->
    <style>
        <!--内部样式-->
        h1{
            color: gold;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="css学习规范分离操作.css">
</head>
<body>
<!--优先级：  
就近原则（行内）      
行内> 内部 > 外部   
-->
    
       <!--行内样式-->
<h1 style="color: blue"> CSS规范学习</h1>
</body>
</html>

h1{
    /*外部样式*/
    color: darkred;
}

5.外部样式两种写法

链接式html:

<!--外部样式-->
<link rel="stylesheet" href="XXX.css">

导入式CSS:

<!--导入式-->
 <style>
        @import "XXX.css";
  </style>

二、选择器

1.选择器

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

①标签选择器(标签{})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--标签选择器
    规范： <style>  + 标签 {}
        -->
    <style>
        h1{color: darkred}
    </style>
</head>
<body>
<h1> 标签选择器    </h1>
</body>
</html>

②类选择器(.class{})

选择所有与class属性一致的标签，可跨标签。 .class名称{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--类选择器
    可以跨标签选择与class同类的。
    格式为： 
    <style> +   .class名称 {}
    -->
    <style>
        .lichengyin{color: #e8ff3c}
        .yiyangqianxi{color: firebrick}
    </style>

</head>
<body>
<!--这里  h1和 p标签同属class类，实现了跨标签选择颜色-->
<h1 class="lichengyin"> 类选择器1   </h1>
<h1 class="yiyangqianxi"> 类选择器2   </h1>
<p class="lichengyin">  类选择器3   </p>
</body>
</html>

③Id选择器(#id{ })

全剧唯一。 #Id名 { }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--id选择器:  唯一性
    格式： 
    <style>  +  # id名{}
       -->
    <style>
        #lichengyin{color: darkred}
        .yiyangqianxi{color: chartreuse}
    </style>
</head>
<body>
<h1 id="lichengyin" > id选择器1   </h1>
<h1 class="yiyangqianyi"> id选择器2   </h1>
<p style="color: aqua" >  id选择器3   </p>
</body>
</html>

④优先级

Id选择器> class类选择器 >标签选择器

2.层次选择器

在这里插入图片描述

①后代选择器

所有后代！
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--后代选择器:
       所有后代！！！
     格式：<style>    body+空格+标签{}
     -->
    <style>
        body p{background: #0a25ff;}
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <!--注意这里的p4、p5、p6标签是怎么写的！！！-->
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
</ul>
</body>
</html>

②子选择器

只有一代！本案例中为body的下一代p1.p2.p3

格式：

    <!--子选择器:
    只有一代！本案例中为body的下一代p1.p2.p3
     格式：<style>    body+>+标签{}
     -->
    <style>
        body>p{background: #0a25ff;}
    </style>
</head>

③相邻兄弟选择

同级别的下一个兄弟，只有一个！

格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相邻兄弟选择器:
     同级别的下一个兄弟，只有一个！
     格式：<style>   .“active”“+”标签{}
     -->
    <style>
        .active + p{background: #0a25ff;}
    </style>
</head>
<body>
<p>p1</p>
    <!--注意这里的p2标签是怎么写的！！！-->
<p class="active">p2</p>
<p>p3</p>
<ul>
    <!--注意这里的p4、p5、p6标签是怎么写的！！！-->
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
</ul>
</body>
</html>

3.通用选择器

跟兄弟选择器类似，但是它包含本身以下的所有兄弟

格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--通用选择器
   跟兄弟选择器类似，但是它包含本身以下的所有兄弟
 格式： <style>    .“active”~p{}
 -->
    <style>
        .active~p{background: #0a25ff;}
    </style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
    <!--注意这里的p4、p5、p6标签是怎么写的！！！-->
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>

4.结构伪类选择器

<!--注意这里的li标签-->

  <!--选中ul标签的第一个元素-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--结构伪类选择器-->
    <!--选中ul标签的第一个元素-->
    <style>
        ul li:first-child{ background: #0a25ff}
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<!--注意这里的li标签-->
<ul>
    <li> li1 </li>
    <li> li2 </li>
    <li> li3 </li>
</ul>

</body>
</html>

<!--选中ul标签的最后一个元素-->
<style>
    ul li:last-child{ background: #ff282f
    }
</style>

选择p1元素的不同方法！

   <!--选中p1    定位到父元素，选择第一个元素，本例中h1占一个位置，所以是选2-->
    <style>
        p:nth-child(2){background: darkred;}
    </style>
</head>
<body>
<h>h1</h>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>

  <!--选中p1    定位到父元素，选择第一个元素同类型的，本例中h1虽然占一个位置，但不是同类型，所以是选1-->
    <style>

        p:nth-of-type(1){background: #0a25ff;}

    </style>
</head>
<body>
<h>h1</h>
<p>p1</p>
<p>p2</p>
<p>p3</p>

</body>

5.属性选择器

通常使用：Id选择器 + class类选择器

正则表达式
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--属性选择器-->
    
    
<!--1.对存在 id属性的元素 进行标记
       格式为：   a[id] {}-->
    
    
    
    <style>
        a[id]{
            background: #e639ff;
        }
    </style>

</head>
<body>

<a href=" " class="BAC"> 易烊千玺</a>
<a href=" " class="BAA" id="B.111"> 李承鄞</a>
<a href=" " id="A.111">霸王花</a>

</body>
</html>

<!--1.对 id中包含111的元素 进行标记
       格式为：   a[id*="111"] {}-->
    <style>
        a[id*="111"]{
            background: #e639ff;
        }
    </style>

<!--2.对 class中以B元素元素开头的元素 进行标记
       格式为：   a[class^="B"] {}-->
    <style>
        a[class^="B"]{
            background: #e639ff;
        }
    </style>

三、美化网页元素

1.为什么要美化网页

有效的传递页面信息
美化网页，页面漂亮，才能吸引客户
凸显页面的主题
蹄盖用户体验

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
<!--重点突出的字，要用span圈起来哦 ！-->
    <style>
        #lalala{
            color: gold;
        }
    </style>
</head>
<body>
    
    
<!--注意这里！！！-->
<span id="lalala"> 易烊千玺</span>

</body>
</html>

2.字体样式

<!--字体样式
font-family   字体
font-size      大小
font-weight     粗细
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--字体样式
font-family   字体
font-size      大小
font-weight     粗细
-->
    <style>
        body {
            font-family: "Arial Black",楷体;
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>
</head>
<body>

<p> 我有一头小毛驴</p>
<p>我从来也不骑</p>
<p class="p1">有一天我心血来潮</p>
<p>骑着去赶集</p>

</body>
</html>

3.文本样式

颜色： color rgb rgba
文字对齐的方式： text-align=center
首行缩进： text-indent:2em
行高： line-height
单行文字上下居中： line-height=height
装饰： text-decoration
文字图片水平对齐： vertical-align:middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--文本修饰-->
    <style>
.A11{color: darkred;}
.A11{height: 20px;}
.BBB{text-align: center;}
.BBB{text-decoration: overline;}
.CCC{ text-indent: 20px;}
.CCC{line-height: 20px;}
image span {vertical-align:middle;}
    </style>
</head>
<body>

<p class="A11"> yiyangqianxi</p>
<p class="BBB">lichengyin</p>
<p class="CCC">bawanghua</p>

<img src="../picture/1.png" alt="">
<span>祝您拉屎无忧</span>
</body>
</html>

4.超链接伪类（a:hover）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

/*鼠标悬浮的状态*/
a:hover{
    color: #e23144;
}
    </style>
</head>
<body>
 <p class="aaa">易烊千玺</p>
<!--注意这里，要写进超链接a标签里面-->
<a href="#">
    <img src="../picture/1.png" alt="">
    <span>祝您拉屎无忧</span>
</a>
</body>
</html>

5.阴影

  <!--文字阴影 
   text-shadow    右上为正，左下为负
  -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*文字阴影  text-shadow    右上为正，左下为负 */
        .aaa{
text-shadow: #1f30ff 10px 10px;
        }
    </style>
</head>
<body>
 <p class="aaa">易烊千玺</p>

</a>
</body>
</html>

6.列表（背景div）

<!--ul无序列表，list-style中
    circle   表示圆圈
    none     表示没有
    decimal  表示数字
    square    表示正方形
    -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*div属于“边栏”，一般默认id=nav，可用于调节列表的背景颜色大小，类似于淘宝的侧边栏*/
        #nav{
            background: #176b8b;
            width: 200px;
        }
        .aaa{
            font-size: 50px;
            background: darksalmon;
        }
        /*ul无序列表，list-style中
        circle   表示圆圈
        none     表示没有
        decimal  表示数字
        square    表示正方形*/
        ul li{
            font-size: 25px;
            list-style:circle;
        }
    </style>
</head>
<body>

<div id="nav">

        <p class="aaa">目录</p>
        <ul>
            <li> 东宫  李承鄞</li>
            <li> 海绵   派大星</li>
            <li>懒羊羊    灰太狼</li>
        </ul>

</div>

</body>
</html>

效果图如下：

在这里插入图片描述

也可使用超链接完成
在这里插入图片描述

7.背景（图片）

平铺 background-repeat:

#nav {
    background: #176b8b;
    width: 800px;
    height: 700px;
    /*插入背景图*/
    /*url相当于一个地址*/
    background-image: url("../picture/2.jpg");
    
    
    /*背景图平铺-repeat*/
    /*背景图  横向平铺*/
    background-repeat: repeat-x;
    /*背景图  纵向平铺*/
    background-repeat: repeat-y;
    /*背景图  不平铺,只有一个*/
    background-repeat: no-repeat;


}

在这里插入图片描述

8.渐变

在这里插入图片描述

四、盒子模型

1.什么是盒子

在这里插入图片描述

margin 外边距
padding 内边距
border 边框

2.边框

/*body中有一些系统会默认margin不等于0，所以需要自己调试到0；*/ 
    body{
        margin: 0;
        }

/*边框 border： 粗细大小 solid（加粗） 颜色*/
border: 3px solid red;

 <!--表单from     
文本输入框：<input type="Text">
-->

<from action="#" method="post">
      <div>
     <p>用户名:<input type="用户姓名"></p>
      </div>
      <div>
        <span>用户密码:</span>
        <input type="用户密码">
        <!--<p>密码:<input type="用户密码"></p>-->
       </div>
</from>

上面有 文本框 的两种用法 from表单！！！

3.内外边距

margin外边框的巧用，可以通过左右对齐的方式，使其居中
但是注意，居中必须在块元素里、且块元素有固定的大小

/*margin外边框的巧用，可以通过左右对齐的方式，使其居中
margin的顺序为“顺时针”，即上、右、下、左
 margin: 0 auto;     这里只有两个数值，0表示上下外边框为0，auto表示左右对齐
*/
margin: 0 auto;

图片居中

 <!--
div style="width: 600px ;
display:block;
text-align:center"
-->

 <div style="width: 600px ; display:block;text-align:center">
        <img src="../picture/2.jpg" height="345" width="460"/>
</div>

padding内边框同上！！!

/*内边框的大小*/
padding:0 1px 2px 5px ;

[ 在这里插入图片描述

4.边框圆角

<!--border-radius 圆角边框    顺时针旋转-->

/*边框圆角的顺序为“顺时针”，即左上、右上、右下、左下 （两个表示为对角线）*/
border-radius: 50px 20px;

5.盒子阴影

<!--box-shadow  边框阴影    -->

/*盒子阴影，偏移距离x,偏移距离y，颜色*/
box-shadow:10px 10px yellow;

box-shadow: 30px 30px #ff5330;

在这里插入图片描述

五、浮动

1.标准文档流

块级元素：独占一行

h1~h6 p标签 div 列表…

行内元素：不独占一行

span a img strong…

注意：行内元素可以被包含在块级元素之中，反之，不可以。

2.display

默认情况下他们是不能内联的，即放在一行的。

要想放在一行，可以使用display

display:block 块内元素
display:inline 行内元素
display:inline-block 是块内元素，但是可以内联，在一行
display:none 不显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display浮动</title>

   <style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid darkred;
        display:inline-block ;
    }
     span{
         width: 100px;
         height: 100px;
         border: 1px solid blue;
         display:inline-block ;
     }
   </style>
    
</head>
<body>

<div>块级元素</div>
<span>行内元素</span>

</table>
</body>
</html>

3.float

右浮动：
float:right

左浮动：
float:left

4.父类边框塌陷问题

两侧不允许有浮动：
clear:both

左侧不允许有浮动：
clear:left

右侧不允许有浮动：
clear:right

解决方案：

①增加父级元素的高度

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

<div class="clear"></div>

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

③在父级元素中增加一个overfloat

在父级元素中增加一个 overfloat:hidden

④在父类中添加一个伪类：after

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

总结

浮动元素后面增加空div

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

设置父类的高度

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

overfloat

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

父类中添加一个伪类

——稍微复杂，没有副作用，推荐使用

5.对比

display
方向不可控

float（更常用一点点）
浮动起来的话，可能会脱离标准文档流，所以要解决父类塌陷的问题

六、定位

1.相对定位

相对定位：position:relative

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

top:-20px;
距离顶部，-20px远

bottom:10px;
距离底部，10px远

left: 10px;
距离左边，10px远

right:20px;
距离右边，20px远

练习：方块定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方块定位练习</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 2px;
            border: #8b0b22 2px solid;
        }
        a{
            width: 100px;
            height: 100px;
            background:#f7a7ff ;
            /*border:  2px solid;*/
            text-align: center;
            line-height: 100px;
            color: white;
            display: block;

        }
        a:hover{
            background: #36e4ff;
        }

        .a2,.a4{
           position: relative;
            top:-100px;
            right:-200px;

        }
        .a5{
            position: relative;
            top: -300px;
            right:-100px;
        }
    </style>
</head>
<body>
<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>
</body>
</html>

效果图：
在这里插入图片描述

2.绝对定位

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

格式：position: absolute;

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

相对于父级元素定位的位置，进行指定的偏移,相对定位的话，它不在标准文档流中。原来的位置不会被保留。

3.固定定位fixed

position: fixed;

练习：固定定位和绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
         height: 1000px;
        }
        div:nth-of-type(1){/*绝对定位：相对于浏览器*/
            width: 100px;
            height: 100px;
            background: darkred;

            position:absolute;
            right: 0;
            bottom:0;
        }
        div:nth-of-type(2){/*fixed固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;

            position: fixed;
            right: 0;
            bottom:0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

4.z-index

z-index属性指定一个元素的堆叠顺序,也就是z轴

/调整透明度/
opacity: 0.5;

z-index: 默认是0，最高无线

<!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="../resources/picture.png" alt=""></li>
        <li class="tipText">海绵宝宝、章鱼哥、派大星</li>
        <li class="tipBg"></li>
        <li>时间：2022.03.14</li>

    </ul>
</div>
</body>
</html>

#content{
    width: 403.67px;
    width: 430px;
    padding: 0;
    margin: 0;
    /*解决父类边框塌陷问题*/
    overflow: hidden;

    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;


}

ul,li{
    padding: 0;
    margin: 0;
    /*去除无序列表的黑点效果*/
    list-style: none;
}

/*父级元素相对定位*/
#content ul{
    position: relative;
}

.tipText,.tipBg{
    width: 403.67px;
    height: 25px;

    position: absolute;
    bottom:25px;
}
.tipText{
    color: #000000;
     z-index: 999;
}
.tipBg{
    background: blue;
     /*调整透明度*/
    opacity: 0.5;
}

5.动画

[https://www.runoob.com/]

                                    4.z-index

z-index属性指定一个元素的堆叠顺序,也就是z轴

/调整透明度/
opacity: 0.5;

z-index: 默认是0，最高无线

<!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="../resources/picture.png" alt=""></li>
        <li class="tipText">海绵宝宝、章鱼哥、派大星</li>
        <li class="tipBg"></li>
        <li>时间：2022.03.14</li>

    </ul>
</div>
</body>
</html>

#content{
    width: 403.67px;
    width: 430px;
    padding: 0;
    margin: 0;
    /*解决父类边框塌陷问题*/
    overflow: hidden;

    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;


}

ul,li{
    padding: 0;
    margin: 0;
    /*去除无序列表的黑点效果*/
    list-style: none;
}

/*父级元素相对定位*/
#content ul{
    position: relative;
}

.tipText,.tipBg{
    width: 403.67px;
    height: 25px;

    position: absolute;
    bottom:25px;
}
.tipText{
    color: #000000;
     z-index: 999;
}
.tipBg{
    background: blue;
     /*调整透明度*/
    opacity: 0.5;
}

5.动画

[https://www.runoob.com/]

大器晚成i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记

CSS1.什么是CSS2.CSS怎么用（快速入门)3.css选择器(重点＋难点)4.美化网页(文字，阴影，超链接，列表,渐变…)5.盒子模型6.浮动7.定位8.网页动画（特效效果)一、什么是CSS1.什么是css2.css发展史CSS1.0CSS2.0—— DIⅣ(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1 浮动，定位CSS3.0——圆角，阴影，动画…浏览器兼容性~3.快速入门1. 规范学习！<!DOCTYP
复制链接

扫一扫