`

犀牛书第五版读书笔记——Chapter 16. Cascading Style Sheets and Dynamic HTML

阅读更多
1.浏览器内置有默认的样式表,用户可以用自己的设置来改变默认值。这也是为什么页面在不同的浏览器中视觉效果不同的原因

2.通过一个ElementNode的style属性,可以编辑该元素的一些CSS属性。不同的浏览器对该属性的实现是不同的:
var s = document.i1.style;
var count = 0;
for ( var prop in s) {
    count++;
}
alert(count);

执行上面的代码,FF下支持202个属性,IE下只有148个,Google浏览器只有11个

3.element.style属性获取的CSS2Properties对象,只包含内联的css样式,通过外部css文件设置的属性,用style属性无法取到。同样,设置这个值,实际上设置的是内联样式,将覆盖外部css文件的设置值
var p1 = document.getElementById("p1");
var s = p1.style;
alert(s.color);

<body>
	<button id="b1">click me</button>
	<p id="p1" style="color:red;">hello world</p>
</body>

将显示"red",如果是用外部css文件设置,则没有值

4.CSS属性是多个单词用-连接的,在javascript里会改用驼峰方式命名
element.style.fontFamily = "sans-serif";


5.给style的属性赋值时,一定是使用string

6.所有的位置属性都需要单位
element.style.left = "300px";

同样,取出位置属性,也是带有单位的string

7.window对象的getComputedStyle()方法,返回CSS2Properties对象。不同于element.style属性只包含内联样式,这个返回值包含了内联样式和外部CSS文件定义的样式。该方法接受两个参数,第一个参数是要计算的元素,第二个参数是CSS的伪类。FF和Google浏览器支持这个方法
var p1 = document.getElementById("p1");
var s = getComputedStyle(p1, null);
alert(s);
for ( var prop in s) {
    alert(prop + ": " + s[prop]);
}


8.IE不支持上述方法,但是它提供了类似的功能。每个元素都有currentStyle属性

9.可以设置外部CSS文件是否生效
<link id="css1" type="text/css" rel="stylesheet" href="../styles/css.css" />

function toggleCssSheet() {
    var c1 = document.getElementById("css1");
    c1.disabled = !c1.disabled;
}


10.FF还支持直接操作CSS样式表文件,不过作用不大
2
1
分享到:
评论

相关推荐

    CSS——Cascading Style Sheets

    CSS——Cascading Style Sheets 层叠样式表 作用 定义了HTML元素怎样去显示 一般存储在样式表中 也可以存储在外部样式文件.css文件中

    Wrox.Beginning.CSS.Cascading.Style.Sheets.for.Web.Design.2nd.Edition.Jun.2007.rar

    《Wrox Beginning CSS: Cascading Style Sheets for Web Design 2nd Edition Jun. 2007》这本书是CSS初学者的绝佳指南,专注于教授如何利用CSS(层叠样式表)来设计和构建高效的Web页面。CSS是现代网页设计的核心...

    John.Wiley.and.Sons.CSS.Hacks.and.Filters.Making.Cascading.Stylesheets.Work.May.2005.eBook-LinG

    在Web开发中,CSS(Cascading Style Sheets)是用于控制网页布局和样式的语言,它的出现极大地提升了网页设计的灵活性和可维护性。然而,由于各个浏览器对CSS规范的实现不尽相同,开发者常常面临兼容性挑战。这就是...

    CSS 指层叠样式表 (Cascading Style Sheets)

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

    Cascading Style Sheets: Designing for the Web

    Cascading Style Sheets: Designing for the Web, Third Edition By Håkon Wium Lie, Bert Bos ............................................... Publisher: Addison Wesley Professional Pub Date: April...

    HTML——变幻粒子.zip

    CSS(Cascading Style Sheets)则用于控制网页的样式和布局。在粒子特效中,CSS可以用来设置粒子的颜色、大小、透明度、阴影等视觉属性。通过CSS3的动画和转换(transform)属性,可以实现粒子的动态效果,比如旋转...

    HTML——表白特效.rar

    2. **CSS (Cascading Style Sheets)**:CSS负责网页的样式和布局。表白特效的视觉吸引力主要依赖于CSS。开发者可能使用CSS来设置字体、颜色、背景、过渡效果、动画等,使表白页面呈现出浪漫的氛围。例如,通过CSS3的...

    Cascading Style Sheet 2.0 中文手册.zip

    CSS,全称层叠样式表(Cascading Style Sheets),是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的网页设计语言。这个手册的出现,旨在帮助开发者更好地理解和应用CSS2.0规范,提高网页设计和开发...

    CSS(Cascading Style Sheets)简介

    2. **内部样式表(Internal Style Sheet)**:将CSS写在HTML文档的`&lt;head&gt;`部分,用`&lt;style&gt;`标签包裹,如`&lt;style type="text/css"&gt;H1 {...}&lt;/style&gt;`,只对当前HTML页面有效,适用于整个页面统一的样式设置。...

    第2章搭建网站雏形——任务源码.zip

    2. **CSS样式**:CSS(Cascading Style Sheets)用于控制网页的布局和外观。在源码中,可能有单独的CSS文件(如style.css),用于定义元素的颜色、大小、位置等属性,实现页面的美化和响应式设计。 3. **JavaScript...

    HTML网页练习——努比亚官网.rar

    CSS(Cascading Style Sheets)用于控制网页的布局和样式。在本练习中,你将学习如何使用CSS来设置文本样式、颜色、背景、边距、布局等。CSS3引入了许多新特性,如选择器层级与组合、过渡效果、动画、多列布局、媒体...

    Web编程入门——字节跳动.pptx

    CSS(Cascading Style Sheets)是一种样式语言,用于控制网页的展示样式。 开发工具选择 选择合适的开发工具是 Web 开发的重要一步。常见的开发工具包括文本编辑器、IDE、版本控制系统等。 调试技术 调试是 Web ...

    web开发技术——课程笔记.rar

    2. CSS (Cascading Style Sheets): CSS负责网页的样式和布局。通过选择器(如类名、ID名)应用样式,可以改变字体、颜色、大小、位置等属性。CSS布局技术包括盒模型、流体布局、网格系统以及Flexbox和Grid,这些都...

    登录页面——万里长城.zip

    【描述】中提到,这个网页设计是基于HTML(HyperText Markup Language)和CSS(Cascading Style Sheets)的基础知识,这两者是构建网页内容和样式的基石。HTML用于创建网页结构,包括标题、段落、链接、表单等元素,...

    DHTMLET - Cascading Style Sheet 2.0 中文手册

    Cascading Style Sheets(CSS)是网页设计中的核心技术之一,它用于控制网页的布局和样式。CSS2.0作为CSS的重要版本,为网页设计师提供了更为丰富的样式控制功能,使得网页设计更具灵活性和可维护性。本手册...

    Beginning CSS: Cascading Style Sheets for Web Design, Second Edition Part 3

    Using a standardized approach to CSS in an example-packed, step-by-step format, this comprehensive introduction clearly shows you how to combine CSS with HTML, XHTML, or XML to create rich, ...

    Beginning CSS: Cascading Style Sheets for Web Design, Second Edition Part 4

    Using a standardized approach to CSS in an example-packed, step-by-step format, this comprehensive introduction clearly shows you how to combine CSS with HTML, XHTML, or XML to create rich, ...

    CSS2.0中文手册DHTMLET-Cascading Style Sheet 2.0 中文手册

    CSS2.0(Cascading Style Sheets 2.0)是Web设计领域的一个重要规范,它为HTML和XML文档提供了强大的样式定义能力,让网页的设计更加灵活多样。这个中文手册,即"DHTMLET-Cascading Style Sheet 2.0 中文手册",是...

    Cascading Style Sheet 2.0 Handbook - Rainer's DHTML Library.chm_样式表中文手册.rar

    《Cascading Style Sheet 2.0 Handbook》是Rainer's DHTML Library提供的一本关于CSS 2.0的中文手册,它详细介绍了这个版本的CSS规范和技术,旨在帮助开发者和设计者深入理解和掌握层叠样式表的用法。CSS(层叠样式...

Global site tag (gtag.js) - Google Analytics