===========================================================================
CSS 字体属性允许设置字体样式 (font-family) 和字体加粗 (font-weight),还可以设置字体的大小、字体风格(如斜体)和字体变形(如小型大写字母);
- font-family:默认微软雅黑,如果浏览器不支持字体系列,就会使用默认的字体系列;
- font-size:字体大小(px)
- font-style:字体风格
* normal(默认)
* italic(斜体)
* oblique : 倾斜的字体
- font-weight:设置字体粗细程度
* 不设置:默认normal
* bolder:适当加粗
font字体的简写属性:将所有的样式属性声明在一个样式代码
- font:楷体 50px oblique bolder ;
这是一个span标签
可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进;
- direction:设置文本方向
* ltr: left to right
* rtl: right to left
- line-height:文本行高
- color:颜色(red/#F00)
- letter-spacing :字符间距
- letter-spacing :单词间距(系统默认两个字组成一个单词)
- text-align:文本的对齐方式(left,center,right)
- text-decoration:文本的修饰
* underline:下划线
* line-through:中划线
* overline:上划线
* none:去掉修饰内容
- text-indent:首行缩进以em为单位如:首行缩进2个字符2em
- letter-spacing:字符间距,字符与字符之间的间距
- word-spacing:单词间距,单词与单词之间的间距
这是一个div
this is a div1
this is a div2
CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果;
- background-color:将颜色作为背景
- background-image:将图片作为背景
- background-repeat:设置背景是否重复以及如何重复
- 默认图片作为背景,如果这个图片没有将浏览占满,它会自动以左上角为(0,0)点,x轴和y轴在重复;
- no-repeat:不重复 (推荐)
- repeat-x:x轴重复
- repeat-y:y轴重复
- background-size: cover(全覆盖)
- background-position:设置图片的起始位置
- 默认值:top left
- top center
CSS背景属性
读心灵鸡汤小故事,品智慧人生
一位老和尚,他身边聚拢着一帮虔诚的弟子。这一天,他嘱咐弟子每人去南山打一担柴回来。弟
子们匆匆行至离山不远的河边,人人目瞪口呆。只见洪水从山上奔泻而下,无论如何也休想渡河打柴
了。无功而返,弟子们都有些垂头丧气。唯独一个小和尚与师傅坦然相对。师傅问其故,小和尚从怀
中掏出一个苹果,递给师傅说,过不了河,打不了柴,
见河边有棵苹果树,我就顺手把树上唯一的一个苹果摘来了。后来,这位小和尚成了师傅的衣钵传人。
世上有走不完的路,也有过不了的河。过不了的河掉头而回,也是一种智慧。
但真正的智慧还要在河边做一件事情:放飞思想的风筝,摘下一个“苹果”。历览古今,抱定这样一种生活信念的人,最终都实现了人生的突围和超越。
CSS 尺寸 (Dimension)属性允许控制元素的高度和宽度。同样,允许你增加行间距;只对你设定的范围有效;
CSS尺寸属性对行内元素无效,只对是块级元素
这是一个font
这是一个span
通过CSS表格样式设置边框和单元格之间的空隙,CSS 中设置表格边框,使用 border 属性;
- border-collapse:合并边框和单元之间空隙;
- width 和 height 属性定义表格的宽度和高度;
- text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中;
- vertical-align 属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐;
CSS 列表属性允许放置、改变列表项标志,或者将图像作为列表项标志;
- list-style-image:将图象设置为列表项标志;
- list-style-position:设置列表中列表项标志的位置;
* inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐;
* outside:默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐;
* inherit:规定应该从父元素继承 list-style-position 属性的值;
- list-style-type:设置列表项标志的样式;
* square:列表项标志为方片
* disc:实心圆(默认)
* circle:空心圆
- 卡卡
- 之家
- 卡卡
-
CSS边框属性允许规定元素边框的样式、宽度和颜色;
- 边框默认的方向(颜色/宽度/样式):上 右 下 左(顺时针方向);
- 边框所有的属性(颜色/宽度/样式):某一个边没有设置颜色/宽度/样式都会补齐对边的颜色/宽度/样式;
CSS边框属性
边角是个弧形;
border-radius:创建圆角
box-shadow:向方框添加阴影
border-image:使用图片来创建边框
CSS圆角边框
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止;
- float:right:进行右浮动
- float:left:进行左浮动
- clear:清除浮动
* both:左右两边都不浮动
CSS浮动属性 div1div2div3===========================================================================
将HTML页面中的任意元素都可以看为是“盒子”(万物皆盒子);CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和外边距的方式;
- 盒子的容量(element):指定盒子的宽度和高度(DIV的宽度和高度);
- 盒子的厚度(border):就是指定DIV元素的边框大小;
- 盒子的内边距(padding):内容和边框之间的距离;
- 盒子的外边距(margin):盒子跟盒子之间的距离;
padding和margin都和CSS边框里的特点一致;
- 默认方向:上、右、下、左
- 某一个边没有设置外边距或内边距会自动补齐对边的外边距跟内边距;
- element:元素内容
- width:元素内容的宽度
- height:元素内容的高度
- border:元素的边框
- padding:边框到内容的距离
- margin:边框到其他元素的距离,同时设置左上右下外边距
CSS盒子的基本使用 注意:
-
内边距和外边距的值可以是负数;
-
在页面上,设置margin-right无效,因为元素默认是左对齐,不管怎么设置元素都是左对齐,所以将元素设置为右对齐就可以看到效果,float:right;
-
浏览器:元素进行渲染的时候,是从左往右进行渲染;
============================================================================
CSS 定位 (Positioning) 属性允许对元素进行定位;
- position:
* 固定(fixed)
* 相对(relative)
* 绝对(absolute)
* 静态(static)
- left:对元素进行左偏移;
- top:对元素进行上偏移;
- right:对元素进行右偏移;
- bottom:对元素进行下偏移;
只在一个位置进行显示;(类似小广告)
固定定位