CSS快速入门

已于 2022-09-23 17:48:47 修改
阅读量545 收藏 4
点赞数 1
分类专栏： HTML5与CSS3 前端开发 文章标签： css html css3
于 2021-01-22 08:27:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cnds123/article/details/112976663
版权

CSS快速入门

CSS（Cascading Style Sheets 层叠样式表）。CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。层叠指多个样式可以作用在同一个html的元素上，同时生效。

CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前，几乎所有的HTML文件内都包含文件显示的信息，比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等等都必须一一在HTML文件内列出，有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来，简化HTML文件，这些信息被放在一个辅助的，用CSS语言写的文件中。HTML文件中只包含结构和内容的信息，CSS文件中只包含样式的信息。

【HTML负责确定网页中有哪些内容，CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。CSS可以零散地直接添加在要应用样式的网页元素上，也可以集中化内置于网页、链接式引入网页以及导入式引入网页。

CSS简单地说，是用来控制网页外观的一门技术。提醒初学者css入门容易，想学深还是挺难的， CSS涉及的内容太多了，​​​​​​​从https://www.w3schools.cn/css/​​​​​​​可以直观的感受到。CSS 样式定义多，属性很多，不同属性的组合会有不同的效果，不直观，无法像编程那样推测结果，需要大量试验试出来，靠经验积累。】

CSS基本规则语法

style-rule ::=

    selectors-list {

      properties-list

}

其中：

selectors-list ::=

    selector[:pseudo-class] [::pseudo-element]

    [, selectors-list]

properties-list ::=

    [property : value] [; properties-list]

通俗地说

CSS由多组“规则”组成。每个规则由“选择器”（selector）、“属性”（property）和“值”（value）组成：

选择器（Selector）：多个选择器可以半角逗号（,）隔开，用于指出网页中要应用样式规则的元素。

属性（property）：CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。

值（value）：指属性接受的设置值，多个关键字时大都以空格隔开。

英文花括号“｛｝”中的内容就是声明，它由一个属性和一个值组成，属性和值之间用半角冒号（:）隔开，属性和值合称为“特性”。多个特性间用“;”隔开，最后用“{ }”括起来。

设置网页中所有<p>和</p>标签范围内的文字的字体大小为20px，字体颜色为红色，并加粗的CSS代码：

p{ 

        font-size:20px;

        color:red;

        font-weight:bold;

}

如何观看其效果？可将其嵌入下面的代码中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test1</title>
<style>
body{
        background-color:#d0e4fe;
}
h1{
        color:orange;
        text-align:center;
}
/* [CSS注释] 设置段落字体大小为20px，字体颜色为红色，并加粗 */
p{  
        font-size:20px;
        color:red;
        font-weight:bold;
}
</style>
</head>

<body>

<h1>CSS 使用示例</h1>
<p>这是一个段落，字体大小为20px，字体颜色为红色，并加粗，看到效果了吗。</p>

</body>
</html>

说明，在这个例子中有三个选择器：body、h1和p。

保存文件名：HTML之CSS_Test1.html，保存路径D:\HTML5_CSS示例，用浏览器打开运行显示效果如下图：

CSS注释

CSS注释语法为：

/* 注释内容 */

说明：以“斜杠+星号”开始，“星号+斜杠”结束，需要注意是注释字符均为英文半角小写。CSS中的注释通常用于解释样式规则声明的用途。它将帮助您和其他人理解您在编辑样式表时如何处理样式规则。浏览器不显示注释。

在HTML中CSS引入方式

有4种：行内样式、内嵌样式、链接样式和导入样式。

1）行内样式

行内样式是最简单、最直接的一种CSS引入方式，它通过设置HTML标签的style属性来实现样式的应用，具体的写法如下：

<p style = "color:#F00;font-size:20px;">段落中的文字</p>

从上面的示例代码中可以看出，添加行内样式的做法是在HTML标签中添加style=""，引号中放入想设置的样式代码。但这样的做法有很多缺点，如违背网页设计结构与表现分离的原则、网页文件太大、不利于搜索引擎抓取网页内容、网页后期维护不方便等。因此，在设计网页时不推荐使用行内样式。

完整代码如下：
 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_TestA</title>
</head>
<body>
<h1>CSS 使用示例：行内样式</h1>
<p style = "color:#F00;font-size:20px;">段落中的文字</p>
</body>
</html>

保存文件名：HTML之CSS_TestA.html，保存路径D:\HTML5_CSS示例（提示新手，保存文件名、路径，可根据你的情况而定），用浏览器打开运行显示效果如下图：

2）内嵌样式

内嵌样式的做法是将CSS代码写在网页代码中，并且用<style>和</style>进行声明，具体写法如下：

<style type = "text/css">

p{

              color:#F00;

              font-size:20px;

}

a{text-decoration:line-through;}

</style>

使用内嵌样式的缺点也很明显，CSS代码写在网页中会使网页文件变大，后期维护也不方便。

具体示例可参见最前面的例子。

3）链接样式

链接样式将CSS代码写在单独的文件中，然后在<head>与</head>之间通过<link>标签引入该文件，从而实现样式的应用。具体写法如下：

<head> <link href = "css/test02.css" rel = "stylesheet" type = "text/css">

</head>

CSS样式的引入是通过<link>标签实现的。该标签的属性href用于指明欲引入的CSS文件的路径；属性type规定被链接文档的MIME类型，这里指明是CSS代码；属性rel规定当前文档与被链接文档之间的关系，目前只有“stylesheet”值得到了所有浏览器的支持，指明被链接的文档是一个样式表。

链接样式实现了负责页面框架的HTML代码与负责页面表现的CSS代码的分离，使网页的前期制作和后期维护变得十分方便，所以建议读者多采用链接样式。

要点：a. 定义css资源文件。 b. 在head标签内，定义link标签，引入外部的资源文件。

完整代码如下：

(1）CSS文件代码如下：

/* 将段落显示为黄底红字粗体 */

p{

     color:red; background:yellow; font-weight:bold;

}

提示，此例中CSS文件，内容简单，但足够示意了，现实中可以比较复杂。

保存文件名：ABC.css，保存路径D:\HTML5_CSS示例。

（2）网页文件代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_TestB</title>
<head> <link href = "ABC.css" rel = "stylesheet" type = "text/css">
</head>
<body>
<h1>CSS 使用示例：链接样式</h1>
<p> 这个段落将被显示为黄底红字粗体。</p>
</body>
</html>

保存文件名：HTML之CSS_TestB.html，保存路径D:\HTML5_CSS示例，注意HTML之CSS_TestB.html和ABC.css路径关系，用浏览器打开运行显示效果如下图：

4）导入样式

导入样式采用@import将CSS样式文件导入网页文件中，在HTML初始化时，被导入的样式文件中的CSS代码会成为文件的一部分，类似第二种内嵌样式。导入样式的具体写法如下：

<head>

<style type = "text/css">

              @import url("css/test03.css");

</style>

</head>

样式的导入是通过关键字@import实现的，url()指明样式文件的相对地址。

由于导入样式的原理是将CSS样式文件的内容导入网页中，导入样式与内嵌样式一样会使网页文件变大，后期维护也不方便，因此不建议使用导入样式。

完整代码如下：

(1)CSS文件ABC.css，内容将上例

(2) ）网页文件代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_TestC</title>
<style type = "text/css"> 
        @import url("ABC.css"); 
</style>
</head>
<body>
<h1>CSS 使用示例：导入样式</h1>
<p> 这个段落将被显示为黄底红字粗体。</p>
</body>
</html>

保存文件名：HTML之CSS_TestC.html，保存路径D:\HTML5_CSS示例，用浏览器打开运行显示效果如下图：

选择器

要使用CSS对HTML页面中的元素实现一对一、一对多或者多对一的控制，就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。通过CSS选择器可以精确地筛选出想要控制的HTML元素。

每一条CSS样式定义由两部分组成，形式如下：

选择器{

    样式;

}

选择器指明了{}中的“样式”的作用对象，也就是作用于网页中的哪些元素。

常用的CSS选择器有标签选择器、类选择器、ID选择器、后代选择器和子选择器、分组选择器、伪类选择器、通用选择器等。

要针对没有标签定义范围进行样式设置时，可利用HTML的<div>与<span>标签。<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器，当与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<span> 元素是内联元素，可用作文本的容器，当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

常用的CSS选择器的使用

标签选择器

标签选择器其实就是HTML代码中的标签。一个完整的HTML页面由很多不同的标签组成，而标签选择器则决定哪些标签采用相应的CSS样式。如前面的例子中<p>标签。下例给网页中所有图片加红色边框：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test2</title>
<style>
img{
       border-width:3px; 
       border-style:solid; 
       border-color:#F00;
}
</style>
</head>
<body>
<h2>网页中所有图片加红色边框</h2>
<table>
    <tr>
        <td>
            <a><img src="imgs/tu1.jpg" width="210" height="160" ></a>
        </td>
        <td>
            <a><img src="imgs/tu2.jpg" width="210" height="160" ></a>
        </td>
    </tr>
</table>
</body>
</html>

保存文件名：HTML之CSS_Test2.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），且此路径中建立imgs文件夹，其中有两张图片tu1.jpg和tu2.jpg

用浏览器打开运行显示效果如下图：

☆类选择器（class selector）

类选择器以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。

类选择器的命名以“.”开头，可以包含字符[a-zA-Z0-9]、连字号（-）和下画线（_），不能以数字或一个连字号后跟数字开头。如：.important {color:red;}

类选择器可以结合元素选择器来使用——选择器后跟类选择器。如：p.important {color:red;}

下面给出示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test3</title>
<style> 
.user
{    font-size: 30px;
    background-color:red;
}
.login
{    font-size: 20px;
    background-color:blue;
}
</style>
</head>
<body>
    <div class='user'>你好。这是一个 DIV 元素。</div>
    <p class="login">这是一个p元素。</p>
    <p>这是一个p元素。</p>
</body>
</body>
</html>

保存文件名：HTML之CSS_Test3.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

用浏览器打开运行显示效果如下图：

☆ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 开头来定义。如：#red {color:red;}

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test4</title>
<style> 
 #red {color:red;}
 #green {color:green;}
</style>
</head>
<body>
   <p id="red">这个段落是红色。</p>
    <p id="green">这个段落是绿色。</p>
</body>
</body>
</html>

保存文件名：HTML之CSS_Test4.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：：

☆组合选择器

CSS里现在共有4种组合选择符（Combinators）：

符号

说明

A > B

子代选择器，选择A下一层的元素B

A ~ B

兄弟选择器，选择与A同层的元素B

A + B

相邻兄弟选择器，选择与A相邻的元素B（不能被任何元素相隔）

A B

后代选择器，包含选择符

后代选择器和子选择器
当HTML元素发生嵌套时，内层的元素就成为外层元素的后代。如元素B嵌套在元素A内部，B就是A的后代。定义后代选择器时，外层的元素写在前面，内层的元素写在后面，中间用空格分隔。后代选择器会影响到它的各级后代，没有层级限制。代码示例如下：
div p{color: red;}
后代选择器用空格作为连接符号。

子选择器是一种特殊的后代选择器，用来选择特定元素的直接子元素，只会影响它的第一层子元素，其他孙辈元素或更深层次的元素不会受影响。定义子选择器时，外层的元素写在前面，子元素写在后面，中间用大于号相连。代码示例如下：
div>p{color:red;}
子元素选择器用>作为连接符号。
上述CSS代码只会使div下的第一层p元素中的文本变为红色，也就是只会选中特定的儿子标签。
子元素选择器不仅可以使用标签的名称，而且可以使用其他的选择器，如：
div>#red
div>.left。

下面通过示例来讲解子选择器与后代选择器的区别


先来看一下后代选择器div p的效果，源码如下：
 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test5</title>
<style> 
div p{
    background-color:yellow;
}
</style>
</head>
<body>
<div>
    <p>子元素选择器</p>
    <span><p>后代选择器</p></span>
</div>
</body>
</body>
</html>

保存文件名：HTML之CSS_Test5.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

再来看一下子选择器div p的效果，源码如下：
 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test6</title>
<style> 
div>p{
    background-color:yellow;
}
</style>
</head>
<body>
<div>
    <p>子元素选择器</p>
    <span><p>后代选择器</p></span>
</div>
</body>
</body>
</html>

保存文件名：HTML之CSS_Test6.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

☆分组选择器
当多个对象定义了相同的样式时，就可以把它们分成一组，这样能够简化代码。分组选择器使用逗号把同组内的不同对象分隔，示例代码如下：
h1,h2,h3,p{
    line-height:22px;
}
上述分组选择器的目的是，定义所有级别的标题和段落的行高为22px。其中，line-height用于定义一行文字的高度。

完整的示例源码如下：
 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test7</title>
<style> 
h1,h2,h3,p{
        line-height:22px;
}
</style>
</head>
<body>
<h1>这是h1级别标题</h1>
<h2>这是h2级别标题</h2>
<h3>这是h3级别标题</h3>
<p>这是个段落</p>
</body>
</body>
</html>

保存文件名：HTML之CSS_Test7.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

☆通用选择器

通用选择器的作用就像通配符，它能匹配所有可用元素，一般用来对页面上的所有元素应用样式。所有浏览器都支持通用选择器。通用选择器由一个星号（*）表示，示例代码如下：

*{

margin: 0;

padding: 0;

}

上述代码表示的是，将所有元素的margin（边距）和padding（填充）都设置为0。这个操作常常用来去除一些HTML标签的自带格式。

通用选择器是用来选择所有元素的，当然也可以选择某个元素下的所有元素，示例代码如下：

.demo *{border:1px solid blue;}

完整的示例源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test8</title>
<style> 
* {
        margin: 100;
        padding: 0;
        color:red;
    }
</style>
</head>
<body>
        <h2>这是h2级别标题</h2>
        <h3>这是h3级别标题</h3>
        <p>这是段落1</p>
        <p>这是段落2</p>
</body>
</body>
</html>

保存文件名：HTML之CSS_Test8.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

注意：不建议*在生产环境中使用通用选择器，因为此选择器会匹配页面上的每个元素，这会对浏览器造成不必要的压力——会极大的消耗资源，应该把具体的标签名都列出来，像这样body,div,ul,li,a,{padding:0; margin:0;}。

☆伪类选择器（Pseudo-classes）

伪类选择器可以让同一个HTML标签在不同状态下会显示出不同的样式，伪类用冒号来表示，代码示例如下：

a:hover{color:#F00; text-decoration:none;}

上述代码实现了当鼠标悬停在链接文字上时，链接文字显示为红色、无下画线。

伪类选择器大多时候用在超链接文字的效果设定上，超链接有4种状态，对应<a>标签的4种伪类，如下表所示：

伪类选择器

作用

应用对象

:hover

定义标记在鼠标悬停(划过)时的样式

所有显示标记

:link

定义标记在超链接状态下的样式

a标签

:visited

定义标记被访问过后的样式

a标签

:active

定义标记在选定时刻下的样式

a标签

注意：①在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

②在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

③伪类的名称不区分大小写。

下面给出例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> CSS_Test9</title> 
<style>
        a:link {color:#000000;}      /* 未访问链接*/
        a:visited {color:#00FF00;}  /* 已访问链接 */
        a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
        a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
</head>
<body>
    <p><b><a href=" https://www.baidu.com/" target="_blank">这是一个链接</a></b></p>
    <p><b>提示：</b>鼠标指向上面链接时将变色。</p>
</body>
</html>

保存文件名：HTML之CSS_Test9.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

除了<a>标签的4种伪类，还有UI元素的“:enabled”“:disabled”“:checked”状态伪类，这些主要针对HTML中的Form元素操作。除此之外，还有CSS3中的:nth选择器，可以更精确地选择某个元素并指定样式。:nth选择器的常见伪类如下表所示：

伪类

状态

:first-child

选择某个元素的第一个子元素

:last-child

选择某个元素的最后一个子元素

:nth-child()

选择某个元素的一个或多个特定的子元素

:nth-last-child()

选择某个元素的一个或多个特定的子元素，

从这个元素的最后一个子元素开始算

下面给出例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> CSS_Test10</title> 
<style>
p:first-child
{
        color:blue;
} 
</style>
</head>
<body>
    <p>这是段落1。</p>
    <p>这是段落2。</p>
</body>
</html>

保存文件名：HTML之CSS_Test10.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

下面给出一个较为综合的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> CSS_Test11</title> 
<style>
        a:link {color:#000000;}      /* 未访问链接*/
        a:visited {color:#00FF00;}  /* 已访问链接 */
        a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
        a:active {color:#0000FF;}  /* 鼠标点击时 */
        ul{ list-style-type:none; }
        ul li{ background-color:#EEE; padding:5px; width:150px;}
        ul li:hover{ background-color:#CCC;}
</style>
</head>
<body>
<p><b><a href=" https://www.baidu.com/" target="_blank">这是一个链接</a></b></p>
<ul>
        <li>列表文字1</li>
        <li>列表文字2</li>
        <li>列表文字3</li>
        <li>列表文字4</li>
        <li>列表文字5</li>
</ul>
</body>
</html>

保存文件名：HTML之CSS_Test11.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

☆属性选择器

对带有指定属性的 HTML 元素设置样式。属性选择器可以根据元素的属性及属性值来选择元素。

把包含标题（title）属性的元素变为红色代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> CSS_Test12</title> 
<style>
    [title]
    {
        color:red;
    }
</style>
</head>
<body>
    <p title>这是段落A</p>
    <p>这是段落B</p>
</body>
</html>

保存文件名：HTML之CSS_Test12.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

属性选择器允许用户自定义属性名称，属性选择器共有7种。

代码

说明

[attribute]

元素有attribute的属性。

[attribute="value"]

属性attribute里是value

[attribute~="value"]

属性attribute里使用空白分开的字符串里其中一个是value

[attribute|="value"]

属性attribute里是value或者以value-开头的字符串

[attribute^="value"]

属性attribute里最前的是value

[attribute$="value"]

属性attribute里最后的是value

[attribute*="value"]

属性attribute里有value出现过至少一次

盒子模型（Box Modle）可以用来对元素进行布局，包括内边距(padding)、边框(border)、外边距(margin)，和实际内容(content)这几个部分。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。掌握盒子模型，将使CSS网页排版变得简单。

W3C盒子模型(标准盒模型)

说明：

1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。

width和height用于设定盒子模型中内容（content）的宽度和高度，常用单位是像素（px）和百分比（%）。

px用于指定具体的宽和高

%则用于设定该元素宽度在父容器中所占的比例。

在没有指定width和height的情况下，元素默认占据父容器的所有宽度，高度则由元素中的内容决定。

2.标准盒模型下盒子的大小 = content + border + padding + margin

margin是指其他元素与本元素的边框之间的距离，分为上边距、右边距、下边距和左边距。在设置外边距时可以设置各属性，分别设置上、右、下、左4个方向的外边距，示例代码如下：

div{margin-top:5px; margin-right:15px; margin-bottom:8px; margin-left: 10px;}

在设置外边距时也可以直接写综合属性，给margin设置多个值。若写了4个值，则意思是按顺时针方向设置外边距，即分别设置上、右、下、左外边距的值；若只写3个值，则设置顺序为上、左右、下外边距；若只写了两个值，则设置顺序为上下、左右外边距。示例代码如下：

div{margin:5px 15px 8px 10px;}         /* 上、右、下、左 */

div{margin:5px 15px 8px;}          /* 上、左右、下 */

div{margin:5px 15px;}         /* 上下、左右 */

padding是本元素内容与本元素边框之间的距离，分为上内边距、右内边距、下内边距和左内边距。与margin一样，在设置内边距时可以设置各属性，也可以直接写综合属性，示例代码如下：

div{padding-top:5px; padding-right:15px; padding-bottom:8px; padding- left:10px;}

div{padding:5px 15px 8px 10px;} /* 上、右、下、左 */

div{padding:5px 15px 8px;}        /* 上、左右、下 */

div{padding:5px 15px;}       /* 上下、左右 */

border是围绕元素内容和内边距的一条或多条线。CSS允许规定元素边框的样式、宽度和颜色。

CSS控制的边框属性包括：

（1）border-width：设置边框宽度，常用值为1px、2px等。

（2）border-style：设置边框样式，常用值有solid（实线）、dashed（虚线）、dotted（点线）、double（双线）、groove（3D凹槽边框）、ridge（3D垄状边框）、inset（3D inset边框）、outset（3D outset边框）、none（无边框）等。

（3）border-color：设置边框颜色，常用值有red、green、blue等，也可以用#000000、#F00或rgb(100,100,100)设置。

在常见的用法中，习惯将边框的3个属性一起声明，下面的示例代码就是将div的4个边框设置为2px的红色实线，具体如下：

div{border:2px solid #F00;}

也可以分别设置4个边框，示例代码如下：

div{

border-left:2px solid #F00;               /* 左边框：2像素，实线，红色 */

border-top:2px dashed #0000FF;             /* 上边框：2像素，虚线，蓝色 */

border-right:4px dotted #00FF00;            /* 右边框：4像素，点线，绿色 */

border-bottom:2px double #000000;       /* 下边框：2像素，双线，红色 */

}

当然，必要的时候还是可以单独设置某个边框的属性。下面的代码是将div的所有边框设置成2px的灰色双线，将p的底边框设置成3px的红色点线，代码如下：

div{

border-width:2px;

border-style:double;

border-color:#999;}

p{

border-bottom-width:3px;

border-bottom-color:#F00;

border-bottom:dashed;}

因默认的呈现方式不同，HTML的标签元素可以分为三类：

块级元素（block）

内联元素（inline）

内联块级元素（inline-block）。

这种分类是针对元素所占的空间来划分的：

块级元素可以用CSS代码设定宽和高，块级元素默认独占一行；

宽和高的设定却对内联元素无效，与内容有关；

内联元素却可以和其他元素同处一行。

1.块级元素

在HTML标签元素中，<div>、<p>、<h1>…<h6>、<form>、<ul>、<li>、<ol>、<dl>、<table>、<address>、<blockquote>都是块级元素，它们具有如下特点：

（1）每个块级元素都独占一行，其后的元素也另起一行；

（2）元素的高度、宽度、行高及边距都可以设置；

（3）在宽度未设置的情况下，元素宽度是它父容器的100%，即和父元素的宽度一致。在设置宽度后，元素才具有指定的宽度。

块级元素支持内边距padding、外边距margin、宽度width、高度height、浮动float、溢出overflow等属性，默认情况下的样式是：{width:100%; height:auto; overflow:hidden;}

2.内联元素

在HTML标签元素中，<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<cite>、<code>、<var>是典型的内联元素。内联元素的特点如下：

（1）可以和其他元素在同一行上显示；

（2）元素的高度、宽度、行高、顶部边距和底部边距不可设置；

（3）元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联元素支持内边距padding、左外边距margin-left、右外边距margin-right等属性，可以通过代码display:block转换为块级元素，当然块级元素也可以通过代码display:inline转换为内联元素。

3.内联块级元素

内联块级元素同时具备内联元素、块级元素的特点，<img>、<input>就是典型的内联块级元素，它们具有如下特点：

（1）可以和其他元素在同一行上；

（2）元素的高度、宽度、行高、顶部边距和底部边距都可设置。

内联块级元素也支持padding、margin、width、height、float、overflow等属性。

下例子中对div标签设置了边距等信息，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> CSS_Test20</title> 
<style>
    div{
	width: 100px;
	height: 100px;
	border: 1px solid red;
	padding: 20px;
	margin: 30px;
    }
</style>
</head>
<body>
    <div>这是DIV block A</div>
    <div>这是DIV block B</div>
</body>
</html>

保存文件名：HTML之CSS_Test20.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

按F12键，显示效果如下：

padding的区域有背景颜色，可以设置背景颜色background-color将填充所有border以内的区域，参见下面代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> CSS_Test21</title> 
<style>
    ul{
	width: 100px;
	height: 100px;
	border: 1px solid red;
	padding: 20px;
	margin: 30px;
                 background-color:pink;
    }
</style>
</head>
<body>
<ul>
        <li>列表文字1</li>
        <li>列表文字2</li>
        <li>列表文字3</li>
        <li>列表文字4</li>
        <li>列表文字5</li>
</ul>
</body>
</html>

保存文件名：HTML之CSS_Test21.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

padding有四个方向

padding是4个方向的，所以我们能够分别描述4个方向的padding。

方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。

☆小属性的写法：

       padding-top: 30px;

       padding-right: 20px;

       padding-bottom: 40px;

       padding-left: 100px;

☆综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）

padding:30px 20px 40px 100px;

如果写了四个值，则顺序为：上 右 下 左。

如果只写了三个值，则顺序为：上 右 下。左和右一样。

如果只写了两个值，则顺序为：上 右。左和右一样，上和下一样。

border就是边框。边框有三个要素：像素（粗细border-width）、线型（order-style）、颜色（border-color）。换句话说，一个border属性，是由三个小属性像素（粗细）、线型、颜色综合而成的。

下面给出一个示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> CSS_Test21</title> 
<style>
    div{
            width:200px;
            height:200px;
            border-width:10px 20px;  
            border-style:solid dashed dotted;   
            border-color:red; green blue yellow;   
    }
</style>
</head>
<body>
    <div>
    </div>
</body>
</html>

保存文件名：HTML之CSS_Test22.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

CSS布局模型

CSS布局模型建立在盒子模型的基础上，包含3种基本的布局模型，即流动模型（Flow）、浮动模型（Float）、层模型（Layer）。

1、流动模型（Flow）

流动（Flow）模型是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。（每一个便签都显示着自己本来默认的那个宽高）

第二点，在流动模型下，行内元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

在流动模型下，在默认状态下，块状元素的宽度都为100%，示例代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> CSS_Test30</title> 
<style>
#box1{
    width:300px;
    height:100px;
}
div,p{
    border:1px solid red;
}
</style>
</head>
<body>
      <h3>A </h3>
      <div>由于没有设置宽度，宽度默认显示为100%</div>
      <h3> B</h3>
      <div id="box1">设置了width:300px，height:200px;</div>
      <h3>C</h3>
      <p>雪梅·其二  卢梅坡〔宋代〕有梅无雪不精神，有雪无诗俗了人。日暮诗成天又雪，与梅并作十分春。</p>
</body>
</html>

保存文件名：HTML之CSS_Test30.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示，下面示例页面代码中内联元素标签a、span、em、strong都是内联元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> CSS_Test31</title> 
<style>
</style>
</head>
<body>
    <a href="https://www.baidu.com/">百度一下</a>
    <span>强调</span> <em>重点</em>
    <strong>强调</strong>
</body>
</html>

保存文件名：HTML之CSS_Test31.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

2、浮动模型 (Float)

因为块级元素独占一行的特性，在默认情况下是无法将两个块级元素并排显示的，但可以用CSS设置元素的float属性，让元素浮动起来，这样就可以达到并排显示的目的。设置向左浮动的示例代码如下：

div{float:left;}

属性float的值有left、right、none和inherit，分别表示向左浮动、向右浮动、不浮动和从父元素继承float属性的值。

需要注意的是，设置浮动的同时一定要先设置块级元素的宽度，而且几个浮动元素的宽度之和必须小于父容器的宽度，否则就会造成部分元素被挤到下一行显示。

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。也可以为不同的div设置不同的浮动方式来布局。

如下代码可以实现两个 div 元素一行显示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> CSS_Test32</title> 
<style>
div{
    width:200px;
    height:200px;
    border:2px red solid; float:left;
}
</style>
</head>
<body>
     <div id="div1">这是第一块</div>
     <div id="div2">这是第二块</div>
</body>
</html>

保存文件名：HTML之CSS_Test32.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

你也可以同时设置两个元素右浮动一行显示：

div{

    width:200px;

    height:200px;

    border:2px red solid;   

    float:right;

}

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> CSS_Test33</title> 
<style>
div{
    width:200px;
    height:200px;
    border:2px red solid;    
    float:right;
}
</style>
</head>
<body>
     <div id="div1">这是第一块</div>
     <div id="div2">这是第二块</div>
</body>
</html>

保存文件名：HTML之CSS_Test33.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

用浏览器打开运行显示效果如下图：

也可以设置两个元素一左一右一行显示：

div{

    width:200px;

    height:200px;

    border:2px red solid;

}

#div1{float:left;}

#div2{float:right;}

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> CSS_Test34</title> 
<style>
div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
</style>
</head>
<body>
     <div id="div1">这是第一块</div>
     <div id="div2">这是第二块</div>
</body>
</html>

保存文件名：HTML之CSS_Test34.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

3、层（Layer）模型

CSS（Cascading Style Sheets、层叠样式表）用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是CSS的一个扩展，它可用来控制任何东西在网页上或是说在窗口中的位置。position（位置、放置方式）决定DIV tag（标签）是如何放置的。

div 标签（<div>…</div>） 标签定义 HTML 文档中的分隔（division）或部分（section）。此标签常用于组合块级（block-level）元素，以便通过样式表来对这些元素进行格式化——通过CSS样式为其赋予不同的表现效果（外观）。

层布局模型能实现在网页中对HTML元素进行精确定位，CSS定义了一组定位属性（position）来支持层布局模型。在网页设计领域，一般只在网页的局部使用层布局，如浮动广告、下拉菜单、图片轮换效果等。

可以通过设置属性position来使用层布局，该属性的值有static、relative、absolute、fixed和inherit。

static表示无特殊定位，元素遵循正常文档流；

inherit表示从父元素继承属性值。

下面重点介绍相对定位（relative）、绝对定位（absolute）、固定定位（fixed）三种定位方式。

绝对定位

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

如果不存在这样的包含块（就是它前面的div并没有设置定位的属性），则相对于body元素，即相对于浏览器窗口。

被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除；

我们可以通过 z-index 来设置它们的堆叠顺序 。

绝对定位使元素脱离文档流，因此不占据空间 ，普通文档流中元素的布局就当绝对定位的元素不存在时一样，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。　　

浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧，文字内容会围绕在浮动元素周围。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。

下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{

    width:200px;

    height:200px;

    border:2px red solid;

    position:absolute;

    left:100px;

    top:50px;

}

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> CSS_Test35</title> 
<style>
div{
    width:200px;
    height:200px;
    border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
</style>
</head>
<body>
<div>这是绝对定位测试</div>
     <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
     <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
     <p>……………………………………………………………………………………………………………………………………………………………………………………。</p> 
</body>
</html>

</html>保存文件名：HTML之CSS_Test35.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

相对于以前的位置移动，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。

如下代码实现相对于以前位置向下移动50px，向右移动100px;

div{

    width:200px;

    height:200px;

    border:2px red solid;

    position:relative;

    left:100px;

    top:50px;

}

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> CSS_Test35</title> 
<style>
div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}
</style>
</head>
<body>
<div>这是相对定位测试</div>
     <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
     <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
     <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
</body>
</html>

保存文件名：HTML之CSS_Test36.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

固定定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这点与background-attachment:fixed;属性功能相同。

以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

div{

    width:200px;

    height:200px;

    border:2px red solid;

    position:fixed;

    left:100px;

    top:50px;

}

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> CSS_Test37</title> 
<style>
div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
</style>
</head>
<body>
<div>这是固定定位测试</div>
     <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
     <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
     <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
</body>
</html>

保存文件名：HTML之CSS_Test37.html，保存路径D:\HTML5_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

当拖动滚动条时位置固定不变。

使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，可不可以相对于其它元素进行定位呢？当然可以。使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1"><!--参照定位的元素-->

    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->

</div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

#box1{

    width:200px;

    height:200px;

    position:relative;       

}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{  

    position:absolute;

    top:20px;

    left:30px;       

     }

这样box2就可以相对于父元素box1定位了。

附录

进一步学习资料： CSS 教程

CSS（层叠样式表） | MDN

学习&实践爱好者
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【前端-初阶】CSS盒子模型
qq_48234463的博客
03-18 638
【前端-初阶-CSS】页面布局三大核心：盒子模型，浮动、定位。
table 指定行设置样式
weixin_45677987的博客
04-14 831
1：可以通过指定 Table 组件的row-class-name属性来为 Table 中的某一行添加 class，表明该行处于某种状态。 tableRowClassName({row, rowIndex}) { if (rowIndex === 1) { return 'warning-row'; } else if (rowIndex === 3) { return 'success-row'; } return ''; } ...
四个好看的table表格样式
热门推荐
下半夜的风
10-24 7万+
1. 单像素边框CSS表格 table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } ta
css指定table行和列的样式
lipengaccp的博客
04-11 804
/第一行第一列颜色。
el-table添加行/单元格样式
nanjo_yoshino0712的博客
05-31 1万+
row-style/cell-style，行/单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有行/单元格设置一样的 Style；row-class-name/cell-class-name，行/单元格的 className 的回调方法，也可以使用字符串为所有行/单元格设置一个固定的 className
CSS快速入门关键字整理文档
最新发布
04-10
### CSS 快速入门关键字详解 #### CSS 概述 CSS（层叠样式表）是一种强大的样式语言，用于描述 HTML 或 XML（包括 SVG、MathML 等衍生技术）文档的外观与格式。掌握 CSS 是现代 Web 开发者必备技能之一。 #### ...
Table常用的几种CSS样式
03-23
针对Table经常使用的CSS样式，样式不错。 也可以到http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
漂亮的table样式（内附css）
08-10
漂亮的table样式（内附css） 漂亮的table样式（内附css）
vue3 antd table表格样式修改——使用rowClassName更改某行数据的样式
XSL_HR的博客
12-25 1万+
利用ant design vue组件库内置的API属性（rowClassName）给table表格添加行样式。利用css的不可控操作，去除表格的斑马纹样式。
前端入门学习笔记二
m0_65384293的博客
11-21 78
前端入门学习笔记
6.15学习心得 table表格 内部，外部，行内样式表
weixin_48383048的博客
06-15 500
Table表格的基本属性 1 2 4 5 table 创建表格tr 表示行td 表示单元格table属性border边框线width 宽度 （px， 和相对于父元素的百分比）height 高度 （px...
div不换行_关于CSS你不知道的那些事！
weixin_39926042的博客
11-29 144
前言CSS，对于一个web开发者来说再熟悉不过了，即便是后端也能帮前端开发者调调样式。正是因为它的简单易懂，让很多程序员（包括我自己）觉得不用去花时间系统学习。记得有一次在项目中，按照UI设计图，画了一个很简单的样式，自己觉得百分百没问题；熟话说越是觉得简单的东西越容易出错，果不其然第二天，领导测试后，出现了严重的样式错误，被痛批了一顿。当时的我还觉得自己委屈，明明自己电脑上，旁边同事电脑测试没问...
table和tr设置样式
......
02-15 3万+
table和tr设置样式，和平常的style和class有些许差别。 1、table 样式设置方法有: (1) (2) 这样的设置的cellspacing，宽度是(1)方法中的2倍宽 (3)css: .table{width:400px;height:300px;background-color:green;border:0;cellspacing:1px;} 这样的设置的cellspac
如何给bootstrap table设置行列单元格样式
uncle_yiba的博客
08-16 3万+
1、根据单元格或者行内其他单元格的内容，给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center", formatter:function(value, row, index){ return index+1; }, cellStyle:{ css:{ "background-c
004---css样式表（内部样式表、行内样式表、外部样式表）
sunshine_0880的博客
04-21 2万+
一、内部样式表内嵌式是将CSS代码集中写在HTML文档的head头部中，并且用style标签定义，基本语法如下：语法中，style标签一般位于head标签中title标签之后，也可以放在HTML文档的任何地方。type="text/CSS"  在HTML5中可以省略。二、行内样式表行内样式表适合于样式较少的情况。语法：如下例：&lt;div style="color:red;font-size: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学习&实践爱好者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值