文本和字体相关样式
- text-align: left /right/ center; 水平对齐方式
- text-decoration: underline下划线/ overline上划线/ line-through删除线/ none去掉下划线
- line-height: 30px; 行高, 可以控制多行的间距, 单行可以控制垂直居中
- text-shadow: 颜色 x偏移值 y偏移值 浓度; 值越小越清晰
- 右下:++ 右上:+- 左上:-- 左下:-+
- font-size: 20px; 字体大小
- font-weight: bold加粗/ normal去掉加粗;
- font-style: italic 斜体
- font-family: xxx xxx xxxx; 设置字体
- font: 30px xxx xxx xxx; 设置字体大小 和字体
元素的显示方式display
- block: 块级元素的默认值
- 特点:独占一行,可以修改宽高 , 包括:div,h1-h6,p等
- inline: 行内元素的默认值
- 特点:共占一行,不可以修改宽高,包括: span,b加粗,i斜体,u下划线,s删除线, 超链接a
- inline-block:行内块元素默认值
- 特点: 共占一行,可以修改宽高, 包括:img,input等
- 行内元素默认是不能修改宽高的, 如果必须要改, 需要将显示方式display改成block或inline-block
盒子模型
- 盒子模型 = 宽高（weight、height）+外边距（margin）+边框（border）+内边距（padding）
- 通过盒子模型的相关样式,控制元素的显示效果
- 宽高: 控制元素的显示大小
- 外边距: 控制元素的显示位置
- 边框: 控制边框效果
- 内边距: 控制元素内容的位置
宽高
- 赋值方式: width/height
- 像素值
- 百分比(上级元素的百分比)
- 行内内元素不能修改宽高
外边距
-
什么是外边距:
元素距上级元素或相邻兄弟元素的距离称为外边距
- 赋值方式:
margin-left/right/top/bottom:10; 单独某个方向赋值 margin:50px; 四个方向赋值 margin:10px 20px; 上下10 左右20; margin:10px 20px 30px 40px; 上右下左 顺时针 - 上下相邻两个元素彼此添加外边距,取最大值
- 左右相邻两个元素彼此添加外边距,两者相加
- 行内元素上下外边距无效
- 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题, 给上级元素添加overflow:hidden解决!
边框
-
- border-left/right/top/bottom: 粗细 样式 颜色; 单独某个方向添加边框
- border: 粗细 样式 颜色; 四个方向添加边框
- border-radius:3px; 圆角，值越大越圆 超过宽高一半时为正圆
内边距
- 元素边缘距内容的距离称为内边距, 用来控制元素内容的位置
- 给元素添加内边距会影响元素的宽高
- 赋值方式: 类似外边距
padding-left/right/top/bottom:10px; 单独某个方向 padding:10px; 四个方向 padding:10px 20px; 上下10 左右20 padding:10px 20px 30px 40px; 上右下左 顺时针
CSS三大特性
- 继承: 元素可以继承上级元素文本和字体相关的样式, 部分标签自带效果不受继承影响,比如:超链接字体颜色, h1-h6字体大小 。
- 层叠性: 多个选择器选择到同一个元素时, 如果作用的样式不同，则所有样式全部层叠生效, 如果样式相同，则由优先级决定。
晚课作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font: 12px "simhei", Arial, Helvetica, sans-serif;
color: #666;
}
body>div{
background-color: #e8e8e8;
overflow: hidden;/*解决粘连问题*/
display: inline-block;
}
#left_div{
width: 611px;
height: 376px;
background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_stationery_img1.png");
background-size: 254px 279px;
background-repeat: no-repeat;
background-position: 45px 52px;
}
#right_div{
width: 375px;
height: 376px;
background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_stationery_img2.png");
background-size: 130px 230px;
background-repeat: no-repeat;
background-position: 0 50%;
}
#left_div>div{
width: 245px;
height: 232px;
margin: 70px 0 0 340px;
}
#right_div>div{
width: 224px;
height: 155px;
margin: 75px 0 0 130px;
}
.p1{
font-size: 32px;
color: #333;
margin-bottom: 12px;
}
.p3{
font-size: 16px;
margin-bottom: 12px;
color: #E89AA8;
font-weight: bold;
}
a{
width: 132px;
height: 40px;
display: block;
background-color: #E89AA8;
text-decoration: none;
text-align: center;
line-height: 40px;
color: white;
border-radius: 2px;
font-size: 20px;
}
</style>
</head>
<body>
<div id="left_div">
<div>
<p class="p1">雅致布面年历本</p>
<p class="p2">有色更有范！变色PU皮，撞色搭配，绚丽色彩，张扬个性，点亮生活新时尚！</p>
<p class="p3">仅售 ￥49.00</p>
<a href="">查看详情</a>
</div>
</div>
<div id="right_div">
<div>
<p class="p1">透视网格拉链袋</p>
<p class="p2">韩国创意卡通 丛林物语网格文件袋</p>
<p class= ![RabbitMQ学习-服务端学习[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)