Java之CSS全纲

于 2022-01-23 22:02:38 发布
阅读量886 收藏 2
点赞数
分类专栏： 学习日记 文章标签： css java css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoxiaobaie/article/details/122658074
版权
这篇博客详细介绍了CSS的发展史、快速入门、选择器的重要性和使用，以及美化网页、盒子模型、浮动和定位等核心概念，特别强调了CSS在网页表现和内容分离上的优势。
摘要由CSDN通过智能技术生成

CSS 的简单介绍

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

什么是CSS

  • Cascading Style Sheet 层叠级联样式表
  • CSS : 表现:(美化网页)
    • 字体,颜色,边距,宽度,高度,背景图片,网页定位,网页浮动

发展史

CSS 1.0

CSS 2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO

CSS 2.1 浮动,定位

CSS3.0 圆角,阴影,动画…浏览器兼容性

CSS 的快速入门及优势

CSS 的简单介绍

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

什么是CSS

  • Cascading Style Sheet 层叠级联样式表
  • CSS : 表现:(美化网页)
    • 字体,颜色,边距,宽度,高度,背景图片,网页定位,网页浮动

发展史

CSS 1.0

CSS 2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO

CSS 2.1 浮动,定位

CSS3.0 圆角,阴影,动画…浏览器兼容性

CSS 的快速入门及优势

在这里插入图片描述

  • 标准创建文件格式

  • <!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的优势:

    • 内容和表现分离
    • 网页结构表现统一,可以实现复用
    • 样子十分丰富
    • 建议使用独立于html的css文件
    • 利用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>

  • 拓展:外部样式两种写法

    • 链接式

    • HTML

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

    • 导入式

    • CSS2.1 是CSS2.1 特有的

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

选择器-重要

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

基本选择器

  1. 标签选择器 : 选择一类标签 标签{}

    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 标签选择器,会选择到页面上所有的这个标签的元素*/
        h1 {
         
            color: red;
            background: green;
            border-radius: 30px;
        }
        p{
         
            font-size: 80px;
        }
    </style>
</head>
<body>

<h1>世杰</h1>
<h1>真帅</h1>
<p>真的</p>

</body>
</html>

  2. 类选择器 class : 选择所有class属性一致的标签,跨标签 .类名{}

    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式.class的名称{}
        好处,可以多个标签归类,是同一个class
        可以复用
       */
        .shijie{
         
            color: green;
        }
        .zhenshuai{
         
            color: blue;
        }
    </style>
</head>
<body>
<h1 class="shijie">标题一</h1>
<h1 class="zhenshuai">标题二</h1>
<h1 class="shijie">标题三</h1>

<p class="shijie"> 标题四</p>

</body>
</html>

  3. ID选择器 #id{}

    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* id选择器
        #id名称{}
        id必须保证全局唯一
        不遵循就近原则,固定的
        id选择器>class选择器>标签选择器
        */
        #maomaochong{
         
            color: blue;
        }
        .shikelang{
         
            color: green;
        }
        h1 {
         
            color: red;
        }

    </style>

</head>
<body>
<h1 id="maomaochong">标题一</h1>
<h1 class="shikelang">标题二</h1>
<h1>标题三</h1>
<h1>标题四</h1>
<h1>标题五</h1>

</body>
</html>

层次选择器

1.后代选择器:在某个元素的后面

  • /*    后代选择器*/
    body p{
     
        background: green;
    }

2.子选择器 : 一代

  • /*    子选择器*/
    body>p{
     
        background: blue;
    }

3.相邻选择器 同辈 对下不对上 只有一个

  • /*    相邻兄弟选择器*/
    .active + p{
     
        background: blueviolet;
    }

4.通用选择器

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

结构伪类选择器

伪类:条件

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    避免使用  class  id 选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
     
            background: cyan;
        }

        /*ul的最后一个子元素*/
        ul li:last-child{
     
            background: blue;
        }

    /*    选中p1 : 定位到父元素,选择当前的第一个元素
    选中当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效 (顺序)
    */
        p:nth-child(1){
     
            background: blue;
        }
        /*选中父元素,下的p元素的第二个  (类型)*/
        p:nth-of-type(2){
     
            background: deeppink;
        }

        /*a:hover{*/
        /*    background: black;*/
        /*}*/



    </style>
</head>
<body>
<!--<a href="">我爱你</a>-->
<!--<h1>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: lightskyblue;
            text-align: center;
            color: black;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }


        /*存在 id 属性的元素*/
        /*a[id]{*/
        /*    background: yellow;*/
        /*}*/

     /*   id = first 的元素*/
     /*   a[id=first]{*/
     /*       background: deeppink;*/
     /*   }*/


     /*   class 中 有 links 的元素*/
     /*   a[class *= "links"]{*/
     /*       background: brown;*/
     /*   }*/


     /*  选中href中以http开头的元素*/
     /*   a[href^=http]{*/
     /*       background: coral;*/
     /*   }*/

     /*   选中以pdf结尾的属性*/
        a[href$=pdf]{
     
            background: indigo;
        }




     </style>
</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com " class="links item first" id="first">1</a>
    <a href="http://www.huya.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 ">4</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf"  class="links item">7</a>
    <a href="/abc.pdf"  class="links item">8</a>
    <a href="abc.doc"  class="links item">9</a>
    <a href="abcd.doc"  class="links item last">10</a>

</p>


</body>
</html>

美化网页

为什么要美化网页

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

span标签

重点要突出的字使用span套起来

  • <meta charset="UTF-8">
    Title 
    <style>

    ​ #title2{

    ​ font-size: 50px;

    ​ }

    欢迎学习java

字体样式

  • <meta charset="UTF-8">
    Title

文本样式

  1. 颜色

    • 颜色 : RGB 三原色:红色 绿色 蓝色

      RGBA : 透明度

  2. 文本对齐的方式

    • text-align: center;

  3. 首行缩进

    • text-indent:2em

  4. 行高

    • height: 300px;

      line-height: 300px;

  5. 装饰

    • text-decoration

  6. 文本图片水平对齐

    • vertical-align: middle
  • <meta charset="UTF-8">
    Title

文本阴影和超链接伪类

阴影:

/* text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
#price{
   
    text-shadow: #0b8893 10px 0px 2px;
}

超链接伪类:

正常情况下,a,a :hover

/*默认的颜色*/
a{
   
    text-decoration: none;
    color: black;
}
/*鼠标悬浮的状态*/
a:hover{
   
    color: orange;
    font-size: 35px;

列表样式练习

#nav{
   
    width: 300px;
}
.title{
   
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/*ul li*/
/*
list-style:
none : 去掉原点
circle : 空心圆
decimal : 数字
square : 正方形
*/
ul{
   
    background: rgba(201, 191, 191, 0.92);
}
ul li{
   
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
   
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
   
    color: orange;
    text-decoration: underline;
}

背景图像应用及渐变

背景颜色

背景图片

<style>
  div{
   
    width: 1000px;
      height: 700px;
      border: 1px solid rebeccapurple;
      background-image: url("images/AAGOp0v.jpg");
  /*    默认是全部平铺的  repeat*/
  } 
  .div1{
   
      background-repeat: repeat-x;
  }
  .div2{
   
      background-repeat: repeat-y;
  }
  .div3{
   
      background-repeat: no-repeat;
  }
</style>

ul li{
   
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/微信图片_20200915184441.jpg");
    background-repeat: no-repeat;
    background-position: 200px 1px;

渐变

<!--  径向渐变 圆形渐变-->
  <style>
    body{
   
      /*background-color: #85FFBD;*/
      background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);

    }
  </style>

盒子模型及边框使用

在这里插入图片描述

  • margin : 外边距
  • padding: 内边距
  • border : 边框

边框

  1. 边框的粗细

  2. 边框的样式

  3. 边框的颜色

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="1.盒子模型/style.css" >
</head>
<body>

<div id=
最低0.47元/天 解锁文章
想学好java 的小白
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值