前端相关知识(CSS)(1)(美化页面效果)

写个堆排

已于 2023-03-28 19:49:29 修改

阅读量2.8k

点赞数 19

文章标签： java-ee java

于 2022-04-12 10:22:34 首次发布

本文链接：https://blog.csdn.net/weixin_61518137/article/details/124086977

版权

1)HTML只是描述了页面的结构和内容，也就是骨

2)CSS描述的是页面的样式，也就是页面具体长成什么样子，也就是皮

3)具体来说就是就是描述了任意一个网页的元素，大小，位置，字体，颜色，背景，边框，引入CSS就可以让页面变得好看

4)每一个CSS的代码包含着两部分:选择器+对应的应用的属性

4.1)上面就是一个最基础的CSS代码，p就是选择器，此处就表示选择页面中的所有P标签；

{}里面是键值对结构，每一个键值对就对应着一个CSS的属性

4.2)键值对之间使用";"来进行分割，习惯上每一个键值对之间会独占一行

4.3)键和值之间要使用冒号来进行分割，习惯上会在冒号后面加上一个空格

4.4)/* */这是CSS中的注释，CSS是不支持//这样的注释

5)CSS代码可以放在HTML文件里面，通常是放在style标签里面，然后style标签可以放在HTML文件里面的任意位置

6)color是设置字体颜色的，font-size是设置字体大小的

一)CSS的引入方式:

1)内部样式CSS，在style标签里面，style标签可以放到head中，也可以放到其他位置，也可以存在多个style标签

2)行内CSS，在元素里面有一个style属性，样式针对当前元素生效，优先级比内部样式更高，不避写选择器了

2.1)当前这种写法是通过html标签中的style样式来进行应用一些样式

2.2)当前这种内联样式，只是属于一种比较特殊的用法，通常会搭配JS来进行使用，但是这种写法只是适合于当前样式特别简单的情况，如果样式复杂，这里就会显示的很乱

2.3)内联样式只是针对于当前元素进行生效，不需要写选择器，也不用选{}，直接写CSS属性即可；
<div style="font-size:30px; color:red">helloworld</div>
//设置div里面的字体设置成红色,字体大小是30px
3)外部CSS，这是把CSS代码单独提取出来，放到一个.CSS文件里面，然后再从HTML代码里面，通过link标签来引入该CSS文件，在HTML中通过link标签引入CSS文件；

这种方式可以让多个HTML页面共用同一份样式，比如说写一个网站，这个网站里面可能会有很多的页面，但是很多页面的样式都是相似的

这种link标签，一般习惯于放在html的head标签里面，这个标签可以存在多份，可以通过多个link标签来引入不同的CSS

同时在开发者工具里面也会提醒我们，这个样式是在哪一个CSS来进行引入的
 <link rel="stylesheet" href="test.css">
后缀名是.css
1)当浏览器首次访问网站的时候，就会下载这些CSS到本地，后面进行第二次访问的时候，这些CSS就不用进行二次下载了，这些CSS就会存放在浏览器的缓存里面，他所存在的意义就是为了提高访问速度

2)真实的网站，CSS越长，从服务器下载的内容就越多，就越消耗带宽，所以我们要减少空格和缩进；带宽是很贵的

3)如果说针对CSS样式多了一些换行，虽然对于程序员友好了，但是整体的CSS文件会变大，由于CSS文件都是通过网络传输传输给浏览器的，然后由浏览器来进行解析的，如果说CSS文件变大了，就更吃网络带宽，就更影响效率，JS不光会把换行缩进去掉，还会把长的变量名给去除；

4)因此当我们通过开发者工具，去看其他的CSS代码基本上都是紧凑风格，通过前端开发工具进行打包，但是我们在开发阶段的代码基本上都是使用的是宽松的换行风格；

5)HTML和CSS都是不区分大小写的，CSS中通常使用颈柱命名法，通常加上-来区分不同的单词

二)CSS基础选择器

一)标签选择器:

选中一类标签，例如上图中的选中P标签，就会让当前所有的P标签都会被选中，会根据标签名，把当前所有的标签都进行选中；

二)类选择器：

2.0)在CSS中创建类来指定哪些元素要遵守该样式，开头中的.表示类；.后面中的部分是类的名字；一个类可以被多个标签来使用，一个标签也可以使用多个类；

2.1)通过类选择器，就可以随心所欲地进行选择任意想要的元素，但是从理论上来说只是需要一种选择器就足够了

2.2)首先我们需要在CSS代码中创建一个类名，在对应的html元素中，通过class属性来引入这个类名，此时具有该类名的元素，就都会应用上相关的CSS属性
<div class="green font">咬人猫</div>类和类之间用空格来分开
<div>hhhh<div>
类选择器以.进行开头,后面是类的名字
<style>
.green{
}
.font{
}
</style>
现在我们需要来做一个场景:class类相当于是分类

将下面的第一个P标签和第二个P标签字体放大并进行变色，剩下的两个p标签不变:

三)id选择器:

每一个html元素都有一个id属性，并且要求这个属性是页面中唯一的值，当id选择器在创建的时候是需要#来进行开头的，id选择器相当于是按照身份证号来查找

我们需要先给被选中的元素加上一个id属性，因为id在一个页面中是不可以重复的，因此id选择器只能选中

四)通配符选择器:选中页面所有元素
*{  将页面中的所有字体大小设成30像素，背景颜色设成蓝色
        font-size:30px;
        background-color:blue;
    }
1)最大的用途就是取消浏览器的默认样式

2)一个专业的前端开发工程师，在开发过程中，有相当一部分是要处理浏览器当中的兼容性(写一份代码，在不同的浏览器上面有不同的效果)

三)复合选择器:

1)后代选择器:使用空格来进行分割

先指定一个父亲元素，然后再指定一个子元素，后代不一定非的是子元素，还可以是孙子元素，况且后代选择器不一定非得是标签选择器的组合，还可以是任意的基础选择器的组合用空格来进行分割

选择器1 选择器2{}；

1.1)选择器之间必须要有空格

1.2)选择器1和选择器2都可以是标签选择器，类选择器或者是ID选择器

2)后代选择器:通过多个选择器的组合，能够选择某一个元素里面的子元素

通过多个选择器的组合，可以进行选择某一个元素里面的子元素
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    ul li{
选中页面中ul标签下面的所有li标签
        color:red;
        font-size:30px;
    }
    ol .user{
选中页面中的ul标签中是有class等于name的元素
        color: blue;
        font-size:40px;
    }
    div #name{
选中页面中的div标签中的id是name的元素
        color: green;
        font-size: 50px;
    }
    </style>
</head>
<body>
  <ul>
    <li>咬人猫</li>
    <li>兔总裁</li>
    <li>阿叶君</li>
  </ul>
  <ol>
    <li class="user">咬人猫</li>
    <li class="user">兔总裁</li>
    <li class="user">阿叶君</li>
  </ol>
  <div>
    <p id="name">咬人猫</p>
    <p id="name">兔总裁</p>
    <p id="name">阿叶君</p>
  </div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table tr td{
             text-align: center;
             color:red;
        }
    </style>
</head>
<body>
  <table border="5px" height="300px" width="300px" cellspacing="0px">
    <tr>
       <th>姓名</th>
       <th>电话号码</th>
       <th>密码</th>
    </tr>
    <tr>
        <td>李佳伟</td>
        <td>12503487</td>
        <td>12503487</td>
    </tr>
    <tr>
        <td>周韵杠</td>
        <td>1257</td>
        <td>12587</td>
    </tr>
  </table>
</body>
</html>
这里的意思是先找到类名是list的元素
然后再找到里面的li标签
再找到里面的a标签
但是要注意li不一定是是.list的子元素
也可以是孙子元素;a不一定是list的子元素
也可以是孙子元素,所以最终可以把li去掉
 .list li a{
        color:green;
        font-size:40px;
      }
3)子选择器:

选择器1>选择器2
先找选择器1，再找选择器2，选择器2只能是选择器1的子元素

也就是说选择器2不能是选择器1的孙子元素

举个例子将ul标签对应的li子标签下面的a标签变成绿色并且将字体放大
<ul class="list">
    <li>
        <a href="../textKK/like.png" target="_blank">点击我跳转到世外桃源</a>
    </li>
 </ul>
.list>a{
        color:green;
        font-size:50px;
    }
1)上面这么写元素是不会被选中的，因为class是list对应的标签的子标签并不是a标签，而是li标签；
2)先去找class属性是.list对应的标签，再去找.list对应的子标签li，再去找li对应的子标签a
.list>li>a{
        color:green;
        font-size:50px;
    }

在下图中:将所有的咬人猫变成红色:

<div class="cat">
      <ul>
          <li><a href="#">咬人猫</a></li>
          <li><a href="#">咬人猫</a></li>
          <Li><a href="#">咬人猫</a></Li>
      </ul>
  </div>

.cat a{
        color:red;
    }
.cat ul li a{
        color:red;
    }
 .cat ul a{
        color:red;
    }
 .cat>ul>li>a{
       color:red;
   }
li>a{
color:red;
}
li a{
color:red;
}

4)并集选择器:并列的写多个选择器，期间使用逗号来进行分割

选择器1，选择器2{}；

这里的并集选择器可以写简单的选择器，也是可以写复合的选择器

下面是将所有表中字段的值变成红色
  <style>
      tr>th,tr>td{
        color: green;
        font-size: 30px;
      }
    </style>
</head>
<body>
  <table border="5px" height="300px" width="300px" cellspacing="0px">
    <tr>
       <th>姓名</th>
       <th>电话号码</th>
       <th>密码</th>
    </tr>
    <tr>
        <td>李佳伟</td>
        <td>12503487</td>
        <td>12503487</td>
    </tr>
    <tr>
        <td>周韵杠</td>
        <td>1257</td>
        <td>12587</td>
    </tr>

5)伪类选择器:

5.1)链接伪类选择器:和a标签来进行搭配使用:link/visited/hover/active{}
  a{
       font-size:30px;
   }
   a:link{
       color:black;
   }
   a:visited{
   color:yellow;
   }
   a:hover{
       color:green;
   }
    a:active{ 
    color:red;
   }
<a href="http://www.baidu.com" target="_blank">我是一个超链接</a>
1)从来没有被访问过：link；

2)已经被访问过：visited(1，2条是专门针对a标签来说的）

3)鼠标悬停:hover(没有按鼠标)，鼠标悬停的时候，应用这个样式

4)活动链接:鼠标按下的时候，应用于这个样式:active，(3，4针对任何的标签都生效)；

上面主要是进行描述鼠标被按下的时候所进行执行的样式

5.2)伪类选择器中的一种，获取焦点的时候被选中，它是专门针对输入框来说的，像哪个输入框里面写元素，里面的字体就可以显示成指定的颜色,当我们的鼠标移动到别的输入框之后，字体就变成了别的颜色
input:focus
   {
       color:red;
   }
<div>
    <input type="text">
    <input type="text">
    <input type="text">
</div>

四)常见的CSS属性:

CSS 语法 (w3school.com.cn)

一)字体的设置以及文本属性:

一)设置字体类型:

font-family:" "，宋体，隶书，微软雅黑，里面可以设置成汉字

对于font属性是可以继承的，子元素会继承父类元素的相关属性；
  <style>
        body{
            font-family:"黑体";
        }
  </style>
<body>
<div>
    中国我爱你
</div>
</body>
1)在body中设置的字体，div中也是可以生效的，有关于font相关的CSS属性是可以进行继承的，子元素会继承父类元素的相关属性

2)如果需要在某一个元素中使用不同的字体，我们就可以针对这个元素来进行单独设置字体，此时新的字体样式会自动的覆盖掉继承于父元素的字体样式

二)设置标签中的字体大小:font-size:" "，里面的单位是像素；

三)字体的粗细:font-weight:取值有两种风格，一种是数字，一种是取值

normal:定义标准的字符

bold:定义粗体字符

bolder:定义更粗的字符

lighter:定义更细的字符，从100到900表示有粗到细的字符，数字越大越粗

400等同于normal，700等同于bold

四)font-style是倾斜样式，很少把正常的字体倾斜，而是把倾斜的字变成正规的，属性值直接变成nomal即可；

em标签就是自动带斜体的
em{
            font-family:"宋体";
            font-size:30px;
            font-style:normal;
        }

五)文本颜色:color属性

5.1)表示形式:color:rgb(A,B,C)

5.1.1)A,B,C都是表示0-255范围内的数值，表示颜色的范围，A为红，B是green,C是蓝色，

其中0就表示这个分量没有值，255就是直接把这个分量拉满；

5.1.2)还可以加上这样一个属性rgba(A,B,C,D)，D表示透明度，它的范围是0-1的小数，通过透明度，可以实现一些半透明的效果，1表示不透明，在网页中啥也看不到，0表示半透明；

三个分量都调成255，就会得到黑色

5.2)我们也可以直接显示颜色，red，blue；

5.3)这里我们要区分一下背景颜色background-color和color

color是把对应的文字设置想要的颜色

5.4)但是backgrond-color是设置文字本后面的颜色，并可以通过height和width来设置背景颜色覆盖的范围，同时rgba也可以搭配背景颜色来使用，可以实现半透明效果

也可以写成16进制数字来进行表示，我们用#进行开头，#00ff00

00表示没有，ff表示拉满

5.5)但是这对于16进制的写法，可能会有缩写

必须是形如#XXYYZZ的形式可以缩写成#XYZ

00ff00--->0f0
p{
     background-color:red;
     height:300px;
     width:400px;
   }

五)文本对齐(左对齐，右对齐，居中对齐)

1)主要是控制div或者是一些其他标签的文字在浏览器的整个页面上或者是背景区域快是靠左对齐还是靠右对齐

2)text-algin不光可以控制文字对齐，也是可以控制文字或者图片等在浏览器界面上元素居中或者靠左对齐

3)这里的文本对齐是通过text-align来实现的，但是他只可以控制水平方向的对齐，只可以控制一行；如果想要控制在水平方向1/3位置处对齐，就要考虑其他的CSS标签；

4)下面我们写的样式，三个div标签，是独占三行的，最外边好套着一个div标签

5)text-align只能控制元素所在的那一行是水平居中，还是垂直居中
   .father{
            background-color:green;
            width:500px;
            height:500px;
        }
        .one{
            text-align:left;
        }
        .two{
            text-align:right;
        }
        .three{
            text-align: center;
        }
<div class="father">
    <div class="one">左对齐</div>
    <div class="two">右对齐</div>
    <div class="three">居中对齐</div>
</div>
再次举个例子:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            background-color:red;
            height:100px;
            width:500px;
            text-align:left;控制元素在背景块所在行的最左面
        }
        .two{
            background-color:orange;
            height:100px;
            width:500px;
            text-align:center;控制元素在背景块里面所在行的的中间
        }
        .three{
            background-color:blue;
            height:100px;
            width:500px;
            text-align:right;控制元素在背景块里面放在当前行所在的最右边
        }
    </style>
</head>
<body>
<div class="one">你好Java</div>
<div class="two">你好Python</div>
<div class="three">你好C++</div>
</body>
</html>

六)文本样式:text-decoration:这里是不需要加双引号的；

underline:下划线 overline:上划线 none:啥都没有 line-through:删除线；
.one{
       text-decoration:none;
      ;
   }
   .two{
       text-decoration:underline;
   }
   .three{
       text-decoration:overline;
   }
   .four{
       text-decoration:line-through;
   }
<div class="one">这是正常情况</div>
<div class="two">下划线</div>
<div class="three">上划线</div>
<div class="four">删除线</d
下划线上划线最大的用法，并不是说给这些元素加上这些线，而是把已经带了线的元素去除掉，例如：
a{
       text-decoration:none;
       color:red;
   }
<a href="#">我是一个超链接</a>
七)文本缩进：

应用场景:我们一般希望在第一行中可以缩进两个字，我们就用text-indent来表示；
 p{
       font-size:39px;
       text-indent:46px;//2em缩进两个字,1em是20px
   }
1)这个属性只是控制段落的首行缩进，其他行是不会影响的，单位可以使用px或者是em

2)使用em是更好的，1em就表示当前元素的文字大小，是相当于当前元素的文字大小

假设当前的p标签里面的文字大小是16px，那么1em=16px，2em=32px，0.5em=8px

3)text-indent缩进可以是负数，表示反向缩进，最终就会导致文字冒出去了

八)行高:

1)行高=字体大小+行间距

2)假设现在有三行文字，第一行最顶端到第二行最顶端的距离就是行高；相当于是文字本身的高度加上行间距；

3)上一个元素的底部到下一个元素的最下端

行高，其实本质上来说，就是顶线到顶线的距离，也是底线到底线的距离，也是中线到中线的距离，也是基线到基线的距离

行间距:第一行文字最下面底线的距离到第二行基线的距离就是行间距

快捷键小技巧:

1)在VS中按下.one以进行回车，就生成了一个div标签况且他的class属性是one

2)这样就可以进行调节行高的尺寸

4)其实在进行设置行高的时候，其实是会对上下两个方向都会产生影响，因为上下的两个边距是相等的；

正是因为行高是上下均等，因此我们就可以基于行高来实现垂直方向文本的居中

水平方向文本居中:text-align:center;

垂直方向剧中:line-height: center;

创建一个div标签设置背景色，来实现文字在背景色里面的水平居中和垂直居中
   .one{
        height:200px;
        width:150px;
        text-align: center;
        line-height:200px;
        background-color:red;
       }
总结:

使用text-algin:center来进行实现标签中的文本在背景区域中的水平方向上居中

使用 line-height:XXpx来实现标签中的文本在背景区域中的垂直方向剧中

这里面的像素的具体设置XX===背景的宽度

1)控制文字水平居中:text-align:center;

2)控制文字垂直居中:line-height:父亲元素高度

前两个属性一般是设置按钮中的文字在按钮中间，或者表格中的文字居中

两者搭配可以控制处置水平居中

text-align是控制文字水平方向对齐，line-hight控制文字垂直方向对齐；

两者相结和，就可以控制我们想要的文字在中心位置；通过设置行高=父亲元素的高度，就可以实现文字垂直居中的效果；

这两种方法发都是针对于文字属性来说的，本质上都是移动文字，设置文字的布局；

div{
     background-color:red;
     height:300px;
     width:400px;
     text-align:center;
     line-height:300px;
 }
<div>我是一个人</div>
先设置一个背景框，text-align先让他在水平位置上(第一行处于中间位置),再通过设置行高让他处于竖直方向的居中位置

    <style>
        div{
            line-height:30px;
        }
    </style>
    <div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id tenetur dolorum odit, dicta aperiam deserunt sint provident, minus molestiae reiciendis blanditiis, facilis commodi obcaecati tempora doloribus necessitatibus optio mollitia perferendis?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum, ullam? Voluptas odit corporis dolores quas similique maxime eligendi? Fugiat eius accusantium tempore. Vitae porro obcaecati corrupti officiis minus iure doloremque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta minus provident voluptatibus, praesentium veritatis ducimus nesciunt dolorem exercitationem. Sit dolorum hic quas accusamus magni veniam laudantium ad obcaecati. Et, libero.</p>
</div>