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下放图片

  1. body下放图片
        

"div1">
"div2">
"div3">
  1. radius:半径,圆的半径原理,即(椭)圆与边框的交集形成圆角效果。
  2. 参数值可以是数值或百分比的形式。
  3. 如果是正方形,想要设置一个圆,把数值改成高度或宽度的一半,或者直接写成50%
  4. 如果是矩形,设置成高度的一半就可以做矩形。
  5. 该属性是一个缩写属性,左上角,右上角,右下角,左下角,分开写 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
    CSS笔记_第1张图片

3.2 盒子阴影

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

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

举例:


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

注意:

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

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表单

  1. 设置表格边框:类似添加边框的方式,给 table, th, tr 添加边框。但是你会发现,他们都是双边框,这是因为表格和 thtd 元素都有单独的边框。
<style>
    table {
        width: 400px; 
        margin:50px auto;
    }
    table,table td,table th {
        border: 1px solid #000000;
    }
style>
<body>
    <table>
        <thead>
            <tr>
                <th>Monthth>
                <th>Savingsth>
            tr>
        thead>
        <tbody>
            <tr>
                <td>Januarytd>
                <td>$100td>
            tr>
            <tr>
                <td>Februarytd>
                <td>$80td>
            tr>
        tbody>
    table>
body>

CSS笔记_第2张图片

  1. 全宽表格:如果想要 table 占满整个页面。
    table {
        width: 100%;
    }
  1. 合并表格边框: 合并表格边框
    table {
        border-collapse: collapse;
    }
    table,table td,table th {
        border: 1px solid #000000;
    }

CSS笔记_第3张图片

  1. 实现表格中间有边框,内部无边框:合并表格边框。
    table {
       width: 400px;
       margin:50px auto;
       border: 1px solid black;
   }

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

    table th,table td{
     height: 50px;
    }
  1. 文字对齐方式:文字对齐方式可以居中,靠左,靠右,对 进行节点操作。
    table td,table th {
       height: 50px;
       vertical-align: bottom;
    }
  1. 文字垂直方向对齐方式: vertical-align属性。
    table td,table th {
      height: 50px;
      vertical-align: top;/*文字顶格*/
      vertical-align: center;/*文字垂直居中*/
      vertical-align: bottom;/*文字底部*/
    }
  1. 表格内边距:控制边框和表格内容之间的间距,请在 元素上使用 padding 属性。
    table td {
        padding-left: 20px;
    }
  1. 水平分割线
    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; /*鼠标悬停*/
    }

在这里插入图片描述

  1. 条状表格:斑马纹表格效果,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;
    }

CSS笔记_第4张图片

你可能感兴趣的:(#,CSS,css,学习,css3)