学习CSS

红文 · 发表于 2021-7-16 17:22:00

初识

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

建议规范

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

 h1{
     color: aqua;
 }

css的导入方式

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 <!--    内部样式-->
     <style>
         h1{
             color: green;
         }
     </style>
 
     <link rel="stylesheet" href="css/style.css">
 
 </head>
 <body>
 
 <!--优先级：就近原则-->
 
 <!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
 <h1 style="color: red;">我是标题</h1>
 </body>
 </html>

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

外部样式的两种方式

链接式

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

导入式

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

选择器

选择页面的某一个或者某一类元素

基本选择器

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
   <style>
     #style1 {
       /*id选择器 ： id必须保证全局唯一！
       #id名称{}
       不遵循就近原则，固定的
       id选择器>class选择器>标签选择器
       */
       color: #f60707;
     }
     .class_style{
       /* 类选择器的样式： .class的名称{}
       好处：可以多个标签归类，是同一个class*/
       color: #11e311;
     }
     h1{
       /*标签选择器：会选择到页面上所有这个标签的元素*/
       color: #1919e7;
     }
     p{
       color: #f50707;
     }
   </style>
 </head>
 <body>
 <h1 class="class_style" id="style1">标题1</h1>
 <h1 class="class_style">标题2</h1>
 <h1 class="class_style">标题3</h1>
 <h1>标题4</h1>
 <h1>标题5</h1>
 <p>你好啊，我的朋友</p>
 </body>
 </html>

层次选择器

后代选择器
子选择器
相邻兄弟选择器
通用相邻兄弟选择器

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
   <style>
     /*后代选择器：在某个元素后代*/
     body p{
       background: #c8e719;
     }
     /*子选择器，一代*/
     body>p{
       background: #f50707;
     }
     /*相邻兄弟选择器 只有一个（向下）*/
     .active + p{
       background: #1919e7;
     }
     /*通用兄弟选择器，当前选择元素的向下的所有兄弟元素*/
     .inactive ~ p{
       background: aqua;
     }
   </style>
 </head>
 <body>
 <p>p0</p>
 <p class="active">p1</p>
 <p>p2</p>
 <p>p3</p>
 <p class="inactive">p4</p>
 <p>p5</p>
 <p>p6</p>
 <ul>
   <li>
     <p>p4</p>
   </li>
   <li>
     <p>p5</p>
   </li>
   <li>
     <p>p6</p>
   </li>
 </ul>
 </body>
 </html>

结构选择器

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
  /*选择子类的第一个元素*/
     ul li:first-child{
         background: #f50707;
     }
  /*选择子类的第一个元素*/
     ul li:last-child{
         background: #11e311;
     }
  /*选中p1：定位到父元素，选择当前的第一个元素
  选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效*/
     p:nth-child(3){
         background: #1919e7;
     }
 
      p:nth-child(4){
          background: #e719c5;
      }
     /* 选中父元素下的p元素的第二个类型，不必须是当前元素*/
     p:nth-of-type(2){
         background: #c8e719;
     }
 
     a:hover{
         background: aqua;
     }
 
     </style>
 
 </head>
 <body>
     <a href="">2131213141</a>
     <h1>好</h1>
     <p>p1</p>
     <p>p2</p>
     <p>p3</p>
     <ul>
         <li>li1</li>
         <li>li2</li>
         <li>li3</li>
     </ul>
 </body>
 </html>

属性选择器

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
   <style>
     .demo a{
       float: left;
       display: block;
       height: 50px;
       width: 50px;
       border-radius: 10px;
       background: #19e723;
       text-align: center;
       color: #d21a1a;
       text-decoration: none;
       margin-right: 8px;
       font:bold 10px/50px Arial;
     }
   /*  属性名 ， 属性名 = 属性值
   = 绝对等于
   *= 包含
   ^= 以什么开头
   $= 以什么结尾
   穿在id属性的元素   a[]{}
   */
     a[id]{
       background: #c8e719;
     }
     a[id=first]{
       color: #131212;
     }
     a[class*=links]{
       text-align: end;
     }
     a[href*=abc]{
       background: darkgrey;
     }
     a[href^=images]{
       background: #1919e7;
     }
     a[href$=doc]{
       background: aqua;
     }
   </style>
 </head>
 <body>
 <p class="demo">
 
   <a href="https://www.baidu.com" class="links item first" id="first">1</a>
   <a href="https://www.study.com" class="links item active">2</a>
   <a href="images/123.png" class="links item">3</a>
   <a href="images/123.gif" class="links item">4</a>
   <a href="images/123.jpg" class="links item">5</a>
   <a href="abc" class="links item">6</a>
   <a href="/abc.pdf" class="links item">7</a>
   <a href="/dnf.doc" class="links item">8</a>
   <a href="lol.doc" class="links item">9</a>
   <a href="http://www.baidu.com" class="links item last" id="last">10</a>
 
 </p>
 </body>
 </html>

美化网页元素

span

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
   <style>
     span{
       font-size: 50px;
     }
   </style>
 </head>
 <body>
 初识 <span>java</span>
 </body>
 </html>

字体样式

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
   <style>
     .p1{
       font-family: 仿宋;
       font-weight: bolder;
       color: #131212;
     }
     .p2{
       font: oblique lighter 18px 新宋体;
     }
     .p3{
       font-family: "DejaVu Math TeX Gyre";
       color: #e719c5;
       font-size: 40px;
     }
     .p4{
       font-family: "Arial Black",楷体;
       color: #0040ff;
       font-size: 30px;
     }
   </style>
 </head>
 <body>
 <p class="p1">
   手中雕刻生花  刀锋千转蜿蜒成画  盛名功德塔   是桥畔某处人家
   春风绕过发梢红纱   刺绣赠他  眉目刚烈拟作妆嫁 轰烈流沙枕上白发
   杯中酒比划  年少风雅鲜衣怒马  也不过一刹那   难免疏漏儿时檐下
   莫测变化  隔却山海  转身从容煎茶  一生长   重寄一段过往
   将希冀都流放  可曾添些荒唐  才记得你的模样    一身霜
 </p>
 <p class="p2">
   谁提笔只两行  换一隅你安康   便销得这沧桑  你还在我的心上
   手中雕刻生花  刀锋千转蜿蜒成画   盛名功德塔  是桥畔某处人家
   春风绕过发梢红纱   刺绣赠他  眉目刚烈拟作妆嫁  轰烈流沙枕上白发
   杯中酒比划  年少风雅鲜衣怒马   也不过一刹那  难免疏漏儿时檐下
   莫测变化  隔却山海   转身从容煎茶   一生长   重寄一段过往
   将希冀都流放  可曾添些荒唐   才记得你的模样    一身霜
   谁提笔只两行   换一隅你安康   便销得这沧桑  你还在我的心上
   一生长  重寄一段过往  将希冀都流放  可曾添些荒唐   才记得你的模样
   一身霜  谁提笔只两行  换一隅你安康  便销得这沧桑   你还在我的心上
 </p>
 <p class="p3">
   O no! it is an ever-fixed markThat looks on tempests and is never shaken;
   It is the star to every wandering bark,Whose worth's unknown, although his highth be taken
 </p>
 <p class="p4">
   Love's not Time's fool,
   though rosy lips and cheeksWithin his bending sickle's compass come:
   Love alters not with his brief hours and weeks,
   But bears it out even to the edge of doom.
   爱不受时光的播弄，尽管红颜
   和皓齿难免遭受时光的毒手；
   爱并不因瞬息的改变而改变，
   它巍然矗立直到末日的尽头。
 </p>
 </body>
 </html>

超链接伪类

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         /*默认的样式*/
         a{
             text-decoration: none;
             color: #19e723;
         }
         /*鼠标悬浮时的状态*/
         a:hover{
             color: #e719c5;
             font-size: 30px;
         }
         /*鼠标按压未释放的状态*/
         a:active{
             color: #1919e7;
         }
         #price{
             text-shadow: #131212 10px 10px 3px;
         }
     </style>
 </head>
 <body>
 <a href="#">
     <img src="../images/1.jpg" alt="">
 </a>
 <p>
     <a href="#">码出高效：Java开发手册</a>
 </p>
 <p>
     <a href="">作者：孤尽老师</a>
 </p>
 
 <p>
     <a href="" id="price"> ￥99</a>
 </p>
 
 
 </body>
 </html>

列表

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
  <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
  <div id="nav">
    <h1 class="title">全部商品分类</h1>
    <ul class="JS_navCtn cate_menu">
      <li class="cate_menu_item" >
        <a href="#">图书</a>
        <a href="#">音像</a>
        <a href="#">数字产品</a>
      </li>
      <li class="cate_menu_item" >
        <a href="#">家用电器</a>
        <a href="#">手机</a>
        <a href="#">数码</a>
      </li>
      <li class="cate_menu_item" >
        <a href="#">电脑</a>
        <a href="#">办公</a>
        <a href="#">外设</a>
      </li>
      <li class="cate_menu_item" >
        <a href="#">家具</a>
        <a href="#">家装</a>
        <a href="#">厨具</a>
      </li>
      <li class="cate_menu_item" >
        <a href="#">服装鞋帽</a>
        <a href="#">个护化妆</a>
      </li>
      <li class="cate_menu_item" >
        <a href="#">礼品箱包</a>
        <a href="#">钟表</a>
      </li>
      <li class="cate_menu_item" >
        <a href="#">食品饮料</a>
        <a href="#">保健食品</a>
      </li>
      <li class="cate_menu_item" >
        <a href="#">彩票</a>
        <a href="#">旅行</a>
        <a href="#">充值</a>
      </li>
    </ul>
  </div>
</body>
</html>

css

#nav{
    width: 300px;
    background: #7d7676;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent:1em;
    line-height: 35px;
    /*颜色 背景 位置 平铺方式*/
    background: red url("../../../images/down.png") 255px 10px no-repeat;
}
/*ul li*/
/*
list-style:
    none：去掉圆点
    circle：空心圆
    decimal ： 数字
    square：正方形
*/
/*ul{*/
/*    background: #7d7676;*/
/*}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../../../images/right.png") ;
    background-repeat: no-repeat;
    background-position: 217px 2px;
}
a{
    color: #000;
    text-decoration: none;
    font-size: 14px;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

背景

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
   <style>
     div{
       width: 1000px;
       height: 900px;
       border: 1px solid red;
       background-image: url("../../images/1.jpg");
     }
     .div1{
       background-repeat: repeat-x;
     }
     .div2{
       background-repeat: repeat-y;
     }
     .div3{
       background-repeat: no-repeat;
     }
   </style>
 </head>
 <body>
 <div class="div1"></div>
 <div class="div2"></div>
 <div class="div3"></div>
 </body>
 </html>

渐变

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 <!--  径向渐变，圆形渐变-->
   <style>
     body{
       background-image: linear-gradient(19deg,#1919e7 0%,#B721FF 100%);
     }
   </style>
 </head>
 <body>
 
 </body>
 </html>

盒子模型

what

margin：外边距

padding：内边距

border：边框

边框

粗细
样式
颜色

内外边距

边框及内外边距实例

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
 <!--  外边距的妙用：居中元素-->
   <style>
 
     #app{
       width: 300px;
       border: 1px solid red;
       margin: 0 auto;
     }
     /*
     margin-top: 0;上下左右
     margin-top: 0 1px;上下为0 左右为1
     margin-top: 0 1px 2px 3px; 顺时针旋转
     */
     h2{
       font-size: 16px;
       background-color: aqua;
       line-height: 30px;
       color: white;
       margin-top: 0;
     }
     form{
       background: aqua;
     }
     input{
       border: 3px solid black;
     }
     div:nth-of-type(2) {
       padding: 10px 2px;
     }
   </style>
 </head>
 <body>
 <div id="app">
   <h2>会员登录</h2>
   <form action="#">
     <div>
       <span>用户名：</span>
       <input type="text">
     </div>
     <div>
       <span>密码：</span>
       <input type="text">
     </div>
     <div>
       <span>邮箱：</span>
       <input type="text">
     </div>
   </form>
 </div>
 </body>
 </html>

圆角边框

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
   <style>
     div{
       width: 100px;
       height: 50px;
       border: 1px solid red;
       border-radius: 50px 50px 0px 0px;
     }
     img{
       border-radius: 300px;
     }
   </style>
 </head>
 <body>
 <div></div>
 <img src="../../images/1.bmp" alt="">
 </body>
 </html>

阴影

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
     img{
       width: 100px;
       height: 100px;
       /*border: 10px solid red;*/
       border-radius: 300px;
       box-shadow: 10px 10px 100px yellow;
       margin: 0 auto;
     }
   </style>
 </head>
 <body>
 <div style="width: 1500px;display: block;text-align: center">
   <div>
     <img src="../../images/1.bmp" alt="">
   </div>
 </div>
 </body>
 </html>

浮动

标准文档流

块级元素：独占一行

 h1-h6 p div 列表...

行内元素：不独占一行

 span a img stong...

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

display

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 <!--
 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 dashed green;
       display: inline-block;
     }
   </style>
 </head>
 <body>
 <div>div</div>
 <span>span</span>
 </body>
 </html>

也是实现行内元素排列的一种方案，大多数使用float实现。

float

左右浮动

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>浮动</title>
   <link rel="stylesheet" href="css/style.css" type="text/css">
 </head>
 <body>
 <div id="father">
   <div class="layer01"><img src="../images/1.jpg" alt=""></div>
   <div class="layer02"><img src="../images/1.bmp" alt=""></div>
   <div class="layer03"><img src="../images/right.png" alt=""></div>
   <div class="layer04">
     浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
   </div>
 </div>
 </body>
 </html>

 div{
     margin: 10px;
     padding: 5px;
 }
 #father{
     border: 1px solid black;
 }
 .layer01{
     border: 1px dashed black;
     display: inline-block;
     float: left;
 }
 .layer02{
     border: 1px dashed black;
     display: inline-block;
     float:right;
 }
 .layer03{
     border: 1px dashed black;
     display: inline-block;
     float:right;
 }
 .layer04{
     border: 1px dashed black;
     font-size: 12px;
     line-height: 23px;
     display: inline-block;
 }

父级边框塌陷的问题

解决方案

给父级元素增加高度

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

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

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

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

overflow

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

父类添加一个伪类 :after

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

小结

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

对比

display（方向不可控）
float（浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷问题）

定位

相对定位 position: relative;

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

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

实例

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
     body{
       padding: 50px;
     }
     #father{
       border: 1px solid #666;
       padding: 0;
     }
     #first{
       background-color: #f50707 ;
       border: 1px dashed #6f2121;
       position: relative;
       top: -10px;
       right: 10px;
     }
     #second{
       background-color: #07f527;
       border: 1px dashed #84b482;
     }
     #third{
       background-color: #4a59b8;
       border: 1px dashed #465fb8;
       position: relative;
       bottom: -10px;
       left: 10px;
     }
   </style>
 </head>
 <body>
 <div id="father">
   <div id="first" >第一个盒子</div>
   <div id="second">第二个盒子</div>
   <div id="third">第三个盒子</div>
 </div>
 </body>
 </html>

练习题

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
   <style>
     .box{
       width: 300px;
       height: 300px;
       border: 2px solid #f50707;
       padding: 3px;
     }
     a{
       width: 100px;
       height: 100px;
       background: #bf63b0;
       text-decoration: none;
       line-height: 100px;
       text-align: center;
       display: block;
     }
     a:hover{
       background: #4848c2;
     }
     .a2,.a4{
       position: relative;
       top: -100px;
       right: -200px;
     }
     .a5{
       position: relative;
       top: -300px;
       right: -100px;
     }
   </style>
 </head>
 <body>
   <div class="box">
     <a href="#" class="a1">链接1</a>
     <a href="#" class="a2">链接2</a>
     <a href="#" class="a3">链接3</a>
     <a href="#" class="a4">链接4</a>
     <a href="#" class="a5">链接5</a>
   </div>
 </body>
 </html>

绝对定位

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

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

在父级元素范围内移动

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

 position: absolute;
 right: 10px;

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         body{
             padding: 50px;
         }
         #father{
             border: 1px solid #666;
             padding: 0;
             position: relative;
         }
         #first{
             background-color: #f50707 ;
             border: 1px dashed #6f2121;
             position: absolute;
             right: 10px;
         }
         #second{
             background-color: #07f527;
             border: 1px dashed #84b482;
         }
         #third{
             background-color: #4a59b8;
             border: 1px dashed #465fb8;
             position: relative;
             bottom: -10px;
             left: 10px;
         }
     </style>
 </head>
 <body>
 <div id="father">
     <div id="first" >第一个盒子</div>
     <div id="second">第二个盒子</div>
     <div id="third">第三个盒子</div>
 </div>
 </body>
 </html>

固定定位

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
   <style>
     body{
       height: 2000px;
     }
     div:nth-of-type(1){/*绝对定位*/
       width: 100px;
       height: 100px;
       background: red;
       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>

z-index

index.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
 <div id="content">
     <ul>
         <li><img src="../../images/1.jpg" alt=""></li>
         <li class="tipText">学习Java</li>
         <li class="tipBg"></li>
         <li>时间：2021年7月16日</li>
         <li>地点：你猜</li>
     </ul>
 </div>
 </body>
 </html>

style.css

 #content{
     width: 550px;
     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: 550px;
     height: 25px;
     top: 404px;
 }
 .tipText{
     color: red;
     /*z-index: 888;*/
 }
 .tipBg{
     background: #000000;
     opacity: 0.5;
     filter: alpha(opacity=0.5);
 }

来源：https://www.cnblogs.com/shenyeanyue-study/p/15021129.html