CSS入门
来源:互联网 发布:wings解散 知乎 编辑:程序博客网 时间:2024/04/28 10:33
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; }
- CSS入门
- css入门
- CSS入门
- CSS入门
- CSS 入门
- CSS入门
- CSS入门
- CSS入门
- CSS入门
- css入门
- CSS入门
- css入门
- CSS入门
- CSS 入门
- css 入门
- css入门
- CSS入门
- CSS 入门
- 模态属性表的建立VC++.NET2003
- 电影猜猜猜[1]
- ASP.NET:一段比较经典的多线程学习代码
- 非模态对话框生成VC++.NET 2003
- GridView CheckBox Selection With a Twist
- CSS入门
- canny 算法学习
- 五种提高 SQL 性能的方法
- ASP.NET 2.0 的内部变化
- 2001年蒲慕明教授写给他实验室学生的信
- ORACLE SQL 优化
- 未来五年10大必备网络技术
- 2007中秋将至
- 连接各种数据库方式速查表