程序员基本功：CSS基础知识

来源：互联网发布：域名查询接口api 编辑：程序博客网时间：2024/06/05 13:33

CSS 概述

    CSS 指层叠样式表 (Cascading Style Sheets)
    样式定义如何显示 HTML 元素
    样式通常存储在样式表中
    把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
    外部样式表可以极大提高工作效率
    外部样式表通常存储在 CSS 文件中
    多个样式定义可层叠为一

层叠次序

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

    1.浏览器缺省设置

2.外部样式表

3.内部样式表（位于 <head> 标签内部）

   <style type="text/css">      p  {color: red}      h2 {color: blue; font-size: 120%}      .redcss {color: red}    </style>

4.内联样式（在 HTML 元素内部）

<p style="color: red">red chars</p>

CSS 元素选择器

   html {color:black;}   h1 {color:blue;}   h2 {color:silver;}

CSS 分组

/* no grouping */h1 {color:blue;}h2 {color:blue;}h3 {color:blue;}h4 {color:blue;}h5 {color:blue;}h6 {color:blue;}/* grouping */h1, h2, h3, h4, h5, h6 {color:blue;}

CSS 类选择器

类选择器.important {color:red;}类集合选择器 p.important {color:red;}多类选择器 .important {font-weight:bold;} .warning {font-weight:italic;} .important.warning {background:silver;}

CSS ID 选择器

首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。#intro {font-weight:bold;}tag中的id名一致：<p id="intro">This is a paragraph of introduction.</p>

CSS 属性选择器

为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色a[href][title] {color:red;}

后代选择器（descendant selector）又称为包含选择器

如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：h1 em {color:red;}tag:<h1>This is a <em>important</em> heading</h1><p>This is a <em>important</em> paragraph.</p>

CSS 子元素选择器

如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：h1 > strong {color:red;}TAG:<h1>This is <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1>

相邻兄弟选择器（Adjacent sibling selector）

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：h1 + p {margin-top:50px;}

CSS 伪类 (Pseudo-classes)

语法：selector : pseudo-class {property: value}锚伪类：a:link {color: #FF0000}/* 未访问的链接 */a:visited {color: #00FF00}/* 已访问的链接 */a:hover {color: #FF00FF}/* 鼠标移动到链接上 */a:active {color: #0000FF}/* 选定的链接 */

CSS 伪元素 (Pseudo-elements)

语法：selector:pseudo-element {property:value;}:first-letter     向文本的第一个字母添加特殊样式。     :first-line     向文本的首行添加特殊样式。     :before     在元素之前添加内容。     :after     在元素之后添加内容。

完