CSS知识点总结
文章目录
1、何为css
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现；网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
结构：HTML
表现：CSS
行为：JavaScript
2、css基础入门
2.1 主要构成
一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明：
/* 这是CSS的注释 */
/* 建议每条申明占一行 */
p{
color:red;
text-align:center; /* 文本居中 */
}
在HTML中可表现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>Hello CSS~</div>
</body>
</html>
2.2 CSS导入方式
css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式：
内联样式：在标签内部使用style属性，属性值是css属性键值对
<div style="color: red">Hello CSS~</div>
内部样式：定义
<style type="text/css">
div{
color: red;
}
</style>
外部样式：定义link标签，引入外部的css文件
编写一个css文件。名为：demo.css，内容如下：
div{
color: red;
}
在html中引入 css 文件。
<link rel="stylesheet" href="demo.css">
这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用 link 标签 引入该css文件。
级联的优先级
前面我们学习了三种使用样式的方式，如果某元素如
<p>在外部、内部及内联样式中都被设置color:red;、color:green;、color:blue;，那么到底是什么颜色，也即到底哪个有效呢？
这就涉及样式的优先级问题，从高到低分别是：
- 内联样式
- 内部样式表或外部样式表
- 浏览器缺省样式
提示： 其实，一句话可总结为哪个样式定义离元素的距离近，哪个就生效。
2.3 CSS选择器
css 选择器就是选取需设置样式的元素（标签），比如如下css代码：
div {
color:red;
}
css选择器主要有三种：
-
元素选择器
元素名称{color: red;}例子：
div {color:red} /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/ -
id选择器
#id属性值{color: red;}例子：
html代码如下：
<div id="name">hello css2</div>css代码如下：
#name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/ -
类选择器
.class属性值{color: red;}例子：
html代码如下：
<div class="cls">hello css3</div>css代码如下：
.cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: red;
}
#name{
color: blue;
}
.cls{
color: pink;
}
</style>
</head>
<body>
<div>div1</div>
<div id="name">div2</div>
<div class="cls">div3</div>
<span class="cls">span</span>
</body>
</html>
2.4 CSS属性
CSS有很多属性，常用的有背景颜色、尺寸、对齐、外边距、内边距、边框与边距、定位、溢出、浮动、不透明度、组合选择器、伪类和伪元素。
2.4.1背景颜色
HTML文件中
- 直接填写颜色名称
<h3 style="background-color:LightGray;">LightGray</h3>
- 颜色值，3个字节分别代表RGB（Red，Green，Blue）的0～255的值
<h3 style="background-color:#6a5acd;">#6a5acd</h3>
- 此外，文本也可以设置颜色
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<p style="color:MediumSeaGreen;">Ad facilis est ducimus rem consectetur, corporis omnis, eveniet esse dolor molestiae numquam odio corrupti, sed obcaecati praesentium accusamus? Tempora, dolor a?</p>
值得注意的是，实际中通过内联方式设置颜色的用法并不常见。
更多情况采用内部样式或外部样式
h3{ background-color: Tomato; } p { background-color: rgb(73, 138, 60); }
2.4.2尺寸
我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
<div class="example-1">
这个元素高 200 pixels，占据全部宽度
</div>
<div class="example-2">
这个元素宽200像素,高300像素
</div>
对应的css代码
.example-1 {
width: 100%;
height: 200px;
background-color: powderblue;
}
.example-2 {
height: 100px;
width: 500px;
background-color: rgb(73, 138, 60);
}
2.4.3对齐
-
文本居中对其
对于元素中的文本，我们可以简单的设置
text-align属性为left, center, right即可（显然缺省的是左对齐）<div class="center"> <p>文本居中对齐。</p> </div>对应的CSS代码
.center { text-align: center; border: 3px solid green; } -
元素居中对其
要水平居中对齐一个元素(如
), 可以使用 margin: auto设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配：<div class="center"> <p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p> </div>对应的CSS代码：
.center { margin: auto; width: 60%; border: 3px solid #73AD21; padding: 10px; }效果展示：
-
图片居中对其
要让图片居中对齐, 可以使用 **margin: auto;**并将它放到 块 元素中:
<img src="//static.runoob.com/images/mix/paris.jpg" alt="Paris" style="width:40%">对应的css文件：
img { display: block; margin: 0 auto; }
2.4.4 外边距
CSS margin(外边距)属性定义元素周围的空间。
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
定义margin中可能会用到的值：
| 值 | 说明 |
|---|---|
| auto | 设置浏览器边距。这样做的结果会依赖于浏览器 |
| length | 定义一个固定的margin（使用像素，pt，em等） |
| % | 定义一个使用百分比的边距 |
-
Margin - 单边外边距属性
<body> <p>这是一个没有指定边距大小的段落。</p> <p class="margin">这是一个指定边距大小的段落。</p> </body>对应的css代码
p { background-color:yellow; } p.margin { margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; }效果展示：
-
Margin - 简写属性
margin:25px 50px 75px 100px; /* 上边距为25px 右边距为50px 下边距为75px 左边距为100px */margin:25px 50px 75px; /* 上边距为25px 左右边距为50px 下边距为75px */margin:25px 50px; /* 上下边距为25px 左右边距为50px */margin:25px; /* 所有的4个边距都是25px */ -
所有css边距属性
属性 描述 margin 简写属性。在一个声明中设置所有外边距属性。 margin-bottom 设置元素的下外边距。 margin-left 设置元素的左外边距。 margin-right 设置元素的右外边距。 margin-top 设置元素的上外边距。
2.4.5 内边距（填充）
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
定义padding中可能用到的值
| 值 | 说明 |
|---|---|
| length | 定义一个固定的填充(像素, pt, em,等) |
| % | 使用百分比值定义一个填充 |
- 填充- 单边内边距属性
<body>
<p>这是一个没有指定填充边距的段落。</p>
<p class="padding">这是一个指定填充边距的段落。</p>
</body>
对应的css
p
{
background-color:yellow;
}
p.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
对应效果展示：
-
padding-简写属性
与margin相似，这里略。
-
所有padding填充属性
| 属性 | 说明 |
|---|---|
| padding | 使用简写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
2.4.6 边框与边距
无论边框、内边距还是外边距，它们都有上下左右四个方向。
-
常用普通边框
<body> <p class="none">无边框。</p> <p class="dotted">虚线边框。</p> <p class="dashed">虚线边框。</p> <p class="solid">实线边框。</p> <p class="double">双边框。</p> <p class="groove"> 凹槽边框。</p> <p class="ridge">垄状边框。</p> <p class="inset">嵌入边框。</p> <p class="outset">外凸边框。</p> <p class="hidden">隐藏边框。</p> <p class="mix">混合边框</p> </body>对应的css代码，主要通过border-style属性控制。
<style> p.none {border-style:none;} p.dotted {border-style:dotted;} p.dashed {border-style:dashed;} p.solid {border-style:solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border-style:outset;} p.hidden {border-style:hidden;} p.mix {border-style: dotted dashed solid double;} </style>具体展示效果略。
-
边框宽度
您可以通过 border-width 属性为边框指定宽度。
<p class="one">一些文本。</p> <p class="two">一些文本。</p> <p class="three">一些文本。</p>css代码如下
p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } p.three { border-style:solid; border-width:1px; }展示效果大致如下：
-
边框其他属性：
<p class="example-1">I have black borders on all sides.</p> <p class="example-2">I have a blue bottom border.</p> <p class="example-3">I have rounded grey borders.</p> <p class="example-4">I have a purple left border.</p>对应css代码如下：
.example-1 { border: 1px dotted black; /* 上下左右都相同 */ } .example-2 { border-bottom: 1px solid blue; /* 只设置底部边框 */ } .example-3 { border: 1px solid grey; border-radius: 15px; /* 边框圆角 */ } .example-4 { border-left: 5px solid purple; }展示效果大致如下：
2.4.7 定位
position 属性指定了元素的定位类型。
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。即设置了元素的
position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。
position 属性的五个值：
-
static
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。
-
relative
设置为相对定位
position: relative;，这将把元素相对于他的静态（正常）位置进行偏移。<body> <h2>这是位于正常位置的标题</h2> <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2> <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2> <p>相对定位会按照元素的原始位置对该元素进行移动。</p> <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p> <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p> </body>对应的css代码
<style> h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } </style>展示大致效果：
-
fixed
元素的位置相对于浏览器窗口是固定位置。
此时元素固定的位置仍由
top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）即使窗口是滚动的它也不会移动。
<!-- HTML --> <div class="broad">占位区域。请将浏览器窗口改变大小，看看右下角的按钮发生了什么？</div> <div class="example-fixed">这个按钮是固定的</div>对应的css代码：
<!-- CSS --> .example-fixed { position: fixed; bottom: 40px; right: 10px; padding: 6px 24px; border-radius: 4px; color: #fff; background-color: #9d0f0f; cursor: pointer; box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); } .broad { height: 5000px; width: 5000px; padding: 20px; background-color: darkkhaki; }大致展示效果如下：
-
absolute
设置为绝对定位
position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。绝对定位此处可能有些混淆，请留意其是仍是相对的，不过是相对最近的父元素
<body> <h2>这是一个绝对定位了的标题</h2> <p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p> </body>对应css代码如下：
<style> h2 { position:absolute; left:100px; top:150px; } </style>大致展示效果如下：
-
sticky
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
<p>尝试滚动页面。</p> <p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p> <div class="sticky">我是粘性定位!</div> <div style="padding-bottom:2000px"> <p>滚动我</p> <p>来回滚动我</p> <p>滚动我</p> <p>来回滚动我</p> <p>滚动我</p> <p>来回滚动我</p> </div>对应css代码如下：
<style> div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50; } </style>
2.4.8 溢出
当元素内容超过其指定的区域时，我们通过溢出
overflow属性来处理这些溢出的部分。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
<div id="overflowTest">
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
</div>
对应的css文件如下：
<style>
#overflowTest {
background: #4CAF50;
color: white;
padding: 15px;
width: 80%;
height: 100px;
overflow: scroll;
border: 1px solid #ccc;
}
</style>
大致展示效果如下：
默认情况下，overflow 的值为 visible， 意思是内容溢出元素框：
overflow: visible
2.4.9 浮动
在一个区域或容器内，我们可以设置
float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
我们常用这种样式来使图像和文本进行合理布局，如我们希望有以下的效果：
<style> .example-float-right { float: right; } </style> </head> <body> <img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt=""> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam modi nam vero!</p> </body>一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。这是简单易懂的。
在页面缩放时，运用浮动能保持页面的可读性。
<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
对应的css代码
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
展示效果大致如下：
这是窗口大小为100%时的显示情况：
这是窗口大小为60%时的显示情况：
2.4.10 不透明度
我们可以用
opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高，如下图所示：
<html>
<head>
<style>
img {
width: 25%;
border-radius: 10px;
float: left;
margin: 10px;
}
.opacity-2 {
opacity: 0.2;
}
.opacity-5 {
opacity: 0.5;
}
.opacity-10 {
opacity: 1;
}
</style>
</head>
<body>
<img class="opacity-2" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
<img class="opacity-5" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
<img class="opacity-10" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
</body>
</html>
展示效果大致如下：
除此之外，根据不透明度实现的悬停效果也常用于网页设计：
其css代码：
img
{
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* IE8 及其更早版本 */
}
展示大致效果：
2.4.11 组合选择器
前面我们学习了 CSS有三种选择器：元素、id 和 class 。但我们也可以进行组合，以得到简洁精确的选择。
下面我们介绍两种组合选择器。
-
后代选择器
以空格作为分隔，如：
.haha p代表在div元素内有.haha这种类的所有元素。<html> <head> <style> .haha p { background-color: yellow; } </style> </head> <body> <div class="haha"> <p>Paragraph 1 in the div .haha.</p> <p>Paragraph 2 in the div .haha>.</p> <span> <p>Paragraph 3 in the div .haha.</p> </span> </div> <p>Paragraph 4. Not in a div .haha.</p> <p>Paragraph 5. Not in a div .haha.</p> </body> </html>展示效果大致如下：
-
子选择器
也称为直接后代选择器，以
>作为分隔，如：.haha > p代表在有.haha类的元素内的直接<p>元素。<html> <head> <style> .haha > p { background-color: yellow; } </style> </head> <body> <div class="haha"> <p>Paragraph 1 in the div .haha.</p> <p>Paragraph 2 in the div .haha.</p> <span> <p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p> </span> <!-- not Child but Descendant --> </div> <p>Paragraph 4. Not in a div .haha.</p> <p>Paragraph 5. Not in a div .haha.</p> </body> </html>展示效果大致如下：
-
总结及扩展：
-
选择所有元素： 语法： {}
-
并集选择器： 选择器1,选择器2{}
-
子选择器：筛选选择器1元素下的选择器2元素 语法： 选择器1 选择器2{}
-
父选择器：筛选选择器2的父元素选择器1 语法： 选择器1 > 选择器2{}
-
属性选择器：选择元素名称，属性名=属性值的元素 语法： 元素名称[属性名=“属性值”]{}
-
伪类选择器：选择一些元素具有的状态
语法： 元素: 状态{}
如：状态：link：初始化的状态 visited：被访问过的状态 active：正在访问状态 hover：鼠标悬浮状态
-
2.4.12 伪类
伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
比如我们可能有这样的需求：
- 鼠标移到某元素上变换背景颜色
- 超链接访问前后访问后样式不同
- 离开必须填写的输入框时出现红色的外框进行警示
- 保证段落的第一行加粗，其它正常
- …
CSS伪类是用来添加一些选择器的特殊效果。
什么是选择器：
之前所提及过的例如通配符选择器，标签选择器，类选择器…
语法形式：(与后续伪元素类似)
/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
property:value;
}
常见使用：
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;} /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;} /* 段落的第一个字超大 */
h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
伪类的名称不区分大小写。
- 伪类可以与 CSS 类配合使用：
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>
如果在上面的例子的链接已被访问，它会显示为红色。
更多示例：
-
您可以使用 :first-child 伪类来选择父元素的第一个子元素。
/* 匹配第一个 <p> 元素 */ p:first-child { color:blue; } -
匹配所有
元素中的第一个 元素
p > i:first-child { color:blue; } -
(https://www.runoob.com/css/css-pseudo-classes.html)
2.4.13 伪元素
CSS 伪元素是用来添加一些选择器的特殊效果。
伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
-
first-line 伪元素用于向文本的首行设置特殊样式。
<body> <p>你可以使用 "first-line" 伪元素向文本的首行设置特殊样式。</p> </body>对应css代码
p:first-line { color:#ff0000; font-variant:small-caps; }大致展示效果：
-
first-letter 伪元素用于向文本的首字母设置特殊样式：
<body> <p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式：</p> </body>对应css代码：
p:first-letter { color:#ff0000; font-size:xx-large; }大致展示效果：
-
伪元素可以结合CSS类：
p.article:first-letter {color:#ff0000;}<p class="article">文章段落</p>这样，会使所有 class 为 article 的段落的首字母变为红色。
-
多个伪元素
p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; }这样，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。
段落中的其余文本将以默认字体大小和颜色来显示。
这是简单易理解的。
-
(https://www.runoob.com/css/css-pseudo-elements.html)
3、CSS学习心得
CSS主要是⽤来对页⾯的样式进⾏设计。我们可以通过运⽤CSS技术来设计出我们想要的页⾯效果，并且CSS是与HTML内容是分开的，这极⼤地⽅便了我们阅读、修改程序，也使得CSS具有⼀定的重复使⽤的特性，只需要在html⽂件中引⼊CSS⽂件即可，这对设计者来说⼗分⽅便的。除此以外，CSS⽐较容易学习但是如果想要使⽤的⾮常⾃然、熟悉的话是⽐较困难的，需要不断的运⽤、尝试才能设计出最具有⾃我特⾊的html页⾯。因此，学习CSS不仅要学它的使⽤，更要学习如何合理的运⽤到你想要表达的页⾯当中去，打造⼀个属于你⾃我特⾊的页⾯，这种实践内容才是我们学习的⽬的，才能促进我们不断进步。
750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
