ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

2021-07-27

2021-07-27 20:33:38  阅读:87  来源: 互联网

标签:27 07 color text 元素 2021 background border 选择器


CSS

如何学习

  1. CSS是什么
  2. CSS怎么用
  3. CSS选择器(重点 + 难点)
  4. 美化网页(文字,阴影,超链接,列表…)
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画(特效效果)

什么是CSS

  • Cascading Style Sheet 层叠级联样式表

  • CSS:表现(美化网页)

  • 字体,颜色,边框,高度,宽度,背景图片,网页定位,网页浮动…

发展史

  • CSS1.0
  • CSS2.0 div(块)+ css,HTML与CSS结构分离的思想,网页变得简单,SEO
  • CSS2.1 浮动,定位
  • CSS3.0 圆角 ,动画… 浏览器兼容性…

快速入门

  • style

基本入门

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

建议使用这种规范

在这里插入图片描述

CSS的优势

  1. 内容和表现分离。
  2. 网页结构表现统一,可以实现复用
  3. 样式十分的丰富
  4. 建议使用独立于html的css文件
  5. 利用SEO,容易被搜索引擎收录

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>

拓展:外部样式两种写法

  • 链接式:

    • <!--外部样式-->
      <link rel="stylesheet" href="css/style.css">
      
  • 导入式:

    • @import 是CSS2.1特有的(现在很少用)

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

选择器

作用:选择页面上的某一个或者某一类元素

基本选择器

  1. 标签选择器:选择一类标签;用法格式: 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*标签选择器,会选择到页面上的这个标签的元素*/
    h1{
      color: red;
      background: #3cbda6;
      border-radius: 24px;
    }
    p{
        font-size: 80px;
    }
  </style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>听狂神说</p>
</body>
</html>
  1. 类选择器 class:选中所有class属性一致的标签,跨标签;用法格式:.类名{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*类选择器的格式 .class的名称{}
    好处:可以多个标签归类,是同一个class(名称取一样就行)可以复用
    */
    .这个值可以为任何东西{
        color: #252626;
    }
    .随便取的{
      color: #ea0606;
    }
  </style>
</head>
<body>
<h1 class="这个值可以为任何东西">标题1</h1>
<h1 class="随便取的">标题2</h1>
<h1 class="随便取的">标题3</h1>
<p class="这个值可以为任何东西">P标签</p>
</body>
</html>
  1. Id选择器:全局唯一! 用法格式:#id名{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*id选择器 : id必须保证全局唯一!
      #id名称{}
      不遵循就近原则,优先级是固定的
      id选择器 > 类选择器 > 标签选择器
    */
    #随便取的{
      color: #ea0606;
    }
    .style1{
      color: #3cbda6;
    }
    h1{
      color: green;
    }
  </style>
</head>
<body>

<h1 id="随便取的">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

优先级:id > class > 标签

层次选择器

  • 后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你

    • /*后代选择器*/
          body p{
            background: red;
          }
      
  • 子选择器:一代 , 儿子

    • /*子选择器*/
          body>p{
            background: #3cbda6;
          }
      
  • 相邻兄弟选择器:同辈

    • /*相邻兄弟选择器:只有一个,相邻向下*/
          .active + p{
              background: green;
          }
      
  • 通用选择器

    • /* 通用兄弟选择器 当前选中元素的向下的所有同级(兄弟)*/
          .active~p{
            background: green;
          }
      

结构 伪类选择器

  • 伪类:加了些条件
<style>
    /*选中ul的第一个子元素*/
    ul li:first-child{
      background: #ea0606;
    }
    /*选中ul的最后一个子元素*/
    ul li:last-child{
      background: green;
    }
    /*选中 p1 : 定位到父元素 ,选择当前的第一个元素
  选择当前p元素的父级元素,选中父级元素的第一个元素,并且是当前元素才生效(按顺序选择第一个)
  */
    p:nth-child(1){
      background: aqua;
    }
    /*选中父元素下的p元素的第二个元素,选同类型的第二个*/
    p:nth-of-type(2){
      background: bisque;
    }

在这里插入图片描述

属性选择器(常用)

  • 将Id + class 结合了
<!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: blue;
      text-align: center;
      color: gainsboro;
      text-decoration: none;
      margin-right: 5px;
      font: bold 20px/50px Arial;
    }
    /*第一种[]里面只写属性的名,就会选中所有存在这个属性的元素*/
    /*第二种[]里面可以写属性名 = 属性值(正则)就会选中存在这个属性值的元素
      = 绝对等于
      *= 包含这个元素
      ^= 以这个开头
      $= 以这个结尾
    */
    /*选中存在id属性的元素   a[]{}*/
    /*a[id]{*/
    /*  background: yellow;*/
    /*}*/
    /*选中id=first的元素*/
    /*a[id=first]{*/
    /*    background: #31c239;*/
    /*}*/
    /*class中含有links的元素*/
    /*a[class*="links"]{*/
    /*  background: yellow;*/
    /*}*/
  /*  选中href中以http开头的元素*/
  /*  a[href^=http]{*/
  /*      background: yellow;*/
  /*  }*/
    a[href$=doc]{
        background: yellow;
    }
  </style>
</head>
<body>
<p class="demo">
  <a href="http://www.baidu.com" class="links item first" id="first">1</a>
  <a href="http://www.baidu.com" class="links item active" target="_blank" title="test">2</a>
  <a href="images/123.html" class="links item ">3</a>
  <a href="images/123.png" class="links item">4</a>
  <a href="images/123.jpg" class="links item">5</a>
  <a href="abc">6</a>
  <a href="/a.pdf">7</a>
  <a href="/abc.pdf">8</a>
  <a href="abc.doc">9</a>
  <a href="abc.doc" class="links item last">10</a>
</p>
</body>
</html>

在这里插入图片描述

美化网页元素

为什么要美化网页

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

span标签:重点突出的字,使用span套起来

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

字体样式

<!--
font-family:字体
font-size:   字体大小
font-weight: 字体粗细
color:       字体颜色
-->
  <style>
    body{
      font-family:"Arial Black",楷体;
      color: #ea0606;
    }
    h1{
      font-size: 50px;
    }
    .p1{
      font-weight: bold;
    }
  </style>

文本样式

  • 颜色:color rgb rgba
  • 文本对齐的方式 text-align = center(居中)
  • 首行缩进 text-indent: 2em(首行缩进两个字符)
  • 行高 line-height:(行高,和块的高度一致,就可以让单行文字上下居中)
  • 装饰 text-decoration:
  • 文本图片水平对齐:vertical-align:middle (文本和图片作为互相的参照物)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
颜色:
    单词
    RGB 0~F
    RGBA  A:0~1

text-align: 排版,居中:center
text-indent: 段落,首行缩进:2em
height: 300px;
line-height: 300px;
    行高,和块的高度一致,就可以上下居中
-->
  <style>
    h1{
      color: rgba(0,255,255,0.9);
        text-align: center;
    }
    .p1{
        text-indent: 2em;
    }
    .p3{
        background: blue;
        height: 300px;
        line-height: 300px;
    }
    /*下划线*/
    .p01{
        text-decoration: underline;
    }
    /*中划线*/
    .p02{
        text-decoration: line-through;
    }
    /*上划线*/
    .p03{
       text-decoration: overline;
    }
    /*a标签默认有下滑线,去掉*/
    a{
        text-decoration: none;
    }
    /*<!--*/
    /*水平对齐~ 要有参照物*/
    /*-->*/
     img,span{
         vertical-align:middle;
     }
  </style>
</head>
<body>
<a href="">123</a>

<p class="p01">123123</p>
<p class="p02">123123</p>
<p class="p03">123123</p>
<h1>故事介绍</h1>
<p class="p1">
  平静安详的元泱境界,每隔333年,总会有一个神秘而恐怖的异常生物重生,它就是魁拔!魁拔的每一次出现,都会给元泱境界带来巨大的灾难!即便是天界的神族,也在劫难逃。在天地两界各种力量的全力打击下,魁拔一次次被消灭,但又总是按333年的周期重新出现。魁拔纪元1664年,天神经过精确测算后,在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到,由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快,天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此,找到魁拔,彻底消灭魁拔,再一次成了各地热血勇士的终极目标。
</p>
<p>
  在偏远的兽国窝窝乡,蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼,却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天,消灭魁拔的征兵令突然传到窝窝乡,村长趁机怂恿蛮大人和蛮吉从军参战。然而,在这个一切都凭纹耀说话的世界,仅凭蛮大人现有的一块冒牌纹耀,不要说参军,就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定,混上那艘即将启程去消灭魁拔的巨型战舰,直接挑战魁拔,用热血换取至高的荣誉。
</p>
<p class="p3">
  Whenever you need me, I’ll be here.
    Whenever you’re in trouble, I’m always near.
    Whenever you feel alone, and you think everyone has given up…
    Reach out for me, and I will give you my everlasting love.
</p>
<img src="images/2021-07-27_161957.jpg" alt="">
<span>safdfdsa</span>
</body>
</html>

阴影(一般用不到)

/*text-shadow: 阴影颜色,水平偏移,垂直偏移,阴影半径*/
        #price{
            text-shadow: #06eaea 10px 10px 1px;
        }

超链接伪类

正常情况下用这些就行,a , a:hover

/*默认的颜色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬浮的状态(重点用这个)*/
        a:hover{
            color: orange;
            font-size: 20px;
        }

列表

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

背景

  • 背景颜色
  • 背景图片
<style>
    div{
      width: 1000px;
      height: 700px;
      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>

渐变

  • 可以通过别人的网站来实现
background-color: #4158D0;
background-image: linear-gradient(302deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

盒子模型

什么是盒子模型

在这里插入图片描述

margin:外边距

padding:内边距

border:边框

边框

  1. 边框的粗细
  2. 边框的样式
  3. 边框的颜色

border(边框): 粗细 , 样式,颜色

<style>
    /*body总有一个默认的外边距是margin 0 ,初始化时常见的操作*/
    /*h1,ul,li,body{*/
    /*  margin: 0;*/
    /*  padding: 0;*/
    /*  text-decoration: none;*/
    /*}*/
    #box{
      /*border: 粗细 , 样式,颜色*/
      width: 300px;
      border: 1px solid red;
    }
    h2{
      font-size: 16px;
      background-color: #3cbda6;
      line-height: 30px;
      margin: 0;
    }
    form{
      background: #3cbda6;
    }
    div:nth-of-type(1) input{
        border: 3px solid black;
    }
    div:nth-of-type(2) input{
      border: 3px dashed orange;
    }
    div:nth-of-type(3) input{
      border: 3px dashed #0040ff;
    }
  </style>

内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--外边距的妙用 :居中元素
 margin: 0 :上下左右都为0
 margin: 0 1px:上下为0,左右为1
 margin: 0 auto;上下为0,左右居中
-->
  <style>
    #box{
      /*border: 粗细 , 样式,颜色*/
      width: 300px;
      border: 1px solid red;
      margin: 0 auto;
    }
    h2{
      font-size: 16px;
      background-color: #3cbda6;
      line-height: 30px;
    }
    form{
      background: #3cbda6;
    }
    input{
      border: 1px solid black;
    }
    div:nth-of-type(1){
      padding: 10px ;
    }
  </style>
</head>
<body>
<div id="box">
  <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>

标签:27,07,color,text,元素,2021,background,border,选择器
来源: https://blog.csdn.net/JiangHuFengZi/article/details/119152274

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有