css

CSS  级联样式表

  html主要侧重于定义内容结构,而css主要用于定义
  html页面样式的显示.

css的组成部分:

css选择器{
  属性:属性值;
  属性:属性值;
}

css的写法:
1. 编写css文件, 后缀名必须为css,把css的代码写在
     该文件中
2. 在html页面中引入该css文件.

1>css选择器:
  作用:可以选出当前页面的一个或多个标签组件,然后
  使用css样式属性对这些标签添加样式.
 
 1)通配符选择器:
  可以找出所有的标记
 * {  }
 
 2)标签选择器:
  可以找出相应标签名称的标记
 img {  }

 3)id选择器:
  可以找出相应id的一个标签组件
 id选择器的优先级是最高的.
 #p { } 

 4)分组选择器:
 p, li, #s {}
 
 5)class选择器:
  选出标签的class属性为div的多个标签组件
 <div class="div"></div>
 .div {}
 
 6)派生选择器:
  一定要有父子标记关系. 
 div p{}

2>css样式属性:
布局属性: (box模型)
1>外边距(margin):
  margin: 10px;  上下左右外边距全为10px
  margin: 10px 20px; 上下外边距为10px 左右为20px
  margin: 0px auto; div水平居中
  margin: a b c d; 上 右 下 左方向外边距
  
  margin-left:  10px
  margin-right:
  margin-top:
  margin_bottom:

2>内边距(padding):
  padding:a;
  padding:a b;
  padding:a b c d;
  
  padding-top:
  padding-right:
  padding-bottom:
  padding-left:

常用的简单样式属性:

1>背景属性: background
background:
background-color: 背景颜色
red | blue | black |...
#ffffff
#fff
background-image:url("目标图片路径");

background-repeat: 背景图像平铺方式
repeat:
repeat-x:
repeat-y:
no-repeat: 

background-position: 背景图像定位

2>字体属性: font-
color: 字体颜色
font-size: 字体大小   px
font-family: 字体  黑体  宋体  ...
font-weight: 磅值 (粗细)
normal
bold
bolder
lighter
100~900

font-style:
normal 普通
italic 斜体

3>文本属性: text-
text-align: 文本对齐方式
left
center
right
line-height: 行高  
主要用于控制文本的垂直居中

text-decoration:
none
underline
overline
line-through

边框属性: border-
border:1px solid black;
border-width:
border-style:
border-color:
border-left-width:
...

列表相关属性:
list-style:none;

复杂属性:
display:
  可以控制组件的隐藏与显示 
none:  隐藏组件
block: 显示组件
block还可以把行级标记当做块级标记来显示.
因为只有块级标记可以设置width和height

行级标记: 多个标记占用一行
<a></a>
<input/> <span></span> <s></s> <b></b>...
块级标记: 一个标记占用一行
h1~h6 p div  li  ul ...

float: 浮动属性
left:
right:

clear: 清除浮动
    left:  左边不允许有浮动对象
    right: 右边不允许有浮动对象
    both:  两边不允许有浮动对象