首頁 web前端 html教學 重拾CSS基础?开篇_html/css_WEB-ITnose

重拾CSS基础?开篇_html/css_WEB-ITnose

Jun 24, 2016 pm 12:34 PM

由来

从事软件行业一晃也5年有余,之间参与过若干个基于web的项目,所以javascript和Html基本已经相当熟悉,最近对于web前端开发比较关注,分析后发现CSS的确是自己的弱项,于是决定再加强下。就开始啃本书吧:《CSS权威指南》,此处以及以后文章都将以学习该书为基础展开。

以下是第一章:“CSS和文档” 学习笔记

概念区分 替换和非替换元素

CSS起作用主要依赖于元素,但并非所有的元素都以相同的方式创建。比如,图像和段落就不是同类元素,span和div也不相同,通常元素的表现形式有两类:替换和非替换。

替换元素(replaced element):

指用来替换元素内容的部分并非由文档内容自己标示。比如img元素,img没有具体内容,它的具体靠src属性指定的一个图像来填充。再比如: type="text" 的是,这是一个文本输入框,换一个其他的属性(button)时候,浏览器显示就不一样。(X)HTML中的重拾CSS基础?开篇_html/css_WEB-ITnose

非替换元素(nonreplaced element):

大多数(X)HTML元素都是非替换元素,其内容由浏览器在元素本身生成的框中显示。比如css base就是一个非替换的元素。

块元素和行内元素 块元素:

块元素生成一个元素框,默认情况下(没有css干预下),它会填充其父元素的内容区,旁边不能有其他元素。比较熟悉的有p和div。可以把块元素div想象成一个个box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志剪下来。每块剪下来的内容就是一个block。然后我们把这些块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。

行内元素:

行内元素在一个文本行内生成元素框,而不会打断这行文本。最好的例子就是XHTML中的a元素。这些元素不会在它本身之前或者之后生成“分隔符”,所以可以出现在另一个元素内容中,而不会破坏其显示。

当然在实际的使用过程中往往会用css属性来其作用:display。这个属性是使用,会在后期学习奉上。

关于link

一般一个html页面要引用独立文件的css样式,都会用到link标签,比如:

<link rel=”stylesheet” type=”text/css” href=”sheet1.css” media=”all”>
登入後複製

在使用过程中需要注意几点:

Link必须放在head元素中,不能放在其他元素内部<如title>。 Css文件中不能包含XHTML或任何其他标记语言。 外部引用css文件不一定非得有个扩展名,但是基于对旧版本的浏览器的支持,建议写明.css结尾。

另外在使用过程中,我们也很少接触一个link标签属性:title(获选样式表中使用)。比如:

<link rel=”stylesheet” type=”text/css” href=”sheet1.css” title=”default”><link rel=”stylesheet” type=”text/css” href=”sheet1.css” title=”big-text”>
登入後複製

很多浏览器支持用户选择样式,通过添加title用户可以基于浏览器进行样式的切换,当然IE目前还是不支持,这个功能也用的比较少。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1657
14
CakePHP 教程
1415
52
Laravel 教程
1309
25
PHP教程
1257
29
C# 教程
1231
24
HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

HTML中起始標籤的示例是什麼? HTML中起始標籤的示例是什麼? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

HTML,CSS和JavaScript:Web開發人員的基本工具 HTML,CSS和JavaScript:Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

HTML:結構,CSS:樣式,JavaScript:行為 HTML:結構,CSS:樣式,JavaScript:行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來:網絡設計的發展和趨勢 HTML的未來:網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML,CSS和JavaScript的未來:網絡開發趨勢 HTML,CSS和JavaScript的未來:網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

See all articles