CSS入门

原创 2007年09月23日 20:57:00

CSS入门

以下内容来自于CSS the missing manual

参看链接:

译者:http://yulimin.javaeye.com/blog/71162

原版:http://www.china-pub.com/computers/common/info.asp?id=35381

 

 

什么是CSS

CSS = Cascading Style Sheets

CSS中文称为层叠式样式表

 

CSS可以做什么

CSS可以将画面的内容和格式分离,使HTML代码更清晰,更容易维护

 

示例解释

p { color: red; font-size: 1.5em; } 

 

Internal CSS

<style type="text/css">
h1 {
    color: #FF7643;
    font-face: Arial;
}
p {
    color: red;
    font-size: 1.5em;
}
</style>

External CSS

HTML:
 <link rel="stylesheet" type="text/css" href="css/global.css">

XHTML:
 <link rel="stylesheet" type="text/css" href="css/global.css" /> 

 

CSS: 

<style type="text/css">
 @import url(css/global.css);
</style>
 

Selector

Tag Selectors:Page-Wide Styling(页面范围内的格式)

     h2 {
         color: #FFC;
         margin-bottom: 0;
         padding: 5px 0px 3px 25px;
         background-color:#999;
    }

 

 

Class Selectors:Pinpoint Control(精确控制)

    .special {
      color:#FF0000;
      font-family:"Monotype Corsiva";
     }
    <p class="special">

ID Selectors: Specific Page Element(特定的Page对象)

    #banner {
      background: #CC0000;
      height: 300px;
      width: 720px;
     }
    <p id="copyright">
 

Descendent Selector:

    h1 strong { color: red; }
        Here any <strong> tag inside an h1 is red, but other instances of the <strong> tag on the page, aren't affected.

    p.intro a { color: yellow; }
        Apply this style to every link (a) that's a descendent of a paragraph (p) that has the intro class applied to it. Note that there's no space between p and .intro, which tells CSS that the intro class applies specifically to the <p> tag.
    p .intro a { color: yellow; }
an <a> tag inside of any tag styled with the .intro class, that's itself a descendent of a <p> tag.

    .intro a {color: yellow; }
This selector indicates any <a> tag inside of any other tag<div>, <h1>, <table>, and so onwith the .intro class applied to it.

 

Group Selectors:

h1, h2, h3, h4, h5, h6 { color: #F1CD33; }

 

Universal Selector:

 * { font-weight: bold; }

 

Pseudo-Class and Pseudo Element

a:link selects any link that your guest hasn't visited yet, while the mouse isn't hovering over or clicking it. This style is your regular, unused Web link.

 

a:visited is a link that your visitor has clicked before, according to the Web browser's history. You can style this type of link differently than a regular link to tell your visitor, "Hey, you've been there already!"

 

a:hover lets you change the look of a link as your visitor passes the mouse over it. The rollover effects you can create aren't just for funthey can provide useful visual feedback for buttons on a navigation bar.

 

a:active lets you determine how a link looks as your visitor clicks. In other words, it covers the brief nanosecond when someone's pressing the mouse button, before releasing it. 

 

:before It lets you add content preceding a given element
    p.tip:before {content: "HOT TIP!" }

:after pseudo-element adds generated contentbut after the element
    p.tip:after {content: "HOT TIP!" }

:first-child pseudo-element lets you select and format just the first of however many children an element may have.
    li:first-child { font-weight: bold; }

:focus applies when the visitor does something to indicate her attention to a Web page elementusually by clicking or tabbing into it. 

   input:focus { background-color: #FFFFCC; }

 

Advanced Selector:

Child Selector

与Descendent Selector不同的地方是,Child Selector可以定位到特定的元素

body > p

 

Adjacent Siblings 

h2 + p

select every paragraph following each <h2> tag

 

Attribute Selectors
a[href="http://www.cosmofarmer.com"]{ color:red; font-weight:bold; }
 

 

 

相关文章推荐

WEB2.0标准教程: CSS布局入门

CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距;而现在则采用层(div)来定位,通过层的margin,pa...

[html5入门-24]深度分析css3高级特性中的线性渐变

在学习css3线性渐变的时,深感受其属性迷惑,为此摸索总结深扒出其特性,分享于下文。 主要内容: 1 线性渐变中渐变方向的角度问题; 2 渐变起始点、终点的精确定位; 3 与PS中渐变的异同; 3 渐...

XHTML & CSS 基础知识入门

查看一个网页的源代码只需要右击空白处点击查看网页源代码或者ctrl+U即可。 下载text editor文档编辑器 学习html和css前,我们需要一个text editor文档编辑器,计算机自带...

React入门到精通(三)——定义组件和css样式

所谓组件:即分装起来的具有独立功能的UI部件,React希望我们能够将UI组件化,一个功能一个组件,最后通过组合或者嵌套的方式组成一个大的组件,完成UI搭建。 组件 ...

Web前端从入门到放弃(css3选择器的总结)

Web前端从入门到放弃(css3选择器的总结)一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的h...

CSS视口单位:快速入门

单位意义 视口单位的应用 全屏背景图片或部分 创造完美适应的标题 居中元素 注意事项 浏览器支持 翻译自CSS Viewport Units: A Quick Start。此文章简单介绍了视口单位及...

CSS入门二

一、单位和值 颜色 1、使用有限的颜色名。 2、使用十六进制的颜色值。 颜色名、RGB颜色(百分百颜色、数字颜色、十六进制颜色、短十六进制颜色) 长度单位 英寸(in)、里面(cm)、毫米(mm)、磅...
  • oprim
  • oprim
  • 2014年02月21日 11:55
  • 309

HTML入门学习笔记--CSS三大特性(4)

24-CSS三大特性之继承性1.什么是继承性?作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性注意点:1.并不是所有的属性都可以继承, 只有以color/font-/text...

【HTML、JAVASCRIPT、CSS】2、HTML语言入门2

1、HTML中实现超链接

CSS入门笔记

第一阶段 Lesson3 CSS 2 ² 什么是CSS? 2 1. 推荐的学习CSS网站(禅意花园....顶级优秀的网站) 2 2. 什么是dtd文档? 2 ² CSS的作用 ? 3 ² 怎...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS入门
举报原因:
原因补充:

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