HTML 样式
1. font字体
font-family 字体样式 比如:微软雅黑、Serif 字体、Sans-serif 字体、Monospace 字体、Cursive 字体、Fantasy 字体
color 字体颜色
font-size:50px 字体大小 注意:如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。
text-align:center 对齐方式
font-style 字体风格斜体 normal - 文本正常显示、italic - 文本斜体显示、oblique - 文本倾斜显示
font-variant 小型大写字母
font-weight字体粗细normal:400 bold:700 最粗:900
总结
属性描述
简写属性。作用是把所有针对字体的属性设置在一个声明中。
当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)
对字体进行水平拉伸。(CSS2.1 已删除该属性。)
以小型大写字体或者正常字体显示文本。
2. background背景
background-color 背景颜色
background-image: url(/i/eg_bg_04.gif) 背景图片
background-position:center 背景定位 居中 (属性:top、bottom、left、right 和 center)
background-repeat 属性设置是否及如何重复背景图像
总结
repeat默认。背景图像将在垂直方向和水平方向重复。
repeat-x
背景图像将在水平方向重复。
repeat-y
背景图像将在垂直方向重复。
no-repeat
背景图像将仅显示一次。
inherit
规定应该从父元素继承 background-repeat 属性的设置。
3.text文本
text-indent: 5em; 缩进
text-indent: -5em;缩进悬挂
text-align:center 对齐方式 (属性:left、right 和 center)
word-spacing: 字间隔 30px或者-0.5em
letter-spacing 字母间隔 区别:字母间隔修改的是字符或字母之间的间隔
text-decoration 划线 属性 none / underline / overline / line-through / blink
white-space 处理空白符 它会把所有空白符合并为一个空格 属性:normal丢掉多余的空白符
属性
pre-line合并保留允许
normal
合并
忽略
允许
nowrap
合并
忽略
不允许
pre
保留
保留
不允许
pre-wrap
保留
保留
允许
总结
属性描述
设置文本颜色
缩进元素中文本的首行。
text-shadow
设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
unicode-bidi
设置文本方向。
设置元素中空白的处理方式。
4.a链接
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
text-decoration 属性大多用于去掉链接中的下划线: none
background-color属性大多用于设置链接中的背景色
5. list-style列表
list-style-type 设置显示方式 比如说是实心圆点 黑色方块
总结
属性描述
简写属性。用于把所有用于列表的属性设置于一个声明中。
marker-offset
6.表格
border 边框属性
width
height
text-align:right; 表格中的文本对齐方式
vertical-align: bottom; 垂直对齐方式
padding表格内边距
总结
属性描述
设置是否把表格边框合并为单一的边框。
设置是否显示表格中的空单元格。
设置显示单元、行和列的算法。
7.outline轮廓
属性描述CSS
p
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
注释:只有在规定了 !DOCTYPE 时,Internet Explorer 8 (以及更高版本) 才支持 outline 属性。
抽烟 // 方块点选,点选之后可以取消
喝酒 // 圆形点选,点选之后不可以取消
14.选择 点选
float: right;
float: left;
13.float浮动
提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
position 属性值的含义:
position
12. Positioning定位
属性描述
简写属性。在一个声明中设置所有外边距属性。
设置元素的上外边距。
总结
11.margin外边距和外边距合并
属性描述
简写属性,用于把针对四个边的属性设置在一个声明。
用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
简写属性,用于把下边框的所有属性设置到一个声明中。
简写属性,用于把左边框的所有属性设置到一个声明中。
简写属性,用于把右边框的所有属性设置到一个声明中。
简写属性,用于把上边框的所有属性设置到一个声明中。
总结
border-color: transparent; 透明边框
border-top-colorborder-right-colorborder-bottom-colorborder-left-color
边框的颜色
border-top-widthborder-right-widthborder-bottom-widthborder-left-width
边框的宽度
边框与背景
border-top-styleborder-right-styleborder-bottom-styleborder-left-style
定义边框样式:
border-style: none 没有边框
边框的样式
10.border边框
属性描述
简写属性。作用是在一个声明中设置元素的所内边距属性。
总结
h1 {padding: 10px;}
例如,如果您希望所有 h1 元素的各边都有 10 像素的内边距,只需要这样:
padding 属性接受长度值或百分比值,但不允许使用负值。
9.padding内边距
element : 元素。
padding : 内边距,也有资料将其翻译为填充。
border : 边框。
margin : 外边距,也有资料将其翻译为空白或空白边。
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
8.盒子模型