一、 css 重要性
1. html 掌握三部分,就可以上手项目了,一个 html 页面的各种元素(控件)。
比如: <div> <span> <li> <link ><a> <img> ....等等 。
2. css 样式布局,样式布局是页面的灵魂,没有样式的页面看起来一塌糊涂,乱七八糟,给人的感觉是糟糕。
而拥有好的样式的布局的页面给人的感觉是愉快的,看起来舒服。
3. js 文件和 响应事件
所以可想而知,熟知css 中的各种样式属性的作用是特别重要的。能让你快速的布局出漂亮的网页页面。
二、css 样式属性
// 这里我会讲一些比较常用、简单的样式属性,复杂一点的,我会另外写文章单独去讲,请读者关注笔者其他文章。
margin -- 控件边缘相对父空间的边距。
margin: 0: 指上下左右距离0。
margin: 0 10px: 指上下距离0,左右距离为 10px。
padding -- 控件的内容相对控件的边缘的边距。
padding: 0 指内边距上下左右为0
padding: 0 10px: 指上下内边距为0,左右内边距为 10px。
color -- 字体颜色
color: red 指字体的颜色为红色。
background-color -- 背景的颜色
background-color: red 指背景的颜色为红色。
border -- 边框的宽度
border: 2px 指边框的宽度为2px。
table的border-collapse属性与border-spacing属性
border-collapse:collapse; 表示边框合并在一起。
border-collapse:separate;表示边框之间的间距,间距的大小用border-spacing:px;定义大小。
font-size -- 字体的大小
font-size: 14px 指字体的大小为14px。
text-decoration -- 下划线
text-decoration: none 无文本修饰,定义标准的文本。
text-decoration: underline 定义文本下的一条线。
text-decoration: overline 定义文本上的一条线。
text-decoration: line-through 定义穿过文本的一条线。
text-decoration: blink 定义闪烁的文本。
text-decoration: inherit 规定应该从父元素继承 text-decoration 属性的值。
width -- 宽度
width: 100px 指控件宽度为100px。
min-width -- 最小宽度
min-width: 100px 定义元素(控件)最小宽度,常和width 一起使用
height -- 高度
height: 100px 定义元素的高度为100px。
line-height -- 文字行高
line-height: 20px 定义文字的行高为20px。
overflow -- 元素溢出部分是否隐藏
overflow: hidden 定义元素溢出部分隐藏。
float -- 元素在哪个方向浮动,
float: left 元素朝左边方向浮动。
float: right 元素朝右边方向浮动。 float: left 和 float: right 常一起使用。
vertical-align -- 元素的垂直对齐方式
vertical-align: middle 定义元素垂直居中对齐。