day34-各种细节格式

1. span标签

没什么用只是个名字选中一段可以用

<body>
 
 欢迎学习 <span id="title1">java</span>
 </body>

2. 字体样式

font-family：字体样式

font-size：字体大小

font-weight：字体粗细

color：字体颜色

统一格式：font：oblique（斜体）bold（粗体）大小样式

 1 <!--
 2  font-family：字体样式
 3  font-size：字体大小
 4  font-weight:字体粗细
 5  -->
 6      <style>
 7  
 8          body{
 9              font-family: "Adobe Devanagari",隶书;
10              color: brown;
11          }
12          h1{
13              font-size: 30px;
14          }
15          .p1{
16              font-weight: bold;
17          }
18  
19      </style>

 1  <body>
 2  <h1>贾斯汀·比伯（Justin Bieber）</h1>
 3      <p class="p1">
 4          1994年3月1日出生于加拿大安大略省斯特拉特福市
 5      </p>
 6      <p>
 7          加拿大流行乐男歌手、影视演员
 8      </p>
 9  
10      <p>
11          What do you mean? Ooh <br>
12          When you nod your head yes <br>
13          But you wanna say no <br>
14          What do you mean? Hey <br>
15          When you don't want me to move <br>
16          But you tell me to go <br>
17          What do you mean? <br>
18          Oh, what do you mean? <br>
19      </p>
20  </body>

3.文本样式

颜色：

color：1. rgb 2. rgba（透明度）

排版：

text - align：center 文本居中（left right）左右

text - indent：2em 首行缩进（em文字大小 px像素大小）

行高和块的高度一致才可以上下居中

height 和 line - height

 h1{
     color: rgba(0,255,255,0.5);
     text-align: center;
 }
 .p1{
     text-indent: 2em;
 }
 .p3{
     background: bisque;
     height: 30px;
     line-height: 30px;
 }

上划线 overline 中划线 line - through 下划线 underline

 /*上划线 overline，中划线 line-through，下划线 underline*/
 .l1{
     text-decoration: underline;
 }
 .l2{
     text-decoration: line-through;
 }
 .l3{
     text-decoration: overline;
 }

a标签去下划线 text - decoration：none

 /* a标签去下划线 */
 a{
     text-decoration: none;
 }

图片和文字水平对齐

需要将两个元素设为互相参照物

可以用span标签

/* 水平对齐：参照物：a，b*/
      img,span{
          vertical-align: middle;
      }

总代码：

 1 <body>
 2  <a href="">111222333</a>
 3  <p class="l1">123123</p>
 4  <p class="l2">123123</p>
 5  <p class="l3">123123</p>
 6  <h1>贾斯汀·比伯（Justin Bieber）</h1>
 7  <p class="p1">
 8      1994年3月1日出生于加拿大安大略省斯特拉特福市
 9  </p>
10  <p>
11      加拿大流行乐男歌手、影视演员
12  </p>
13  
14  <p class="p3">
15      What do you mean? Ooh <br>
16      When you nod your head yes <br>
17      But you wanna say no <br>
18      What do you mean? Hey <br>
19      When you don't want me to move <br>
20      But you tell me to go <br>
21      What do you mean? <br>
22      Oh, what do you mean? <br>
23  </p>
24  <p>
25      <img src="image/a.png" alt="">
26      <span>love</span>
27  </p>
28  </body>

4. 超链接伪类

鼠标悬浮显示的颜色：hover

a:hover{

color：

}

 /*鼠标悬浮的颜色*/
 a:hover{
     color: orange;
 }

鼠标摁住但不点开的颜色

a:active{

color：

}

 /*鼠标摁住但不点开的颜色*/
 a:active{
     color: greenyellow;
 }

偏移阴影：

text-shadow：阴影颜色，水平偏移，垂直偏移，偏移半径

 /*text-shadow:阴影颜色，水平偏移，垂直偏移，偏移半径*/
 #people{
     text-shadow: #3cc7f5 10px 10px 2px;
 }

总代码：

<style>
         /*默认的颜色*/
         a{
             text-decoration: none;
             color: black;
         }
         /*鼠标悬浮的颜色*/
         a:hover{
             color: orange;
         }
         /*鼠标摁住但不点开的颜色*/
         a:active{
             color: greenyellow;
         }
         /*text-shadow:阴影颜色，水平偏移，垂直偏移，偏移半径*/
         #people{
             text-shadow: #3cc7f5 10px 10px 2px;
         }
     </style>
 </head>
 <body>
 <a href="#">
     <img src="../6.%20背景/image/a.png" alt="">
 </a>
 <p>
     <a href="#">斋藤飞鸟</a>
 </p>
 <p>
     <a href="">来自：日本</a>
 </p>
 <p id="people">
     loved:999+
 </p>
 </body>

5.列表

首先创建ul-li列表

 <body>
 <div id="nav">
     <h2 class="title">全部商品分类</h2>
 
     <ul>
       <li>
         <a href="#">图书</a>
         <a href="#">音像</a>
         <a href="#">数字商品</a>
       </li>
       <li>
         <a href="#">家用电器</a>
         <a href="#">手机</a>
         <a href="#">数码</a>
       </li>
       <li>
         <a href="#">电脑</a>
         <a href="#">办公</a>
       </li>
       <li>
         <a href="#">家居</a>
         <a href="#">家装</a>
         <a href="#">厨具</a>
       </li>
       <li>
         <a href="#">服饰鞋帽</a>
         <a href="#">个性化妆</a>
       </li>
       <li>
         <a href="#">礼品箱包</a>
         <a href="#">钟表</a>
         <a href="#">珠宝</a>
       </li>
       <li>
         <a href="#">食品饮料</a>
         <a href="#">保健食品</a>
       </li>
       <li>
         <a href="#">彩票</a>
         <a href="#">旅行</a>
         <a href="#">充值</a>
         <a href="#">票务</a>
       </li>
     </ul>
 </div>
 </body>

通过css文件对文字进行更改

background参数：颜色图片图片位置平铺方式（默认是横铺）

 .title{
     font-size: 18px;
     font-weight: bold;
     text-indent: 3em;
     line-height: 35px;
     background: antiquewhite;
     /*颜色，图片，图片位置，平铺方式*/
     background: antiquewhite url("../image/2.PNG") 220px -3px no-repeat;
 }

列表样式：

list-style：none：去掉圆点， circle：空心圆， decimal：数字形式显示， square：正方形形式显示

总代码：

 #nav{
     width: 250px;
     background: aliceblue
 }
 
 
 
 .title{
     font-size: 18px;
     font-weight: bold;
     text-indent: 3em;
     line-height: 35px;
     background: antiquewhite;
     /*颜色，图片，图片位置，平铺方式*/
     background: antiquewhite url("../image/2.PNG") 220px -3px no-repeat;
 }
 /*ul li*/
 /*
 list-style:
 none 去掉圆点
 circle 空心圆
 decimal 数字
 square 正方形
 */
 ul{
     background: aliceblue;
 }
 ul li{
     height: 30px;
     list-style: none;
     text-indent: 1em;
     background: aliceblue url("../image/1.PNG") 180px -3px no-repeat;
 
 
 
 }
 a{
     text-decoration: none;
     font-size: 14px;
     color: black;
 }
 a:hover{
     color: orange;
     text-decoration: underline;
 }

6. 背景

默认图片背景全部平铺

background-repeat: no-repeat不平铺

repeat-x横铺

repeat-y竖铺

总代码：

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <style>
 7  
 8          div{
 9              width: 1000px;
10              height: 700px;
11              border: 1px solid red;
12              background-image: url("image/a.png") ;
13          /*默认全部平铺*/
14  
15          }
16          .div1{
17              background-repeat: no-repeat ;
18          }
19          .div2{
20              background-repeat: repeat-x ;
21          }
22          .div3{
23              background-repeat: repeat-y ;
24          }
25      </style>
26  </head>
27  <body>
28  
29  <div class="div1"></div>
30  <div class="div2"></div>
31  <div class="div3"></div>
32  
33  
34  
35  </body>
36  </html>

7. 渐变

https://www.grabient.com/

在网站上可以设置渐变格式

复制渐变代码

 <style>
     /*径向渐变 圆形渐变*/
     body{
         
         background-image: linear-gradient(323deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
 
     }
 </style>