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

原创 2012年03月23日 15:36:33
CSS 概述

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

层叠次序

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

    1.浏览器缺省设置

    2.外部样式表

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

    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     在元素之后添加内容。



书评-----疯狂Java:突破程序员基本功的16课.李刚

读这本书的时候,看完它的前言,可以说,真的是如坐春风,受益匪浅,可以说对我程序员职业生涯产生不可磨灭的影响,作者的观点对于我来说如雷贯耳,请看: ---------------------------...
  • woailuo453786790
  • woailuo453786790
  • 2015年11月16日 23:24
  • 839

一个程序员应该具备的基础知识和概念

1、计算机是有什么组成的,CPU是什么东西,其工作原理是什么。(对于这些以及下面将要提到的概念我不会告诉你什么答案,你可以看相应的教材,关于教材我会在下一部分详述,记住理解最重要!)  2、机器语言...
  • w1158384189
  • w1158384189
  • 2014年01月20日 20:06
  • 800

Java 程序员 必备基础知识 温故而知新

前言正文 自我介绍数据结构和算法Java篇Java EE知识点储备计算机网络操作系统数据库相关XML常识性知识 总结 前言 准备了接近两个月的面试笔试,现在终于...
  • ljj_9
  • ljj_9
  • 2017年04月27日 18:36
  • 809

css hack基础理解

为什么需要css hack: 因为不同厂商的浏览器以及不同的版本对于css的支持和解析结果有不同的差异,并且css的优先级问题都会导致生成的页面效果产生变化,得不到我们想要的效果,css hack的作...
  • ljxydx
  • ljxydx
  • 2017年04月17日 22:48
  • 196

网络基本功(二十一):细说HTTP(上)

网络基本功(二十一):细说HTTP(上)   转载请在文首保留原文出处:EMC中文支持论坛https://community.emc.com/go/chinese      介绍 ...
  • mxway
  • mxway
  • 2015年03月14日 18:06
  • 1061

网络基本功(一):细说网络传输

网络基本功(一):细说网络传输   转载请在文首保留原文出处:EMC中文支持论坛https://community.emc.com/go/chinese    介绍   常言道:欲练神功,必先练...
  • mxway
  • mxway
  • 2015年01月16日 21:14
  • 2262

Android基础知识(1)——UI编程

Android应用绝大部分UI组件都放在android.widget包及其子包、android.view包及其子包中,Android应用的所有UI都继承了View类。View类还有一个重要的子类,Vi...
  • qq_26849491
  • qq_26849491
  • 2016年06月20日 21:36
  • 3668

html5 css3基础知识详解

如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了 CSS2的众多不足之处,使得Web开发变得更为高效和便捷。 Html4-html5...
  • ITzhongzi
  • ITzhongzi
  • 2017年03月09日 18:29
  • 493

程序员也要了解经济学——经济学的基本知识总结

之前看了李文龙写得《漫画经济学》,虽然有了一些总结,但是多是基于问题的解答,为了进一步将这些基础也普及给广大网友,因此,将我之前的笔记重新整理了一下发布网上,这一篇重点关注如基础知识,如果需要的话,请...
  • a1456123a
  • a1456123a
  • 2017年04月13日 14:45
  • 279

读后感之顶尖咨询师教你的工作基本功--靠谱

公司处在转型期,工作较为分散,再加上家中小王子的到来,感觉个人的心态出现了轻微的动荡(虽说理论上工作与家庭应该分开,但是,谁又能真正做到呢)。有点不知道自己的重心所在。 刚好,领导推荐了一本书--《...
  • ghostliming
  • ghostliming
  • 2017年11月19日 22:28
  • 98
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:程序员基本功:CSS基础知识
举报原因:
原因补充:

(最多只允许输入30个字)