CSS样式（二）

CSS样式 属性提高

text-align设置文字水平对齐方式，如text-align:center 设置文字水平居中

text-indent设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

font-style设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜

font同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高 字体；如： font:normal 12px/36px '微软雅黑';

 

文本属性的连写

格式: font:font-weight font-style font-size/line-height font-family

 

注意点:

font属性连写中,必须设置font-size 和 font-family 两个属性

font属性连写中,font-size必须放在 font-family前面

 

其他常用样式属性

list-style 设置无序列表中的小圆点，一般把它设为"无"，如：list-style:none

 

CSS元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项:

1、visible 默认值。内容不会被修剪，会呈现在元素框之外。

 

2、hidden内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。

 

3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

 

4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

列表与表单

有序标签orderlist

- 基本用法
-

    -<ol>
        - <li>列表内容</li>
        - <li>列表内容</li>
        - .....
    - </ol>

-  快速构建表格的快捷键 ol>(li>a)*4

无序标签 unorderlist -->经常使用

   -<ul>
      -  <li>列表内容</li>
      -  <li>列表内容</li>
  - </ul>

系统自带的左边的小图标,浏览器版本不一样显示也不一样;故一般都是取消系统样式(CSS),自定义左边的小图标type属性

type = 默认disc 小圆点 circle 小圆圈 square 方形

 

定义列表 dl defination list

```<!-- 定义列表: define list

   dd  defination  description 内容
    dt defination   title  标题

-->

<dl>
    <dt>高级会员</dt>
    <dd>美文无限看</dd>
    <dd>免费大片无限看</dd>
    <dd>滨崎步的签名照</dd>

</dl>

```

###表单
 -  表单用来收集不同的用户输入,表单由不同的标签组成;
-   一个完整的表单由 "from"标签 和 "表单控件标签"组成  
-   form标签属性
    - action 用来提交表单中用户输入的数据
    - method  分为  get | post; 默认就是get
        -   以get提交数据, 用户输入的数据会提交到网址后面拼接起来 name属性值=输入值&pwd属性值=123   
        -    get 一目了然少量数据
        -   以post提交数据,浏览器看不见提交的内容 比较安全 一般是大量数据
-   <label></label> label标签用来 定义文字标注
-   <input type = "" name ="" value = ""> 标签用来文本输入的
    - input标签属性
    - type = "username" 用户名
    - type = "password" 密码
    - type = "radio" 单选
    - type = "checkbox" 多选
    - type = "file"    上传文件
    - type = "hidden" 隐藏域
    - type = "submit" 提交
    - type = "reset" 重置
    - type = "image" 图片按钮 ,可以获取点击的坐标, 一般不建议使用
-   下拉列表
    -  "<select>"
        -  "<optional></optional>"
        -  "<optional></optional>"
        -  "<optional></optional>"
    -  "</select>"
-   文本域
    - "<textarea clos = 列数  rows = "行数">"
    - "<textarea/>"