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