ansible Playbook

近 80 万的下载量的Java面试手册,据说已经有 28 人收到了大厂 offer

  返回  

2021-07-20 从零开始的一日CSS (正在持续完善

2021/7/20 16:33:27 浏览:


学习css即学习有哪些选择器,哪些属性以及可以使用什么样的值, 

分为:        1.元素选择器         2.id选择器         3.类选择器

通过分层设计,css把和颜色,大小位置等信息剥离到<style>中,而html只用关心提供什么样的内容就行了。

1.元素选择器

不使用css 给每一个单元格加上背景颜色
就需要给每一个td元素加上bgcolor属性

<table border="1">
  <tr >
      <td bgcolor="pink" >1</td>
      <td bgcolor="pink">2</td>
  </tr>
 
  <tr>
      <td  bgcolor="pink">3</td>
      <td  bgcolor="pink">4</td>
  </tr>
</table>

使用css只需要在最前面写一段css代码,所有的单元格都有背景颜色了

<style>
td{
  background-color:pink;
}
</style>
<table border="1">
  <tr >
      <td>1</td>
      <td>2</td>
  </tr>
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
</table>

效果:

  

 2.id选择器

    <style>
        p{
            color: rgb(46, 165, 42);
        }
        #pBlue{
            color: blue;
        }
        #pRed{
            color: red;
        }
    </style>
    <body>
        <p>1</p>
        <p id="pBlue">2</p>
        <p>3</p>
        <p>4</p>
        <p id="pRed">5</p>
        <p>6</p>
    </body>

效果:

3.类选择器

<style>
.x{
  color:blue;
}
.y{
  color:red;
}
</style>

<p class="x">1</p>
<p class="y">1</p>
<p class="x">1</p>

<p class="x">1</p>
<p class="y">1</p>

效果:

4.更准确的选择

    <style>
        p.x{
            color: rgb(46, 165, 42);
        }
        td.x{
            color: blue;
        }
        td.y{
            color: red;
        }
    </style>
    
    <p>p标签</p>
    <p class="x">p标签,类型为x</p>

 效果: 

尺寸

<style>
p#percentage{
  width:50%;
  height:50%;
  background-color:pink;
}
p#pix{
  width:180px;
  height:50px;
  background-color:gray;
}
</style>

<p id="percentage"> 按比例设置尺寸50%宽 50%高</p>

<p id="pix"> 按象素设置尺寸  180px宽 50 px高</p>

背景

<style>
div#海贼王
  {
    background-image:url("https://img2.baidu.com/it/u=2996864779,3817041974&fm=26&fmt=auto&gp=0.jpg");
    width:200px;
    height:100px;
    background-size : cover;
  }
</style>

<div id="海贼王">
  这是一个有背景图的DIV
</div>

 

背景平铺

<style>
div#海贼王
  {
    background-image:url("https://img2.baidu.com/it/u=2996864779,3817041974&fm=26&fmt=auto&gp=0.jpg");
    width:200px;
    height:100px;
    background-size : contain;
  }
</style>

<div id="海贼王">
  通过拉伸实现,会有失真
</div>

背景重复

background-repeat属性
值可以选
repeat; 水平垂直方向都重复
repeat-x; 只有水平方向重复
repeat-y; 只有垂直方向重复
no-repeat; 无重复

<style>
div#norepeat
  {
    background-image:url(/study/background_small.jpg);
    width:200px;
    height:100px;
    background-repeat: no-repeat;
  }

div#repeat-x
  {
    background-image:url(/study/background_small.jpg);
    width:200px;
    height:100px;
    background-repeat: repeat-x;
  }
</style>

<div id="norepeat">
  背景不重复
</div>

<div id="repeat-x">
  背景水平重复
</div>

 

颜色的三种表示

 颜色的值可以采用3种方式
1. 预定义的颜色名字
比如red,pink,white,black
2. rgb格式
分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的,没有绿色,蓝色是满的,即红色和蓝色混合在一起:紫色
3. 16进制的表示
#00ff00 等同于 rgb(0,255,0) ,即绿色

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号