CSS笔记

1. 图片

1.1 body下放图片

  1. body下放图片
        <style type="text/css">
            body {
                background-image: url('img/1.jpg');
            }
  1. 不平铺且放大,即一张图铺满整个body
    body {
                background-image: url('img/1.jpg');
                /* 不平铺 */
                background-repeat: no-repeat;
                /* 100%是放大到整个页面的意思。 */
                background-size: 100%;
        }
  1. 横向平铺
    body {
                background-image: url('img/1.jpg');
                background-repeat:repeat-x;
        }
  1. 纵向平铺
    body {
                background-image: url('img/1.jpg');
                background-repeat:repeat-y;
        }

2. 文字

2.1 文字格式

  1. 水平居中

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

  1. 垂直居中

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;}
  1. 各种字体之间必须使用英文状态下的逗号隔开;
  2. 一般情况下,如果有空格隔开的多个单词组成的字体,加引号;
  3. 尽量使用系统默认的字体,保证用户在任何浏览器中都能使用;
2.2.2 字体大小 - font size

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

p{ font-size: 20px; }
  1. px (像素)大小是网页最常用的单位;
  2. 谷歌浏览器默认的大小是 16px;
  3. 不同浏览器的默认大小不一致,我们尽量给一个固定大小,不要用默认值;
  4. 建议给 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后面不要跟单位*/
  1. 如果用数字表示 100~900400 等同于 normal,而 700 等同于 bold。
  2. 实际应用中,也可以用<strong></strong>标签
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;} /*显示一个倾斜的字体样式*/

注意:
平时我们很少给文字加斜体,而是使用<em></em> 或者 <i></i>标签。

2.2.5 字体复合属性
语法:
font: font-style | font-weight | font-size/line-height | font-family
font:   字体样式 |   字体粗细   |     字体大小/ 行高     |  字体系列
  1. 使用 font 时,必须按照上面的语法格式书写,不能更换顺序,各个属性之间用空格隔开
  2. 不需要设置的属性可以忽略(取默认值),必须保留 font-sizefont-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>
  1. radius:半径,圆的半径原理,即(椭)圆与边框的交集形成圆角效果。
  2. 参数值可以是数值或百分比的形式。
  3. 如果是正方形,想要设置一个圆,把数值改成高度或宽度的一半,或者直接写成50%
  4. 如果是矩形,设置成高度的一半就可以做矩形。
  5. 该属性是一个缩写属性,左上角,右上角,右下角,左下角,分开写 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 ) 改为内部阴影

注意:

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

在这里插入图片描述

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

在这里插入图片描述

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

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

    table th,table td{
     height: 50px;
    }
  1. 文字对齐方式:文字对齐方式可以居中,靠左,靠右,对 <th><td> 进行节点操作。
    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. 表格内边距:控制边框和表格内容之间的间距,请在 <td><th> 元素上使用 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;
    }

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值