黑马程序员-----css层叠样式表
2015-06-17 13:14
316 查看
------Java培训、Android培训、iOS培训、.Net培训、期待与您交流! -------
css层叠样式表
将网页中的样式分离出来,完全由css来控制
增强样式的复用性以及可扩展性
格式:
选择器{属性名:属性值。。。。}
css和html代码相结合的四种方式:
1.每个HTML标签都有一个style属性
2.当页面有多个标签相同样式时,可以复用。
<style> css代码块 </style>
3.当有多个页面中的标签的样式相同时,还可以将样式单独封装成一个css文件。通过在每个页面中定义
<style>@impot url("1.css")</style>
4.通过html中的head标签中的link标签连接成一个css文件
<link rel="stylesheet"href="1.css"/>
技巧:
为了提高相同的样式的复用性以及可扩展性,可以讲多个标签样式进行单独定义,并封装成css文件
在一个css文件中使用css的import将多个标签样式导入,然后在HTML页面上使用link标签导入这个总的css文件即可。
选择器
选择器:其实就是样式要作用的标签容器
选择器的基本分类:
1.标签选择器:其实就是HTML中的每一个标签名
2.类选择器:其实就是每一个标签中的class属性。用. 的形式表示。只用来给css使用,可以对不同标签进行相同样式设定
3.id选择器:id 选择器可以为标有特定 id 的 HTML 元素指定特定的样 id
选择器以 "#" 来定义。
代码实现:
<html>
<head>
<style type="text/css">
.important {color:red;}
</style>
</head>
<body>
<h1 class="important">This heading is very important.</h1>
<p class="important">This paragraph is very important.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>
扩展选择器:
1.关联选择器:其实就是对标签中的标签进行样式的定义
<html>
<head>
<style type="text/css">
h1 em {color:red;}
</style>
</head>
<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>
2.组合选择器:对多个选择器进行相同样式定义。将多个选择器通过,隔开的形式。
3.伪元素选择器:其实 就是元素的一种状态
a:link:超链接被点前状态
a:visited:[b]超链接被点后状态[/b]
a:hover:悬停在超链接上
a:active:点击超链接时
css层叠样式表
将网页中的样式分离出来,完全由css来控制
增强样式的复用性以及可扩展性
格式:
选择器{属性名:属性值。。。。}
css和html代码相结合的四种方式:
1.每个HTML标签都有一个style属性
2.当页面有多个标签相同样式时,可以复用。
<style> css代码块 </style>
3.当有多个页面中的标签的样式相同时,还可以将样式单独封装成一个css文件。通过在每个页面中定义
<style>@impot url("1.css")</style>
4.通过html中的head标签中的link标签连接成一个css文件
<link rel="stylesheet"href="1.css"/>
技巧:
为了提高相同的样式的复用性以及可扩展性,可以讲多个标签样式进行单独定义,并封装成css文件
在一个css文件中使用css的import将多个标签样式导入,然后在HTML页面上使用link标签导入这个总的css文件即可。
选择器
选择器:其实就是样式要作用的标签容器
选择器的基本分类:
1.标签选择器:其实就是HTML中的每一个标签名
2.类选择器:其实就是每一个标签中的class属性。用. 的形式表示。只用来给css使用,可以对不同标签进行相同样式设定
3.id选择器:id 选择器可以为标有特定 id 的 HTML 元素指定特定的样 id
选择器以 "#" 来定义。
代码实现:
<html>
<head>
<style type="text/css">
.important {color:red;}
</style>
</head>
<body>
<h1 class="important">This heading is very important.</h1>
<p class="important">This paragraph is very important.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>
扩展选择器:
1.关联选择器:其实就是对标签中的标签进行样式的定义
<html>
<head>
<style type="text/css">
h1 em {color:red;}
</style>
</head>
<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>
2.组合选择器:对多个选择器进行相同样式定义。将多个选择器通过,隔开的形式。
3.伪元素选择器:其实 就是元素的一种状态
a:link:超链接被点前状态
a:visited:[b]超链接被点后状态[/b]
a:hover:悬停在超链接上
a:active:点击超链接时
相关文章推荐
- 黑马程序员----Java基础之集合类(一)
- 黑马程序员————JAVA 设计模式— 装饰模式(Decorator)详解。
- July 第一次实习生面试
- 你是如何成为 Lisp 程序员的(转)
- 那些成功学和鸡汤文不会告诉你的
- Android面试试题总结整理
- 黑马程序员——Java语言基础(方法、数组、内存分析)
- 软件开发人员的作战手册 - 让程序员活的久一点
- 黑马程序员----Java基础之String类
- 30+程序员,平时都忙些什么事情?平时都想些什么?以后有啥计划?
- 我很少推荐文章,这文章必须推荐《让程序员跳槽的非钱原因》
- 【免费 IT 求职公开课】如何搞定难度+++的算法,和坑爹的 follow up 问题?
- IT面试题集
- 程序员学习编程需要攻克的8个障碍
- 编程面试的10大算法概念汇总
- 面试题7用两个栈实现队列
- 译:编程面试的10大算法概念汇总
- 黑马程序员——Java语言基础
- 程序员学习编程需要攻克的8个障碍
- [转]20150617-让程序员跳槽的非钱原因