第二章 使用CSS控制页面

本章主要介绍:如何使用CSS控制页面,以及其控制页面的各种方法,包括行内样式、内嵌式、链接式和导入式等,最后讨论各种方式的优先级问题

1、行内样式

行内样式是所有样式方法中最为直接的一种,直接对HTML的标记使用Style属性,然后将CSS代码直接写在其中。

<html>
<head>
<title> 页面标题</title>
</head>
<body>
<p style="color:#ff0000;font-size:20px;text-decoration:underline;">正文内容1</p>
<p style="color:#000000;font-style:italic;">正文内容2</p>
<p style="color:#ff00ff;font-size:25px;font-weight:bold;">正文内容3</p>
</body>
</html>

行内样式是最为简单的CSS使用方法,但由于需要为每一个标记设置style属性,后期维护成本依然很高,而且网页容易过胖,因此不推荐使用。

2、内嵌式

内嵌样式表就是将CSS写在<head>与</head>之间,并且用<style>和</style>标记进行声明。

<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
p{
    color:#ff00ff;
    text-decoration:underline;
    font-weight:bold;
    font-size:25px;
}
-->
</style>
</head>
<body>
    <p> 紫色、粗体、下划线、25px的效果1</p>
    <p> 紫色、粗体、下划线、25px的效果2</p>
    <p> 紫色、粗体、下划线、25px的效果3</p>
</body>
</html>

所有CSS的代码部分被击中在了同一个区域,方便了后期的维护,页面本身也大大瘦身。但如果是一个网站,拥有很多的页面,对于不同页面上的<p>标记都希望采用同样的风格时,内嵌式的方法就显得稍微麻烦,维护成本也不低,因此仅适用于对特殊的页面设置单独的样式风格。

3、链接式

链接式CSS样式表是使用频率最高,也是最为使用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个文件,实现了页面框架HTML代码与美工CSS代码的完全分离,使得前期制作和后期维护都十分的方便,网站后台的技术人员与美工设计者也可以很好的分工合作。

对于同一个CSS文件可以链接到多个HTML文件中,甚至可以链接到整个网站的所有页面中,使得网站整体风格统一、协调,并且后期维护的工作量也大大减少。

<html>
<head>
<title>页面标题</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h2>CSS标题1</h2>
    <p>紫色、粗体、下划线、25px的效果1</p>
    <h2>CSS标题2</h2>
    <p>紫色、粗体、下划线、25px的效果2</p>
</body>
</html>
h2{
    color:#0000ff;
}
p{
    color:#ff00ff;
    text-decoration:underline;
    font-weight:bold;
    font-size:20px;
}
h3{
    color:#00ffff;
    font-style:italic;
    font-size:40px;
}

链接式样式表的最大优势在与CSS代码与HTML代码完全分离,并且同一个CSS文件可以别不同的HTML所链接使用。因此在设计整个网站时,可以将所有页面都链接到同一个CSS文件,使用相同的样式风格。如果整个网站需要进行样式上的修改,就仅仅只需要修改这一个CSS文件即可。

4、导入样式

采用import方式导入的样式表,在HTML文件初始化时,会被导入到HTML文件内,作为文件的一部分,类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才以链接的方式引入。

常用的有如下几种@import语句,可以选择任意一种放在<style> 与</style>标记之间:

@import url(sheet.css);

@import url("sheet.css");

@import url(‘sheet.css‘);

@import sheet.css;

@import "sheet.css";

@import ‘sheet.css‘;

<html>
<head>
<title> 页面标题</title>
<style type="text/css">
<!--
@import url("1.css");
@import url("2css");-->
</style>
</head>
<body>
<h2> CSS标题1 </h2>
<p>紫色、粗体、下划线、25px的效果1</p>
<h2> CSS标题2 </h2>
<p>紫色、粗体、下划线、25px的效果3<p>
<h3> CSS标题3 </h3>

<p>紫色、粗体、下划线、25px的效果3<p></body>
</html>

导入样式表的最大用处在与可以让一个HTML文件导入很多的样式表
不单是HTML文件的<style>与</style>标记中可以导入多个样式表,在CSS文件内也可以导入其他的样式表,如将@import url(2.css);去掉,然后再1.css文件中加入@import url(2.css);也可以达到相同的效果。

5、各种方式的优先级问题

时间: 2024-10-05 08:31:01

第二章 使用CSS控制页面的相关文章

XHTML+CSS基础知识(四):用CSS控制页面

1.CSS写入页面的方法有哪些? 行内式:直接在标签当中利用style属性来写样式表. 内嵌式:将所有的样式表提取出来放到网页头部的style标签当中. 链接式:将样式表单独写成一个.css文件,利用link标签在网页头部引用,W3C标准推荐. 导入式:利用@import来引入样式表,由于效率等等问题已经被淘汰 2.CSS样式表的优先级? 理论上:行内样式>内嵌样式>链接样式>导入样式 实际上:就近原则,内嵌.链接.导入在同一个文件的头部,谁距离相应的代码近,谁的优先级别就更高一些.相当

通过CSS控制页面中的内容垂直居中的方法

方法一:通过行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是250px,如果将文字的行高设为500px,并且外面的容器高度也设为500px,就可以实现这行文字垂直居中,这样做的缺点是如果内容过多,文字就跑到了下一行,就不是居中了,所以限制较多. 具体代码: <html> <head> <style> body { margin: 0;

css控制页面打印(分页、屏蔽不需要打印的对象)

样式: <style   media="print">     .Noprint   {   DISPLAY:   none;}     .PageNext   {   PAGE-BREAK-AFTER:   always   }   </style> 注: ①.不需要打印的对象要用上“Noprint”样式. ②.需要换页处理的对象要用上“PageNext”样式. ③.因为最后一页不用加入换页符,所以要控制最后一页不要使用该样式.个人感觉用PAGE-BREAK-

EF架构学习第二章(特性控制以及验证)

特性控制 数据验证(MVC)与数据库映射 Key 主键 Required 指定列非空 DisplayFormat //显示格式 MaxLength //最大长度 Display 指定本地显示字符串 DatabaseGenerated 指定主键列创建的模式(自动增长还是自定义) NotMapped 不映射为数据列 Forengin key 映射外键 Column 指定生成列名的规则(列名 数据类型) MVC数据验证 RegularExpression 正则表达式验证 Range 范围验证 Stri

第二章 运行时的页面构建过程

1.客户端 Web 应用的生命周期 客户端 Web 应用的生命周期从用户指定某个网站地址(或单击某个链接)开始 其由两个步骤组成:页面构建和事件处理 页面构建 -- 创建用户界面 事件处理 -- 进入循环(序号5)从而等待事件(序号6)的发生,发生后调用事件处理器 2.页面构建阶段 页面构建阶段从浏览器接收页面代码开始 其执行分为两个步骤: (1).解析 HTML 代码并构建文档对象模型(DOM) (2).执行 Javascript 代码 步骤 1 会在浏览器处理 HTML 节点的过程中执行 步

css控制页面文字不能被选中user-select:none;

html中可能有些地方不想让用户复制文字,或是用a标签做了个点击按钮,点快的时候文字会被选中,很丑,这个时候可以使用下面的方案禁止文字选中. 给该元素设置css即可:user-select:none; <p style="user-select:none">不让选中的文字</p> 原文地址:https://www.cnblogs.com/djjlovedjj/p/9929063.html

第二章 进程的控制

进程:由程序段.相关的数据段和PCB三部分便构成了进程实体进程的特征:动态性.并发性.独立性.异步性进程的三种状态:就绪(Ready)状态 执行(Running)状态 阻塞(Block)状态 临界区:人们把在每个进程中访问临界资源的那段代码称为临界区. 同步机制应遵循的规则 (1)空闲让进 (2)忙则等待 (3)有限等待 (4)让权等待 进程同步问题 "生产者--消费者"问题."读者--写者问题"."哲学家进餐问题"

css控制页面书签

<li><a href="#gldl"><msg:out key="glgk.Geography"/></a></li> <h4><a id="glls" class="link_fix"></a><i class="co1"></i><msg:out key="glgk.

Web--CSS控制页面(link与import方式差别)

    先了解: [1]         "Table"和"DIV"这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面结构 W3C,是World Wide Web Consortium的缩写.中文是W3C组织或者万维网联盟.W3C标准不是一个标准,而是一系列标准的集合. 包括三部分的标准:结构(Structure).表现(Presentation)行为(Behavior). 结构化标准语言主要包含XHTML和XM