黑马程序员_基础html css 学习(二)

---------------------- ASP.Net+Unity开发、.Net培训、期待与您交流！ ----------------------

接上次html和css的学习，本节中主要介绍css的用法

15.textarea 和 select标签中其他属性的用法，具体实例如下：

        <textarea cols="40" rows="20"> 测试内容</textarea>
        <select size="8" >
            <optgroup title="abc1" label="abc">
                <option selected="selected">a</option>
                <option>b</option>
                <option>c</option>
            </optgroup>
            <optgroup title="abc2" label="abc2">
                <option value="1">a</option>
                <option value="2">b</option>
                <option value="3">c</option>
            </optgroup>
        </select>
     

效果如图：

16.filedset:

具体使用方法为：

    <fieldset>
        <legend>常用</legend>
        <input type="text" />
        <input type="text" />
        <input type="text" />
    </fieldset>

效果如下图：

17.css即层叠样式表，是用来美化html页面的，可以对页面元素进行精细化的设置，其中对页面元素的样式描述主要包括字体颜色、背景颜色、边框等。

      css的使用主要通过三种方式：元素内联、页面嵌入、外部引用

（1）元素内联是直接将样式写入元素的style属性中，<input type="text" readonly="readonly" style="background-color:#FF00FF" />,适用于样式没有可复用性的场合

（2）页面嵌入：在head标签中加入

    <style type="text/css">
        input{border-color:aqua;color:aliceblue}
    </style>

（3）外部引用：在外部文件定义一个css 文件，写入样式，然后在使用样式的html页面head中加入以下代码就可以

 <link href="StyleSheet1.css" type="text/css" rel="stylesheet" />

（4）优先级：元素内联 > 页面嵌入 > 外部引用

18.div 和span

div标签是层: 如果将一些标签放在div的标签中，那么就可以将这些内容作为一个整体进行整理，如：整体移动、隐藏、设置样式等。

span:div是将内容放到一个矩形的区域中，会影响布局，但是span是只把一段内容定义成一个整体进行操作，不影响布局和显示。可以为任何的样子

19.css样式选择器

（1）class选择器：使用"."号开头，使用的时候设定元素的class属性的样式为选择器的名称即可。如果某个元素要拥有多个class，只要在各个名称中间加入空格即可。

    .warning {
            background-color:yellow;
        }

<div class="warning"></div>

(2) id选择器：

#username
{
   font-size:xx-large
}

<input id="username" type="text" value="test"/>

(3) 关联选择器:如下面表示的是P标签内的strong标签的样式

P Strong{background-color:Yellow}

(4) 组合选择器：同时为多个标签设定一个样式,如：

H1,H2,input{background-color:Yellow}

---------------------- ASP.Net+Unity开发、 .Net培训、期待与您交流！ ----------------------详细请查看： www.itheima.com