探索Web世界的奥秘:HTML与CSS的奇妙之旅

发表时间: 2024-01-14 15:02

学习总目标

本次学习目标

4. CSS

4.1 CSS的作用

CSS是用于设置HTML页面标签的样式,用于化HTML页面

4.2 CSS的引入方式

4.2.1 行内样式

也就是在要设置样式的标签中添加style属性,编写css样式; 行内样式仅对当前标签生效

<!--给div设置边框-->
<div style="border: 1px solid black;width: 100px; height: 100px;"> </div>

4.2.2 内部样式

一般是在当前页面的head标签中添加style标签,在style标签中编写css样式代码; 内部样式仅对当前页面生效

<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.one {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: lightgreen;
margin-top: 5px;
}
</style>
</head>
<body>
<div style="border: 1px solid black;width: 100px; height: 100px;"> </div>
<div class="one"> </div>
<div class="one"> </div>
<div class="one"> </div>
</body>

4.2.3 外部样式

  1. 创建CSS文件
  2. 编辑CSS文件
  • .two {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin-top: 5px;
    }
  1. 引入外部CSS文件
  • 在需要使用这个CSS文件的HTML页面的head标签内加入:
  • <link rel="stylesheet" type="text/css" href="/aaa/pro01-HTML/style/example.css" />
  • 于是下面HTML代码的显示效果是:
  • <div class="two"> </div>
    <div class="two"> </div>
    <div class="two"> </div>

4.3 CSS代码语法

  • CSS样式由选择器和声明组成,而声明又由属性和值组成。
  • 属性和值之间用冒号隔开。
  • 多条声明之间用分号隔开。
  • 使用/* … */声明注释

4.4 CSS选择器

4.4.1 标签选择器

HTML代码

<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>

CSS代码

p {
color: blue;
font-weight: bold;
}

页面效果

4.4.2 id选择器

HTML代码:

<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p id="special">Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>

CSS代码:

#special {
font-size: 20px;
background-color: aqua;
}

显示效果

4.4.3 类选择器

HTML代码:

<div class="one"> </div>
<div class="one"> </div>
<div class="one"> </div>

CSS代码:

.one {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: lightgreen;
margin-top: 5px;
}

显示效果