登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›前端三剑客——CSS样式

前端三剑客——CSS样式

幽淆 4 天前
   CSS样式：  进行美化页面即html标签中的style
  大纲：
      1.CSS样式应用方式
      2.CSS样式的选择器
      3.CSS样式的大致内容
 
 
 
 
 
 
    CSS样式应用方式：即CSS样式写在哪
            1.应用在html标签上
  1. <img src="https://www.cnblogs.com/..."  />
  2. 你好
复制代码
            2应用.在head里面
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>大米</title>
  4.    
  5. </head>
复制代码
            3.应用在文件里：   使用情况：布局多个页面时避免重复写style
  1. 在head里面导入文件
  2. <link rel="stylesheet" href="放css样式的文件.css（基于falsk框架写的网站css文件写在static目录下）">
复制代码
 
 
    CSS样式选择器： 即如何去调用写好的CSS样式
            1.类选择器  ： 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>111</title>
  6.    
  7. </head>
  8. <body>
  9.    
  10.         你好
  11.    
  12. </body>
  13. </html>
复制代码
             2.后代选择  ：  
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>111</title>
  6.    
  7. </head>
  8. <body>
  9.    
  10.         <li>你好</li>
  11.         
  12.             <li>你好</li>
  13.         
  14.    
  16. </body>
  17. </html>
复制代码
            3.标签选择器：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>111</title>
  6.    
  7. </head>
  8. <body>
  9.    
  10.         你好
  11.    
  12. </body>
  13. </html>   [size=6]你好[/size]
  15.    
复制代码
            4.id选择器：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>111</title>
  6.    
  7. </head>
  8. <body>
  9.    
  10.         你好
  11.    
  12. </body>
  13. </html>
复制代码
            5.属性选择器：
2.png

             6.补充：多个选择器和覆盖
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>111</title>
  6.    
  7. </head>
  8. <body>
  9.     你好
  10. </body>
  11. </html>
复制代码
 
    CSS样式大致内容
            1.高度和宽度设置
  1. .c1{
  2.     color: red;
  3.     height: 40px;
  4.     width: 50%;
  5. }
复制代码
             注意事项：1.宽度支持百分比  2.行内标签设置高度和宽度支撑不起来，得用display：block改变  3.虽然块级标签使用宽度限制其在此行所占位置，但此行剩余部分依然不可以被使用，得用display: inline-block改变  
 
 
            2.块级，行内标签转换设置： 用display进行改变:  块级->行内 和 行内->块级 或 既具有行内又有块级的特性
  1. #块级变行内 display:inline
  2. .c1{
  3.     color: red;
  4.     height: 40px;
  5.     width: 50%;
  6.     display: inline;
  7. }
  8. 你好      #此时块级标签变成行内标签所以c1里面的宽度对其无效
复制代码
 
3.png

  1. #行内变块级
  2. .c1{
  3.     color: red;
  4.     height: 40px;
  5.     width: 50%;
  6.     display: block;
  7. }
  8. 你好     #变成块级标签后可以进行设置宽度   此行后面剩余部分则不可被其他标签占用
复制代码
4.png
 
 
  1. #即具有块级和行内的特性
  2. .c1{
  3.     color: red;
  4.     height: 40px;
  5.     width: 50%;
  6.     display: inline-block;
  7. }
  8. 你好        或        你好
  9. 你好
复制代码
5.png
 
 
 
             3.字体设置：  颜色  大小  加粗  字体格式
  1. .c1{
  2.     color: red;                #字体颜色
  3.     font-size: 20px;           #字体大小
  4.     font-weight: 600;          #字体粗细
  5.     font-family: Arial;        #字体格式
  6. }
  7. 你好
复制代码
 
 
             4.文字对齐方式：  水平居中（text-align : center)      垂直居中(line-height : 设置的（height)）
  1. .c1{
  2.     color: red;
  3.     height: 80px;
  4.     width: 150px;
  5.     text-align: center;             #水平对齐
  6.     line-height: 80px;              #垂直对齐
  7.     border: 1px solid red;          #加边框（可视化）
  8.     display: inline-block;
  9. }
  10. 你好
复制代码
6.png

  
            5.内边距： padding    为自己原有位置扩展领域（在块级区域中保持自己高宽（150，80）不变，向外扩张padding的值，则扩张后的区域也是属于这个块级区域的）
  1. .c1{
  2.     height: 80px;
  3.     width: 150px;
  4.     border: 1px solid red;
  6.     padding-top: 10px;
  7.     padding-left: 10px;
  8.     padding-right: 10px;
  9.     padding-bottom: 10px;                    #简写：padding：10px 20px 30px 20px 上 右 下 左  图3
  10. }
  11. 你好呀！
  12. 你好
复制代码
7.png
               
8.png
                                                                                         
9.png
       
10.png

 
 
            6.外边距：  margin
  1. .c1{
  2.     height: 80px;
  3.     width: 150px;
  4.     border: 1px solid red;
  5.     display: inline-block;
  6. }
  7. .c2{
  8.     height: 80px;
  9.     width: 150px;
  10.     border: 1px solid red;
  11.     margin-left: 10px;
  12.     display: inline-block;
  13. }
  14. 你好呀！
  15. 你好
复制代码
11.png
      
12.png

 
      遇到的问题：第一个div中CSS样式有添加内边距时 第二个div标签不在顶端，如图：      解决办法：浮动并排
13.png

 
 
            7.浮动并排    float
  困惑点：既然可以把块级标签通过display：inline-block使其不在霸道，让此行剩余部分让别人进行占用 ，为什么要有浮动并排
  困惑点可视化：6中遇见的问题
  原因
  1. 简单说：两个元素并排时，默认是按“文字基线”对齐的（就像写字母时，字母底部对齐那条线）。第一个元素加了内边距（padding），把自己撑高了，它的“基线”位置也跟着变低了。
  2. 第二个元素没加内边距，就跟着这个变低的基线对齐，所以看起来它的顶部没对齐，好像往下挪了一点。
  3. 解决办法：
  4. 1.给第二个元素加一句 `vertical-align: top;`，强制让它们顶部对齐，就顶格了。
  5. 2.把两个元素都改成块级元素，再用浮动并排
  6.   先去掉 display: inline-block，然后给两个元素都加 float: left。
复制代码
 
  6中问题解决
  1. body{
  2.     margin: 0;
  3. }
  5. .c1{
  6.     height: 80px;
  7.     width: 150px;
  8.     border: 1px solid red;
  9.     padding: 10px;
  10.     float: left;
  11. }
  12. .c2{
  13.     height: 80px;
  14.     width: 150px;
  15.     border: 1px solid red;
  16.     margin-left: 10px;
  17.     float: left;
  18. }
  20. 你好呀！
  21. 你好
复制代码
14.png
 
 
         浮动并排:
  查看代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>111</title>
  6.    
  7. </head>
  8. <body>
  9.                                   #父级
  10.         你好呀！
  11.         你好
  12.                     #给父元素加 “清除浮动”，避免父元素高度坍塌（避免父级元素被覆盖）
  13.    
  14. </body>
  15. </html>
复制代码
15.png

        注意点：父级如果没有高度或者宽度，孩子若有高度或者宽度则会把父级支撑起来
             如果父级中存在孩子浮动则要加避免坍塌的语句
 
 
            8.body：body标签默认有边距造成页面四周有间隙
  1. 解决办法:
  2. body{
  3.     margin: 0;   
  4. }
复制代码
16.png
      
17.png

 
            9.内容居中：  文本居中  区域居中
      1.文本居中：  text-align:center  line-height:height  
  1. body{
  2.     margin: 0;
  3. }
  5. .a1{
  6.     background-color: black;
  7. }
  8. .a1 .c1{
  9.     color: white;
  10.     height: 60px;
  11.     border: 1px solid red;
  12.     text-align: center;
  13.     line-height: 60px;
  14.     float: left;
  15. }
  16. .a1 .c2{
  17.     height: 40px;
  18.     border: 1px solid red;
  19.     margin-left: 10px;
  20.     float: left;
  21. }
  24.     你好呀！
  25.     你好
  26.    
复制代码
18.png

       2.区域居中：  自己得有宽度+margin-left：auto    margin-right：auto
  1. .a1{
  2.     height: 100000px;
  3.     width: 100px;
  4.     background-color: pink;
  5.     margin: 0 auto;    #上0 右平均 下0 左平均
  6.     }
复制代码
19.png
            
 
 
             10.背景色和边框：
  1. 背景色：background-color: pink;
  2. 边框：border: 1px solid red;     transparent透明色
复制代码
 
 
             11. hover伪装：    不仅可以改变自己还可以改变自己内部的标签的元素
      改变自己：
  1. .a1 .c1 a{
  2.     height: 60px;
  3.     text-align: center;
  4.     line-height: 60px;
  5.     float: left;
  6.     text-decoration:none;
  7. }
  8. .a1 .c1 a:hover{
  9.     color: red;   
  10. }
  13.    
  14.         点击跳转
  15.    
复制代码
鼠标放上前：
20.png
      鼠标放上后：   
21.png

      
      改变自己内部标签的元素
  1. .a1{
  2.     height: 100000px;
  3.     width: 65%;
  5.     margin: 0 auto;
  6.     border: 1px solid red;
  7. }
  8. .a1 .c2{
  9.     width: 100px;
  10.     height: 60px;
  11.     text-align: center;
  12.     line-height: 60px;
  13.     margin-left: 10px;
  14.     float: left;
  15.     color: -webkit-link;
  16. }
  18. .a1 .c2 .b1{
  19.     display:none;
  20. }
  22. .a1 .c2:hover .b1{
  23.     display:block;
  24. }
  27.    
  28.         作者微信
  29.         
  30.             <img src="https://www.cnblogs.com/./images/微信图片_20251024215623_91_2.jpg" alt="作者微信">
  31.         
  32.    
  38. CSS 中鼠标悬停的伪类是 :hover（冒号开头），必须紧跟在要触发 hover 的元素选择器后面（比如 .c2:hover），表示 “当鼠标悬停在 .c2 上时”，再去控制它内部的 .b1 元素。
  39. 修改后，当鼠标放到 “作者微信” 所在的 .c2 区域时，图片就会显示出来了。
复制代码
鼠标放上前        
23.png
         鼠标放上后  
24.png
      
 
 
 
            12.after伪装：  .clearfix:after
  1. .clearfix:after{
  2.     content: "";
  3.     display: block;
  4.     clear: both;
  5. }
复制代码
25.png

 
            13.opacity： 透明度（0-1）
  1. .fix{
  2.     position:fixed;
  3.     top:0;
  4.     left:0;
  5.     width:100%;
  6.     height:100%;
  7.     background-color:black;
  8.     opacity:0.5;
  9. }
  12. position: fixed 定位的元素无法通过 margin 来调整基于浏览器视口的位置，原因和它的定位机制有关：
  13. 当元素设置 position: fixed 时，它的定位参考是浏览器的视口（整个窗口），并且会完全脱离正常文档流。此时 margin 的作用逻辑发生了变化：
  14. 正常文档流中，margin 是用来控制元素与其他元素的间距；
  15. 但 fixed 定位的元素已经 “悬浮” 在视口上，margin 无法让它相对于视口产生偏移，只能影响它内部内容的排版（比如如果它里面有子元素，margin 可以控制子元素和它的间距）。
复制代码
26.png

 
 
            14.position ：    fixed     relative    absolute 后两者进行搭配使用
 
                  1.position：fixed：固定方式  相对于浏览器
                      脱离文档流，不影响去他元素布局  定位参考：浏览器视口  用于悬浮固定的场景
  1. .fix{
  2.     position:fixed;
  3.     bottom:10px;
  4.     right:10px;
  5.     height:40px;
  6.     width:40px;
  7.     border:1px solid red;
  8. }
复制代码
27.png

  1. .bb{
  2.     position:fixed;
  3.     width:400px;
  4.     height:400px;
  5.     left:0;
  6.     right:0;
  7.     margin:0 auto;
  8.     background-color:black;
  9. }
复制代码
28.png

 
 
                  2.relative    absolute
  1. .aa{
  2.     position: relative;
  3.     height: 500px;
  4.     width: 500px;
  5.     margin: 0 auto;
  6.     border: 1px solid red;
  7. }
  8. .aa .bb{
  9.     position: absolute;
  10.     height: 50px;
  11.     width: 50px;
  12.     background-color: red;
  13. }
  15.    
复制代码
29.png
 
 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
前端三剑客CSS样式
1.jpg

使用道具 举报

相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
幽淆
4 天前

0

粉丝关注

23

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫