css入门：day3—选择器-常用属性

作者: 凯司机 | 来源:发表于2023-07-19 15:20 被阅读0次

一、css介绍

引子：html是网页的结构，css是网页的化妆师，让网页更美观。

网页删除css后会变得横七竖八，加上后又变美观了，这就是css样式的魔力。css就是给网页设置一些样式，让网页变的漂亮，更具有可读性。

css全称为Cascading Style Sheets 翻译过来叫层叠样式表。

作用：设置网页的文字（大小，颜色，字体风格，对齐方式等）图片和排版等，简单点说就是给网页化妆。

感知css：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            background:red;
            transition:all 2s ease;
        }
        div:hover{
            transform:rotate(720deg) scale(0.2);
            background:green;
        }
    </style>
</head>
<body>
    <div>盒子</div>
</body>
</html>

语法

1.构建css的运行环境：在头部加入style标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        
    </style>
</head>
<body>
<div>这是一个盒子</div>
</body>
</html>

2.选择对应的目标元素，使用大括号

<style type="text/css">
        div{}
</style>

3.语法：属性：值; 键值对

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{color:red;}
    </style>
</head>
<body>
<div>这是一个盒子</div>
</body>

二、css字体、文本属性

css学前小知识：

一张图片的打印出来的实际尺寸是由电子图片的像素和分辨率共同决定的，像素(Pixel)是指构成图片的小色点，分辨率(单位DPI)是指每英寸(Inch)上的像素数量，可以看做是这些小色点的分布密度；像素相同时，分辨率越高则像素密度越大，实际打印尺寸越小，图像也越清晰。

实际尺寸(英寸)=像素/分辨率; 1英寸=2.54厘米; 如一张图片宽为600像素，分辨率为300，那么实际打印宽度为：600/300=2英寸，约为5厘米。

1.字体属性

a：font-size 设置字体的大小
取值方式：数字 + 像素单位px（像素就是一个长度单位）
多学一招：（1）取值用偶数（2）默认是16px大小（3）字体有多大，看字体的高度

b： font-weight 设置字体的粗细
取值：normal 正常的（400）、bold加粗（700）、bolder(900) 、 100 - 900（字体的粗细没有那么精细，所以很少使用数字）
在实际工作中用的最多的就是normal （不加粗）和bold（加粗）

c：font-style 设置字体的风格
取值：normal 默认显示标准的字体样式 italic 字体倾斜
d) font-family 设置不同的字体

取值：宋体、微软雅黑、黑体、。。。等等

多学一招：
1.不推荐使用一些冷门字体，因为一些冷门字体很多电脑里面默认没有安装，这个时候就会显示不出来。所以实际工作中，默认都是一些主流字体如宋体微软雅黑等。。。

2.字体可以写多组，中间用逗号隔开，显示不了第一个，就找第二个显示

3.字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号中文字体也需要添加引号

2.文本属性

a：文本修饰
语法：text-decoration:值
取值：
（1）underline下划线
（2）overline上划线
（3）line-through删除线
（4）none没有修饰-----------一般用在a标签上

b：文本转换
语法：text-transform:值
取值：
（1）uppercase转换成大写
（2）lowercase转换成小写
（3）capitalize首字母大写

c：文本对齐方式
语法：text-align:值

取值：
（1）left左对齐---------------------默认
（2）center居中对齐
（3）right右对齐

d：首行缩进
语法：text-indent:值
取值：可以是像素，但是当文字大小发生改变后，也需要重新改变，可以使用em代替，代表字符，会随着文字大小的改变而自动调整
多学一招：默认的文字大小是16px

3.字体颜色

语法：color:"颜色值"

三、css注释

语法：/*注释的内容*/

四、css基本选择器

1.标签选择器

通过标签来选择元素，标签{css样式}

2.id选择器

通过id属性来选择元素，#id名{css样式}
注意：id选择要保证页面中的唯一性，这是语义

3.class类选择器

通过class属性选择元素，.类名{css样式}

Google小案例：
代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        span{font-size:180px;}
        .blue{color:blue;}
        .red{color:red;}
        .orange{color:yellow;}
        .green{color:green;}
    </style>
</head>
<body>

<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>

</body>
</html>

多学一招：一个元素可以有多个类名

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .fz-30{font-size:30px;}
        .red{color:red;}
        .green{color:green}
    </style>
</head>
<body>

<div class="fz-30 red">这是一个盒子</div>
<span class="fz-30">我是文本</span>
<p class="fz-30 green">段落部分</p>
<a class="fz-30" href="">我是超链接</a>

</body>
</html>

4.复合选择器

a：标签选择器和类选择器一起使用
需求：给下面的类名叫box的p标签设置字体颜色为绿色

<p class="box">
    我是一个段落
</p>
<div class="box">
    我是一个盒子
</div>
<p>
    俺也是一个段落！！！
</p>

b：用多个类名选择一个元素
c：给多个元素设置同一种样式，每个元素中间用 ， 隔开:元素1，元素2{css样式}

五、常用选择器

1.通配选择器（了解）

给所有标签添加样式，*{css样式}

多学一招：通常只是用来去掉所有代码的边距，因为每个浏览器的边距不同，有的8个像素，有的7个像素，所以干脆会全部去掉，重新设置，保证浏览器的每个边距都一致

2.后代选择器（掌握）

选择元素里面的元素，外层元素和内层元素中间用空格隔开：外层内层{css样式}

3.子元素选择器（掌握）

选择元素的直接子元素，父和子之间用 > 隔开：父元素>子元素{css样式}

案例题：

<div class="nav">    <!-- 主导航栏 -->
  <ul>
    <li><a href="#">公司首页</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司产品</a></li>
    <li>
         <a href="#">联系我们</a>
         <ul>
            <li><a href="#">公司邮箱</a></li>
            <li><a href="#">公司电话</a></li>
         </ul>
    </li>
  </ul>
</div>
<div class="sitenav">    <!-- 侧导航栏 -->
  <div class="site-l">左侧侧导航栏</div>
  <div class="site-r"><a href="#">登录</a></div>
</div>

在不修改以上代码的前提下，完成以下任务：

链接登录的颜色为红色,同时主导航栏里面的所有的链接改为黄绿色 (简单)
主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。（中等)
主导航栏里面的一级菜单链接文字颜色为绿色。（难)

4.相邻元素选择器（了解）

选择相邻的元素，两个元素中间用 + 隔开：元素1 + 元素2{css样式}

5.伪类

元素:link 正常连接时候的状态
元素:visited 点击以后的状态
元素:hover 当鼠标移动上去的状态-------重点、常用
元素:active 当鼠标按下去时候的状态

注意：不是所有元素都支持这4种写法，超链接支持4种，工作中用的hover比较多，别的可以做个了解

六、伪类选择器和类选择器一起使用

七、伪对象选择器（了解）

first-letter：选择第一个字符
语法：元素:first-letter
first-line：选择第一行
语法：元素:first-line

八、属性选择器

1.[属性名]

选择具有该属性的元素

2.[属性=值]（重点）

选择具有该属性且等于该值的元素

3.[属性~=值]（了解）

选择具有该属性，且值中包含该值的元素

多学一招：元素属性的值可以有多个

注意：这种场景适用于一个属性名对应多个属性的值

4.[属性|=字符]（了解）

选择由连字符连接多个单词组成的属性值中的第一个单词

注意：这种场景适用于一个属性的值由连字符连接多个单词组成，且选择的是第一个

5.[属性*=值]（了解）

选择属性的值中包含当前的值的元素

九、css尺寸、行高属性

1.尺寸属性

a：宽度
语法：width:值
取值：数字 + px/百分比/em -------------------------px代表像素，百分比代表浏览器宽度的百分比，em代表字符数

注意：1.div设置宽度为100%，其实和没设一样2.span标签设置宽度无效

b：高度
语法：height:值
用法和宽度一样

注意：div不设高度，默认是0

2.行高

行高控制的是文字与文字之间的上下距离（行距）

语法：line-height:值

多学一招：如果将标签的高度和行高设置成一样，那么这个标签里面的文字可以在这个标签里面垂直居中，两者结合使用可以让单行文字在标签内部水平垂直居中，工作中经常用于让文字垂直居中（将行高设为盒子的高度）

font简写

font: font-style font-weight font-size/line-height font-family
不建议修改顺序并且不需要设置的属性可以不写但是font-size和font-family必须指定，否则将不起作用

<style type="text/css">
        div{
            height:100px;
            border:1px solid #000;
            font:italic bolder 30px/100px "微软雅黑";
        }
    </style>
</head>
<body>
    <div>今天明天和后天</div>
</body>

感知css

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background: red;
            transition: all 2s ease;
        }

        div:hover {
            transform: rotate(720deg) scale(0.2);
            background: green;
        }
    </style>
</head>

<body>
    <div>盒子</div>
</body>

</html>

子元素选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        /* 需求：
        在不修改以上代码的前提下，完成以下任务：
        1. 链接 登录 的颜色为红色,同时主导航栏里面的所有的链接改为黄绿色     (简单)
        2. 主导航栏和侧导航栏里面文字都是14像素并且是宋体。（中等)
        3. 主导航栏里面的一级菜单链接文字颜色为黄色。（难) */

        .site-r>a {
            color: red;
        }

        .nav a {
            color: yellowgreen;
        }

        /* .nav a,.site-l,.site-r a {
            font: 14px '宋体';
        } */
        .nav,
        .sitenav {
            font: 14px '宋体';
        }

        .nav>ul>li>a {
            color: yellow;
        }
    </style>
</head>

<body>
    <div class="nav"> <!-- 主导航栏 -->
        <ul>
            <li><a href="#">公司首页</a></li>
            <li><a href="#">公司简介</a></li>
            <li><a href="#">公司产品</a></li>
            <li>
                <a href="#">联系我们</a>
                <ul>
                    <li><a href="#">公司邮箱</a></li>
                    <li><a href="#">公司电话</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="sitenav"> <!-- 侧导航栏 -->
        <div class="site-l">左侧侧导航栏</div>
        <div class="site-r"><a href="#">登录</a></div>
    </div>
</body>

</html>

登录

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>无标题文档</title>
</head>

<body>
  <table bgcolor="#FFC0CB" width="800" border="1" cellspacing="0" cellpadding="10">
    <tr align="center">
      <td colspan="2">
        <h2>京东会员</h2>
      </td>
    </tr>
    <tr>
      <td>用户名：</td>
      <td><input type="text">
        <font color="red" size="1">最多输入6个字符</font>
      </td>
    </tr>
    <tr>
      <td>密码：</td>
      <td><input type="text"><span>最多输入6个字符</span>
      </td>
    </tr>
    <tr>
      <td>验证码：</td>
      <td>
        <p>
          <input type="text">
        </p>
        <p>&lt;img src=&quot;&quot;&gt; </p>
      </td>
    </tr>
    <tr align="center">
      <td colspan="2"><a href="#">登录</a>|<a href="#">注册</a></td>
    </tr>
  </table>


</body>

</html>

小说排行榜

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>无标题文档</title>
</head>

<body>

  <table width="800" border="1" cellspacing="0" cellpadding="10">
    <caption>
      <h3>今日小说排行榜</h3>
    </caption>
    <tr>
      <th>排名</th>
      <th>关键字</th>
      <th>趋势</th>
      <th>今日搜索</th>
      <th>最近七日</th>
      <th>相关链接&nbsp;</td>
    </tr>
    <tr>
      <td>1</td>
      <td>鬼吹灯</td>
      <td>&lt;img src=&quot;&quot;&gt;</td>
      <td>65589</td>
      <td>45</td>
      <td><a target="_parent" href="https://tieba.baidu.com/index.html">贴吧</a> <a href="b.html" target="right">图片</a> <a
          href="#">百科</a></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>


</body>

</html>

个人简历

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>无标题文档</title>
</head>

<body>

  <table width="1000" border="1" cellspacing="0" cellpadding="10">
    <caption>
      <h3>个人简历</h3>
    </caption>
    <tr>
      <td rowspan="5">
        <p>个</p>
        <p>人</p>
        <p>资</p>
        <p>料</p>
      </td>
      <td>姓名</td>
      <td>&nbsp;</td>
      <td>性别</td>
      <td>&nbsp;</td>
      <td>出生年月</td>
      <td>&nbsp;</td>
      <td rowspan="4">&nbsp;&nbsp;&nbsp;相片&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr>
      <td>民族</td>
      <td>电脑水平</td>
      <td>政治面貌</td>
      <td>电脑水平</td>
      <td>婚姻状况</td>
      <td>电脑水平</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>应聘职位</td>
      <td colspan="6">&nbsp;</td>
    </tr>
  </table>


</body>

</html>

框架

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<!--<frameset rows="100,200">
    <frame src="1-登录.html">
    <frame src="2-小说排行榜.html">
</frameset>-->
<frameset cols="100,200">
    <frame src="1-登录.html">
        <frame src="2-小说排行榜.html">
</frameset>
<!-- 当框架不能运行的时候，执行noframes标签里面的内容 -->
<noframes>

    <body>
        框架丢失，请重试！
    </body>
</noframes>

</html>

框架嵌套

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<!-- *代表剩下的所有空间 -->
<frameset rows="100,*">
    <frame src="1-登录.html" name="top">
        <frameset cols="200,*">
            <frame src="2-小说排行榜.html" name="left">
                <frame src="3-个人简历.html" name="right">
        </frameset>
</frameset>

</html>

框架同时设置行和列

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<frameset rows="200,*" cols="200,*">
    <frame src="1-登录.html">
        <frame src="2-小说排行榜.html">
            <frame src="3-个人简历.html">
                <frame src="b.html">
</frameset>

</html>

内嵌框架

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <div style="width:200px;height:200px;border:10px dotted #f00;">
        <iframe src="http://www.baidu.com">
    </div>
</body>

</html>

语义化标签

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <!--<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>-->
    <header>这是头部</header>
    <aside>定义菜单栏</aside>
    <article>文章内容</article>
</body>

</html>

新增表单属性

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <!--<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>-->
    <header>这是头部</header>
    <aside>定义菜单栏</aside>
    <article>文章内容</article>
</body>

</html>

input新增type属性

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <form>
        邮箱号：<input type="email">
        <br>
        选择日期：<input type="date">
        <br>
        <input type="week"><br>
        <input type="month"><br>
        <input type="time"><br>
        <input type="color"><br>
        <input type="range"><br>
        <input type="number"><!-- 电商网站中，商品数量 -->
        <input type="submit">
    </form>
</body>

</html>

embed标签

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>

    <embed src="./邓紫棋-喜欢你.mp3" autostart="false"></embed>
    <embed autostart="false" controls width="400" height="400" src="邓紫棋_喜欢你.webm"></embed>
</body>

</html>

audio

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <audio src="邓紫棋-喜欢你.mp3" controls="controls" autoplay="autoplay"></audio>
</body>

</html>

video

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <!--<video src="邓紫棋_喜欢你.mkv" controls autoplay></video>-->
    <video controls autoplay="autoplay">
        <source src="邓紫棋_喜欢你.mkv">
        <!--<source src="邓紫棋_喜欢你.webm">-->
    </video>
</body>

</html>

网页中的颜色

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <p style="color:yellowgreen;">
        这是段落
    </p>
</body>

</html>

字体属性

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <style>
        div {
            /* 设置字体大小font-size */
            font-size: 160px;
            /* 设置字体的粗细font-weight，将文字加粗设置为bold */
            font-weight: bold;
            /* 设置字体风格font-style,取值normal通常是将倾斜字体设置为不倾斜，italic是将正常字体设置倾斜的 */
            font-style: normal;
            /* 设置字体font-family，字体可以写多个 */
            font-family: "华文行楷", "微软雅黑", "宋体";
        }

        i {
            font-style: normal;
        }

        h1 {
            font-weight: normal;
        }
    </style>
    <div>
        这是盒子
    </div>
    <i>
        文字倾斜
    </i>
    <h1>标题</h1>
    <hr>
    <style>
        p {
            font-family: webdings;
            font-size: 100px;
        }
    </style>
    <p>
        123456abcdef
    </p>
</body>

</html>

文本属性

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <style type="text/css">
        a {
            /* 文本修饰text-decoration,取值：none取消文本的修饰
        line-through贯穿线（删除线）
        上划线overline
        下划线underline
         */
            text-decoration: underline;
            /* 文字颜色 */
            color: #000;
        }

        p {
            /* 文本转换，text-transform
        取值：uppercase将所有字母转换成大写
        capitalize所有单词的首字母大写
        lowercase将所有字母转换为小写
         */

            text-transform: lowercase;
            /* 文本对齐方式text-align，
        取值：left/center/right
         */
            text-align: left;
            /*font-size:30px;*/
            /* 首行缩进
        text-indent:2em;
         */
            /*text-indent:32px;*/
            text-indent: 2em;
        }
    </style>
    <a href="http://www.baidu.com">百度</a>
    <!--<p>i love You</p>-->
    <p>
        我将无我，不负人民。”习近平主席22日回应意大利众议长菲科的一段话，赢得无数人的由衷点赞。这么大一个国家，责任非常重、工作非常艰巨。我将无我，不负人民。我愿意做到一个‘无我’的状态，为中国的发展奉献自己。”习近平主席简洁有力的回答，一腔赤诚溢于言表，彰显出人民领袖的真挚情怀。
    </p>
</body>

</html>

选择器

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <style>
        /* id选择器 */
        /*#myid{
        color:red;  
    }*/
        /* 标签选择器 */
        /*div{
        color:green;    
    }*/
        /* class类选择器 */
        .box {
            color: blue;
        }
    </style>
    <div id="myid">盒子</div>
    <div class="box">我的标签</div>
</body>

</html>

Google案例

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <style>
        .lanse {
            color: blue;
        }

        .hongse {
            color: red;
        }

        .huangse {
            color: #ff0;
        }

        .lvse {
            color: green;
        }

        b {
            font-size: 150px;
        }

        body {
            text-align: center;
        }
    </style>
    <b class="lanse">G</b>
    <b class="hongse">o</b>
    <b class="huangse">o</b>
    <b class="lanse">g</b>
    <b class="lvse">l</b>
    <b class="hongse">e</b>
</body>

</html>

选择器小练习

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<style>
    .ft30 {
        font-size: 30px;
    }

    .red {
        color: red;
    }

    p {
        color: green;
    }

    /* 用多个类名选择同一个元素 */

    /* 标签加类名选择同一个元素 
    注意：标签名和类名中间不能有任何内容
    */
    div.ft30.red {
        text-decoration: underline;
    }
</style>

<body>
    <div class="ft30 red">这是一个盒子</div>
    <span class="ft30 red">我是文本</span>
    <p class="ft30">段落部分</p>
    <a class="ft30" href="#">我是超链接</a>
    <b class="red">文字加粗</b>
    <div class="f">普通盒子</div>
</body>

</html>

复合选择器

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <style>
        /* 后代选择器（利用祖宗准确选择标签） */
        div p {
            color: red;
        }
    </style>
    <div>
        <div>
            <p>段落1</p>
        </div>
    </div>
    <p>段落2</p>
</body>

</html>

复合选择器2

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <style>
        /* 子元素选择器 */
        div>p {
            color: red;
        }
    </style>
    <div>
        盒子
        <p>段落1</p>
        <span>
            <p>段落2</p>
        </span>
    </div>

</body>

</html>

复合选择器3

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <style>
        /* 一次性给多个元素设置样式 */
        div,
        p,
        span {
            color: red;
        }
    </style>
    <div>盒子</div>
    <p>段落</p>
    <span>文本</span>

</body>

</html>

1-文本属性

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p {
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <h3>html概述</h3>
    <p>HTML是HyperText Mark-up Language
        的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或htm。</p>
    <p>下面是HTML的特征代码：</p>
    <p>&lt;div&gt;这是成对出现的标签&lt;/div&gt;</p>
</body>

</html>

2-忆江南

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>忆江南</title>
    <style type="text/css">
        h2 {
            color: #0cc;
            /*font-size: 18px;*/
            text-align: center;
        }

        h3 {
            font-size: 14px;
            text-align: center;

        }

        h4 {
            color: #900;
        }

        p {
            color: #06c;
            font-size: 14px;
            text-indent: 2em;
        }

        body {
            background-color: #eee;
        }
    </style>
</head>

<body>
    <h2>忆江南</h2>

    <h3>唐.白居易</h3>

    <p>江南好，风景旧曾谙。(2) 日出江花红胜火，春来江水绿如蓝，(3) 能不忆江南。</p>

    <h4>作者介绍</h4>

    <p>白居易(772－846)
        ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。
    </p>

    <h4>注释</h4>

    <p>(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。</p>

    <h4>品评</h4>

    <p>此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进
        　行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。
    </p>
</body>

</html>

3-新闻列表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        a {
            text-decoration: none;
            color: #122e67;
            font: normal 12px "microsoft yahei";
        }

        .pre {
            color: #e66100;
        }

        a:hover {
            text-decoration: underline;
            color: #e66100;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="#"><span class="pre">财经&nbsp;|</span>&nbsp;24省份一季度GDP增速超全国：海南逆袭吉林垫底</a></li>
        <li><a href="#">马云演讲呛贾跃亭：认为BAT垄断是自己的想象力不行</a></li>
        <li><a href="#">山西最紧张时刻：万亿煤炭巨债缠身 60%债务在银行</a></li>
        <li><a href="#"><span class="pre">股票&nbsp;|</span>&nbsp;A股夏季攻势: 管理层坚定维稳 黄金坑迎养老金</a></li>
        <li><a href="#"><span class="pre">科技&nbsp;|</span>&nbsp;电视盒子渐成鸡肋 生产商、代理商谋求转型</a></li>
    </ul>
</body>

</html>

4-综合案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        body {
            color: #3c3c3c;
            /* 一般网页不用纯黑，用淡灰色  3c3c3c */
            font-size: 16px;
        }

        h1 {
            text-align: center;
            /*  文字水平居中 */
            font-size: 25px;
            font-weight: normal;
            /* 让粗体不加粗 */
        }

        div {
            text-align: center;
            font-size: 14px;
        }

        .sports {
            color: #f40;
        }

        .packtake {
            color: #f00;
        }

        .co {
            font-weight: 700;
            color: #ccc;
        }

        .co:hover {
            /* 链接伪类选择器  鼠标经过 .co这个类名的时候 */
            color: #f00;
        }

        p {
            font-size: 14px;
            line-height: 22px;
            text-indent: 2em;
            /* 首行缩进2个字的距离 */
            letter-spacing: 1px;

        }

        em {
            font-style: normal;
            /*  让斜体 不倾斜 */
            color: skyblue;
        }
    </style>
</head>

<body>
    <h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>

    <div>2017年07月16日20:11 <span class="sports">新浪体育 评论中大奖</span>
        （<a href="#" class="packtake">11</a>人参与） <a href="#" class="co">收藏本文</a></div>
    <hr />

    <p>新浪体育讯　7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。
    </p>

    <p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>

    <p>据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。
    </p>
    <p>这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。
    </p>
</body>

</html>

5-搜索结果

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body {
            width: 600px;
        }

        * {
            font-family: arial;
        }

        h4 {
            color: red;
        }

        h4 span {
            color: blue;
        }

        div {
            color: #666;
        }

        div>a {
            color: green;
            text-decoration: none;
        }

        div>span {
            color: gray;
        }

        div>span>a {
            color: gray;
        }

        div>i {
            font-style: normal;
            color: red;
        }
    </style>
</head>

<body>
    <h4>HTML <span>&lt;</span>div<span>&gt;</span>标签</h4>
    <div>
        不必为每一个&lt;<i>div</i>&gt;都加上类或id，虽然这样做也有一定的<i>好处</i>。可以对同一...&lt;<i>div</i>&gt;<i>标签</i>支持<i>HTML</i>中的全局属性。事件属性&lt;<i>div</i>&gt;<i>标签</i>支持<i>HTML</i>中的事件...
    </div>
    <div><a href="#">w3school.com.cn...&nbsp;<img src="xiajiantou.png" /></a><span>-<a href="#">百度快照</a></span></div>
</body>

</html>