初探HTML之CSS篇(属性)
前言
I am a slow walker,but I never walk backwards.
CSS(层叠样式表)
- CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态修饰网页，还可以配合各种脚本语言动态地对网页哥元素进行格式化。
- CSS能够对网页中元素位置的排版进行像素精确控制，几乎支持所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS 尺寸属性(Dimension)
height 设置元素高度
width 设置元素宽度
max-height 设置元素的最大高度
max-width 设置元素的最大宽度
min-height 设置元素的最小高度
min-width 设置元素的最小宽度
CSS 背景属性(Background)
background 在一个声明中设置所有的背景属性
background-color 设置元素的背景颜色
background-image 设置元素的背景图片
background-position设置背景图片的位置top上方right右方left左方center中间
background-repeat设置背景图片的重复方式repeat全部重复repeat-x横向重复repeat-y纵向重复no-repeat不重复background-attachment背景图片是否随着页面的滚动而滚动
CSS边框属性(Border和Outline)
属性 | 描述 |
|---|---|
border | 设置所有的边框属性 |
border-bottom | 设置下边框 |
border-bottom-color | 设置下边框的颜色 |
border-botton-style | 设置下边框的样式 |
border-botton-width | 设置下边框的宽度 |
border-color | 设置四条边框的颜色 |
border-left | 设置左边框 |
border-left-color | 设置左边框的颜色 |
border-left-style | 设置左边框的样式 |
border-left-width | 设置左边框的宽度 |
border-right- | 设置右边框 |
border-right-color | 设置右边框的颜色 |
border-right-style | 设置右边框的样式 |
border-right-width | 设置右边框的宽度 |
border-style | 设置四条边框的样式 |
solid | 样式为实线 |
double | 双实线(宽度为1px 看不见效果) |
dottde | 点状线 (在IE6/7下表现为实线) |
dashed | 虚线(在IE6/7下表现为实线) |
border-top | 设置上边框 |
border-top-color | 设置上边框的颜色 |
border-top-style | 设置上边框的样式 |
border-top-width | 设置上边框的宽度 |
border-width | 设置四条边框的宽度 |
outline | 设置所有的轮廓属性 |
outline-color | 设置轮廓的颜色 |
outline-style | 设置轮廓的样式 |
outline-width | 设置轮廓的宽度 |
border-bottom-left-radius | 定义边框左下角的形状 |
border-bottom-right-radius | 定义边框右下角的形状 |
border-top-left-radius | 定义边框左上角的形状 |
border-top-right-radius | 定义边框右上角的形状 |
border-radius | 简写属性，设置所有四个border-*-radius属性 |
border-image | 简写属性，设置所有border-image-*属性 |
border-image-outset | 规定边框图像区域超出边框的量 |
border-image-repeat | 图像是否应平铺(repeated)、铺满(rounded)或拉伸(stretched) |
border-image-slice | 规定图像边框的向内偏移 |
border-image-width | 规定图片边框的宽度 |
border-image-source | 规定用作边框的图片 |
box-shadow | 向方框添加一个或多个阴影 |
CSS 字体属性(Font)
属性 | 描述 |
|---|---|
font | 设置所有的字体属性 |
font-family | 设置文字的字体系列 |
font-size | 设置文字的字体尺寸 |
font-size-adjust | 为元素规定aspect值 |
font-stretch | 收缩或拉伸当前的字体系列 |
font-style | 设置文字的字体样式 |
font-variant | 设置文字中英文的打开方式 |
font-weight | 设置文字粗细 |
text-align设置文字的对齐方式center居中left左对齐right右对齐
letter-spacing设置文字间距text-decoration设置文字修饰线none主要用于去除 a 标签的下划线underline下划线overline上划线line-through删除线 注意：如果一个子元素放置另一个元素(父元素)内，给父元素设置text-decoration会发现子元素的text-decoration无法清除干净
- 解决方案：
1、使用绝对定位
position: ansolute2、设置浮动float text-transform设置大小写转换uppercase所有单词全部大写lowercase所有单词全部小写capitalize将首字母进行大写
font-style设置文字样式normal正常italic斜体字oblique倾斜的文字
font-variant设置文字中英文的打开方式nomal正常small-caos英文编程大写，并以小字号进行展示
CSS 文本属性(Text)
属性 | 描述 |
|---|---|
color | 设置文本的颜色 |
direction | 规定文本的方向/书写方向 |
letter-spacing | 设置字符间距 |
line-height | 设置行高 |
text-align | 规定文本的水平对齐方式 |
vertical-align | 规定文本的垂直对齐方式 |
text-decoration | 规定添加到文本的装饰效果 |
text-indent | 规定文本首行的缩进 |
tex-transform | 控制文本的大小写 |
unicode-bidi | 设置文本方向 |
white-space | 规定如何处理元素中的空白 |
word-spacing | 设置单词间距 |
CSS 表格属性（Table）
属性 | 描述 |
|---|---|
border | 设置边框 |
border-color | 设置边框颜色 |
cellspacing | 设置表格框线的宽度 |
cellpadding | 设置数据与框线的距离 |
background-color | 设置表格的背景颜色 |
background-url | 设置表格的背景图片 |
colspan | 横向合并单元格 |
rowspan | 纵向合并单元格 |
合并单元格的四部曲
1、确定单元格从那个单元格开始合并
2、确定单元格是纵向合并还是横向合并 3、确定需要合并几个单元格 4、处理多余的单元格CSS列表属性(List)
属性 | 描述 |
|---|---|
list-style | 在一个声明中设置所有的列表属性 |
list-style-image | 将图像设置为列表项标记 |
list-style-position | 设置列表项标记的放置位置 |
inside | 将列表样式放入content中 |
outside | 默认，列表样式不在content中，一般在psdding内 |
list-style-type | 设置列表项标记的类型 |
- 复合写法
list-style1、类型 2、位置 3、图片
- 清除默认样式
padding: 0px;margin:0px;list-style:none;
CSS 外边距属性（Margin）
属性 | 描述 |
|---|---|
margin | 在一个声明中设置所有外边距属性 |
margin-top | 设置元素的上外边距 |
margin-right | 设置元素的右外边距 |
margin-bottom | 设置元素的下外边距 |
margin-left | 设置元素的左外边距 |
CSS 内边距属性（Padding）
属性 | 描述 |
|---|---|
padding | 在一个声明中设置所有内边距属性 |
padding-top | 设置元素的上内边距 |
padding-right | 设置元素的右内边距 |
padding-bottom | 设置元素的下内边距 |
padding-left | 设置元素的左内边距 |
CSS 定位属性（Positioning）
属性 | 描述 |
|---|---|
position | 规定元素的定位类型 |
bottom | 设置定位元素下外边距边界与其包含块下边界之间的偏移 |
right | 设置定位元素右外边距边界与其包含块右边界之间的偏移 |
left | 设置定位元素左外边距边界与其包含块左边界之间的偏移 |
top | 设置定位元素上外边距边界与其包含块上边界之间的偏移 |
overflow | 规定当内容溢出元素框时发生的事情 |
cursor | 规定要显示的光标的类型 |
float | 规定框是否应该浮动 |
display | 规定元素应该生成的框的类型 |
vertical-align | 设置元素的垂直对齐方式 |
visibility | 规定元素是否可见 |
z-index | 设置元素的堆叠顺序 |
CSS 伪类（Pseudo-classes）
属性 | 描述 |
|---|---|
：active | 向被激活的元素添加样式 |
：focus | 向拥有键盘输入焦点的元素添加样式 |
：hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
：link | 向未被访问的链接添加样式 |
：visited | 向已被访问的链接添加样式 |
：lang | 向带有指定lang属性的元素添加样式 |
CSS 为元素（Pseudo elements）
属性 | 描述 |
|---|---|
：first-letter | 向文本的第一个字母添加特殊样式 |
：first-line | 向文本的首行添加特殊样式 |
：bofore | 在元素之前添加内容 |
：after | 在元素之后添加内容 |