WEBBASE篇: 第五篇, CSS知识3
CSS知识3
框模型:
一,外边距(上文)
二, 内边距
1,什么是内边距?
内边距就是内容与元素边缘之间的距离;
注: 内边距会扩大元素边框内所占的区域的
语法: padding: 四个方向的内边距
padding-top / right / bottom / left : 值 ;
取值:(1)以px为单位的数值; (2)以% 为单位的数值;
padding 的简洁写法:
padding:value 四个方向内边框;
padding:v1 v2 ; 上下, 左右;
padding: v1 v2 v3 ; 上 左右 下;
padding:v1 v2 v3 v4 ; 上 ,右 , 下 , 左;
页面中具备默认内边距的元素:(1) ol 、 ul , 左内边距为40px
(2)文本框,密码框, 按钮,上下内边距;
三,box-sizeing 属性;
作用: 重新指定框模型的计算方式;
属性:box-sizing
取值:(1) content-box
元素的width属性只表示内容区域的宽度;
元素的height属性只表示内容区域的高度;
(2) border-box
元素的width属性包含内容区域宽度,左右内边距和左右边框的值
元素的height属性包含内容区域高度,上下内边距和上下边框的值
背景属性:
一,背景颜色
属性: background-color
取值:合法的颜色值;
注: 背景颜色是从border位置处就开始绘制的;
二, 背景图像:
属性:background-image
取值:url:(图片路径) 可以不加引号;
三, 背景图片平铺:
属性: background-repeat
取值: (1)repeat ,默认值,横向纵向都平铺;
(2)no-repeat 不平铺
(3)repeat-x , 只横向平铺
(4)repeat-y , 只纵向平铺;
四,背景图片尺寸:
属性:background-size
取值:width , height ,(1)以px位单位,(2)以%为单位;
五,背景图片位置:
作用:“改变背景图片在元素中 的位置;”
属性: background-position
取值: (1)、x y
以px为单位的数值,用空格隔开
x:背景图像的水平偏移位置
取值为正,图片右偏移
取值为负,图片左偏移
y:背景图像的垂直偏移位置
取值为正,图片下偏移
取值为负,图片上偏移
(2)、x% y%
0% 0% : 在左上角
100% 100% : 在右下角
50% 50% : 正中间
(3)、关键字
x : left 上午 11:47:31/ center / right
y : top / center / bottom
六,背景属性:
属性:background
取值: color url() repeat position
eg: background:red;
background:url(a.jpg) no-repeat -35px center
文本格式属性
1、字体属性
1、指定字体
属性:font-family
取值:使用 , 隔开的字体值的列表
ex:
1、font-family:"微软雅黑";
2、font-family:"microsoft yahei";
3、font-family:"黑体";
4、font-family:"simhei";
5、font-family:"宋体";
6、font-family:"simsun";
7、font-family:"微软雅黑",Arial,Helvetica;
2、指定字体大小
属性:font-size
取值:
以 px 或 pt 为单位的数值
3、字体加粗
属性:font-weight
取值:
1、normal :正常体,无加粗效果
2、bold :加粗
3、value
取值为无单位的数字
400 - normal
900 - bold
4、字体样式 - 斜体
属性:font-style
取值:
1、normal :正常,无斜体效果
2、italic :斜体
5、小型大写字母
作用:将文本中的所有小写字母都变为大写字母,但是大小跟小写字母一样
属性:font-variant
取值:
1、normal
2、small-caps
6、字体属性
属性:font
取值:style variant weight size family;
注意:
使用简写属性时,必须要设置 family 的值,否则无效
练习:
创建任意文本
1、字体大小更改为 18pt
2、加粗所有文本
3、斜体显示所有文本
4、所有小写字符都变成小型大写字符
5、字体设置为 微软雅黑
2、文本属性
1、文本颜色
属性:color
取值:合法颜色值
2、文本的排列方式
控制内容的水平对齐方式
属性:text-align
取值:left / center / right / justify
justify:两端对齐
3、文字修饰
属性:text-decoration
作用:指定某元素中文字的线条修饰效果
取值:
1、none
无任何线条修饰
2、underline
下划线
3、overline
上划线
4、line-through
删除线
4、行高
作用:指定一行文本数据所占的高度是多少
特点:如果行高的高度高于文本的高度的话,那么文本将在行高范围内垂直居中显示
属性:line-height
取值:
1、以 px 为单位的数值
2、无单位的数字,表示为当前字体大小的倍数
5、首行文本缩进
属性:text-indent
取值:以 px 为单位的数字,表示缩进距离
6、文本阴影
属性:text-shadow
取值:h-shadow v-shadow blur color
表格属性
一、表格常用属性
1、尺寸属性 - width,height
2、边框属性 - border
3、文本格式化属性
font-*
text-*
4、背景属性
5、框模型属性
margin 不能应用在td上
6、vertical-align
取值:top / middle / bottom
二、表格特有属性
1、边框合并
属性:border-collapse
取值:
1、separate
默认值,分离边框模式
2、collapse
边框合并模式
2、边框边距
作用:设置单元格四周的距离
属性:border-spacing
取值:
1、指定一个值
水平和垂直的间距是相等的
2、指定两个值
第一个值:水平间距
第二个值:垂直间距
两个值中间用空格隔开
注意:只有在分离边框模式下才有效
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Description" content="">
<title>Document</title>
<style>
body{
font-size:12px;
}
a{
color:#005aa0;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
#tbl {
width:990px;
border-bottom:1px solid #ddd; } #tbl thead td{
/*文本颜色,加粗,下边框,文本水平居中对齐 内边距*/
color:#666;
font-weight:bold;
border-bottom:1px solid #ddd;
text-align:center;
padding:5px 0;
}
#tbl .cal1{
width:610px;
text-align:left;
} #tb1 tbody td{
/*文本水平居中对齐,下边框,上下内边距*/
text-align:center;
border-bottom:1px dotted #ddd;
padding:5px 0;
}
</style> </head>
<body>
<table id='tbl'>
<thead>
<tr>
<td class='cal1'>主题</td>
<td>回复/浏览</td>
<td>作者</td>
<td>时间</td>
</tr>
</thead>
<tbody>
<tr>
<td class='cal1'>
<a href="#">银灰色的,很酷</a>
</td>
<td>0/0</td>
<td>
<a href="#">2001年冬天</a>
</td>
<td>
2011-1-1 11:12:11
</td>
</tr>
<tr>
<td class='cal1'>
<a href="#">银灰色的,很酷</a>
</td>
<td>0/0</td>
<td>
<a href="#">2001年冬天</a>
</td>
<td>
2011-1-1 11:12:11
</td>
</tr>
<tr>
<td class='cal1'>
<a href="#">银灰色的,很酷</a>
</td>
<td>0/0</td>
<td>
<a href="#">2001年冬天</a>
</td>
<td>
2011-1-1 11:12:11
</td>
</tr>
<tr>
<td class='cal1'>
<a href="#">银灰色的,很酷</a>
</td>
<td>0/0</td>
<td>
<a href="#">2001年冬天</a>
</td>
<td>
2011-1-1 11:12:11
</td>
</tr>
</tbody>
</table> </body>
</html>
过渡效果:
一,什么是过渡效果;
使得css 属性值在一段时间内变化成另外一个属性值;
二, 过渡的语法:
1,指定过渡效果属性:
作用:指定那个属性值在变化的时候使用过渡的效果;
属性:transition-property(必须的值)
取值:(1)属性名称 background-color
(2)all 但凡能使用过渡效果的属性的值在变化时一律都使用过渡效果体现;
允许使用过渡效果的属性:与颜色相关的属性都可以使用过渡;取值为数字的属性都可以使用过渡;
2,指定过渡时长(必须的值)
属性: transition-duration
取值: 以s或ms为单位的数字;
1s =1000ms
300ms = 0.3s = .3s
3,指定过渡的速度升级曲线函数(指定变化速率)
属性: transition-timing-function
取值: (1)ease , 默认值, 慢速开始, 快速变快,慢速结束;
(2)linear 匀速
(3)ease-in 慢速开始, 加速结束
(4)ease-out 快速开始,减速结束
(5)ease-in-out 慢速开始和结束,中间先加速后减速
4,指定过渡延迟
属性:transition-delay
取值: property duration timing-function delay;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1{
background-color:red;
width:200px;
height:200px;
/*过渡编写于此:即管去又管回*/ /*1、指定过渡属性*/
transition-property:all;
/*2、指定过渡时长*/
transition-duration:2s;
/*3、指定过渡速率*/
transition-timing-function:linear;
/*4、指定过渡延迟*/
/* transition-delay:5s; */
}
#d1:hover{
background-color:green;
border-radius:50%;
/*过渡编写于此:只管去不管回*/
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
练习1:
创建一个 div 200*200
鼠标悬停时:
1、背景颜色变为紫色
2、由正方形变为长方形
3、向右偏移500px
鼠标移出时,使用过渡效果显示回来
WEBBASE篇: 第五篇, CSS知识3的更多相关文章
- python学习之路基础篇(第五篇)
前四天课程回顾 1.python简介 2.python基本数据类型 类: int:整型 | str:字符串 | list:列表 |tuple:元组 |dict:字典 | set:集合 对象: li = ...
- [应用篇]第五篇 JSTL之fmt标签日期和数字格式化
fmt标签个人用的比较少,但是我还是在这里简单的留一下笔记,也是算是学习了一下!这样方便你们课设的时候能用的上,要学会进步的学习,不要停留! 引入该标签库的方法为: <%@ taglib pre ...
- WEBBASE篇: 第三篇, CSS知识1
第三篇, CSS知识1 一,CSS 介绍 CSS: Cascading Style Sheets ---样式表 HTML: 搭建网页结构: CSS: 在网页结构基础上进行网页的美化: 二,CSS的使用 ...
- WEBBASE篇: 第四篇, CSS知识2
CSS知识2 一, 尺寸 与 边框 CSS单位 1,尺寸单位:(1)px 像素 (2)% (3) in 英寸 lin = 2.54cm (4)pt 磅 1pt = 1/72in ppi ...
- 【Python五篇慢慢弹(5)】类的继承案例解析,python相关知识延伸
类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...
- 【Python五篇慢慢弹】数据结构看python
数据结构看python 作者:白宁超 2016年10月9日14:04:47 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给出的pythondoc ...
- 【Python五篇慢慢弹(3)】函数修行知python
函数修行知python 作者:白宁超 2016年10月9日21:51:52 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给出的pythondoc ...
- 【Python五篇慢慢弹(4)】模块异常谈python
模块异常谈python 作者:白宁超 2016年10月10日12:08:31 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给出的pythondo ...
- 前端工程师技能之photoshop巧用系列第五篇——雪碧图
× 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sp ...
随机推荐
- python学习笔记:*args和**kwargs使用原理?
一.*args和**kwargs原理 先看个例子: def test(*args,**kwargs): print("args =",args) print("kwarg ...
- JS设计模式(2)策略模式
什么是策略模式? 定义:根据不同参数可以命中不同的策略 主要解决:在有多种算法相似的情况下,使用 if...else 所带来的复杂和难以维护. 何时使用:有许多种情况,而区分它们的只是他们直接的行为. ...
- Android中intent的分类及使用
intent分为隐式和显式,显式的浅显易懂就是直呼其名,可用intent类的一个构造函数,直接传入context和想要打开的活动的名称.还可以用setcomponent方法来确定要打开的活动的名称.而 ...
- STS的安装与简单使用
一,STS下载与安装 1.下载地址:http://spring.io/tools3/sts/all 2.选择对应版本安装或者解压 二,STS简单使用 1.快捷方法 (1)main+alt+/+回车 = ...
- CSS【05】:CSS三大特性
继承性 作用:给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性 示例代码: <style> div { color: red; } </style> <di ...
- ssm回顾笔记(一)
这两天来到了农银,这边即将进行的一个项目是将ssh框架的电商项目迁移到springboot+ssm框架上,所以我基本上是三门技术在同时进行学习,当然以前学过ssm,现在只是回顾. spring 注解 ...
- JS基础概念
JS基础概念 1. 算法及流程图 算法类型:1.算数算法:2.事务性算法(解决某个问题的方法和先后顺序). JS语法概述 1. 引入JS的方法 1.用<script src="&quo ...
- scrapy中XMLFeedSpider
爬取案例: 目标网站: url = 'http://www.chinanews.com/rss/scroll-news.xml' 页面特点: 先创建爬虫项目: 也可以查看爬虫类: 创建xmlFeed ...
- string部分方法
1.string.lastIndexOf() lastIndexOf 是从string末尾查找,但是返回值仍是首部的位置值. 2.string.replace() 放一个正则匹配会全部替换. 3.st ...
- 关于vs code 快速生成vue 模板
在 文件>首选项>用户代码片断里面,打开vue.json 添加以下代码: "Print to console": { "prefix": " ...