HTML（五）CSS入门基础

Bertha 。 2022-05-17 02:42 281阅读 0赞

# 一、为什么需要CSS样式表 #

HTML标签的外观样式比较单一,页面色彩不生动 ,样式修改不方便，仅有HTML是不能做出多姿多彩的网站的，样式表的作用相当于华丽的衣服，它可以修饰HTML，是我们的网页更加漂亮，样式表还能实现内容与样式的分离，方便团队开发等。

## 二、css的基础知识 ##

要使用css可以在html的head标签中嵌入样式的定义，语法如下：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;!--文档样式表开始，类型为CSS样式--&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;style type="text/css"&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">P {color:red; font-size:30px; font-family:隶书;}/*样式规则*/</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">……</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;/style&gt;</span></p> </td> 
  </tr> 
 </tbody> 
</table>

所有的样式规则的格式都是:

**属性名:属性值;**

### 1、css的选择器 ###

（1）元素选择器，这样页面上面所有的同类元素都会使用统一的样式了。

**元素名\{样式规则定义\}**

如果希望其他的标签也能采用P标签的样式，怎么办？

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>P{ <br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: green;<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: 18px;<br> &nbsp;&nbsp; &nbsp;}</td> 
  </tr> 
 </tbody> 
</table>

在html中定义两个p元素，它们的样式就会一样的了。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;p&gt;此生此夜不长好&lt;/p&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;p&gt;人生天地间&lt;/p&gt;</span></p> </td> 
  </tr> 
 </tbody> 
</table>

效果如下：

![70][]

（2）id选择器，id选择器是作用于html中的某个id，格式是

**\#id名称\{样式规则定义\}**

例如页面上面有一个id是sige得div

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>&lt;div id="sige"&gt;<br> &nbsp;&nbsp;&nbsp;hello<br> &lt;div&gt;</td> 
  </tr> 
 </tbody> 
</table>

定义器对应的样式如下：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>#sige{ <br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-weight: bold;</p> <p>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: #C13133;</p> <p>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;border: 5px solid;</p> <p>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;border-color: blue;</p> <p>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 200px;</p> <p>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;height: 200px;<br> &nbsp;&nbsp; &nbsp;}</p> </td> 
  </tr> 
 </tbody> 
</table>

效果如下：

![70 1][]

（3）类选择器，这是很常用，也是最灵活的方式，你可以预先定义一类的样式，任何一个html的元素都可以使用class属性来使用这个样式效果，定义格式如下：

**.类名\{样式规则定义\}**

例如：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><span style="color:#000000;">&lt;div class="hi"&gt;使用类选择器&lt;/div&gt;</span></td> 
  </tr> 
 </tbody> 
</table>

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>/* style中的代码 */</p> <p>.hi{ <br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: 30px;<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: #009999;<br> &nbsp;&nbsp; &nbsp;}</p> </td> 
  </tr> 
 </tbody> 
</table>

效果如下：

![70 2][]

（4）选择器的其他用法。为了更好的支持html的树形结构，css也支持这种写法，比如：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p style="margin-left:0pt;"><span style="color:#000000;">#sige p { </span></p> <p style="margin-left:0pt;"><span style="color:#000000;">font-weight: bold;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">color: #FF0055;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">}</span></p> </td> 
  </tr> 
 </tbody> 
</table>

上面这样写法就是指id为sige的p元素的样式，还有类似这样的写法

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p style="margin-left:0pt;"><span style="color:#000000;">#sige .first p{ </span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&nbsp;&nbsp;font-size: 100px;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">}</span></p> </td> 
  </tr> 
 </tbody> 
</table>

上面这样写法就是指id为sige的应用了类选择器first的p元素

### 2、选择器的优先级 ###

如果使用了id选择器，类选择器和元素选择器都重复定义了同一个属性，那么谁的优先级最高呢？这三种优先级的顺序是：id选择器，类选择器和元素选择器

### 3、css的书写位置 ###

上面的例子我们都是把style写在head的标签里面，事实上我们还可以在每一个html的元素中使用style属性来定义样式，如下面这个例子：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><span style="color:#000000;">&nbsp;&lt;div style="background-color: gray;border: 1px solid;"&gt;&lt;/div&gt;</span></td> 
  </tr> 
 </tbody> 
</table>

有的时候我们还会在其他页面用到这些定义的样式，那么我们可以把样式都写在一个外部文件中，然后通过导入的方式给所有的页面素偶共享，这样就可以统一所有页面的效果了。

比如新建一个style.css的文件，把所有的样式定义在这个文件中，然后在html的head元素中引用这个样式，代码如下：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><span style="color:#000000;">&lt;link rel="stylesheet" href="style.css" type="text/css"&gt;&lt;/link&gt;</span></td> 
  </tr> 
 </tbody> 
</table>

## 三、基本的css的属性 ##

认识上面css的写法后，就进入一个比较无聊的阶段了，就是熟记一下css的一些基本的常用的样式属性属性值，然后知道一下它们的效果，css也就掌握得差不多了。

font-size：字体大小

font-family：字体类型

font-style：字体样式

text-align：文本对齐

background-color：设置背景颜色

background-image：设置背景图像

background-repeat：设置一个指定的图像如何被重复。可取值repeat-x、 repeat、 no-repeat、repeat-y

margin-top：设置对象的上边距

margin-right：设置对象的右边距

margin-bottom：设置对象的下边距

margin-left：设置对象的左边距

border-style：设置边框的样式

border-width：设置边框的宽度

border-color：设置边框的颜色

padding-top：设置内容与上边框之间的距离

padding-right：设置内容与右边框之间的距离

padding-bottom：设置内容与下边框之间的距离

padding-left：设置内容与左边框之间的距离

[70]: /images/20220517/148f0a345380418e8462bebefb6c0c36.png
[70 1]: /images/20220517/b1996cb4c1c84ff8b7473131994b6faf.png
[70 2]: /images/20220517/d9f1dd0a34e94a0ea0f78c3993f3e83d.png