#CSS#基础语法之二_学习札记

1.元素选择器

<style>
        p{
          color:pink;
        }
        </style>         
        <p>p元素</p>
        <p>p元素</p>
        <p>p元素</p>

2. id选择器

 <style>
        p{
          color:red;
        }
        #p1{
          color:blue;
        }
        #p2{
          color:green;
        }
        </style>
         
        <p>无id的p</p>
        <p id="p1">id=p1的p</p>
        <p id="p2">id=p2的p</p>

3. 类选择器

  <style>
        .pre{
          color:blue;
        }
        .after{
          color:green;
        }
        </style>
         <!-- pre类css -->
        <p class="pre">前3个</p>
        <p class="pre">前3个</p>
        <p class="pre">前3个</p>
         <!-- after类css -->
        <p class="after">后3个</p>
        <p class="after">后3个</p>
        <p class="after">后3个</p>

4.精确选择元素

<style>
        <!--id为blue的p-->
        p.blue{
          color:blue;
        }  
        <!--id为blue的span-->
        span.blue{
            color:pink;
        }
        </style>
         
        <p class="blue">class=blue的p</p>
         
        <span class="blue">class=blue的span</span>

 5.尺寸设置

 <style>
        p#percentage{
          width:50%;
          height:50%;
          background-color:pink;
        }
        p#pix{
          width:180px;
          height:50px;
          background-color:green;
        }
        </style>
         
        <p id="percentage"> 按比例设置尺寸50%宽 50%高</p>
         
        <p id="pix"> 按象素设置尺寸 180px宽 50px高</p>
</body>

6. 背景颜色

<style>
        p.gray {background-color: gray;}
        h1 {background-color: transparent}
        h2 {background-color: rgb(250,0,255)}
        h3 {background-color: #00ff00}
        p.kobe{background-color: blueviolet;}
        </style>s
         
        <p class="gray">灰色</p>
        <p class="kobe">科比</p>
        <h1>透明背景，默认即透明背景</h1>
        <h2>紫色</h2>
        <h3>绿色背景</h3>

7.图片做背景

<style>
        div#test
          {
            background-image:url(kobe.jpg);
            width:1200px;
            height:520px;
          }
        </style>
         
        <div id="test">
          kobe bgp
        </div>

 

8.背景重复

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>

9.背景平铺

属性：background-size
值：contain

<style>
div#contain
  {
    background-image:url(/study/background_small.jpg);
    width:200px;
    height:100px;
    background-size: contain;
  }
</style>
  
<div id="contain">
   背景平铺，通过拉伸实现，会有失真
</div>

 

10.文字颜色

 <style>
        div#kobe{
          color:pink
        }       
        </style>        
        <div id="kobe">
          KobeInPink
        </div>

11.对齐

属性:text-align
值：left,right,center
div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。
但是，span却看不出右对齐效果，为什么呢？
因为span是内联元素其默认宽度就是其文本内容的宽度
简单说就是文本已经粑在其边框上了，对齐是看不出效果来的

 <style>
        /* 左侧对齐 */
        div#left{
          text-align:left;
        }
        /*使div span元素的边框显露出来*/
        div,span{
          border: 1px gray solid;
          margin:10px;
        }
        /* 右侧对齐 */
        div#right{
          text-align:right;
        }
        /* 居中 */
        div#center{
          text-align:center;
        }
        /* 对齐对span无效 */ 
        span#right{
          text-align:right;
        }
         
        </style>
         
        <div id="left">
        左对齐
        </div>
         
        <div id="right">
        右对齐
        </div>
         
        <div id="center">
        居中
        </div>
         
        <span id="right">
        span看不出右对齐效果
         
        </span>

 

12.文本修饰

text-decoration属性

<style type="text/css">
        h1 {text-decoration: overline}
        h2 {text-decoration: line-through}
        h3 {text-decoration: underline}
        h4 {text-decoration:blink}
        .a {text-decoration: none}
        </style>
         
        <h1>上划线</h1>
        <h2>删除效果</h2>
        <h3>下划线</h3>
        <h4>闪烁效果，大部分浏览器已经取消该效果</h4>
        <a href="https://how2j.cn/">默认的超链</a>
        <a class="a" href="https://how2j.cn/">去掉了下划线的超链</a>

13. 行间距

属性：line-height
值：数字或者百分比

<style>
        p{
          width:200px;
        }
        /* class p间距200% */ 
        .p{
          line-height:200%;
        }
        </style>
         
        <p>
        默认行间距
        默认行间距
        默认行间距
        默认行间距
        默认行间距
        默认行间距
        默认行间距
        默认行间距
        </p>
         
        <p class="p">
        200%行间距
        200%行间距
        200%行间距
        200%行间距
        200%行间距
        200%行间距
        200%行间距
        </p>

14.字符间距

 属性：letter-spacing
  值： 数字

<style>
        p{
          width:200px;
        }
         
        .p{
          letter-spacing:3;
        }
        </style>
         
        <p>
        默认字符间距 默认字符间距 默认字符间距 
        默认字符间距 默认字符间距 默认字符间距 
        默认字符间距 默认字符间距 默认字符间距 
        </p>
         
        <p class="p">
        字符间距为3  字符间距为3  字符间距为3  
        字符间距为3  字符间距为3  字符间距为3  
        字符间距为3  字符间距为3  字符间距为3  
        </p>

15.首行缩进

text-indent属性，值数字

<style>
        p{
          width:200px;
        }
         
        .p{
          text-indent:50;
        }
        </style>
         
        <p>
        没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字
        </p>
         
        <p class="p">
        有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段
         
        文字
        </p>

16.大小写

属性：text-transform
值：
uppercase 全部大写
capitalize 首字母大写
lowercase 全部小写

<style>
p.u {text-transform:uppercase}
p.c {text-transform:capitalize}
p.l {text-transform:lowercase}
 
</style>
 
<p class="u">
abcD
</p>
 
<p class="c">
abcD
</p>
 
<p class="l">
abcD
</p>

17. 尺寸

属性：font-size
值：数字或者百分比

<style>
p.big{
  font-size:30px;
}
 
p.small{
  font-size:50%;
}
   
p.small2{
  font-size:0.5em;
} 
</style>
 
<p >正常大小</p>
<p class="big">30px大小的文字</p>
<p class="small">50%比例的文字</p>
<p class="small2">0.5em 等同于 50%比例的文字</p>

18.风格

font-style:
normal 标准字体
italic 斜体 

<style>
p.n{
  font-style:normal;
}
 
p.i{
  font-style:italic;
}
</style>
 
<p class="n">标准字体</p>
<p class="i">斜体</p>

19.粗细

属性 font-weight
normal 标准粗细
bold 粗一点

<style>
p.n{
  font-weight:normal;
}
p.b{
  font-weight:bold;
}
</style>
 
<p >标准字体</p>
<p class="n">标准字体</p>
<p class="b">粗一点</p>

 

 20.字库

<style>
p.f1{
  font-family:"Times New Roman";
}
 
p.f2{
  font-family:Arial;
}
p.f3{
  font-family:宋体;
}
p.f4{
  font-family:黑体;
}
p.f5{
  font-family:楷体;
}
p.f6{
  font-family:微软雅黑;
}
</style>
 
<p >默认字库 font family:default </p>
<p class="f1">设置字库 font-family: Times New Roman</p>
<p class="f2">设置字库 font-family: Arial</p>
<p class="f3">设置字库 font-family: 宋体, 这种字体是IE默认字体</p>
<p class="f4">设置字库 font-family: 黑体</p>
<p class="f5">设置字库 font-family: 楷体</p>
<p class="f6">设置字库 font-family: 微软雅黑, 这个字体是火狐默认字体</p>

 21.声明在一起

<style>
p.all{
   font:italic bold 30px "Times New Roman";
}
 
</style>
 
<p>默认字体</p>
 
<p class="all">斜体的 粗体的 大小是30px的 "Times New Roman" </p>

 22.鼠标样式

<style>
  span{
    cursor:crosshair;
  }
</style>
  
<span>鼠标移动到这段文字上，就看到鼠标样式变成了十字架</span>