CSS作业

1. css作用

CSS具有丰富的样式定义,CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力.易于使用和修改,多页面应用,页面压缩美化页面.

2. css来源

• 外部样式 创建一个独立的.CSS文件,在HTML页面引入链接,可以实现多个HTML页面共享使用

  • <link rel="stylesheet" href="外部样式文件路径" />

• 内部样式 只能在当前HTML页面使用

  • <style> h1{color: #ffff;}</style>

• 行内样式 只能在当前HTML行内添加使用

  • <h1 style="color: red>中原诗词网</h1>

• CSS格式:

  • h1{{color: #ffff;}
    选择器{属性:属性值}

  • 一个CSS中设置多个属性末尾用;符号相隔

    h1{{color: #ffff;
       background: black;
        font-size: large;
         }

3.常用的选择器

• 标签选择器:

  • h1{ccolor:red}
    给<h1>标签赋值为红色

  • 类标签选择器:

    <style>
    .head{color:red;}
    </style>
      <div class="head">你好</div>
      <h1 class="head">欢迎</h1>

    给两个不同标签给赋值class相同属性名,用CSS给两个标签统一更改样式,以后比较常用和灵活,注意在 CSS 中，类选择器以一个点”.”号显示.

  • ID选择器

    <style>
    #head{color:red;}
    </style>
      <div id="head">你好</div>

    ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值,注意:在CSS中,ID选择器以一个”#”号来显示,ID级别过于权重,不灵活,不常使用.

  • 行内选择器
    <div style="color: red;">你好</div>

    行内样式就是直接把CSS代码添加到HTML的标记中，即作为HTML标记的属性标记存在。通过这种方法，可以很简单地对某个元素单独定义样式。

4. 优先级

标签选择器<类选择器<ID选择器<行内样式