2021-07-20 从零开始的一日CSS

学习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) ,即绿色

文本

文本对齐 text-align

<style>
div#left{
  text-align:left;
}
/*让div和span的边框显露出来,margin为行间隙*/
div,span{
  border: 5px pink solid ;
  margin:10px;
}
div#right{
  text-align:right;
}
div#center{
  text-align:center;
}

span#right{
  text-align:right;
}
</style>

<div id="left">
左对齐
</div>
<div id="right">
右对齐
</div>
<div id="center">
居中
</div>

<span id="right">
span看不出右对齐效果
</span>

属性:text-align
值：left,right,center
div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。

但是，span却看不出右对齐效果，为什么呢？
因为span是内联元素其默认宽度就是其文本内容的宽度
简单说就是文本已经粑在其边框上了，对齐是看不出效果来的

文本修饰 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://blog.csdn.net/qq_39391544">默认的超链</a><br>
<a class="a" href="https://blog.csdn.net/qq_39391544">去掉下划线的超链</a>

间距

行间距 line-height

字符间距 letter-spacing

单词间距 letter-spacing

<style>
p{
  width:200px; 
}

.p{
  line-height:300%;
  letter-spacing:10px;
}
</style>

<p>
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
</p>

<p class="p">
200%行间距
200%行间距
200%行间距
200%行间距
 200%行间距
</p>

首行缩进 text-indent

<style>
p{
  width:200px;
}

.p{
  text-indent:100;
}
</style>

<p>
没有缩进效果的没有缩进效果的没有缩进效果的没有缩进效果的
</p>

<p class="p">
有缩进效果的有缩进效果的有缩进效果的有缩进效果的有缩进效果的

文字
</p>

大小写 text-transform
uppercase 全部大写
capitalize 首字母大写
lowercase 全部小写

空白格

<style>
p.n {white-space:normal}
p.p {white-space:pre}
p.pw {white-space:pre-wrap}
p.nw {white-space:nowrap}

</style>

<p class="n">
normal 默认。多个空白格或者换行符会被合并成一个空白格
在默认情况下，多个     空白格或者
换行符

    会被     合并成一个空白格
</p>

<p class="p">
pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。
《秋（外三首）》
　　用我们横陈于地上的骸骨

　　在沙滩上写下：青春。然后背起衰老的父亲

　　时日漫长方向中断

　　动物般的恐惧充塞我们的诗歌

　　谁的声音能抵达秋之子夜长久喧响

　　掩盖我们横陈于地上的骸骨——

　　秋已来临

　　没有丝毫的宽恕和温情：秋已来临
</p>

<p class="pw">
pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。
《思念前生》

　　庄子在水中洗手

　　洗完了手手掌上一片寂静

　　庄子在水中洗身

　　身子是一匹布

　　那布上粘满了

　　水面上漂来漂去的声音

　　庄子想混入

　　凝望月亮的野兽

　　骨头一寸一寸

　　在肚脐上下

　　象树枝一样长着

　　也许庄子就是我

　　摸一摸树皮

　　开始对自己的身子

　　亲切

　　亲切又苦恼

　　月亮触到我

　　仿佛我是光着身子

　　进出

　　母亲如门对我轻轻开着
</p>

<p class="nw">
nowrap 一直不换行，直到使用br

直到br<br/>才换行
</p>

字体

大小：font-size
值：数字或者百分比

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

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

字库: font-family

<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 >默认 </p>
<p class="f1">Times New Roman</p>
<p class="f2">Arial</p>
<p class="f3">宋体</p>
<p class="f4">黑体</p>
<p class="f5">楷体</p>
<p class="f6">微软雅黑</p>

font 大小，风格，粗细，字库都写在一行里面

<style>
p.x{
   font:italic bold 40px "Consolas";
}
</style>

<p>默认字体</p>
<p class="x">斜体 粗体 大小是40px  字体为Consolas  的"Hello World" </p>

鼠标样式 cursor

<style>
  span.cross{
    cursor:crosshair;
  }
  span.wait{
    cursor:wait;
  }
</style>
 
<span class="cross">鼠标移动到这段文字上，就看到光标变成了十字架</span>
<span  class="wait">鼠标移动到这段文字上，就看到光标转圈圈</span>

表格,边框之类的过于繁琐且单一,

不作过多停留,只举例子

>>>CSS表格/边框の初体验<<<

posted @ 2021-07-20 16:30 泥烟阅读(25) 评论(0) 编辑收藏举报

刷新页面返回顶部

泥烟