很久之前就开始接触css,但一直专注于业务层,渐渐的忽略了展示层的重要。直到最近接触政府的项目,才越发的感觉到界面美观的必要。因此现在开始系统的学习界面性的知识,并将学习笔记记录于此,一方面,为以后遗忘时有根可寻;另一方面,将自己的学习心得和过程写出来,和大家一起分享,与大家共同进步,如有错误或不周之处,还请各位仁兄海涵指正。进入正题...
CSS--层叠样式表
分为内联样式表、嵌入样式表、外部样式表、输入样式表
1.内联样式表
例:
<html>
<head></head>
<body>
<p style="color:blue;background:green;...">
内联方式:段落的样式设置
</p>
</body>
</html>
2.嵌入样式表
例:
<html>
<head>
<style media="screen,projection">
此处media属性用来设置此类样式只在页面输出到指定的媒介时,才起
作用。 如例中表示,只有当前页面输出到屏幕、投影仪(打印机)时,才起作
用。
<!--
p{color:blue;background:green;....}
-->
此处的注释符不能去掉,其作用是防止老式的浏览器不识别style标示
符,导致将style标签之间的内容原样显示在页面中。
当加上注释符后,浏览器在解析到style标签时,假如不能识别,那么
会将style标签中的内容当做html代码进行解析,从而识别到注释符,避免将内
容原样输出到页面。假如能够识别,则浏览器会忽略掉style标签中的html标示
符,将style标签中的内容当做style类型的代码来解析。
</style>
</head>
<body>
<p>
嵌入方式:段落的样式设置
</p>
</body>
</html>
3.外部样式表
文件1:test.css
文件2:a.html
在test.css中
p{color:blue;background:green;...}
在a.html中
<html>
<head>
<link rel="Stylesheet" href="test.css" type="text/css"
media="screen,projection">
此处rel、href属性必选,type属性可选,但如果选择,值必须为
text/css,media属性可选,含义与嵌入样式表中media一样。
</head>
<body>
<p>
外部方式:段落的样式设置
</p>
</body>
</html>
4.输入样式表
类似于java中,在一个类中引用另一个类。
文件1:test1.css
文件2:test2.css
文件3:a.html
第一种情况:
在test1.css中
p{color:blue;background:green;...}
@import url(test2.css);
在test2.css中
p{font-size:20px;font-family:宋体;...}
在a.html中
<html>
<head>
<link rel="Stylesheet" href="test1.css" type="text/css"
media="screen,projection">
此处rel、href属性必选,type属性可选,但如果选择,值必须为
text/css,media属性可选,含义与嵌入样式表中media一样。
</head>
<body>
<p>
输入方式:段落的样式设置
</p>
</body>
</html>
第二种情况:
在test1.css中
p{color:blue;background:green;...}
在test2.css中
p{font-size:20px;font-family:宋体;...}
在a.html中
<html>
<head>
<style>
<!--
@import url(test1.css);
@import url(test2.css);
如果此处再设置
p{color:red;background:red;...}
会将test1.css中的样式覆盖
-->
</style>
</head>
<body>
<p>
输入方式:段落的样式设置
</p>
</body>
</html>
分享到:
相关推荐
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
CSS学习笔记CSS学习笔记CSS学习笔记CSS学习笔记
CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS ...
CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 Head...
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
### HTML与CSS学习笔记 #### 一、基础知识概述 HTML(HyperText Markup Language)与CSS(Cascading Style Sheets)是构建网页的基础技术。通过学习HTML与CSS,我们可以创建结构化且美观的网页。 - **WWW (World ...
综上所述,《CSS经典学习笔记》旨在提供一个全面的CSS学习路径,无论你是初学者还是有经验的开发者,都能从中受益,提升你的CSS技能和网页设计能力。通过深入实践和不断探索,你会发现CSS不仅可以打造出美观的界面,...
html与css的学习笔记与练习html与css的学习笔记与练习 html与css的学习笔记与练习html与css的学习笔记与练习 html与css的学习笔记与练习html与css的学习笔记与练习 html与css的学习笔记与练习html与css的学习笔记与...
个人css学习笔记 精华版 CSS学习笔记中涵盖了CSS的基本概念、分类、基本语法、常用属性等知识点。下面将对这些知识点进行详细的解释和总结。 什么是CSS? CSS(Cascading Style Sheet)是一种样式表语言,用于...
本资源为【html + css 学习笔记整理.zip】,是一份专为希望深入学习HTML和CSS的用户准备的实用资料。它涵盖了从基础到进阶的知识点,包括HTML的基本结构、常用标签及其属性,以及CSS的核心概念如选择器、盒模型、...
html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记...
学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习...
### CSS+DIV 学习笔记知识点总结 #### 一、CSS 概述 - **CSS 定义**:层叠样式表(Cascading Style Sheets, CSS)是一种用于定义网页表现形式的语言,它使得开发者能够独立地管理和控制文档的内容与样式。 - **CSS...
CSS和CSS3学习笔记,知识全面,知识分类清晰,内涵学习3D的链接博客
前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css...
CSS 学习笔记 一、CSS 简介 CSS(层叠样式表)是一种用于为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言。CSS 文件扩展名为 .css。CSS 语法由两个主要的部分构成:选择器和...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
HTML+CSS个人学习笔记
【标题】"Metro UI CSS学习笔记Demo"是一个关于利用Metro UI CSS框架进行Web设计和开发的实践案例集合。这个框架灵感来源于Windows 8的Modern UI风格,为网页设计师提供了构建现代、简洁且互动性强的界面的可能性。...