样式
- 行间样式:在标签里
<div style="400px; height:200px; background:red;">块</div>
- 内部样式:用<style></style>标签包裹
<style> #box{width:400px; height:200px; background:red;} </style>
- 外部样式:<link />标签
<link href="style.css" rel="stylesheet"/>
常见样式:[属性:属性值;]
- width 宽度
- height 高度
- background 背景
- border 边框
- padding 内边距
- margin 外边距
复合属性:一个属性多个属性值。background,border,padding,margin
- background
<style> #bg{ background:url(bg.jpg) center 0 no-repeat gray fixed; /* background-attachment: fixed; 背景是否滚动 background-color: gray; 背景颜色 background-image: url(bg.jpg); 背景图 background-repeat: no-repeat; 背景图是否重复 background-position: center 0px; 背景图位置 */ } /* 复合属性:一个属性多个属性值; background 背景 repeat 重复 10px(X轴) 50px(Y轴) fixed 固定 */ </style>
- border
<style> #box{ border:1px dotted blue; /* 宽度 border-top- 1px; border-right- 1px; border-bottom- 1px; border-left- 1px; 样式 border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; 颜色 border-top-color: blue; border-right-color: blue; border-bottom-color: blue; border-left-color: blue; */ } /* 边框样式: solid 实线 dashed 虚线 dotted 点线(IE6不兼容) */ </style>
- padding
<style> #box{padding:30px 30px 10px 30px;} /* padding: top right bottom left; padding-top:30px; padding-right:30px; padding-bottom:30px; padding-left:30px; padding:30px;上右下左都一样 padding:30px 25px;上下一样,左右一样 padding:30px 5px 25px;左右一样 注意:内边距相当于给一个盒子加了填充厚度会影响盒子大小。 */ </style>
- margin
<style> #box1{ margin: 20px 20px 20px 20px;} /* margin 外边距(跟padding一样) 外边距复合:margin: top right bottom left; 外边距的问题: 1、上下外边距会叠压; 2、父子级包含的时候子级的margin-top会传递给父级;(内边距替代外边距) */ </style>
常见样式文本:
-
font-size 文字大小(一般均为偶数)
- font-family 字体(中文默认宋体)
- color 文字颜色(英文、rgb、十六位进制色彩值)
- line-height 行高
- text-align 文本对齐方式
- text-indent 首行缩进(em缩进字符)
- font-weight 文字着重
- font-style 文字倾斜
- text-decoration 文本修饰
- letter-spacing 字母间距
- word-spacing 单词间距(以空格为解析单位)
font:font-style | font-weight | font-size/line-height | font-family;