本文共 2135 字，大约阅读时间需要 7 分钟。

CSS第一课

• CSS简介

CSS和HTML一样，也是一种标识语言，代码也很简单，也需要通过浏览器解释执行，也可以用任何文本编辑器编写，其文件扩展名为“.CSS”。

• CSS主要功能

CSS的主要功能是美化页面，并且使得网页的内容和样似进行分离（类似于化妆，整容^^）。

---

使用方法

内联样式、行内样式

格式：

   <标签名 style="CSS代码">
            第一个代码!
   

例：

        第一个代码    

结：

这样的话，p里面的文字“第一行代码”的颜色color就会变成蓝色blue。

内部样式

格式

例：

结：

这样的话，p里面的文字的颜色color就会变成蓝色blue。

外部样式

创建一个单独的CSS文件，在html的head标签中使用link标签引入，后两项是可选条件

格式：

例：

在这里需要在外面创建一个CSS文件

p{
       color: blue;}

结：

现在对css文件里面的条件进行添加，p标签的颜色也变成了蓝色。

导入的方式

和link方式一样，但是有的浏览器不能用，所以不常用，了解即可

格式

css文件不变

CSS的基本语法

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector{declaration1;declaration2…declarationN}

选择器通常是你需要改变的样式的html元素。选择器包括多种形式，所有的html标签都可以作为选择符，如body p table等

每条声明由一个属性和一个值组成 property表示要格式化的属性的名称，value表示要格式化的属性的取值，每个属性有每个值。

selector{property:value;property:value;…}

插入CSS样式表

格式：

CSS选择器{
   	属性名：属性值;	属性名；属性值;	...}

例：

p{
       color: blue;}

CSS特性

继承性

• 层叠性是指同一个HTML文件引用了多个样式表文件时，浏览器会按照样式定义的先后层次来应用样式，如果不考虑样式的优先级，一般都遵守“最近优先原则”。
• CSS样式对内容控制能力的基础就在于HTML文档结构图中的家族继承关系。
• 子级元素会继承父级元素的样式，并且只继承本身没有定义的属性。

标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2; …属性n:属性值n; }

使用标签选择器的优缺点

• 优点：能够快速为页面中同类型的标签统一样式。
• 缺点：不能设计差异化样式，有时候会相互干扰

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; …属性n:属性值n; }

该语法中，类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式

方法

1. 第一步：给需要设置样式的标签定义类名称，也就是给标签设置一个class属性，并给class属性赋值。赋的值就是类名称。
2. 第二步：在CSS中使用类名称查找html文件中的对应标签。要在类名称前面添加黑色实点。

例：

        这是类选择器的使用

类名注意

• 类名第一个字符不能使用数字，它无法在Mozilla或Firefox中起作用。
• 类名严格区分大小写，一般采用小写的英文字符。
• 不建议使用"_"下划线来命名CSS选择器。
• 尽量不缩写，除非一看就明白的单词。

相同的标签可以定义相同的类名称，不同的标签也可以定义成相同的类名称。

ID选择器

ID选择器使用“#”进行标识，后面紧跟ID名，其基本语法格式如下：

#ID名{属性1:属性值1; 属性2:属性值2; …属性n:属性值n; }

该语法中，ID名即为HTML元素的ID属性值，大多数HTML元素都可以定义ID属性，元素的ID值是唯一的，只能对应于文档中某一个具体的元素。

方法：

1. 第一步：在html文档中，给某个标签设置id属性，然后给该属性设置属性值，属性值就是id名称。
2. 第二步：在CSS文件中使用id名称作为选择器，但是需要在id名称前面添加#。
   例：

#np1{
               background-color: cyan;        }

   
            你好，        
    
                  世界！        
    
   

注意：id名称在整个文档中是唯一的，不能重名。

---

* 在CSS是通配符，匹配任意标签。

例：

*{
               margin: 0;/*外边距*/            padding: 0;/*内边距*/        }

此为消除内外边距，以后会详细说一下的，此处略过。

编程我也是初学者，难免有写错的地方，希望大家看完之后，发现错误可以评论出来，谢谢大家

转载地址：https://lolly1023.blog.csdn.net/article/details/105269941 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！