2020-08-24

Futaki_kanata

于 2020-08-24 15:29:11 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/Futaki_kanata/article/details/108200163

版权

1.1基本概念

CSS（Cascading Style Sheet）层叠样式表，为了实现页面内容和表现形式的分离。层叠的含义是可以对一个元素多次设置样式，最后的结果是多次样式叠加的结果，如果有冲突，以后面的样式为准。

1.2 基本语法

选择器{

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

……

}

选择器说明该样式施加于哪些元素；属性名和属性值说明是样式内容；

一般一行定义一条样式，当然也可以写在一行上，但每条样式都序号加上“；”

推荐用小写命名。

<!DOCTYPE html>

<html>

<head>

</head>

<style>

div {

width: 400px;

margin: 0 auto;

text-align: center;

}

p {

font-size: 24px;

}

#author {

font-size: 18px;

}

#comment {

font-size: 14px;

color: gray;

}

</style>

<body>

<div>

<p>海上生明月，天涯共此时。</p>

<p>情人怨遥夜，竟夕起相思。</p>

<p>灭烛怜光满，披衣觉露滋。</p>

<p>不堪盈手赠，还寝梦佳期。</p>

<p id="comment">注：这首诗乃望月怀思的名篇，写景抒情并举，情景交融；意境幽静秀丽，情感真挚；结构深入不紊，语言明快铿锵；其中“海上生明月，天涯共此时”为千古佳句。</p>

</div>

</body>

</html>

1.3 使用方式

内联形式

使用style属性，只对当前标签有效。页面内容和表现形式是高度耦合的，不利于维护和分工合作的。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p style="font-size: 24px;">海上生明月，天涯共此时。</p>

<p style="font-size: 24px;">情人怨遥夜，竟夕起相思。</p>

<p style="font-size: 24px;">灭烛怜光满，披衣觉露滋。</p>

<p style="font-size: 24px;">不堪盈手赠，还寝梦佳期。</p>

<p style="font-size: 14px; color: gray;">注：这首诗乃望月怀思的名篇，写景抒情并举，情景交融；意境幽静秀丽，情感真挚；结构深入不紊，语言明快铿锵；其中“海上生明月，天涯共此时”为千古佳句。</p>

</div>

</body>

</html>

内部样式

在head中使用<style>标签，样式对当前页面有效。内容和表现形式实现了一定程度的分离（但不彻底）

外部样式

准备css文件

在html文件中引用css文件，在head标签中增加引用说明

内容和表现形式完全分离，而且任何需要用到该样式表中样式的页面都可以通过链接该文件来实现。

my.css

div {

width: 400px;

margin: 0 auto;

text-align: center;

}

p {

font-size: 24px;

}

#author {

font-size: 18px;

}

#comment {

font-size: 14px;

color: gray;

}

引用外部css文件

rel 属性用于指定当前文档与被链接文档的关系

1.4 颜色

自然界的颜色数量是无穷的，但是计算机只能表示有限的信息。

需要将连续的量（无穷）转化为离散的量（有限）的

颜色可以由三种基本颜色调和而成，即红色Red、绿色Green和蓝色Blue

每种颜色用8位表示，可以表示256（28）种颜色。那么每个颜色值有24位来表示，可以表示256*256*256种颜色（真彩色）

进制……

CSS中颜色的表示方法：

（1）十六进制形式：#ff0000（掌握）

（2）RGB：rgb(128,0,0) 等价于#800000（掌握）

（3）RGBA：在RGB颜色的基础上增加了表示透明度的分量Alpha

（4）HSL：用色调、饱和度和明度三个分量表示颜色

（5）HSLA：在HSL颜色的基础上增加了表示透明度的分量Alpha

（6）预定义颜色：Red、Yellow等（掌握）

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

<p style="color: green;">预定义颜色(color:green)</p>

<p style="color: RGB(255,0,0);">RGB颜色(color:RGB(255,0,0))</p> 红

<p style="color: #ff00ff;">十六进制颜色(color: #ff00ff)</p> 粉

</div>

</body>

</html>

2 基础属性

2.1 字体相关属性

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>字体属性演示</h1>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

<span style="font-variant: normal;">正常hello</span>

<span style="font-variant: small-caps;">小型大写hello</span>

</p>

<p>

</p>

</body>

</html>

字体属性

属性	含义	取值
font-family	字体体系	字体名称，如宋体
font-size	字体大小
font-style	是否倾斜	normal/italic/oblique/inherit（继承）
font-variant	是否大写	normal/small-caps/inherit
font-weight	字体粗细	normal（400）/bold（700）/bolder/lighter 100/200/300……900