`
Kyll
  • 浏览: 104115 次
  • 性别: Icon_minigender_1
  • 来自: 长春
社区版块
存档分类
最新评论
阅读更多
原文出自 www.w3schools.com 中的 CSS 教程。


注意: 样式名称不要以数字开始, Mozilla/Firefox 无法工作。

注释: /* ... */

属性值和单位之间不要有空格。
20px不能写成 20 px

样式的顺序:
浏览器默认 < 外部样式 < 内部样式 < 内联样式

CSS 语法:
selector {property: value}
例:
body {color: black}
p {font-family: "sans serif"}

组:
h1,h2,h3,h4,h5,h6 {color: green}

类选择器:
p.right {text-align: right}
p.center {text-align: center}
例:
<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>

引用多于一个的样式:
center 与 bold 分别是两个样式的名字。
<p class="center bold">This is a paragraph.</p>

不带标签名称的选择器, 任何标签都可用:
.center {text-align: center}
<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>

匹配所有 input 元素中 type 属性为 text 的:
input[type="text"] {background-color: blue}

ID 选择器:
以 # 开始, 匹配 ID 为 green 的元素
#green {color: green}

匹配 <p> 元素中 ID 为 para1 的元素
p#para1
{
text-align: center;
color: red
}

引用外部样式:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

内部样式: 要有 HTML 注释
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>

内联样式:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

样式覆盖:
样式1:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
样式2:
h3
{
text-align: right;
font-size: 20pt
}
最后:
h3
{
color: red;
text-align: right;
font-size: 20pt
}

a:link {color: #FF0000}     /* unvisited link */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */

匹配 <div> 中的第一个 <p>
div > p:first-child
{
text-indent:25px
}

匹配 <p> 中的第一个 <em>
p:first-child em
{
font-weight:bold
}

p:first-line {color:#0000ff;font-variant:small-caps}

p:first-letter {color:#ff0000;font-size:xx-large}

h1:before
{
content: url(beep.wav)
}

h1:after
{
content: url(beep.wav)
}

图像透明:
<img src="klematis.jpg" width="150" height="113" alt="klematis"
style="-moz-opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" />

Mozilla: -moz-opacity:x    x值(0.0 - 1.0)
IE: filter:alpha(opacity=x) x值(0 - 100)
分享到:
评论

相关推荐

    CSS学习手册,CSS学习

    - **减少重绘与回流**:理解浏览器渲染原理,避免不必要的计算,提升页面性能。 - **CSS Sprites**:通过合并多个小图像到一张大图,减少HTTP请求,提高页面加载速度。 8. **浏览器兼容性** - **vendor prefixes...

    Web前端学习之CSS课件

    CSS相关技术文档-例如CSS基础:类选择器。就是建立一个类,并为这个类定义一些样式,在需要应用的标签内以class=“类名”的形式套用,例如: .student{color:#00f;} “student”&gt;张三 类名的前边一定要加上一个...

    CSS学习手册

    2. **减少重绘与回流**: 适当使用CSS3的`transform`和`opacity`进行动画,减少对页面渲染的影响。 3. **CSS Sprites**: 合并小图像为一张大图,通过背景定位减少HTTP请求。 4. **CSS代码压缩与合并**: 减少文件...

    零基础学HTML CSS源代码

    style1.css 名为style1的CSS样式文件。 style2.css 名为style2的CSS样式文件。 style3.css 名为style3的CSS样式文件。 第16章(源代码\第16章) 示例描述:本章演示字体属性用法。 间距与间隔....

    高效学习CSS布局之道

    减少选择器复杂性、使用适当单位、避免重绘和回流、利用CSS缓存等策略能提升网页加载速度和用户体验。 通过深入学习上述知识点,并结合实际项目实践,你将能够掌握"高效学习CSS布局之道",从而在网页设计领域...

    29个DIV_CSS网站模板源码 很不错的学习资料

    9. **网页优化**:观察源码中是否有针对性能优化的实践,例如减少重绘和回流、使用雪碧图或符号字体等。 通过研究这些源码,不仅可以加深对`Div`和`CSS`的理解,还可以了解到当前网页设计的流行趋势和最佳实践。这...

    css彻底研究(电子书)

    9. 性能优化:学习如何通过合理的选择器使用、减少重绘和回流、合并和压缩CSS等策略,提高网页加载速度和性能。 此外,压缩包中还包含"安装帮助.txt"和"使用说明.url",这可能是为了辅助读者更好地使用电子书,例如...

    一个值得学习的css布局设计-taobo的

    合理的CSS选择器使用、避免使用计算属性、减少重绘和回流等都是提高页面加载速度和性能的关键。"box_demo_files"中可能包含了一些性能优化的技巧,比如使用CSS预处理器(如Sass或Less)来编写更简洁、可维护的代码,...

    CSS,在adf中创建css

    避免使用过于复杂的 selectors,减少不必要的重绘和回流,合理组织和压缩CSS,以提高页面加载速度。 通过掌握以上知识点,你就能在ADF中有效地创建和管理CSS,提升你的应用程序界面的用户体验。不断实践和学习,你...

    css-handbook_handbook_css_

    避免使用通配符选择器,减少重绘和回流,合理组织样式,以及利用CSS Nano、autoprefixer等工具进行压缩和自动补全,都是优化CSS性能的有效策略。 ### 浏览器兼容性 不同的浏览器对CSS的支持程度各异,开发者需要...

    CSS重构:样式表性能调优_前端学习_

    2. **减少重绘和回流**:改变元素的样式可能触发浏览器的重绘和回流,这是性能瓶颈。尽量将相关的样式属性一起更改,避免不必要的计算。 3. **使用CSS预处理器**:如Sass、Less等,它们允许编写更模块化的代码,...

    CSS2和CSS3的参考手册(chm格式)

    《CSS2和CSS3的参考手册》是一套全面的在线帮助文档,包含了关于CSS2.0和CSS3.0的详尽指南。这些手册对于Web开发者来说是宝贵的资源,能够帮助他们深入理解并熟练掌握这两种样式表语言。 CSS2.0参考手册详细介绍了...

    aqua.css轻量级纯CSS框架 v1.7.0.zip

    《aqua.css轻量级纯CSS框架:打造高效网页设计的新选择》 aqua.css,一个专注于轻量级和简洁性的纯CSS框架,版本v1.7.0,为网页开发者提供了一种快速构建响应式和易用界面的解决方案。这款框架以其小巧的体积和强大...

    学习CSS优化的十八项技巧

    ### 学习CSS优化的十八项技巧:精简与高效并重 在Web开发领域,CSS(层叠样式表)是实现网页布局和设计的重要工具。然而,随着网站功能的日益复杂,如何优化CSS,使其既高效又易于维护,成为前端开发者们关注的焦点...

    css和div学习步骤

    3. CSS性能优化:理解CSS性能影响因素,学习优化技巧,如减少重排和重绘,避免使用`!important`等。 在学习过程中,不断阅读相关书籍、查阅文档、参与在线课程和社区讨论,将有助于深化理解并掌握CSS和`div`的运用...

    CSS禅意花园-源代码.rar

    - **性能优化**:学习如何编写高效、可维护的CSS代码,减少重绘和回流,提高页面加载速度。 - **浏览器兼容性**:了解不同浏览器对CSS的支持情况,学习如何优雅降级和向前兼容。 通过对这些源代码的实践和研究,你...

    精通css+div

    同时,也会讨论性能优化策略,比如减少重绘和回流、合理使用CSS预处理器以及如何组织和维护大型CSS项目。 通过以上四章的学习,读者将能够掌握CSS+Div的基本和高级技巧,从而能够设计出美观、响应式的网页,并具备...

    css样式的学习资料

    10. **最佳实践和性能优化**:学习如何编写高效的CSS,避免使用通配符选择器,减少重绘和回流,使用适当的单位(如em、rem、vw、vh),以及利用CSS缓存和CDN提高加载速度。 通过深入学习以上知识点,你可以掌握CSS...

Global site tag (gtag.js) - Google Analytics