五,JavaWeb简略的谈下前端技术<二>CSS层叠样式表

时间 2019-11-09

标签 javaweb 简略前端技术 css 层叠样式栏目 Java 繁體版

原文原文链接

最初的web页面只是在浏览器里边显示一些信息而已，后来随着互联网的发展，人们对页面的可观赏性要求愈来愈高，你网站作的难看，没人浏览啊，并且网站的功能愈来愈强大，若是这么多的页面没有一个很好的排版的话，简直就是乱七八糟，为此对于优化页面的需求也愈来愈高，可是HTML他没这个能力啊，HTML：臣妾作不到啊~。为此为了弥补HTML的不足，W3C组织又弄出来了一个新的东西，那就是CSS，而后就是HTML来负责内容，CSS用来负责美观。 css

5.1引用方式

CSS有4种定义与引用方式：行内样式，内嵌式，连接式和导入式。用的时候能够根据实际的状况来选择合适的定义方式。 html

1，行内样式：前端

行内样式是一种比较直接的一种样式，它经过style属性直接定义在HTML标记内，这种样式比较容易被初学者接受，可是很是不灵活。 web

例子以下：<p style=”color:blue”>文字</p>把段落里边的颜色设置成蓝色。浏览器

2，内嵌式：字体

内嵌式样式表就是在页面中使用<style></style>标记将CSS样式包含在页面中，例如：优化

<style> 网站

P{ spa

color:red; .net

}

</style>

这样的话，在html文档中，全部p标记的内容都是红色字体的。可是呢，咱们一个网站里边有不少的网页的，你说咱们在一个网页定义了这样的一个样式，可是咱们另外的一个页面又要从新弄，是否是很麻烦，因此说这种时比较笨重的。

3，连接式：

连接外部CSS样式表是最经常使用的一种引用样式表的方式，将CSS样式定义在一个外部的文件中，而后在html文件中使用<link>标记引用，这是最为有效的使用CSS样式表的方式。

用法：<link rel=”stylesheet” href=”path” type=”text/css”>

例子：好比咱们建立了一个mystyle.css的样式表，那么咱们怎么用呢？

4，导入式

导入式和连接式差很少只不过是引用的方式不同罢了，好比在连接式中举的那个例子，那么用导入式怎么用呢？

<style>

@import “mystyle.css”

</style>

若是万一有一个文档具备上述的全部的样式，并且对同一种标记多了多个样式定义的时候应该怎么办呢？因此W3C给这几种使用CSS的方式弄了一个级别。他们的优先级从高到底为：行内样式》内嵌》连接》导入式。

5.2CSS规则：

一个CSS样式表中包含3部份内容：选择符、属性、属性值。

选择符：{属性：属性值;}

选择符又叫选择器，HTML引用某个CSS文件以后，某一段文字的具体用什么样式，就是经过选择器来具体使用的。

例如上边提到的例子

<style>

P {

color:red;

}

</style>

那么p就是选择器，当前的HTML中全部使用p标记的内容的颜色都将是红色的。

Color就是属性喽，red就是属性值。

5.3CSS选择器

1，标记选择器：直接定义某个标记的属性，那么全部使用这个标记的内容都将是被设置的样式。使用这种选择器很是便捷，可是使用这种选择器会有必定的局限性。好比说我定义了一个超连接的样式，那么我一个页面的超连接将都是这个样式，我想用不一样的样式来表现超连接的话，将很是麻烦。

2，类别选择器：本身定义一个类别，以.开头，至关于本身定义了一个属性同样。

例子：

<head>

<title>类别选择器</title>

<style>

.one{

color:red;

}

</style>

</head>

<body>

<h2 class=”one”>应用了选择器1</h2>

</body>

3,ID选择器：经过HTML页面中的ID属性来选择来添加样式的，须要注意一个html页面中不能有两个相同的ID，至关于给标记的ID属性增长了一个属性值，定义ID以#号开头。

<style>

#one{

color:red;

}

</style>

<body>

<p id=”one”>ID选择器</p>

</body>

5.4 CSS经常使用属性

此处略，无非就是宽，高，背景，字体，颜色啥的，须要用的时候去查找就好了。顺便举个小例子。

下期预告：六,JavaWeb简略的谈下前端技术<三>JavaScript

若是想查看更多的技术文档请关注个人公众号：ITYaoDao，或者直接扫描下边的二维码：