css 层叠样式表渲染前端页面

不再使用html5中的table标签，使用更加美观的div+css!!!

选择器:

元素选择器  通过标签名选择同名的标签  标签名{ }
class选择器  通过class属性值选择器标签  .classVal{ }  前提：先给标签添加class属性值；类名：类名不能以数字开头；
id选择器    通过id属性值选择标签   #id{  }  前提：先给标签设置一个id属性和值；唯一：建议id属性值在同一个网页中保持唯一；

其他的选择器：
层级选择器   选择父标签下的所有的子孙标签     父选择器 子孙选择器{    }       中间使用空格
组合选择器    多个选择器选择结果的组合         选择器1，选择器2{   }           ,逗号
属性过滤选择器 选择具某个属性值的标签         标签名[属性名="属性值"]          []中括号

渲染样式的写法：
1.内部引入，在head标签体中，写一个style标签，这些渲染的代码写在其中即可！

  例如：<style type="text/css">
         div{
           font-size:30px;
           color:pink;
         }
        </style>

2.行内引入，就是在标签的属性位置上面加上一个style属性，任何一个标签中都是有
这个style属性的

  例如：<div style="font-size:20px;color:red;">
         hello world!
        </div>

3.外部引入，就是在css文件夹中新建一个css文件，然后，将css代码写在这个css文件中
然后在html中导入即可，导入是在head标签中，<link rel="stylesheet" href="style.css" type="text/css"/>
注意这个type="text/css"可以不写！！

注意：几种引入方式的优先级是取决于哪个引入方式离标签比较近，就是哪种引入方式具有覆盖生效性！

css样式：

字体样式：是指文字的字号，粗细，字样等

样式名称：font-family
作用：设置文字的字体 font-family="宋体"
说明：设置的字体一定要是系统安装的字体，否则找不到

样式名称：font-size
作用：设置文字的字号大小 font-size=100px
说明：单位是px

样式名称： font-style
作用：设置文字的样式（斜体） font-style="italic";

样式名称：font-weight
作用：设置文字的粗细 font-weight="bolder";

文本样式：是指文本的颜色，间距，缩进等样式

样式名称：color
作用：文本颜色
说明：color="red" 或者 color="#ffffff"

样式名称：line-height
作用：设置文本的行高
说明：单位是像素

样式名称：text-decoration
作用：文本修饰
说明：underline 下划线 overline 上划线 line-througt 删除线

样式名称：text-indent
作用：文本缩进
说明：单位 em,如：text-indent ="2em" 缩进两个字符

样式名称：text-align
作用: 文本水平对其方式
说明： text-align 左对齐 center 居中对其 right 右对齐

边框和背景：

样式名称：border
作用：设置边框的样式
说明：例如： border: #cccccc solid 5px;

样式名称：height
作用：设置标签的行高

样式名称：width
作用：设置标签的宽度

样式名称：backgroud-color
作用：设置对象的背景颜色

样式名称：backgroud-image
作用：设置对象的背景图片

样式名称：backgroud-repeat
作用:设置背景的平铺方式 no-repeat 不平铺

  repeat-x 横向平铺 repeat-y 纵向平铺
  注意：图片默认是平铺整个满整个盒子