zoukankan      html  css  js  c++  java
  • CSS边框以及其他常用样式

     1 CSS学习大纲
     2     在标签上设置style属性:
     3         background-color:#2459a2  ;
     4         height:48px  ;
     5     编写CSS样式:
     6         1.标签的style属性
     7         2.写在head里面,style标签中写样式
     8             ID选择器
     9                 #i1{
    10                     background-color:2459a2  ;
    11                     height:48px  ;
    12                      }
    13             class选择器  *****
    14                 .c1{
    15                     background - color: 2459a2  ;
    16                     height: 48px  ;
    17                     }
    18                 <标签 class='名字'> </标签>
    19             标签选择器
    20                 div{
    21                     background - color: 2459a2;
    22                     height: 48px ;
    23                    }
    24                  所有的div都使用这个样式
    25             层级选择器(空格)  *****
    26                 .c1 .c2 div{
    27                       background - color: 2459a2;
    28                       height: 48px;
    29                            }
    30             组合选择器(逗号)  *****
    31                 #i1,.c1,div{
    32                             }
    33             属性选择器   *****
    34                 对选择到到标签再通过属性再进行一次筛选
    35                 .c1[n='alex']{100px ;height:200px;}
    36             PS:
    37                 优先级,标签上style优先,编写顺序,就近原则
    38         2.5  css样式也可以写再单独的文件中
    39             <link rel="stylesheet"  href="commons.css"/>
    40 
    41         3、多行注释
    42             /*
    43             ...内容...
    44            */
    45 
    46 
    47         4、边框
    48             宽度,样式,颜色 (border: 4px dotted red)
    49             border-left
    50         5、
    51             height,              高度 百分比
    52             width,               宽度 像素,百分比
    53             text-align:ceter,    水平方向居中
    54             line_height,         垂直方向根据标签高度
    55             color                字体颜色
    56             font-size            字体大小
    57             font-weight          字体加粗
    CSS学习大纲2
     1 <!DOCTYPE html>
     2 <!--CSS边框以及其他常用样式-->
     3 <html lang="en">
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Title</title>
     7 </head>
     8 <body>
     9     <div style="border: 3px dotted red;">
    10           边框设置 四边
    11     </div>
    12 
    13     <br />
    14 
    15     <div style="border-left: 8px dotted red;">
    16           边框设置 左边
    17     </div>
    18 
    19     <br />
    20 
    21     <div style="border-top: 4px dotted red;">
    22           边框设置  顶边
    23     </div>
    24 
    25     <br />
    26 
    27     <div style="height: 48px ; 200px;border: 3px solid red;">
    28             长度设置 像素
    29     </div>
    30 
    31     <br />
    32 
    33     <div style="height: 48px ; 60%;border: 5px solid red;">
    34            长度设置  %百分比
    35     </div>
    36 
    37     <br />
    38 
    39     <div style="height: 48px ;
    40                    1800px;
    41                   border: 5px solid red;
    42                   font-size:16px;
    43                   text-align:center;
    44                   line-height: 48px;
    45                   font-weight: bold;
    46                  ">
    47           height高度 width宽度  border边框  font-size字体大小 text-align水平方向居中 line-height垂直方向根据标签高度 font-weight字体加粗
    48     </div>
    49 </body>
    50 </html>
    CSS边框以及其他常用样式
  • 相关阅读:
    Python爬虫爬取网页图片
    Python爬虫爬取贴吧的帖子内容
    Android导入AS工程
    Arcgis for Silverlight学习(一)
    Silverlight学习笔记之页面跳转
    视频信号的垂直消隐和水平消隐[转]
    【DM642学习笔记八】色度重采样
    java从入门到卖肠粉系列
    [Selenium] Automation Test Manual(Selenium)
    [Selenium] Selenium私房菜(新手入门教程)
  • 原文地址:https://www.cnblogs.com/ujq3/p/7418447.html
Copyright © 2011-2022 走看看