编程语言Java学习02之CSS

KeyichenCRAZY

已于 2022-01-23 23:42:12 修改

阅读量111

点赞数 1

分类专栏： JAVA学习路线文章标签： java css java

于 2021-11-28 19:43:34 首次发布

本文链接：https://blog.csdn.net/keyichencrazy/article/details/121596263

版权

JAVA学习路线专栏收录该内容

3 篇文章 0 订阅

订阅专栏

·一.选择器（技术咨询vx:keyichen_free)

1.1html

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
      <style>
             h1{                                  
                  color:red;
                }
       </style>
</head>
<body>
         <h1>学java</h1>
         <p>听</p>
</body>
</html>

1.2CSS的4种导入方式

内部样式；

/*第一种*/
<h1 style = "color:red">内容</h1>;

/*第二种*/
<style>
	  h1{
         color:red;
	     }
</style>

外部样式；

/*在外部编写的代码*/
<style>
   h1{
       color:red;
      }
</style>
/*在内部编写的代码*/
<link rel = "stylesheet" href = "css/style.css">     /*href = "文件名"*/

1.3三种基本的选择器（重点）

作用：选择页面上面的某一个元素

基本选择器：

标签选择器
类选择器 class
id 选择器

<!DOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
       
      <style>
               h1{                               /*1.标签选择器，自动改变这个页面所有h1变迁的字体颜色*/
                              color:red;
                   }
               .qiang{                          /*2.类选择器，可以使这个页面class的改*/变，跨标签

                  }
               #wo{                             /*3.id选择器，必须保证全局唯一*/
                  
                  }
       </style>
</head>
<body>
  
<h1 class = "qiang" id = "wo">学java</h1>
<h1 class = "qiang">学JAVA</h1>
<p>听</p>

</body>
</html>

/*优先级：id > class > 标签选择器

1.4层次选择器（四种）

后代选择器：

body p{
       background:  red;
       }

2.子悬选择器

 body>p{
        background:red;
        }

3.相邻选择器

.active+p{                    /*只有p2颜色发生改变*/
          background:  red;
          }

4.通用选择器

.active~p{                 /*用class~来表示，active下面的所有同级的都变化*/
        background:red;
}

例：
<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
      <style>
             body p{
                    background: red;
                   }
             body>p{
                    background:red;
                    }
             .active + p{               /*只有p2颜色发生改变，只有下面相邻的一个*/
                     background:   red;
                   }
             .active~p{                 /* 与p相邻同级且在p下面的所有改变*/
                  background: red;
              }
      </style>
</head>
<body>
           <p class = "active">p1</p>   
           <p>p2</p>
           <p>p3</p>
            <ul>
                <li>
                     <p>p4</p>
                </li>
                <li>
                      <p>p5</p>
                </li>       
                <li>
                      <p>p6</p>
                </li>

</body>
</html>

1.5结构伪类选择器

（会用到的四种）


/*ul的第一个子元素*/
ul li:first-child{
         background:red;
         }
/*ul的最后一个子元素*/
ul li:last-child{
}
/*选中p1：定位到父元素，选择当前的第一个元素，选择当前p元素的父级元素,且是当前元素才能生效！顺序*/
p:nth-child(1){
           }
/*选中父元素下的p元素的第二个，类型*/
p:nth-of-type{
}

例：
<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
       /*避免使用id 和 class 选择器*/ 
      <style>
       /*ul的第一个子元素*/
            ul li:first-child{
                 background:red;
            }
      /*ul的最后一个子元素*/
            ul li:last-child{
            }
      /*选中p1：定位到父元素，选择当前的第一个元素，选择当前p元素的父级元素,且是当前元素才能生效！顺序*/
           p:nth-child(1){
           }
        /*选中父元素下的p元素的第二个，类型*/
           p:nth-of-type{
          }
      </style>
</head>
<body>
           <p class>p1</p>   
           <p>p2</p>
           <p>p3</p>
           <ul>
                <li>p4</li>
                <li>p5</li>       
                <li>p6</li>
</body>
</html>

1.6属性选择器（重要)

1.属性名

a[id]{
      background: red;
      }

2.属性名加属性值

a[id=first]{      
          }

3.带有某种元素

a[class*= link]{   
          }

4.以上面开头，以上面结尾

a[href^= http]{     
          }

开头的：^=
结尾的：$=

例：

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
       /*避免使用id 和 class 选择器*/ 
      <style>
       /*存在id的元素     a[]{}*/
          a[id]{
               background: red;
          }
       /*属性名=属性值*/
          a[id=first]{
               
          }
      /*  class中带有某种links的属性*/
      /* *= 是包含这个元素，= 是绝对等于*/
      /*只要class中带有link的都会随之改变*/
          a[class*= link]{
               
          }
      /*选中href中以http开头的元素*/
           a[href^= http]{
               
          }
      </style>
</head>
<body>

<p class = "demo">
      <a href = "http://www.baidu.com" class = "link item" id = "first">1</a>
</body>
</html>

二.美化网页的元素

2.1字体样式

span: 约定熟成的，用来表示重要突出的字，使用span套起来

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
       
      <style>
/*
        font-famoily:     字体类型
        font-size:        字号
        font-weight:      字体粗细
*/
      body{
          font-famoily:楷体;
          font-size:
          font-weight: 
      }
      body{
          font:obligue lighter 16px 楷体;
      }
      </style>
</head>
<body>


</body>
</html>

2.2文本样式

颜色
文本对齐的方式
首行缩进
行离 line-height 单行文件上下对齐ww
装饰 : text-decoration
文本图片水平对齐： vertical-align:middle;

颜色：       
      <style>
         /*
             单词
             rgb
             rgba
         */
         body{
         color: rgb(  ,    ,);
         color: rgba(   ,   ,   ,0 ~ 1);    /*透明度*/
         }
</style>

文本对齐的方式:
<style>
        body{
        text-align:left;    /*排版*/
        }
</style>

首行缩进：
<style>
        body{
        text-indent:2em;    /*首行缩进2格，px是指像素*/
        height:300px;
        line- height:300px; /*行高和块的高度一致的时候就可以实现上下居中*/
        }
</style>

2.3文本阴影和超链接伪类

伪类：

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
       <style>
       /*默认的颜色*/
       p{
            
       }
       /*鼠标悬停的颜色*/
       p：hover{
            
       }
       /*鼠标未激活的颜色*/
       p：active{
            
       }

       </style>
</head>
<body>
    
<p> hhel</p>

</body>
</html>

阴影:

<style>
       body{
       text-shadow       /*text-shadow:阴影颜色，水平偏移，s
       }
</style>

2.4列表

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
<style>
/*ul li
list-style:
     none:去掉原点
     circle:空心圆
     decimal:数字
*/
ul li{
     height:30px;
     list-style:none;
}

</style>

</head>
<body>
<ul>
   <li href= "#">hello</li>
   <li href= "#">hello</li>
   <li href= "#">hello</li>
</ul>
</body>
</html>

2.5背景

背景颜色

背景图片

<style>

div{
     width:
     height:
     background-image url("images/tx.jpd");/*默认是全部平铺*/
}
.div1{
     background-repeat:repeat-x;/*水平平铺*/
}
.div2{
     background-repeat:repeat-x;/*竖直平铺*/
}
.div3{
     background-repeat:no-repeat;/*不平铺*/
}
</style>

.title{
     /*颜色  图片 图片位置    平铺方式*/
    background: red url("../image/d.gif") 270px 10px no-repeat;
}

2.6渐变

三.盒子模型

3.1什么是盒子

margin:外边距

padding:内边框

border:边框

3.2边框

1.边框的粗细

2.边框的样式

3.边框的颜色

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
<style>
    #box{
          width:200px;
          border:粗细，样式，颜色;
          margin:0 auto;  /*上下左右*/
    }
div:nth-of-type(1)>input{
     border:3px solid black;       /*solid 实线 dash 虚线*/
}
</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>
    </from>
</div>

</body>
</html>

3.3盒子的计算

决定一个元素的大小：

margin + border + padding + 内容

3.4圆角边框

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
<style>
/*        圆圈：半径 = 圆角
*/
 div{
     width: 100px;
     height: 100px;
     border: 10px solid red;
     border-radius: 10px;     /*设置圆角边框*/
}
</style>

</head>
<body>

<div >
    
</div>

</body>
</html>

3.5阴影

四.浮动

4.1.标准文档流

块级元素：独占一行

行内元素：不独占一行

span a image ..

行内元素可以被包含在一行，块级元素不可

4.2.display

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
<style>
/*
             block :块内元素
             inline:行内元素
             inline-block:
             none:
*/
 div{
     width: 100px;
     height: 100px;
     border:
     display:inline-block:
       
}
</style>

</head>
<body>

<div >
    
</div>
<span>
</span>

</body>
</html>

4.3.float

float: left
float: right

4.4父级元素塌陷问题

clear:

clear:left;     /*左边不允许有浮动元素*/
clear:right;    /*右边不允许有浮动元素*/
clear:both;    /*两边不允许有浮动元素*/

解决方法：

1.增加父级元素的高度

2.增加一个空的div元素来清除(但是代码中尽量避免空的div)

3.overflow

/*在父级元素中增加一个：*/
overflow:scroll;    /**产生了滚动条*/

overflow:scroll; /*产生了滚动条/

4.在父类中增加一个伪(推荐)

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

4.5对比

display:

无法确定元素的位置，方向不可控制

float:

可以改动元素的位置，会同理标准文档流，但是要解决父级塌陷的问题

五.定位

5.1相对定位

position: relative;

bottom
top
left
right

发生相对定位依然在标准文档流

5.2绝对定位

position: absolute

1.没有父级元素的情况下，是基于浏览器定位

2.相对于父级元素定位

3.在父级元素范围内移动

（不在标准文档中，原位置变化）

5.3固定定位

5.4z-index

层次

5.5opacity

许有浮动元素*/
clear:right; /右边不允许有浮动元素/
clear:both; /两边不允许有浮动元素/




解决方法：

1.增加父级元素的高度

2.增加一个空的div元素来清除(但是代码中尽量避免空的div)

3.overflow

```css 
/*在父级元素中增加一个：*/
overflow:scroll;    /**产生了滚动条*/