HTML第三天 10.19

最新推荐文章于 2024-11-13 20:09:05 发布

WGY0227

最新推荐文章于 2024-11-13 20:09:05 发布

阅读量61

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/WGY0227/article/details/120854086

版权

HTML第三天

css入门

1.1 css简介

HTML 称之为 超文本标记语言   学习思路：有哪些标签 在浏览器中有什么效果

CSS  称之为 层叠样式表      给HTML添加样式效果 
                         学习css思路： 有哪些样式 能产生什么效果

1.2 css的三种形式

学习思路： 能干什么  在哪写代码   如何写  写什么

三种形式 其实就是三个写css代码的地方

A  行内样式

描述： 在标签的开始标签中 添加一个style的属性  在属性赋值的时候 通过 key:value的形式进行赋值
      如果需要设定多个值 此时中间使用 分号隔开
例如:  <div  style="color: red;background-color: yellow;">你好世界</div>
模板： <开始标签  style="key:value ; key:value"  >内容</结束标签>
局限性： 行内样式只能作用于一个标签 ，如果多个标签有相同的样式 此时行内样式就无法满足需求       
          <div  style="color: red;background-color: yellow;">你好世界</div>     
          <div  style="color: red;background-color: yellow;">你好 中国</div>
       重复代码太多



B 页内样式

描述：在html网页的head标签中 添加一个style标签 在style标签中 通过 选择器{} 形式选取页面内容
     然后在大括号中通过 key:value的形式添加样式
例如:
     <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
            
            div { color: red; background-color: yellow;   }
            
            p { color: blue; background-color: pink; }
            
        </style>
        
    </head>
    <body>
          
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <p>456</p>
          <p>456</p>
          <p>456</p>
        
    </body>
局限性：如果多个网页有相同的样式设定 此时如果使用页内样式 还是存在重复内容问题


C 页外样式
描述：在css文件夹中 创建一个后缀为.css文件  然后在文件中通过 选择器 {} 选取页面内容
     在{}中 通过key:value进行样式的设定。
     并且在html的head标签中 需要通过link标签将其引入到当前文件
例如：
    A 在css文件夹中创建一个css文件
      
div {   color: blue; background-color: orange;   }

p {color: green;  background-color: purple;}

    B 在需要使用当前css的html中 通过link标签引入
    <head>
        <meta charset="utf-8" />
        <title></title>
        
        <link rel="stylesheet" type="text/css" href="css/haha.css" />
    </head>

我们具体使用哪种形式呢?
第一种 行内样式 基本不用
第二种 当前网页私人订制的时候使用 
第三种 当有一些样式 多个网页共有的时候

1.3 css常用的样式

 <head>
        <style type="text/css">
            
            div{
                color: red;                颜色
                background-color: gray;    背景颜色
                width: 500px;                 宽度
                height: 500px;                 高度
                
            border: 20px  groove   pink;      边框  
    border-radius: 50px  100px  150px   200px ;   圆角                box-shadow: 10px  10px  100px  20px  yellow;  盒子阴影
        cursor: wait;                        鼠标状态
                
        font-size: 25px;                     文字大小
        font-weight: bolder;                 文字加粗
    font-family: 楷体;                    文字字体
                
                text-align:center ;   文本水平对齐方式  
         
                /* 用来去除 a标签自带的下划线  underline  overline  line-through*/
    text-decoration: line-through;      下划线
        text-indent: 2em;                   首行缩进
    text-shadow: 10px  10px  2px black ; 文字阴影
                
        line-height: 500px;                 行高
                
            }
            
        </style>
        
    </head>
    <body>
          
          <div>你好你好你好你好</div>
        
    </body>

1.4 鼠标悬停

普通状态/正常状态： 当我们设定完成css样式之后  浏览器立刻渲染
悬停状态：         我们写完样式 浏览器并不立刻渲染 当鼠标悬停到标签上面的时候才会展现

<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
            
            body {background-color: black;}
            
            div{
                color: red;
                background-color: gray;
                width: 100px;
                height: 300px;
            }
            
            
            div:hover {
                box-shadow: 5px 5px 30px 5px lightgray;
                width: 500px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
          <div>哈哈哈哈哈哈哈哈哈哈哈</div>
    </body>

1.5 转场效果/ 过渡效果

<style type="text/css">
            
            body {background-color: black;}
            
            button {
                border: 1px solid #ffe0e8;
                width: 100px;
                height: 40px;
                border-radius: 5px;
                color: #c81623;
                transition: all   1s;
            }
            
            button:hover {
                background-color: red;
                color: white;
                width: 200px;
            }
            
        </style>

1.6 3d旋转


<style type="text/css">
            
            body {background-color: black;}
            
            button {
                border: 1px solid #ffe0e8;
                width: 100px;
                height: 40px;
                border-radius: 5px;
                color: #c81623;
                vertical-align: top;
                transition: all   0.51s;
            }
            
            button:hover {
                background-color: black;
                color: white;
                
                transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
            }
            
        </style>

1.7 动画组

<style type="text/css">
            
            body {background-color: black;}
            
            button {
                border: 1px solid #ffe0e8;
                width: 100px;
                height: 40px;
                border-radius: 5px;
                color: #c81623;
                vertical-align: top;
                
                animation:   haha   10s  alternate  infinite  ;
            }
            
            @keyframes haha{
                0%  { transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);  }
                25% {transform: rotateX(-180deg) rotateY(-180deg) rotateZ(-180deg);  }
                50% { transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);  }
                75% { transform: rotateX(-180deg) rotateY(-180deg) rotateZ(-180deg);  }
                100% { transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg); }            
            }
            
        </style>

1.8 总结

一 常用样式:  1.border-radius: px  px px px; 圆角
          2. box-shadow: px px px px red; 盒子阴影
          3. cursor: wait;  鼠标状态
          4. text-decoration: none;  去除下划线
          5. text-indent: 2em; 首行缩进
          6. text-shadow: px px px px ;  文字阴影
          7. line-height: 500px;  行高 
 二 鼠标悬停: div:hover{
          
          }
          
  1. 转场效果 transition: all 1s;
2. 3d旋转     transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    3. 动画组 animation   @keyframes