黑马程序员-----css层叠样式表

最新推荐文章于 2024-08-02 16:52:17 发布

原创最新推荐文章于 2024-08-02 16:52:17 发布 · 468 阅读

0 ·

CC 4.0 BY-SA版权

------Java培训、Android培训、iOS培训、.Net培训、期待与您交流！ -------

css层叠样式表

将网页中的样式分离出来，完全由css来控制

增强样式的复用性以及可扩展性

格式：

选择器｛属性名：属性值。。。。｝

css和html代码相结合的四种方式：

1.每个HTML标签都有一个style属性

2.当页面有多个标签相同样式时，可以复用。

3.当有多个页面中的标签的样式相同时，还可以将样式单独封装成一个css文件。通过在每个页面中定义

4.通过html中的head标签中的link标签连接成一个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:超链接被点后状态

a:hover:悬停在超链接上

a:active:点击超链接时