CSS 基础学习笔记（2021.10.22~24）

天津强哥 發表於 2021-10-24 13:19:00

<h1 id="css">CSS</h1>
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>CSS<ul><li>一、CSS的简单介绍</li><li>二、什么是CSS和发展史</li><li>三、CSS的快速入门及优势</li><li>四、四种css导入方式</li><li>五、三种基本选择器-重要</li><li>六、层次选择器</li><li>七、结构伪类选择器</li><li>八、属性选择器-重要</li><li>九、CSS的作用及字体样式</li><li>十、文本样式</li><li>十一、文本阴影和超链接伪类</li><li>十二、列表样式</li><li>十三、背景图像应用及渐变</li><li>十四、盒子模型及边框使用</li><li>十五、div居中</li><li>十六、圆角边框及阴影和经验分享</li><li>十七、display和浮动</li><li>十八、overflow及父级边框塌陷问题</li><li>十九、相对定位的使用及练习</li><li>二十、绝对定位和固定定位</li><li>二十一、z-index及透明度</li><li>二十二、动画及视野拓展</li></ul></li></ul></div><p></p>
<h2 id="一css的简单介绍">一、CSS的简单介绍</h2>
<p>推荐网站：菜鸟教程</p>
<p>重点：选择器</p>
<h2 id="二什么是css和发展史">二、什么是CSS和发展史</h2>
<p>CSS: 层叠级联样式表</p>
<p>作用：美化网页</p>
<p>发展史：</p>
<p>css1.0</p>
<p>css2.0 DIV+CSS，html和css分离的思想，网页变得简单，方便SEO(网站优化)</p>
<p>css2.1 浮动，定位</p>
<p>css3.0 圆角，阴影，动画。。。</p>
<p><img src="https://img2020.cnblogs.com/blog/2356954/202110/2356954-20211024131817172-456924745.png" alt="image" loading="lazy"></p>
<h2 id="三css的快速入门及优势">三、CSS的快速入门及优势</h2>
<p><img src="https://img2020.cnblogs.com/blog/2356954/202110/2356954-20211024131824990-79876841.png" alt="image" loading="lazy"></p>
<p>css优势：</p>
<ol>
<li>内容和表现分离</li>
<li>网页结构表现统一，可以实现复用</li>
<li>样式十分丰富</li>
<li>建议使用独立于html的css文件</li>
<li>利于SEO，容易被搜索引擎收录</li>
</ol>
<h2 id="四四种css导入方式">四、四种css导入方式</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个css</title>



<link rel="stylesheet" href="css/style.css">


<style>
   @import url("css/style.css")
</style>


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

</head>
<body>

<h1 style="color:blue">我是标题</h1>
</body>
</html>
</code></pre>
<h2 id="五三种基本选择器-重要">五、三种基本选择器-重要</h2>
<blockquote>
<p>选择页面上某一个元素或者某一类元素</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
   /* 标签选择器 */
   h1{
         color: red;
   }
   p{
         color: blue;
   }
   /* 类选择器：选择一类元素
      语法：.class{}
      */
   .one{
         color:green;
   }
   .two{
         color:yellow;
   }
   /* id选择器：选择一个指定id的元素，id式唯一的
      语法：#id{}
      */
      #hh1{
         font-size:50px;
      }

</style>
</head>
<body>
<h1>一级标题</h1>
<p>段落</p>

<p class="one" id="one">one类 idone</p>
<p class="one" id="two">one类 idtwo</p>
<p class="two" id="three">two类 idthree</p>
<h1 class="one" id="hh1">one类 idhh1</h1>
<h1 class="two" id="hh2">two类 idhh2</h1>
<h1 class="two" id="hh3">two类 idhh3</h1>

</body>
</html>
</code></pre>
<p>优先级：id > class > 标签</p>
<h2 id="六层次选择器">六、层次选择器</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>

   /*后代选择器:某个元素所有的符合条件的子代，比如body p 意思就是body中所有的p，不管第几代*/
   body p{
         color: aqua;
   }
   /*子选择器:某个元素自身次一级的子代，比如body>p 意思就是body中次一级的p，只有一代*/
   body>p{
         background: red;
   }
   /*相邻一位兄弟选择器:某个元素同父元素的下一个指定元素，比如.test + p 意思就是test同父元素的下一个p*/
   .test + p{
         background: blue;
   }
   /*通用兄弟选择器:某个元素同父元素的自身后的所有元素，比如.test ~ p 意思就是test同级中之后所有的p*/
   .test ~ p{
         background: brown;
   }
</style>
</head>
<body>
<p class="test">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
</ul>

</body>
</html>
</code></pre>
<h2 id="七结构伪类选择器">七、结构伪类选择器</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
   /* ul的第一个子元素 */
   ul li:first-child{
         background: red;
   }
   /* ul的最后一个子元素 */
   ul li:last-child{
         background: aqua;
   }
   /* p的父元素body的子代的第二个p，也就是同代的顺位第二，中间不能有别的元素，比如p7是锁定不到的*/
   p:nth-child(2){
         background: blue;
   }
   /* p的父元素body的子代的第4个p，也就是同代的顺位第四，中间可以有别的元素，比如p7是可以锁定的*/
   p:nth-of-type(4){
         background: blue;
   }
   /* 触碰到li */
   li:hover{
         color: chartreuse;
   }

</style>
</head>
<body>
<p class="test">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>p4</li>
<li>p5</li>
<li>p6</li>
</ul>
<p>p7</p>
</body>
</html>
</code></pre>
<h2 id="八属性选择器-重要">八、属性选择器-重要</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/* 属性选择器
   比如:
   []中的符号:
   =：绝对等于
   *=：包含
   ^=：以开头
   $=：以结尾
   a{
   }
   的意思是：锁定了：a标签中，id=first的元素
   */
a{
   float: left;
   width: 50px;
   height: 50px;
   background: blue;
   margin-right: 15px;
   border-radius: 15px;
   color: black;
   text-align: center;
   line-height: 50px;
   text-decoration: none;
}

a{
   color: brown;
}

a{
   background: red;
}

a:hover{
   background: cornflowerblue;
}

a:hover{
   border-radius: 25px;
}
</style>

</head>

<body>
<a href="http://www.baidu.com" id="first">1</a>
<a href="1.jpg" class="link item">2</a>
<a href="2.jpg" class="link item active">3</a>
<a href="3.pdf" class="link item">4</a>
<a href="1.pdf" class="link">5</a>
<a href="2.pdf" class="link">6</a>
<a href="3.pdf" class="link">7</a>
<a href="123" class="link item ">8</a>
<a href="1" class="link item">9</a>
<a href="1" class="link item">0</a>
</body>
</html>
</code></pre>
<h2 id="九css的作用及字体样式">九、CSS的作用及字体样式</h2>
<blockquote>
<p>CSS的作用主要是用于美化网页</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS作用及字体样式</title>

<style>
#title1{
   font-size: 50px;
}
.test1{
   font:oblique bold 20px/50px Arial; /*风格（斜体等等）粗细，大小/行高样式 */
   font-family: "Source Code Pro", 楷体; /*字体格式*/
   font-size: 30px; /*字体大小*/
   font-weight: lighter;/*字体粗细*/
   color: brown;    /*字体颜色*/
}
</style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
<p class="test1">测试字体test font</p>
</body>
</html>
</code></pre>
<h2 id="十文本样式">十、文本样式</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style>
   /*
   1. 颜色 RGB：红绿蓝，RGBA：红绿蓝透明度 A(0~1)
   2. 对齐方式
   3. 首行缩进
   4. 行高
   5. 装饰
   6. 水平对齐
   */
   .test2{
   color: rgba(163,55,17,0.5); /*文本颜色*/
   text-align: center;       /*文本对齐方式*/
   text-indent: 10em;       /*首行缩进单位em（字符）例子的意思是首行缩进十个字*/
   line-height: 50px;       /*行高*/
   text-decoration: line-through;/*文本装饰，中划线*/
   }

   /*水平对齐需要两个选择，一个是test2类，一个是img标签*/
   .test2,img{
   vertical-align: middle;
   }

</style>
</head>
<body>
<p class="test2">
测试文本内容testfont <br>
测试文本内容testfont

<img src="../resources/image/a.png" height="300" width="300"/>
</p>

</body>
</html>
</code></pre>
<h2 id="十一文本阴影和超链接伪类">十一、文本阴影和超链接伪类</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本阴影和超链接伪类</title>
<style>
   a{
   text-decoration: none;
   color: brown;

   }
   /*超链接伪类*/
   .bookname:hover{/*鼠标悬浮在元素上时的样式*/
   font-size: 50px;
   color: rgb(6, 239, 227);
   }
   .bookname:visited{/*鼠标点击过超文本元素上后的样式*/
   color: darkorange;
   }
   /*文本阴影效果*/
   .bookprice{
   color: orange;
   /*文本阴影参数：水平偏移垂直偏移模糊距离阴影颜色*/
   text-shadow:10px 10px 3px darkorange;
   }

</style>
</head>

<body>
<img src="../resources/image/a.png" height="150" width="150"/>
<p><a href="#" class="bookname">这本书的名字</a></p>
<p><a href="#" class="bookprice">这本书的价格</a></p>

</body>
</html>
</code></pre>
<h2 id="十二列表样式">十二、列表样式</h2>
<pre><code class="language-html">list-style:
none：去掉圆点
circle：空心圆
decimal：数字
square：正方形
</code></pre>
<h2 id="十三背景图像应用及渐变">十三、背景图像应用及渐变</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图像应用及渐变</title>
<style>
   div{
      /*背景颜色背景图片url x轴偏移 y轴偏移*/
      background: rebeccapurple url("../resources/image/a.png") 60px 60px;/*背景图像*/
      width: 500px;
      height: 500px;
      border: black solid 3px ;
   }
   .div1{
      background-repeat: repeat-x;/*背景图像x轴平铺*/
   }
   .div2{
      background-repeat: repeat-y;/*背景图像y轴平铺*/
   }
   .div3{
      background-repeat: no-repeat;/*不平铺*/
   }
   .div4{
      background-color: #4158D0;
      background-image: linear-gradient(341deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
   }
   .div5{
      background-color: #FFFFFF;
      background-image: linear-gradient(154deg, #FFFFFF 0%, #6284FF 32%, #FF0000 100%);
   }

   /*渐变 www.grabient.com*/

   body{
      background-color: #FFFFFF;
      background-image: linear-gradient(154deg, #FFFFFF 0%, #6284FF 32%, #FF0000 100%);
   }
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>

</body>
</html>
</code></pre>
<h2 id="十四盒子模型及边框使用">十四、盒子模型及边框使用</h2>
<p><img src="https://img2020.cnblogs.com/blog/2356954/202110/2356954-20211024131840282-430115777.png" alt="image" loading="lazy"></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型及边框使用</title>
<style>
   /*
   margin:外边距
      四个数: 上下左右
      三个数：上左右下
      两个数: 上下左右
      一个数：上下左右
   padding：内边距
   border：边框（上面边距的内外是相对于边框的，边框是分界点）
      粗细
      样式
      颜色

      开头常见操作(初始化)
      ul,li,a,body{
      margin: 0;
      padding: 0;
      text-decoration: none;
   }
   */
   ul,li,a,body{
      margin: 0;
      padding: 0;
      text-decoration: none;
   }
   #login{
      background: cornflowerblue;
      width: 300px;
      border: #6284FF solid 1px;
      margin: 5px;
      padding: 3px;
   }
   div:nth-of-type(2) input{
      border: #cb1e00 solid 3px;
   }

</style>
</head>
<body>
<form action="#">
<div id="login">
<div><h2>会员登录</h2></div>
<div><p>用户名：<input type="text"></p></div>
<div><p>密码：<input type="text"></p></div>
</div>

</form>
</body>
</html>
</code></pre>
<h2 id="十五div居中">十五、div居中</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div居中</title>
<style>
   ul,li,a,body{
      margin: 0;
      padding: 0;
      text-decoration: none;
   }

   #id1{
      /*居中*/
      margin: 0 auto;
      width: 500px;
      height: 500px;
      background-color: #85FFBD;
      background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);

   }
</style>
</head>
<body>
<div id="id1" ></div>

</body>
</html>
</code></pre>
<h2 id="十六圆角边框及阴影和经验分享">十六、圆角边框及阴影和经验分享</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角边框</title>
<style>
ul,li,a,body{
   margin: 0;
   padding: 0;
   text-decoration: none;
}

#id1{
   /*从左上开始顺时针的顺序即：左上右上右下左下*/
   border-radius: 200px 150px 75px 25px;
   width: 400px;
   height: 400px;
   background-color: #85FFBD;
   background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
   margin: 0 auto;

}
</style>
</head>
<body>
<div id="id1" ></div>
</body>
</html>
</code></pre>
<h2 id="十七display和浮动">十七、display和浮动</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.contain{
   border: solid #cb1e00 2px;
}
.box1{
   padding: 5px;
   border: solid #C850C0 1px;
   margin: 5px;
   display: inline-block;
}
.d1{
   float: left;
}
.d2{
   float: right;
}
.d3,.d4{
   float: right;
}
</style>
</head>
<body>

<div class="contain">
<div class="d1 box1"><img src="../resources/image/a.png" height="102" width="198"/></div>
<div class="d2 box1"><img src="../resources/image/a.png" height="52" width="58"/></div>
<div class="d3 box1"><img src="../resources/image/a.png" height="12" width="18"/></div>
<div class="d4 box1">文字</div>

</div>

</body>
</html>
</code></pre>
<h2 id="十八overflow及父级边框塌陷问题">十八、overflow及父级边框塌陷问题</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overflow以及父级边框塌陷问题</title>
<style>
   .contain{
         border: solid #cb1e00 2px;
   }
   .box1{
         padding: 5px;
         border: solid #C850C0 1px;
         margin: 5px;
         display: inline-block;
   }
   .d1{
         float: left;
   }
   .d2{
         float: right;
   }
   .d3,.d4{
         float: right;
   }
   .contain:after{
         content:'';
         display:block;
         clear:both;
   }
</style>
</head>
<body>

<div class="contain">
<div class="d1 box1"><img src="../resources/image/a.png" height="102" width="198"/></div>
<div class="d2 box1"><img src="../resources/image/a.png" height="52" width="58"/></div>
<div class="d3 box1"><img src="../resources/image/a.png" height="12" width="18"/></div>
<div class="d4 box1">文字</div>
</div>


<div style="height: 150px;width: 150px;overflow: scroll">
<img src="../resources/image/a.png" height="202" width="308"/>
</div>

</body>
</html>
</code></pre>
<h2 id="十九相对定位的使用及练习">十九、相对定位的使用及练习</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位使用</title>
<style>
/*相对定位：仍然在标准文档流中，原来的位置会被保留
position：relative
top,bottom,left,right:
   在相对定位情况下，和元素的类型距离：
   比如top:-20px就会是：在自身位置的基础上，和屏幕上方的距离减少20px
*/
body{
   padding: 20px;
}
div{
   padding: 5px;
   margin: 5px;
}
#father{
   border: black 1px solid;
}
#f1{
   background: rebeccapurple;
   position: relative;
   top: -15px;
}
#f2{
   background: #cb1e00;
   position: relative;
   right: -15px;
}
#f3{
   background: #FFFB7D;
   position: relative;
   bottom: -15px;
}
</style>
</head>
<body>
<div id="father">
<div id="f1">第一个盒子</div>
<div id="f2">第二个盒子</div>
<div id="f3">第三个盒子</div>
</div>

</body>
</html>
</code></pre>
<h2 id="二十绝对定位和固定定位">二十、绝对定位和固定定位</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位和固定定位</title>
<style>
/*绝对定位：继续xxx定位，上下左右
1. 没有父级元素定位的前提下，相对于浏览器定位
2. 假设父级元素存在定位我们通常相对于父级元素进行偏移
3. 在父级元素范围内移动
4. 绝对定位后，元素就不在标准文档流中

固定定位：fixed：直接相对于浏览器的
*/
#juedui{
   width: 300px;
   height: 300px;
   background: #FFFB7D;
   position: absolute;
   bottom: 0px;
   right: 0px;
}
#guding{
   width: 100px;
   height: 100px;
   background: #cb1e00;
   position: fixed;
   bottom: 0px;
   right: 0px;
}
#father{
   height: 2000px;
}
</style>
</head>
<body>
<div id="father">
<div id="juedui">绝对定位</div>
<div id="guding">固定定位</div>
</div>
</body>
</html>
</code></pre>
<h2 id="二十一z-index及透明度">二十一、z-index及透明度</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Z-index</title>
<style>
/*zindex属性相当于图层属性，zindex高，哪张图在最上面，反之就在下面*/
/*opacity:背景透明度*/
#t1,#t2{
   width: 300px;
   height: 300px;
}
#t1{
   background: #FFFB7D;
   position: relative;
   z-index: 0;
}
#t2{
   background: #cb1e00;
   position: relative;
   top: -300px;
   opacity: 0.5;
   z-index: 1;
}
</style>
</head>
<body>
<div id="father">
<div id="t1">图1</div>
<div id="t2">图2</div>
</div>
</body>
</html>
</code></pre>
<h2 id="二十二动画及视野拓展">二十二、动画及视野拓展</h2>
<p>在源码之家、模板之家搜索并且使用、搜索canvas动画，直接使用即可。</p>

</div>
<div id="MySignature" role="contentinfo">
慢慢来慢慢来<br><br>
来源：https://www.cnblogs.com/xiaowei9s/p/15450769.html

頁: [1]

琼殿技术论坛's Archiver

CSS 基础 学习笔记（2021.10.22~24）

CSS 基础学习笔记（2021.10.22~24）