CSS_day03

一.框模型
1.内边距
1.什么是内边距
元素边框与内容之间的间距。
内边距会扩大元素边框占地区域。
2.语法
属性:
padding:value 四个方向的内边距
padding-top/bottom/left/right:value 单边定义
取值:
1.以px为单位的数字
2.以%为单位的数字
3.简写方式
padding:value 四个方向
padding:v1 v2 上下 左右
padding:v1 v2 v3 上 左右 下
padding:v1 v2 v3 v4 上 右 下 左(顺时针)
2.属性:box-sizing
作用:指定框模型的计算方式
取值:
1.content-box
默认值,采用默认的方式计算元素的占地尺寸
实际宽度=左右外边距+左右内边距+左右边框+width
实际高度=上下外边距+上下内边距+上下边框+height
2.border-box
元素的尺寸,会包含border以及padding的值
实际宽度=width+margin
实际高度=height+margin
二.背景
以单一颜色或图片来填充元素作为背景。
1.背景颜色
属性:background-color
取值:合法的颜色值
注意:背景颜色和背景图片都从边框位置处开始填充。
2.背景图像
属性:background-image
取值:url(图像路径);
ex:
background-image:url(a.jpg);
3.背景图像平铺
属性:background-repeat
取值:
1.repeat 平铺,默认值
2.no-repeat 不平铺,只显示一次图片
3.repeat-x 只在水平方向平铺
4.repeat-y 只在垂直方向平铺
4.背景图像尺寸
属性:background-size
取值:
1.width height
2.width% hegiht%
3.cover 覆盖,将背景图等比放大,直到背景图完全覆盖元素所有区域为止。
4.contain 将背景图等比放大,直到背景图碰到元素的某一个边缘为止。
5.背景图像固定
将背景图固定在网页的某个位置,一直在可视化区域中,不会随着滚动条而发生位置的变化。
属性:background-attachment
取值:
1.scroll 默认值,滚动
2.fixed 固定
6.背景图像定位
作用:改变背景图在元素中的位置
属性:background-position
取值:
1.x y
x:背景图在水平方向的偏移距离
取值为正,向右移动
取值为负,向左移动
y:背景图在垂直方向的偏移距离
取值为正,向下移动
取值为负,向上移动
2.x% y%
0% 0% 左上角
50% 50% 正中间位置
100% 100% 右下角
3.关键词
x:left/center/right
y:top/center/bottom
7.背景属性简写方式
属性:background
取值:color url() repeat attachment position;
三.渐变
1.什么是渐变
渐变指的是多种颜色平缓变化的一种显示效果。
2.渐变的主要因素
色标:一种颜色及其出现的位置
一个渐变是由多个色变组成(至少两个)
3.渐变的分类
1.线性渐变
以直线的方向来填充渐变色。
属性:background-image
取值:linear-gradient(angle,color-point1,color-point2,…)
(1)angle
表示渐变填充的方向或角度
取值:
1.关键词
to top:从下向上填充渐变
to bottom:从上向下填充渐变
to left:从右向左填充渐变
to right:从左向右填充渐变
2.角度值
0deg 等同于to top
90deg 等同于to right
180deg 等同于bo bottom
270deg 等同于to left
(2)color-point
色标:颜色 及其 位置
取值:颜色 与 位置 的组合,中间用空格隔开。
ex:
red 0%:在填充方向开始的位置处颜色为红色
green 50%:到填充方向一半位置处,颜色为绿色
blue 200px:

	2.径向渐变
	  以圆形的方式来填充渐变色。
		属性:background-image
	  取值:radial-gradient([size at position],color-point1,color-point2,..);

		size at position:
		   size:半径,以px为单位的数字
			 position:圆心的位置
			          取值:x y 具体数字
								      x% y% 元素宽和高的占比
											关键词:left/center/right
											        top/center/bottom

	3.重复渐变
	  将线性渐变 或 径向渐变重复几次出现。
  1.重复线性渐变
		  background-image:repeating-linear-gradient(angle,color-point1,color-point2,...);
  2.重复径向渐变
		  background-image:repeating-radial-gradient([size at position],color-point1,color-point2,...);

    注意:在重复渐变中色标位置用绝对值,不要用%。

4.浏览器兼容性
各浏览器的新版本都支持渐变属性,但低版本不支持。对于不支持的浏览器,可以通过设置浏览器前缀的方式,让浏览器支持渐变。
firefox:-moz-
IE:-ms-
Oprea:-o-
chrome&safari:-webkit-
ex:
background:-ms-linear-gradient(0deg,red,blue);
background:-moz-linear-gradient(0deg,red,blue);

https://www.caniuse.com 查看css属性支持的浏览器版本号

四.文本格式化属性
1.字体属性
1.指定字体类型
属性:font-family
取值:用逗号隔开字体名称列表
ex:
font-family:“微软雅黑”,“黑体”,Arial;
2.指定字体大小
属性:font-size
取值:以px或pt为单位的数字
3.字体加粗
属性:font-weight
取值:
1.bold:加粗(b,h1-h6)
2.normal:正常
3.value 无单位的整百倍数字
400等同于normal
900等同于bold
4.字体样式
属性:font-style
取值:
1.normal:正常字体
2.italic:斜体(i)
5.小型大写字母
将小写字母变为大写,但大小与小写字母一致。
属性:font-variant
取值:
1.normal:正常
2.small-caps:小型大写字母
6.字体属性的简写方式
属性:font
取值:style variant weight size family;
注意:使用简写形式时,必须要设置family的值,否则无效。
ex:
font:italic 12px; //无效
font:12px “微软雅黑”;//正确
练习:
页面中新建一个p元素,内容随意,最好中英文结合,然后按以下要求设置样式:
1.字体为"Arial"类型。
2.字体大小为24px。
3.文本加粗并倾斜显示。
4.将所有的字母显示为小型大写字母。
2.文本格式
1.文本颜色
属性:color
取值:合法的颜色值
2.文本排列
作用:指定文本,行内,行内块元素的水平对齐方式。
属性:text-align
取值:left/center/right/justify(两端对齐)
3.文字修饰(线条)
属性:text-decoration
取值:
1.none:无任何线条修饰
2.underline:下划线
3.overline:上划线
4.line-through:删除线(s标记)
4.行高
作用:设置一行数据所占的高度
属性:line-height
取值:以px单位的数字;
无单位的数字(行高是当前字体大小的倍数)。
注意:如果行高设置的比文字的高度大的话,那么该行文本将在指定行高内呈现垂直居中的效果。
5.首行文本缩进
属性:text-indent
取值:以px为单位的数字
6.文本阴影
属性:text-shadow
取值:h-shadow v-shadow blur color;
五.表格
1.表格常用属性
1.边距:padding
2.边框:border
3.尺寸:width/height
4.文本格式化:font-,text-,line-height
5.背景属性:颜色,图像,渐变
6.vertical-align:指定单元格数据的垂直对齐方式
取值:top/middle/bottom 上/中/下

课后作业:
1.创建一个400400px的表格,4行4列:
1.设置每个单元格的尺寸为100
100;
2.设置表格和单元格的边框为1px solid #000;
3.尝试着为每个td增加上外边距10px。

	2.完成"课后作业.png"效果图中的布局(注意细节修饰)
	
	3.可以开始做个人项目(参考http://www.cssmoban.com)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值