CSS笔记

文章目录

- 1. 图片
- - 1.1 body下放图片
- 2. 文字
- - 2.1 文字格式
  - 2.2 Fonts 字体属性
  - - 2.2.1 字体系列 - font family
    - 2.2.2 字体大小 - font size
    - 2.2.3 字体粗细 - font-weight
    - 2.2.4 字体风格 - font-style
    - 2.2.5 字体复合属性
- 3. 盒子某些属性
- - 3.1 圆角边框
  - 3.2 盒子阴影
  - 3.3 文字阴影
- 4. table表单

1. 图片

1.1 body下放图片

body下放图片

        <style type="text/css">
            body {
                background-image: url('img/1.jpg');
            }

不平铺且放大，即一张图铺满整个body

    body {
                background-image: url('img/1.jpg');
                /* 不平铺 */
                background-repeat: no-repeat;
                /* 100%是放大到整个页面的意思。 */
                background-size: 100%;
        }

横向平铺

    body {
                background-image: url('img/1.jpg');
                background-repeat:repeat-x;
        }

纵向平铺

    body {
                background-image: url('img/1.jpg');
                background-repeat:repeat-y;
        }

2. 文字

2.1 文字格式

水平居中

text-align：设置块元素或者单元格框的行内内容的水平对齐。
注意：水平垂直 text-align 要放在文字的父元素里

垂直居中

line-height : 上距离+内容高度+下距离

line-hieght = height — 内容垂直居中
line-hieght > height — 内容向下移动
line-hieght < height — 内容向上移动

  <style>
    .font-form{
      width: auto;
      height: 60px;
      line-height: 60px;
      background-color: pink;
      text-align: center;/*水平居中，放在父节点中*/
    }
  </style>
  <div class="font-form">
    将height和line-height设置成相同高度,实现文字垂直居中
  </div>

2.2 Fonts 字体属性

2.2.1 字体系列 - font family

CSS使用 font-family 属性定义文本的字体系列。

p{ font-family:"微软雅黑";}
p{ font-family:Arial,"Microsoft Yahei",Times,serif;}

各种字体之间必须使用英文状态下的逗号隔开；
一般情况下，如果有空格隔开的多个单词组成的字体，加引号；
尽量使用系统默认的字体，保证用户在任何浏览器中都能使用；

2.2.2 字体大小 - font size

CSS 使用 font-size 属性定义文本的大小。

p{ font-size: 20px; }

px (像素)大小是网页最常用的单位;
谷歌浏览器默认的大小是 16px;
不同浏览器的默认大小不一致，我们尽量给一个固定大小，不要用默认值；
建议给 body 指定字体大小

2.2.3 字体粗细 - font-weight

font-weight 属性指定了字体的粗细程度

语法：
font-weight: normal|bold|bolder|lighter|number|initial|inherit;

举例
p.normal {font-weight:normal;}

p.thick {font-weight:bold;}

p.thicker {font-weight:900;}/*900后面不要跟单位*/

如果用数字表示 100～900，400 等同于 normal，而 700 等同于 bold。
实际应用中，也可以用标签

2.2.4 字体风格 - font-style

font-style 属性设置使用斜体、倾斜或正常字体。

语法：
font-style: normal|italic|oblique|initial|inherit;

p.normal {font-style:normal;} /*显示一个标准的字体样式*/
p.italic {font-style:italic;} /*显示一个斜体的字体样式*/
p.oblique {font-style:oblique;} /*显示一个倾斜的字体样式*/

注意：
平时我们很少给文字加斜体，而是使用 或者 标签。

2.2.5 字体复合属性

语法：
font: font-style | font-weight | font-size/line-height | font-family
font:   字体样式 |   字体粗细   |     字体大小/ 行高     |  字体系列

使用 font 时，必须按照上面的语法格式书写，不能更换顺序，各个属性之间用空格隔开
不需要设置的属性可以忽略（取默认值），必须保留 font-size 和 font-family属性，否则 font 属性将不起作用。

3. 盒子某些属性

3.1 圆角边框

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。

语法：
border-radius: 30px;
border-radius: 25% 10%;
border-radius: 10% 30% 50% 70%;

举例：
<style>
    .div1{
        width: 200px;
        height: 200px;
        background-color: pink;
        border-radius: 20px;
    }
    .div2{
        width: 200px;
        height: 200px;
        background-color: skyblue;
        border-radius: 100px;
        /*或者*/
        border-radius: 50%;
    }
    .div3{
        width:316px;
        height:200px;
        background-color:blanchedalmond;
        border-radius: 100px;
    }
</style>
<body>
<div class="div1"></div>
<!-- 正方形形成圆形的方法是半径是长或宽的一半 -->
<div class="div2"></div>
<div class="div3"></div>
</body>

radius：半径，圆的半径原理，即（椭）圆与边框的交集形成圆角效果。
参数值可以是数值或百分比的形式。
如果是正方形，想要设置一个圆，把数值改成高度或宽度的一半，或者直接写成50%。
如果是矩形，设置成高度的一半就可以做矩形。
该属性是一个缩写属性，左上角，右上角，右下角，左下角，分开写 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius 。

3.2 盒子阴影

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

语法：
box-shadow: h-shadow v-shadow blur spread color inset;

举例：
<style>
    .div1{
        width: 200px;
        height: 200px;
        background-color: pink;
        margin:100px auto;
        box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3);
    }
    .div2{
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin:200px auto;
        /*内部阴影*/
        box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3) inset; 
    }
    .div3{
        width: 200px;
        height: 200px;
        background-color:green;
        margin:500px auto;
    }
    /* 原先盒子没有阴影，但是鼠标经过的时候出现阴影 */
    .div3:hover{
        box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3);
    }
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>

值	描述
`h-shadow`	必需 , 水平阴影的位置 , 允许负值
`v-shadow`	必需 , 垂直阴影的位置 , 允许负值
`blur`	可选 , 模糊距离
`spread`	可选 , 阴影的尺寸
`color`	可选 , 阴影的颜色
`inset`	可选 , 将外部阴影 ( `outset` ) 改为内部阴影

注意：

默认的外阴影是 outset，但是实际应用中，不要去多余写默认这个单词，否则阴影会失效。
盒子阴影不占用空间，不会印象其他盒子排列。

3.3 文字阴影

text-shadow 属性向文本设置阴影

语法：
text-shadow: h-shadow v-shadow blur color;

举例：
h1 {
	text-shadow: 5px 5px 3px #F08080;
}

值	描述
`h-shadow`	必需。水平阴影的位置。允许负值。
`v-shadow`	必需。垂直阴影的位置。允许负值。
`blur`	可选。模糊的距离。
`color`	可选。阴影的颜色。

4. table表单

设置表格边框：类似添加边框的方式，给 table, th, tr 添加边框。但是你会发现，他们都是双边框，这是因为表格和 th、td 元素都有单独的边框。

<style>
    table {
        width: 400px; 
        margin:50px auto;
    }
    table,table td,table th {
        border: 1px solid #000000;
    }
</style>
<body>
    <table>
        <thead>
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>February</td>
                <td>$80</td>
            </tr>
        </tbody>
    </table>
</body>

在这里插入图片描述

全宽表格：如果想要 table 占满整个页面。

    table {
        width: 100%;
    }

合并表格边框: 合并表格边框。

    table {
        border-collapse: collapse;
    }
    table,table td,table th {
        border: 1px solid #000000;
    }

在这里插入图片描述

实现表格中间有边框，内部无边框：合并表格边框。

    table {
       width: 400px;
       margin:50px auto;
       border: 1px solid black;
   }

在这里插入图片描述
5. 表格宽度和高度：表格的宽度和高度由 width 和 height 属性定义。下列将 th 和 td的高度设置为 50px。

    table th,table td{
     height: 50px;
    }

文字对齐方式：文字对齐方式可以居中，靠左，靠右，对 <th> 和 <td> 进行节点操作。

    table td,table th {
       height: 50px;
       vertical-align: bottom;
    }

文字垂直方向对齐方式： vertical-align属性。

    table td,table th {
      height: 50px;
      vertical-align: top;/*文字顶格*/
      vertical-align: center;/*文字垂直居中*/
      vertical-align: bottom;/*文字底部*/
    }

表格内边距：控制边框和表格内容之间的间距，请在 <td> 和 <th> 元素上使用 padding 属性。

    table td {
        padding-left: 20px;
    }

水平分割线

    table {
        width: 400px;
        margin:50px auto;
        border-collapse: collapse;
    }
    table td,table th {
        text-align: left;
        border-bottom: 1px solid #ddd; /*只给下边框*/
    }
    tr:hover {
      background-color: #f5f5f5; /*鼠标悬停*/
    }

在这里插入图片描述

条状表格：斑马纹表格效果，nth-child() 选择器，为所有偶数（或奇数）表行添加 background-color。

    table {
        width: 400px;
        margin:50px auto;
        border-collapse: collapse;
    }
    table td,table th {
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    tbody tr:nth-child(odd){ 
        background-color: #f2f2f2;
    }

在这里插入图片描述