CSS基础属性
文字基本样式
windows网页默认是微软雅黑
/*
1.字体大小：font-size
2.字体粗细：font-weight
3.字体样式：font-style
4.字体类型：font-family
5.字体类型：font属性连写
line-height：行高
*/字体大小
/*
属性名：font-size
取值：数字+px
注意点
1.谷歌浏览器默认文字大小是16px
2.单位(px)需要设置，否则无效
*/字体粗细
/*
属性名：font-weight
关键字取值：
正常：normal
加粗：bold
纯数字取值(100-900的整百数)：
正常：400
加粗：700
实际工作中：正常、加粗两种使用的最多
*/字体倾斜
/*
属性名：font-style
取值：
正常(默认值)：normal
倾斜：italic
*/复合属性
/*
属性名：font(复合属性)
取值：
font:style weight size family;
省略要求：
只能省略前两个，如果省略了相当于设置了默认值
注意点：如果需要同时设置单独和连写的形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
*/代码示例
<style>
p {
/*
font-size:;
font-style:;
font-weigth:;
font-family:;
或者此处写字体;
*/
/*复合属性即可以写成如下*/
font: italic 700 66px 宋体;
}
</style>
层叠性(即覆盖)
<style>
/* 通过*定义一个通配符选择器 */
* {
color: blue;
/*即后执行的代码会覆盖前面的*/
color: red;
font-size: 20px;
}
</style>文本缩进(text-indent)
段落首行缩进，通常都是使用em进行控制，直接写数字的话，比如文字大小改了就还要修改
/*
属性名：text-indent
取值
数字+px
数字+em(推荐这种：1em = 当前标签的font-size的大小)
*/文本下划线
也叫文本修实现
使用场景：清除a标签默认的下划线
/*
属性名：text-decoration
*/| 属性值 | 效果 |
|---|---|
| underline | 下划线(常用) |
| none | 无装饰线(常用来清除a标签所带的下划线) |
| line-through | 删除线(不常用) |
| overline | 上划线(几乎用不到) |
行高
行高组成：上间距、文本高度(即文字高度)、下间距
应用场景：让单行文本垂直居中、以及取消文字上下间距
/*
作用：控制一行的上下行间距
属性名：line-height
取值：
1.数字+px
2.倍数(当前标签font-size的倍数)
应用：
1.当单行文本垂直居中，可以设置line-height:文字所在标签父元素的高度
2.网页布局中，会设置line-height:1 取消上下间距
*/
文本水平对齐方式(text-align)
html写的文本，css中默认都是左对齐的
/*
属性名：text-algin
取值
属性值 效果
left 左对齐(默认)
center 居中对齐
right 右对齐
注意点：
如果需要让文本水平居中，text-algin属性给文本所在标签(文本的父元素)设置
*/水平居中
如写在div里面的img图片标签居中，text-algin:center就要加在div上
以下标签居中需要给父级标签加，才能水平居中
/*
text-align:center
text-align:center让以下标签水平居中，需要给标签所在的父级标签设置才生效
1.文本
2.span标签，a标签
3.input标签、img标签
水平居中小结
/*
给父级标签加过水平居中以后，父级内的标签就水平居中了
*/标签居中
/*
如果需要让div、p、h(大盒子)水平居中
通过margin: 0 auto 来实现
注意点：
1.如果需要让div、p、h(大盒子)水平居中，直接给当前元素(标签)本身设置即可
2.margin: 0 auto一般针对于规定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
*/div标签居中，以及给div盒子里的标签也居中
样式布局中，通常先给div盒子水平居中，然后给div标签设置标签居中，此时写在div盒子里的其它标签就会水平居中展示了
div {
/*设置div盒子的宽高*/
width: 234px;
height: 300px;
/*给div盒子居中*/
margin: 0 auto;
/*给所在div盒子里面的元素(标签)居中*/
text-align: center;
background-color: #fff;
}居中案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #f5f5f5;
}
.goods {
/*设置div盒子的宽高*/
width: 234px;
height: 300px;
/*给div盒子居中*/
margin: 0 auto;
/*给所在div盒子里面的元素(标签)居中，设置过以后图片和文字之类的就会水平展示了*/
text-align: center;
background-color: #fff;
}
</style>
</head>
<body>
<div class="goods">
<img width="160px" src="./平衡车.jpg" alt="">
<h2 style="font-size: 14px; line-height: 25px;">九号平衡车</h2>
<h3 style="line-height: 30px;color: #ccc;">成年人的玩具</h3>
<h2 style="font-size: 14px;color:#ffa500">1999元</h2>>
</div>
</body>
</html>div标签使用规范
div标签就是用来网页布局的，一个页面可能用无数次，
原则：如果使用div，尽量使用类名控制样式
背景相关属性
/*
注：背景颜色和背景图只会在盒子里面展示
background-color(背景颜色) ，
background-image(背景图) ,
background-repeat(背景图平铺),
background-position(背景图位置)
*/背景颜色
/*
背景颜色的默认值是透明
属性名：background-color:
属性值：
颜色取值：关键字、rgb表示法、rgba表示法、十六进制
注意点：
1.背景颜色默认值是透明：rgba(0,0,0,0)、transparent
2.背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
*/ <style>
/*必须是p标签，且类名是box的才会生效此样式*/
div {
width: 400px;
height: 400px;
background-color: pink;
background-color: #ccc;
/* 红绿蓝三原色，a是透明度0-1
r：red
g：green
b：blue
*/
background-color: rgba(0, 0, 0, 0.5);
background-color: rgba(red, green, blue, alpha);/*
alpha：表示透明度*/
}
</style>
</head>
<body>
<div class="div_height">
<a href="#">超链接，设置属性；hover时按钮颜色变红</a>
</div>
</body>背景平铺
属性名:background-repeat（快捷键bgr）
| 属性取值 | 效果 |
|---|---|
| repeat | （默认值）水平和垂直方向平铺 |
| no-repeat | 不平铺(即：图片只展示一个) |
| repeat-x | 沿着水平方向(x轴)平铺 |
| repeat-y | 沿着垂直方向(y轴)平铺 |
背景图位置
/*
属性名：background-position(快捷键bgp):
属性值：background-position:水平方向，垂直方向
方位名词：
水平方向：
left：默认就是左上
center：水平方向居中
right：水平方向右X轴右侧
垂直方向：
top：垂直向上
center：垂直居中
bottom：垂直向下
数字+px(坐标)
坐标系：
原点(0,0)：盒子的左上角
X轴：水平向右
Y轴：垂直向下
方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直
*/重要的图片用img，不重要的图片用background-image
/*
需要在网页中展示一张图片
方法一：
img是一个标签，不设置宽高，默认会以原图片尺寸显示
方法二：div标签+背景图
需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
*/