CSS学习笔记---（四）

来源：互联网发布：网页页面设计软件编辑：程序博客网时间：2024/04/27 00:04

1. .类选择器名称{css样式代码} 类选择器可以使用多次

/* 类选择器的名称可以任意起名，不能为中文 *//* 1.英文圆点开头 *//* 2.用合适的标签把要修饰的内容标记起来 *//* 3.用class="类选择器的名称"为标签，设置一个类 */如下：<span class="stress">胆小如鼠</span>.stress{  color:red;  font-size:12px;}

2. ID选择器前面是#号，ID选择器只能在文档中使用一次，且仅有一次；类选择器可以使用多次

<span id="setGreen">公开课</span>#setGreen{    color:green;}######################################################/*---------可以多个class="stress"---------*/<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>  #################################################/*-------错错错！！！！id 只能出现一次*/<p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>

3.子选择器，也就是大于号>——用于选择指定标签元素的第一代!!!!!子元素，只能管牢最近的哪一个子。

/*例如下面，just a quick glance*/.food>li{border:1px solid red;}

一个完整的例子:

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>子选择符</title><style type="text/css">.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/.first>span{border:1px solid red;}</style></head><body><p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p><h1>食物</h1><ul class="food">    <li>水果        <ul>          <li>香蕉</li>            <li>苹果</li>            <li>梨</li>        </ul>    </li>    <li>蔬菜      <ul>          <li>白菜</li>            <li>油菜</li>            <li>卷心菜</li>        </ul>    </li></ul></body></html>

4. 后代选择器，用的是空格，指的是所有的后辈元素，不管是孙子的孙子的孙子，全部拿下

下面是一个具体的例子：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>后代选择器</title><style type="text/css">.first span{color:red;}.food li{    border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/ }</style></head><body> <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p><!--下面是本小节任务代码--><ul class="food">    <li>水果        <ul>          <li>香蕉</li>            <li>苹果</li>            <li>梨</li>        </ul>    </li>    <li>蔬菜      <ul>          <li>白菜</li>            <li>油菜</li>            <li>卷心菜</li>        </ul>    </li></ul></body></html>

5. 通用选择器—用一个*指定—–匹配html中所有元素

/*quick glance*/* {color:red; font-size:20px;}

6.伪类选择符—–允许给html不存在的标签设置样式—-如：某一个元素，当鼠标滑过的状态，来设置字体颜色。

/*quick glance*/a:hover{color:red;}------a标签的字体鼠标滑过的时候，字体变红

具体的一个例子：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>伪类选择符</title><style type="text/css">a:hover{                /*这里就是伪类选择器 a 元素，在鼠标悬停的时候，颜色为红，字号20px*/    color:red;    font-size:20px;}</style></head><body>    <h1>勇气</h1>    <p class="first">三年级时，我还是一个<a href="http://www.imooc.com">胆小如鼠</a>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>    <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>    <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></body></html>

7.分组选择符—-为html的多个标签元素设置同一个样式—-用,也就是分组选择符

/*quick glance*/h1,span{color:red;}/*相当于*/h1{color:red;}span{color:red;}

一个具体的例子：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>分组选择符</title><style type="text/css">.first,span{color:green;}</style></head><body>    <h1>勇气</h1>    <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>    <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>    <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></body></html>

0 0