11.3课堂笔记和作业

最新推荐文章于 2025-07-15 11:41:51 发布

原创最新推荐文章于 2025-07-15 11:41:51 发布 · 322 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了CSS的基础知识，包括样式规则、加载方法、选择器、伪类及背景图片设置等内容，并通过具体案例展示了如何应用这些知识进行网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

11.3课堂笔记和作业

1、CSS样式规则与CSS加载的方法

1.1 CSS样式规则

CSS规则由两个主要部分组成：选择器以及一条或多条声明。

Selector    Declaration     Declaration
   h1  {   color:blue;   font-size:12px;}

每一个声明都是由一个属性和一个值组成。

1.2 CSS加载的方法

1.引入外部文件

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

2.导入外部样式

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

3.使用内部CSS样式

<style type="text/css">
样式单文件定义
</style>

4.使用内联CSS样式

<div style="property1:value1;property2:value2;" >
</div>

内联样式只对单个标签有效，不会影响整个文件，在HTML元素中使用style属性定义内联样式。

2、选择器

2.1 通配符选择器

用*表示通配符，用来选择页面中所有元素的样式。

*{margin:0;}

2.2 类选择器

设置类class，用 . 来选择

.myclass=" .... ";

2.3 Id选择器

用#来选择，且id绝对不能有重复。

#myid{ .... }

2.4 包含选择器

包涵选择器用于指定处于某个选择器对应的内部元素。

.item .vip .vip{
    color:red;   
}

2.5 字选择器

子选择器要求目标选择器必须作为外部选择器对应的元素的直接子元素。

.item>.vip>.vip{
    color:red;   子选择器
}

2.6 群组选择器

群组选择器使用逗号对选择符进行分隔。

.item,.vip{
    color:red;   群组选择器
}

3、伪类

3.1 anchor伪类

链接的不同状态以不同的方式显示。

a:link{color:green;text-decoration:none;} /* 未访问链接*/
a:visited{color:red;text-decoration:none} /* 已访问链接 */
a:hover{color:yellow;text-decoration:underline;} /* 鼠标移动到链接上 */
a:active{color:blue;text-decoration:underline;}/* 鼠标点击时 */

注意：在CSS定义中，a:hover必须被置于a:link和a:visited之后a:active必须被置于a:hover之后，才是有效的。伪类的名称不区分大小写。

3.2 first-child伪类

first-child CSS伪类代表了一组兄弟元素中的第一个元素。被匹配的元素需要具有一个父级元素。

3.3 first-line伪类

“first-line” 伪元素用于向文本的首行设置特殊样式。

3.4 before伪类

“before” 伪元素可以在元素的内容前面插入新内容。

4、CSS背景图片

4.1 添加图片

background-image 属性描述了元素的背景图像。
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

body{
    background-image:url('../img/c3.jpg');
}

4.2 水平或者垂直平铺

background-repeat属性控制背景图像的平铺重复效果。

body{
    background-repeat:no-repeat;
}

4.3 设置定位

可以利用 background-position 属性改变图像在背景中的位置。
body{
background-position:center center;
}

4.4 attachment属性

在默认情况下，组件里的背景图片会随着滚动条的滚动而自动滚动，我们要把background-attachment的属性设为fixed,那么背景图片就会被固定在该组件中，不会随滚动条的滚动而移动。

body{
    background-attachment:fixed;
}

4.5 设置背景图片尺寸

background-size属性指定背景图片大小。

body{
    background-size:100% 100%;
}

4.6 设置背景颜色

background-color 属性定义了元素的背景颜色。
页面的背景颜色使用在body的选择器中:

body{
        background-color:blue;
}

4.7 简写属性

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”:
当使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position
以上属性无需全部使用，你可以按照页面的实际需要使用.

body{
    background:blue url('../img/c3.jpg') no-repeat fixed center center;
}

11.03作业

1. html部分

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Coffee Mune</title>
  <link type="text/css" rel="stylesheet" href="../css/list.css"></link>
 </head>
 <body>


  <h1 id="title">Coding Coffee欢迎您！</h1>

  <div class="parent">
    <div class="left">
        <img src="../img/c2.jpg">
    </div>

    <div class="right">
        <h2 id="smallTitle">蓝山咖啡</h2>
        <p id="theme">
            当季新品
        </p>

        <p id="bigTheme">
            给咖啡多一口热爱！
        </p>

        <p id="smallTheme">
            纯蓝山咖啡口感、香味较淡，但喝起来却非常香醇精致；
            具有贵族的品味，乃咖啡中之极品。
        </p>
    </div>
    <div style="clear:both;"></div>
  </div>


  <div class="parent">
    <div class="left">  
        <img src="../img/c5.jpg">
    </div>

    <div class="right">
        <h2 id="smallTitle">卡布其诺</h2>
        <p id="theme">
            美好邂逅
        </p>

        <p id="bigTheme">
            给咖啡多一口热爱！
        </p>

        <p id="smallTheme">
            卡布奇诺是一种加入以同量的意大利特浓咖啡和蒸汽泡沫牛奶
            相混合的意大利咖啡。此时咖啡的颜色，就象卡布奇诺教会的
            修士在深褐色的外衣上覆上一条头巾一样，咖啡因此得名。
        </p>
    </div>
    <div style="clear:both;"></div>
  </div>


    <div class="parent">
        <div class="left">
            <img src="../img/c6.jpg">
        </div>

        <div class="right">
            <h2 id="smallTitle">拿铁咖啡</h2>

            <p id="theme">
                经典再现
            </p>

            <p id="bigTheme">
                给咖啡多一口热爱！
            </p>

            <p id="smallTheme">
                拿铁是最为国人熟悉的意式咖啡品项，它是在沉厚浓郁的意式
                浓缩咖啡中，加入牛奶等调和，甚至更多牛奶的花式咖啡，有了
                牛奶的温润调味，让原本甘苦的咖啡变得柔滑香甜、甘美浓郁。
            </p>
        </div>
        <div style="clear:both;"></div>
    </div>


    <div class="parent">
        <div class="left">
            <img src="../img/c4.jpg">
        </div>

        <div class="right">
            <h2 id="smallTitle">欧蕾咖啡</h2>
            <p id="theme">
                恬淡悠闲
            </p>

            <p id="bigTheme">
                给咖啡多一口热爱！
            </p>

            <p id="smallTheme">
                欧蕾咖啡最大的特点就是它要求牛奶和浓缩咖啡一同注入杯中，
                牛奶和咖啡在第一时间相遇，碰撞出的是一种闲适自由的心。
            </p>
        </div>

        <div style="clear:both;"></div>
    </div>


    <div class="parent">
        <div class="left">
            <img src="../img/c7.jpg">
        </div>

        <div class="right">
            <h2 id="smallTitle">猫屎咖啡</h2>
            <p id="theme">
                奢华享受
            </p>

            <p id="bigTheme">
                给咖啡多一口热爱！
            </p>

            <p id="smallTheme">
                麝香猫咖啡（Kopi Luwak），又称猫屎咖啡，它是由麝香猫
                在吃完咖啡果后把咖啡豆原封不动的排出，人们把它的粪便
                中的咖啡豆提取出来后进行加工而成。
            </p>
        <div>
        <div style="clear:both;"></div>
    </div>

 </body>
</html>

2. CSS部分



        body{
            background-color:#fdffff;
        }

        #title{
            color:green;
            font-size:60px;
            text-align:center;
        }

        #smallTitle{
            color:blue;
            font-size:35px;
            text-align:center;
        }

        #theme{
            color:#ff8040;
            font-size:15px;
        }

        #bigTheme{
            color:#00aeae;
            font-size:30px;
        }

        #smallTheme{
            font-size:20px;
            font-family:"Times New Roman";
        }

        .parent{
            width:900px;
            height:400px;
            /*border:2px solid red;*/
            margin:0 auto;
            background-color:#fbfffd;
        }

        .left{
            float:left;
            width:400px;
            height:400px;
        }
        .right{
            float:right;
            width:450px;
            height:400px;
        }