css复习

div

< div> 标签可以把文档分割为独立的、不同的部分
元素类型：display 属性 block/inline/none
块元素（display属性值为block）：默认宽度与屏幕等宽，在块元素的前后会自动加换行。可以设置宽高 
内联元素（display属性值为inline）：内联元素不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。不可以设置宽高

可以通过修改display属性来切换块级元素和内联元素 

CSS定义

CSS （Cascading Style Sheet）叫做层叠样式表。作用是定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

CSS和HTML结合的方式

• stytle属性方式(行内样式)
  利用标签汇总的style属性来改变每个标签的显示样式

<a style="font-size:2cm; color: #00FFFF;">这是行内样式</a>

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改

• style标签方式(内嵌样式)
  在head标签中加入style标签，对多个标签进行统一修改

    <!--在head中引入style标签-->
    <!--大括号前的名字就是标签名称，大括号里边表示显示属性的属性和取值-->
    <style type="text/css">
        bc{
            font-size: 2cm;
            color: blueviolet;
        }
    </style>

<bc>我是自定义标签</bc>

• 导入方式
  前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式

    <style type="text/css">
        @import "cssproperties.css";
    </style>

    <haha>苟利国家生死以,岂因祸福避趋之</haha>

div{
    background-color: darkmagenta;
    font-size: 5em;
}

haha{
    background-color: silver;
    font-size: 2in;
}

• 链接方式

    <!--使用link标签在本html中引入其他css文件中的样式-->
    <link rel="stylesheet" href="cssproperties.css">

    <div>苟利国家生死以,岂因祸福避趋之</div>

CSS基本选择器

html标签名选择器：使用的就是html的标签名
class选择器：其实使用的标签中的class属性
id选择器：其实使用的是标签的中的id属性。

    <style type="text/css">
        /*html标签名选择器*/
        bc{
            font-size: 2cm;
            color: blueviolet;
        }
        /*class选择器*/
        .haha{
            font-size: 3cm;
            color: blue;
        }
        /*id选择器*/
        /*id一般具有唯一性，一般id只针对特定的元素给予特定的样式*/
        #first{
            font-size: 10cm;
            color: yellowgreen;
        }
    </style>

    <bc>苟利国家生死以,岂因祸福避趋之</bc>
    <div class="haha">苟利国家生死以,岂因祸福避趋之</div>
    <div id="first">苟利国家生死以,岂因祸福避趋之</div>

CSS扩展选择器

关联选择器（上下文选择器）
组合选择器
伪元素选择器
属性选择器

        /*上下文选择器*/
        /*p标签下的a标签*/
        p a{
            font-size: 5cm;
            color: yellow;
        }

        <p>
            <a>苟利国家生死以,岂因祸福避趋之</a>
        </p>

        /*组合选择器*/
        c,d{
            font-size: 5cm;
            color: yellow;
        }
        <c>苟利国家生死以,岂因祸福避趋之</c>
        <d>苟利国家生死以,岂因祸福避趋之</d>

属性选择器

css3新增了3个属性选择器：[att*=val]、[att^=val]和[att$=val]

  [att*=val]属性选择器
如果元素用att表示的属性的值中包含用val指定的字符，那  么该元素使用这个样式。

 [att^=val]属性选择器
如果用att表示的属性的属性值的开头字符为用val指定的字符的话，那么该元素使用这个值。

 [att$=val]属性选择器
如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，那么该元素使用这个样式。