黑马程序员技术交流社区
标题: 【上海校区】自编教材《web标准网页制作实例教程》连载5 [打印本页]
作者: bbacc 时间: 2017-8-23 10:22
标题: 【上海校区】自编教材《web标准网页制作实例教程》连载5
1.1. 应用CSS到页面里CSS代码可以用以下几种方法来应用于我们的页面中，选择哪种方法根据我们的需求来应用。
1.1.1. 定义行间样式行间样式是直接写在HTML标签里的，例如：
<h1 style=“font-size:14px; color:red;”>最新宠物摄影</h1>
其中的style代表样式，具体对标签应用的样式写在引号里面，上例中给h1应用了一个font-size:14px;的样式，将h1的字体大小设置为14像素，color:red;颜色为红色。
这种方法现在一般不提倡使用，在实际工作中可以用来临时调试样式代码。
1.1.2. 定义内部样式内部样式写在<head>元素内，通过<style>元素包含属性。通常写法如下：
<head>
<title>应用嵌入样式</title>
<style>
body{ font-size:14px;}
</style>
</head>
这种方法是初学CSS时常用的形式，适用于样式较少的单独页面。本书前10章的小练习基本都是采用此种方法。在实际工作中不推荐使用这种形式，此方法只能对当前页面有效，不能通用于整个网站。在实际的项目中我们用的最多的是下面一种方法把样式单独分离出来。
1.1.3. 链入外部样式表 链入外部样式表通常是工作中用的最多也是最好的一种形式，它可以将样式单独放在一个CSS文件中，再由网页进行调用。同一个样式文件可以被多个网页调用，进而实现了代码的最大限度的复用。外部样式应在<head>区域内声明。例如，我们新建一个文件名为style.css的样式文件，并保存在我们网站文件夹的根目录后，调用此文件的语法如下：
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
link标签用来调用外部样式文件。
rel属性用于定义链接的文件和HTML文档之间的关系。
stylesheet：指定一个固定或首选的样式。
href属性用于指定外部样式表的地址。
type属性用于指定媒体类型。
media属性指定用于文档的输出设备，通常其值都为all即应用于所有设备。
对于写在样式表里的样式，就不需要<style>标签了。如果你在样式表里加上这个标签，样式表中的样式就不会被浏览器加载。
1.2. 关于样式的优先权在这几种定义样式的写法中存在一个优先权的问题，总结起来就是：从上到下，从总体到局部。如果后面重新定义了前面定义过的同类性质的属性，则以后定义为准。
如果位于HTML文档里层的标签重新定义了外层标签定义过的同一属性，浏览器显示里层标签的内容时，以里层标签的定义为准。如果里层标签没有对外层标签定义过的某种属性重新定义，浏览器显示里层标签的内容时，继承外层标签的定义。
如果在一个网页中同时使用了行间样式、内部样式、外部样式，他们的优先级的顺序依次是：行间样式>内部样式>外部样式。
1.3. 样式的继承样式的继承就是指父容器所拥有的属性，会部分作用于其所有子容器里的元素。有些样式不会被继承。例如width、margin、padding等。最典型的例子就是，如果我们整个页面的大部分文字都是12号的，我们可以定义body{ font-size:12px; }，那么页面中大部分标签的字体大小都将变为12px。
1.4. 常用CSS属性 从现在开始，我们将学习一些常用的CSS属性，通过这些CSS属性的学习，我们可以做出很多常见的网页效果。
1.4.1. 文字相关样式属性文字样式属性主要是用来改变文字的颜色、字体、大小、粗细、行距、对齐方式、文本修饰等。常用的文字样式属性如下表所示：
n color属性color属性用于指定文本颜色。它的值可以是十六进制编码、颜色名或者三原色单位。
十六进制编码：一种6位的数字代码，分别表示组成颜色的红、绿、蓝值，数字前面具有一个“#”号（例如：#FF0000）
颜色名：直接利用英文颜色名，例如red、green、blue等。
三原色单位：通过指定某颜色所需的红、绿、蓝值，也就是（rgb）值来指定颜色。
例如，下面三种写法都定义了段落文字为红色；
p{color:#FF0000;}
p{color:red;}
p{color:rgb(255,0,0);}
n font-family属性font-family属性用于指定要使用的文字字体。此属性的缺陷在于查看页面的人必须安装了所需的字体，否则不能以指定的字体显示。同时我们可以一次指定多种字体，字体间用英文逗号隔开，如用户的机器上没有第一种字体，则浏览器会查找我们指定的下一种字体。如，我们为h1标题指定字体。
h1{ font-family:Arial, Helvetica, sans-serif;}
通常我们如果不指定字体的情况下，浏览器大多默认以宋体显示。
n font-size属性font-size属性用于指定文字大小，例如我们指定p段落的文字大小为12像素可以这样。
p{font-size:12px;}
n font-weight属性font-weight属性用于指定文本是粗体还是正常，其中bold是最常用的值，设置文字为粗体显示。如果希望默认样式已经是粗体显示的文本（如h系列）为正常显示，那么这时边可以用normal（正常显示）。
n font-style属性font-style属性用于指定字体是normal或italic等。如，我们希望默认为斜体的<em>标签为正常显示，可以这样写：
em{ font-style:normal;}
n line-height属性line-height属性用于指定行与行之间的距离。在正文中，行距能让文本有足够的视觉空间，使用户浏览更舒服、更有层次感。如，通常段落p的文字上下之间有点挤，我们可以为段落p设置行距例如我们设置p段落的行距为28px，可以这样：
p{ line-height：28px;}
n text-decotation属性text-decotation属性用于指定文本修饰，其可用的值通常有以下三个：
① underline：在文字下方添加一条线。
② overline：在文字顶部添加一条线。
③ line-through：在文字中间添加一条线，类似于删除线。
n text-indent属性 text-indent属性用于缩进文本的第一行。例如，我们我们为每个段落中的开始空两格，可以这样写：
p{ text-indet：2em;}
1.4.2. 设置尺寸属性 用于设置尺寸的属性有以下几个：
n height和width属性height和width属性用于设置元素的高度和宽度，它们能用的值包括长度、百分比或者关键字auto（auto为默认值代表自动）
n max-width和min-width属性max-width属性和min-width属性分别用于指定元素的最大和最小宽度。当我们创建自适应页面部分以适应用户屏幕大小时，这两个属性非常有用。max-width属性能够防止容器太宽而不方便阅读，而min-width属性可以防止太窄而不能阅读。
这两个属性的值可以是数值、长度或百分比。如我们利用这两个属性组合设置<div>
元素不能小于300像素宽而且不能大于600像素宽可以这样写： div{ min-width:300px; max-width:600px;}
n min-height属性和max-height属性min-height属性和max-height属性分别用于设定容器的最小高度和最大高度。
这两个属性的值同样可以是数值、长度或百分比。
n overflow属性有时当我们为容器设置了相应的高度后，会发现由于容器不够高，里面的元素超出了元素设定的高度。这时我们便可以利用overflow属性来进行相应的设置。
overflow设置当对象超出指定高度和宽度时如何处理，取值有：
visible：默认值，内容不会被修剪，会呈现在元素框之外。
auto：在需要时剪切内容并添加滚动条。
hidden：不显示超过对象尺寸的内容。
scroll：总是显示滚动条。
下面我们通过一个小例子来理解overflow的显示方式，我们新建一个class名为box的div区块，结构代码如下：
<div class="box"><p>你在车上甚至连站名也来不及看清楚，一间红瓦灰墙的小屋，一排白漆的木栅栏，或许还有三五个人影，眨眼就消失了。</p></div>
下面是样式的设置，我们依次将overflow的四个属性依次替换：
.box{ width:150px; height:100px; border:#000 solid 1px; overflow:visible;}
下图3-4是分别是四个属性的显示效果：
图3-4
-
图片1.png
(1.62 KB, 下载次数: 41)
作者: 绮丽 时间: 2017-8-24 10:13
又发现宾哥了
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
