css学习笔记

向春 · 发表于 2022-5-29 22:32:00

什么是CSS

如何学习（https://www.runoob.com/）

CSS是什么
CSS 怎么用
CSS选择器（重点+难点）
美化网页
盒子模型
浮动
定位
网页动画（特效效果）

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表

css: 表现（美化网页）

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动

1.2、发展史

CSS1.0

CSS2.0 DIV(块) + CSS, HTML与CSS结构分离的思想，网页变得很简单， SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画…… 浏览器兼容性！

1.3、快速入门

基本入门

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 <!--    规范，<style> 可以编写css的代码， 每一个声明，最好使用分号结尾
     语法：
       选择器 {
         声明1;
         声明2;
         声明3;
       }
 -->
     <!--<link rel="stylesheet" href="css/sytle.css">-->
     <style>
         h1 {
             color: red;
         }
     </style>
 </head>
 <body>
 <h1>我是标题</h1>
 </body>
 </html>

建议使用这种规范

css的优势：

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

1.4、CSS的3种导入方式

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 <!--    内部样式-->
     <style>
         h1 {
             color: green;
         }
     </style>
 <!--    外部样式-->
     <link rel="stylesheet" href="css/sytle.css">
 </head>
 <body>
 <!--优先级：就近原则-->
 <!--行内样式-->
 <h1 style="color: red;background: #cba4af">我是标题</h1>
 </body>
 </html>

拓展：外部样式两种写法

链接式：

html

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

导入式：

@import url("")是css2.1特有的

 <!--导入式-->
 <style>
     @import url("css/style.css")
 </style>

2.2、层次选择器

1、后代选择器：在某个元素的后面

 /*后代选择器:选择body后面的所有p元素*/
 body p{
     background: red;
 }

2、子选择器，一代

 /*子选择器：只选择body下层的p*/
 body>p{
     background: green;
 }

3、相邻兄弟选择器

 /*相邻兄弟选择器：只有一个，相邻（向下）,选中类选择器active下面相邻的p标签*/
 .active + p{
     background: darkorange;
 }

4、通用选择器

 /*通用选择器,当前选中元素的向下的所有兄弟元素*/
 .active~p{
     background: #82b6e3;
 }

2.3、结构伪类选择器

伪类：条件

 /*选中ul的第一个子元素*/
 ul li:first-child{
     background: #cba4af;
 }
 ul li:last-child{
     background: darkorange;
 }
 /* 选中p1：定位到父元素，选择当前的第一个元素
 选择当前p元素的父元素，选中父元素的第一个，并且是当前元素才生效。 顺序
 */
 p:nth-child(1){
     background: darkorange;
 }
 /*选中父元素下的p元素的第二个，类型*/
 p:nth-of-type(2){
     background: aqua;
 }

2.4、属性选择器（常用）

id + class 结合~

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>属性选择器</title>
   <style>
     .demo a{
       float: left;
       display: block;
       height: 50px;
       width: 50px;
       border-radius: 10px;
       background: aqua;
       text-align: center;
       text-decoration: none;
       margin-left: 10px;
       font: bold 20px/50px Arial;
       color: red;
     }
 
     /*存在id属性的元素  a[]{}*/
     /*a[id]{*/
     /*  background: #cba4af;*/
     /*}*/
 
     /*选中存在id=last属性的元素*/
     /*a[id=last]{*/
     /*  background: #9bd75a;*/
     /*}*/
 
     /*属性名，属性名=属性值(正则)
     = 绝对等于
     *= 包含
     ^= 以什么开头
     $= 以什么结尾
     */
 
     /*class 中有 links 的元素*/
     /*a[class*=links]{*/
     /*  background: yellow;*/
     /*}*/
 
     /*href属性以http开头的*/
     /*a[href^=http]{*/
     /*  background: #bb8fe3;*/
     /*}*/
 
     /*href属性以pdf结尾的*/
     a[href$=pdf]{
       background: coral;
     }
 
   </style>
 </head>
 <body>
 <p class="demo">
   <a href="http://www.baidu.com" class="links item first" id="first">1</a>
   <a href="http://www.gn.cn" class="links item first" target="_blank" title="test">2</a>
   <a href="image/123.htnl" class="links item">3</a>
   <a href="image/123.png" class="links item">4</a>
   <a href="image/123.jpg" class="links item">5</a>
   <a href="abc" class="links item">6</a>
   <a href="/a.pdf" class="links item">7</a>
   <a href="/abc.pdf" class="links item">8</a>
   <a href="abc.doc" class="links item">9</a>
   <a href="abcd.doc" class="links item" id="last">10</a>
 </p>
 </body>
 </html>

3、美化网页元素

3.1、为什么要美化网页

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

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>span标签</title>
   <style>
     #id1{
         font-size: 50px;
     }
   </style>
 </head>
 <body>
 欢迎学习<span id="id1">Java</span>
 </body>
 </html>

3.2、字体样式

 body{
      font-family: "Arial Black", 楷体;
      color: chocolate;
 }
 h1{
     font-size: 50px;
 }
 .p1{
     font-weight: bolder;
 }

3.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>
     <style>
         /*颜色：
             单词
             RGB:0~F
             RGBA
              text-align：居中
             */
         h1{
             color: rgba(0,255,255,0.9);
             text-align: center;
         }
         /*text-indent:2em; 段落首行缩进*/
         p:nth-of-type(3){
             text-indent: 2em;
         }
         /*行高和块的高度一致就可以实现上线居中。*/
         p:nth-of-type(4){
             background: #cba4af;
             height: 100px;
             line-height: 100px;
         }
         /*上划线*/
         p:nth-of-type(5){
             text-decoration: underline;
         }
         /*中划线*/
         p:nth-of-type(6){
             text-decoration: line-through;
         }
         /*下划线*/
         p:nth-of-type(7){
             text-decoration: overline;
         }
         /*两个行内元素对齐方式*/
         #img1,#span1{
             vertical-align: middle;
         }
         /*a标签去下划线*/
         a:first-child{
             text-decoration: none;
         }
     </style>
 </head>
     <body>
     <a href="">a标签去下划线</a>
     <h1>面朝大海,春暖花开</h1>
     <p>&nbsp</p>
     <h2>海子</h2>
     <p>&nbsp</p>
     <p>从明天起, 做一个幸福的人</p>
     <p>喂马, 劈柴, 周游世界</p>
     <p>从明天起, 关心粮食和蔬菜</p>
     <p>我有一所房子, 面朝大海, 春暖花开</p>
     <br/>
     <p>从明天起, 和每一个亲人通信</p>
     <p>告诉他们我的幸福</p>
     <p>那幸福的闪电告诉我的</p>
     <p>我将告诉每一个人</p>
     <br/>
     <p>给每一条河每一座山取一个温暖的名字</p>
     <p>陌生人, 我也为你祝福</p>
     <p>愿你有一个灿烂的前程</p>
     <p>愿你有情人终成眷属</p>
     <p>愿你在尘世获得幸福</p>
     <p>我只愿面朝大海, 春暖花开</p>
     <hr/>
     <p>
         The most luxurious thing in my life is to meet you on the way, and then help each other, smell the fragrance of flowers together. In my lifetime, I will only tell you the warmth, but not the sorrow. I will meet you and accompany you in peace and warmth.
     </p>
     <p>
         <img src="picture/img.png" alt="" id="img1">
         <span id="span1">
             问世间情为何物，直教人生死相许。从古至今，中国的文人们也一直奉行此道，对美好的爱情歌以咏志，对真挚的情感动以心扉，对远方的恋人辅以相思。今天小编整理了中国古代最美的十首情诗，现在读来仍旧朗朗上口。
         </span>
     </p>
 </body>
 </html>

3.4、阴影

 #a1{
     text-shadow: #3cc7f5 3px 3px 1px;
 }

3.5、超链接伪类

正常情况下, a,a:hover{}

 /*默认的颜色*/
 a{
     text-decoration: none;
     color: #000000;
 }
 /*鼠标悬浮的颜色*/
 a:hover{
     color: orange;
 }

3.6、列表

 /*list-style:
     none:去掉原点
     circle:空心圆
     decimal:数字
     square:正方形
  */
 ul li{
     height: 30px;
     list-style: none;
     text-indent: 1em;
 }

3.7、背景

背景颜色

背景图片

3.8、渐变

https://www.grabient.com/

 background-color: #4158D0;
 background-image: linear-gradient(255deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

4、盒子模型

4.1、什么是盒子模型

margin：外边距

padding：内边距

border：边框

margin + border + padding + 内容宽度

4.2、边框

边框的粗细
边框的样式
边框的颜色

 /*border: 粗细 样式 颜色*/
 form div:nth-of-type(1) input{
     border: 3px solid black;
 }
 form div:nth-of-type(2) input{
     border: 3px dashed #b24f62;
 }
 form div:nth-of-type(3) input{
     border: 3px solid #efcb16;
 }

4.3、内外边距

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>盒子模型</title>
     <style>
         /*body 总有一个默认的外边距 margin: 0;*/
         /*h1,ul,li,a,body{*/
         /*    margin: 0;*/
         /*    padding: 0;*/
         /*    text-decoration: none;*/
         /*}*/
         /*border: 粗细 样式 颜色*/
 
         /*margin: 0 auto; 居中*/
         #box{
             width: 300px;
             border: 1px solid red;
             margin: 0 auto;
             padding: 0;
         }
         h2{
             font-size: 16px;
             background-color: #3cbda6;
             line-height: 30px;
             color: white;
             text-align: center;
             margin: 0 auto;
             padding:10px;
         }
         form{
             background: #3cbda6;
             padding-bottom: 10px;
         }
         #div1 input{
             border: 3px solid black;
             margin-bottom: 5px;
         }
         #div2 input{
             border: 2px dashed #b24f62;
             margin-bottom: 5px;
         }
         #div3 input{
             border: 3px solid #efcb16;
         }
         #div2{
             text-indent: 1em;
         }
     </style>
 </head>
 <body>
 <div id="box">
   <h2>会员登录</h2>
     <form action="#">
         <label>
         <div id="div1">
             <span>用户名：</span>
             <input type="text"/>
         </div>
         </label>
         <label>
         <div id="div2">
             <span>密码：</span>
             <input type="password"/>
         </div>
         </label>
         <label>
         <div id="div3">
             <span>验证码：</span>
             <input type="text"/>
         </div>
         </label>
     </form>
 </div>
 </body>
 </html>

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

margin + border + padding + 内容宽度

4.4、圆角边框

 #div2{
     width: 100px;
     height: 100px;
     border: 10px solid #84ff00;
     border-radius: 100px 0px 0px 0px;
 }

4.5、盒子阴影

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 <!--    margin: 0 auto;
     要求：块元素，块元素有固定的宽度
 -->
   <style>
     div:first-child{
         width: 100px;
         height: 100px;
         border: 10px solid red;
         box-shadow: 10px 10px 100px yellow;
         margin-bottom: 100px;
     }
     div:nth-child(2) img{
         width: 100px;
         height: 100px;
         border: 10px solid red;
         border-radius: 100px;
         box-shadow: 10px 10px 100px yellow;
 
     }
     div:nth-child(2){
         width: 100px;
         margin: 0 auto;
     }
   </style>
 </head>
 <body>
 <div></div>
 <div><img src="../../pictrue/OIP-C.jpg" alt="图片"></div>
 
 </body>
 </html>

5.浮动

5.1、标准文档流

块级元素：独占一行

 h1~h6  p div 列表……

行内元素：不独占一行

 span a img strong……

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

5.2、display

 <!--    block 块元素
         inline 行内元素
         inline-block 是块元素，但也可以内联，在一行
         none 不显示
         -->
     <style>
         div{
             width: 100px;
             height: 100px;
             border: 1px solid red;
             display: inline-block;
         }
         span{
             width: 100px;
             height: 100px;
             border: 1px solid red;
             display: inline-block;
         }
     </style>

这个也是一种实现行内元素排列的方式，但是我们很多情况都是用 float。

5.3、float

1、左右浮动 float

 <style>
         #father{
             border: 1px #000 solid;
         }
         .layer01{
             border: 1px #f00 dashed;
             display: inline-block;
             width: 50px;
             height: 50px;
             background: #f00;
             float: right;
             clear: both;
         }
         .layer02{
             border: 1px #00f dashed;
             display: inline-block;
             width: 100px;
             height: 100px;
             background: #00f;
             float: right;
             clear: both;
         }
         .layer03{
             border: 1px #060 dashed;
             display: inline-block;
             width: 150px;
             height: 150px;
             background: #060;
             float: right;
             clear: both;
         }
         .layer04{
             border: 1px #666 dashed;
             display: inline-block;
             font-size: 12px;
             line-height: 23px;
             float: right;
             clear: both;
         }
     </style>

5.4、父级边框塌陷问题

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

解决方案：

1、增加父级元素的高度。

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

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

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

3、overflow

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

4、父类添加一个伪类

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

小结：

浮动元素后面增加空div
- 简单，代码中尽量避免空div
设置父元素的高度
- 简单，元素假设有了固定的高度，就会被限制
overflow
- 简单，下拉的一些场景避免使用
父类添加一个伪类:after（推荐）
- 写法相对复杂一点，但是没有副作用，推荐使用

5.5、对比

display
- 方向不可以控制

float
- 浮动起来会脱离文档流，所以要解决父级边框塌陷的问题。

6、定位

6.1、相对定位

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         body{
             padding: 20px;
         }
         div{
             margin: 10px;
             padding: 5px;
             font-size: 12px;
             line-height: 25px;
         }
         #father{
             border: 1px solid #666;
             background: #666;
             padding: 0;
         }
         #first{
             border: 1px dashed #cc4c4c;
             background: #cc4c4c;
             position: relative;
             top: -20px;
             left: 20px;
 
         }
         #second{
             border: 1px dashed #0d2d75;
             background: #0d2d75;
 
         }
         #third{
             border: 1px dashed #b885e8;
             background: #b885e8;
             position: relative;
             bottom: -10px;
             right: 20px;
 
         }
     </style>
 </head>
 <body>
 <div id="father">
   <div id="first">第一个盒子</div>
   <div id="second">第二个盒子</div>
   <div id="third">第三个盒子</div>
 </div>
 </body>
 </html>

相对定位：position:relative;

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

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

6.2、绝对定位

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

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

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

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

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         div{
             margin: 10px;
             padding: 5px;
             font-size: 12px;
             line-height: 25px;
         }
         #father{
             border: 1px solid #666;
             background: #666;
             padding: 0;
             position: relative;
         }
         #first{
             border: 1px dashed #cc4c4c;
             background: #cc4c4c;
 
         }
         #second{
             border: 1px dashed #0d2d75;
             background: #0d2d75;
             position: absolute;
             right: 30px;
             top: -10px;
         }
         #third{
             border: 1px dashed #b885e8;
             background: #b885e8;
 
         }
     </style>
 </head>
 <body>
 <div id="father">
   <div id="first">第一个盒子</div>
   <div id="second">第二个盒子</div>
   <div id="third">第三个盒子</div>
 </div>
 </body>
 </html>

6.3、固定定位

 <!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: red;
         position: absolute;/* 绝对定位：相对于浏览器 */
         right: 0;
         bottom: 0;
     }
     div:nth-of-type(2){
         width: 50px;
         height: 50px;
         background: yellow;
         position: fixed;/* fixed,固定定位 */
         right: 0;
         bottom: 0;
     }
   </style>
 </head>
 <body>
 <div>div1</div>
 <div>div2</div>
 </body>
 </html>

6.4、z-index

图层~

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

opacity: 0.5;/背景透明度/

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <link rel="stylesheet" href="css.css">
 </head>
 <body>
 <div id="content">
     <ul>
         <li><img src="images/img.png" alt="图片"></li>
         <li class="tipText">学习Java</li>
         <li class="tipBg"></li>
         <li>时间：2022/6/15</li>
         <li>地点：地球一号基地</li>
     </ul>
 </div>
 </body>
 </html>
 
 css部分：
 #content{
     width: 672px;
     padding: 0;
     margin: 0;
     overflow: hidden;
     /*font:字体样式 粗细 字体大小/行间距 字体体系；*/
     /*font: italic bold 12px/20px sans-serif;*/
     font: normal bold 18px/20px sans-serif;
     line-height: 25px;
     border: 1px #000 solid;
 }
 ul,li{
     padding: 0;
     margin: 0;
     list-style: none;
 }
 /*父元素相对定位*/
 #content{
     position: relative;
 }
 .tipText, .tipBg{
     position: absolute;
     width: 672px;
     height: 25px;
     top: 352px;
 }
 .tipText{
     color: white;
     /*z-index: 999;*//*图层*/
 }
 .tipBg{
     background: #000;
     opacity: 0.5;/*背景透明度*/
     filter: alpha(opacity=50);/*旧版本浏览器兼容，已上面的功能一样*/
 }

# 7、动画

来源：https://www.cnblogs.com/biyulin-bky/p/16325128.html