CSS的学习（一）--简介篇

来源：互联网发布：。是什么意思网络语言编辑：程序博客网时间：2024/06/05 23:48

什么是css

css是指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素，即对各种标签、文本的美化。
样式通常存储在样式表中
解决内容与表现分离的问题
起装饰的作用。
所有的主流浏览器都支持层叠式样式表。

编程中css的种类

外部样式表
（独创一个.css文件。使用<link>标签）
内部样式表
内联样式

外部样式表

这是在网站开发中很常使用到的一种方法。有一个很大的优点。提高了对于样式的复用性。当多个网页都需要用到这个样式表的时候。可以引用外部的所写文件。省去了很多功夫。

使用方法

<head><link rel="stylesheet" type="text/css" href="外部CSS所在的位置"></head>

内部样式表

这类样式通常写入head的<style>标签中,使用类选择器或者ID选择器进行使用。可以在同一个网页中使用，但不能跨网页使用样式。使用类选择器还能完成对样式的复用。多次使用该样式。

使用实例

<style>        #id1{            color: blue;        }        .class1{            color: red;        }    </style></head><body><p id="id1">这是一个id选择器</p><p class="class1">这是一个类选择器</p><p class="class1">这是一个类选择器</p></body>

这里写图片描述

    从上图可以看出id选择器只能规定一个标签的样式。而class类选择器则可以多次使用。    如果我们需要让一个页面中的多个同类标签用同一种样式，那要怎么办呢？这时候就要使用到标签选择器了。

标签选择器

    顾名思义。就是针对标签去进行操作。可以为同一个页面的所有该类标签进行样式的制定。

实例：

<head>    <meta charset="UTF-8">    <title>test</title>    <style>        p{            color: green;         }    </style></head><body><p>这是个标签选择器</p><p>这是个标签选择器</p><p>这是个标签选择器</p><p>这是个标签选择器</p></body>

这里写图片描述

内联样式表（也称行内样式表）

内联样式表是通过在标签中使用语句。对单独这个标签进行操作。只能在这个标签中使用。完全不能实现复用。因此，现在的开发工作中。不推荐使用这类选择器。

<p style="color: pink">这是个内部样式表</p>

这里写图片描述

区别

css样式的使用方法分3类

1.内部样式：

优点：比外部样式的优先级高缺点：代码样式复用程度低（不同页面不能复用）

2.外部样式：引入外部css文件 link

优点：代码的复用程度高缺点：优先级最低

3.行内样式：

缺点：代码繁复，影响正常的代码审查，不利于后期维护；（最不推荐）

优先级

如果同一个元素有着多个样式选择器。那么。样式会怎样选择呢？这时就需要引入一个权值的概念了
每一种样式的选择器都有着他们不同的权值，权值越大的选择器、优先级越高。

权值：内部样式：1000；标签选择器：1；id选择器：100；类选择器：10即：标签选择器<类选择器<id选择器<内部样式

阅读全文

0 0