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; }
 

 

 

html css入门书籍推荐

好尴尬,最近找工作,一直遇到培训机构,妹的。。。。只能慢慢找了 首先,希望大家有基本的html以及css的基础来看下面基本书: 1.html5秘籍 2.css3实战 3.jav...
  • HUSHILIN001
  • HUSHILIN001
  • 2017年03月05日 16:44
  • 734

HTML、CSS、JavaScript网页制作从入门到精通

这大概是我第一次写博客吧,自从大一开始写代码,至今也有5年的光景了,很遗憾并没有养成写博客的习惯,一方面因为我平时很少有阶段性的总结,另一面也确实不知道该分享些什么。归根结底还是功夫不到家,没有一些让...
  • luchengbing0120
  • luchengbing0120
  • 2017年09月19日 19:42
  • 492

html+css快速入门教程

前端工程师应该掌握的基本技术:HTML+CSS+JavaScript1 HTML简介1.1. 什么是HTML?(了解)HTML是超文本标记语言(HyperText Markup Language,HT...
  • keledon
  • keledon
  • 2017年06月07日 19:09
  • 769

CSS入门经典

CSS入门经典第一章  理解CSS 级联样式表:一种简单语言的名称,运用它声明Web浏览器如何显示文档。应用CSS,可以改变如何显示Web页面的许多方面,字体,颜色,图形,链接等。级联是指一种特殊的方...
  • chejinqiang
  • chejinqiang
  • 2015年03月06日 17:30
  • 229

Div+CSS布局入门教程(一二三四)

Div+CSS布局入门教程(一二三四)作者:Jekseny 一、页面布局与规划  好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造...
  • scs2000
  • scs2000
  • 2006年08月29日 09:57
  • 717

HTML XML CSS JS 迅速学习

忽然发现自己有点基础嘛,这次系统习得。 HTML 30分钟入门教程 15.4.22 http://www.jb51.net/shouce/html/html.htm 15.4.22完成 ...
  • DaI253
  • DaI253
  • 2015年12月08日 14:57
  • 125

CSS基础知识总结

CSS概述CSS(Cascading Style Sheet):层叠样式表 作用:CSS 作用就是给HTML页面标签添加各种样式基本语法选择器{属性名:属性值 ;} 例子:p{color:red...
  • qq_28052437
  • qq_28052437
  • 2017年02月23日 21:45
  • 75

《CSS+DIV网页样式与布局从入门到精通》PPT及视频下载路径

CSS+DIV网页样式与布局从入门到精通  作者:喻浩 课件下载地址:http://pan.baidu.com/s/1hqqZg3M (百度云网盘);光盘资源下载地址:http://p...
  • TSDDragon
  • TSDDragon
  • 2014年10月14日 20:41
  • 1925

慕课学习史上最全零基础入门HTML5和CSS笔记

慕课学习史上最全零基础入门HTML5和CSS笔记Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么...
  • zoucanfa
  • zoucanfa
  • 2017年12月27日 19:11
  • 371

CSS最详细的基础教程

层叠样式表CSS 绝对原创 CSS简介:Cascading Style Sheets(层叠样式表)的缩写,它是一种用来表现HTML或XML等文件样式的计算机语言。 CSS的作用: 是定义网页外...
  • wulove52
  • wulove52
  • 2016年08月30日 20:54
  • 2120
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS入门
举报原因:
原因补充:

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