百度前端技术学院 第三天学习总结（CSS文本、派生选择器）（2）

CSS学习, 百度前端技术学院 本文总阅读量次

派生(上下文)选择器非常重要！

  • 如果希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器： 
    1
    2
    3
    4
    li strong {
        font-style: italic;/*斜体*/
        font-weight: normal;
      }
  • 对下面strong元素起作用：
    1
    <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
  • 只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。

id 选择器和派生选择器

1
2
3
4
5
#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
  • 上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。 这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如 <em></em> 或者 <span></span>，不过这样的用法是非法的,因为 不可以在内联元素 <span> 中嵌入 <p>(原因)
  • 即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #sidebar p {
    	font-style: italic;
    	text-align: right;
    	margin-top: 0.5em;
    	}

    #sidebar h2 {
    	font-size: 1em;
    	font-weight: normal;
    	font-style: italic;
    	margin: 0;
    	line-height: 1.5;
    	text-align: right;
    	}

class 也可被用作派生选择器

1
2
3
4
.fancy td {
	color: #f60;
	background: #666;
	}

在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）
反过来，元素也可以基于它们的类而被选择：（要注意包含关系，前包含后）
1
2
3
4
td .fancy {
	color: #f60;
	background: #666;
	}

在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。
1
<td class="fancy">

选择器的分组

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。 用逗号将需要分组的选择器分开。 在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

1
2
3
h1,h2,h3,h4,h5,h6 {
  color: green;
  }

文本样式都有哪些相关属性，对应哪些值

“color 属性”设置字体颜色

  • color 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 text-decoration 属性放置在文本下方或上方的线 (underline overline)。

“font-size属性”设置字体大小

  • 千万注意 数字与单位之间不要有空 格！
  • 使用rem更加便于以后的维护
  • 需要注意的是rem不支持 Internet Explorer 8 和以下的版本。如果你的项目需要支持较老的浏览器，你可以坚持使用em 或 px。
  • 需要先设置html的字体大小（ 1rem 等于 HTML 中的根元素的字体大小），设置为10px将便于后面的计算。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    html {
      font-size: 10px;//1em=10px
    }

    h1 {
      font-size: 2.6rem;//26px
    }

    p {
      font-size: 1.4rem;//14px
      color: red;
      font-family: Helvetica, Arial, sans-serif;
    }

“font-family属性”设置字体样式

  • 使用字体栈并且将字体栈的最后一个值设置为网络安全字体（通用字体）。
    1
    2
    3
    p {
      font-family: "Trebuchet MS", Verdana, sans-serif;
    }
  • 注意: 有一些字体名称不止一个单词，比如Trebuchet MS ，那么就需要用引号包裹。

“text-decoration属性”非常有趣

可用于在设置链接时取消设置链接上的默认下划线。

  • 可用值为：
  • none: 取消已经存在的任何文本装饰。
  • underline: 文本下划线.
  • overline: 文本上划线
  • line-through: 穿过文本的线

注意到 text-decoration 可以一次接受多个值.
同时注意 text-decoration 是一个缩写形式，它由 text-decoration-line, text-decoration-style 和 text-decoration-color 构成。 

1
2
3
.la{
  text-decoration: wavy line-through red;
}

“line-height 属性”设置行高

  • 推荐使用数字作为无单位的属性值，无单位的值乘以 font-size 来获得 line-height。
    1
    line-height: 1.5;

“text-indent 属性”设置首行文本缩进

  • 规定文本块中首行文本的缩进。
  • 注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。
  • 例子
    1
    2
    3
    4
    p
    {
    text-indent:50px;
    }
CSS学习, 百度前端技术学院