CSS基础语法讲解

古城微笑少年丶 2022-06-01 05:36 171阅读 0赞

CSS称为层叠样式表(级联样式表)  全称为: Cascading Style Sheets， 主要用来设置网页的样式， 后缀名： .css

介绍了CSS的基本结构后，我们怎么能使用它呢，怎么能把他放在HTML中使他功能产生作用呢。以下为大家简述几种方法。

方法一：内联引入

在元素上加属性style，格式如下：

<元素 style="属性1:属性值1;属性2:属性值2;"></元素>

这种方法虽说简单快捷，但是缺点比较大，内联方式的CSS与HTML的代码放在一起，导致代码不美观，并且导致可维护性差，可复用性差，而且内联样式一次，只能对一个标签起作用，如果有多个相同属性样式，需要重复写很多，数量比较大的话，量比较大。

方法二：内嵌引入

在head中写style标签，style标签中写CSS内容，格式如下：

<style>

选择器\{

属性名：属性值;

。。。

div\{

font-size:20px;

color: \#f00

</style>

内嵌引入和内联的方法差不多，样式也差不多，所以缺点也一样。所以编写CSS样式表，不推荐这两种方式。

方法三：外部引入（推荐）

将CSS样式内容独立为.css文件，在HTML中通过link标签引入，强烈推荐使用这种方式，它 将CSS与HTML独立出来，代码整洁 ，方便观看和查找， 可复用性高 ，维护起来也比较方便。

外部引用的使用发法：

**link标签的属性：**

*  rel="stylesheet" 告诉浏览器这是一个样式表
 *  href="CSS文件的路径" 链接引入对应的CSS文件

<head>  
    <meta charset='utf-8' />  
    <title> CSS引入方式</title>  
<link rel='stylesheet' href='CSS/03.css' />  
  </head>   
 方法四：导入（不推荐）

@import 导入文件， 不推荐使用，使用方式：

<style>

@import url(CSS文件的路径)

</style>

或者在CSS文件中带入其他CSS文件的内容

1.  link是HTML标签，@import只能在CSS中使用
2.  link会在网页加载时同时加载，而@import需要网页完全载入才能加载
3.  link无兼容问题，@import 是CSS2.1以后加入的，兼容性一般
4.  link可以使用JS脚本控制，而@import不可以

**注意**： 如果样式表内容不多，可以使用内嵌的方式，绝大多数情况推荐使用外部引入的方式。

以上方式的优先级顺序：link与style内嵌同时存在，采用“就近原则”，后写的会将先写的覆盖掉

内联的优先级要高于内嵌跟外部引入。

**对于选择器的选择，以下推荐几种常用的选择器，供大家选择**

**一、元素选择器：**

**1、标签选择器：<html>  
  <head>  
    <meta charset='utf-8' />  
    <title> CSS引入方式</title>  
<style>  
\*\{border: 2px solid \#0f3;\}   
    
  iv\{  
    width: 400px;  
height: 300px;  
background: \#f00;  
  \}  
  p\{  
    background-color: \#ff0;  
  \}  
  .yellow-text\{  
    font-size: 40px;  
color: \#ff0;  
  \}  
  \#blue\{   
    font-size: 50px;  
background-color:\#00f;  
color: \#f06;  
  \}   
</style>  
</head>  
  <body>  
    <div>hello world!</div>  
<div class='yellow-text'>hello world!</div>  
<p>this is the p</p>  
<div class='yellow-text'>hello world!</div>  
<div>hello world!</div>  
<div id='blue'>hello world!</div>  
  </body>  
</html>**

以上为标签选择器代码，选择的是所有的div标签。

2、class选择器：

给元素添加class属性（相当于起个名字），然后在css中 **.class名\{属性：属性\}** 值\}

class命名：多个单词的时候： word1-word2

<p class='text' id='blue'>this is the p</p>  
<p class='blue-text' id='black'>this is the p</p>  
<div class='yellow-text'>hello world!</div>

3、ID选择器：

给元素添加ID属性，在css中通过 **\#id名\{\}** 设置样式， ID是唯一标识， 一个页面中不要有重复的ID，一个ID名只能出现一次， 一般不要用ID作为选择器，因为优先级比较高。

<div id='blue'>hello world!</div>

\#red\{background-color:\#f00;\}

4、通配符：

\*\{\} \*代表选中所有元素

5、选择器的优先级：!important>\#id选择器>.class选择器>标签选择器>\*