初识CSS

一、什么是CSS

• CSS全称为层叠样式表(Cascading Style Sheets)，通常又称为风格样式表(Style Sheets)，它是用来进行网页设计的；

• 在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式；

二、CSS的优势

• 内容与表现分离，也就是使用前面学习得HTML语言制作网页，使用CSS设置网页样式、风格、并且CSS样式单独存放在一个文件中，这样只要HTML文件引用CSS文件就可以了，便于后期的CSS样式的维护；

• 表现的统一，可以使网页的表现非常同意，并且容易修改；

• 丰富的样式，使得页面布局灵活；

• 减少网页的代码量，增加网页的浏览速度；

• 运用独立页面的CSS，有利于网页被搜索引擎收录；

三、CSS的基本语法结构

• CSS和HTML一样都是浏览器能解析的计算机语言，因此CSS也有自己的语法结构；
• CSS规则由两部分构成，选择器和声明，声明必须放在大括号中{}，可以是一条或多条；
• 每条声明由一个属性和值组成，属性和值用冒号分开，每条语句以英文的分好结尾；

# h1表示选择器
# font-size和color表示属性
# 12px和#fff表示属性值

p{
font-size:12px;
color:#fff;
}

四、

五、CSS选择器

• 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素；
• 所有HTML语言中的标签样式都是通过不同的CSS选择器进行控制的；
• CSS的选择器分为三种，分别是：标签选择器、类选择器、ID选择器；

标签选择器：

• 一个HTML页面由很多的标签组成，例如、

  、

  、

  、等，CSS标签选择器就是用来声明这些标签的；

• 每种HTML标签的名称都可以作为相应的标签选择器的名称，例如

  标签和

  标签，如果我们需要在它们上面定义一个标签选择器，那我们要怎么做呢；

p{
font-size:12px;
}

h1{
font-size:16px;
}

• 需要注意的是，一个HTML页面会有很多的

  标签和

  标签，标签选择器一旦声明，那么页面的所有该标签都会应用，这样虽然用起来很方便，但是如果想要给其中一个标签单独定义属性则不能，此时需要使用类选择器或者ID选择器了；

类选择器：

• 类选择器的名字可以由用户自定义，属性和值跟标签选择器一样，必须符合CSS规范，它的语法如下；

# .class1为类选择器的名字
# font-size为属性
# 12px为属性值

.class1{
font-size:12px;
}

• 和标签选择器不同的是，设置了类选择器之后就要在HTML的标签中应用相应类样式，使用标签的class属性引用类样式，如下所示；

    
hello world！
    
hello world!

• 如下图所示，上面一行p标签是应用了类样式class1，下面一行则没有，所以上面一行样式有变化，下面一行没有变化；

  
  
  

  4.png

ID选择器：

• ID选择器的使用方法和类选择器相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此它的针对性更强；
• 比如说有一个类选择器.class1，那么它可以在页面的多个标签中应用，有一个ID选择器class1，那么它只能在页面 中用一次；

    
这是第一行哟
    
这是第二行哟
    
这是第三行哟
    
这是第二行哟
    
这是第二行哟

• 效果图

  
  
  

  5.png

六、CSS样式引入方法

• 在HTML页面中，引入CSS样式有三个方法，分别是：行内样式、内部样式和外部样式；

行内样式：

• 行内样式就是在HTML中直接使用style属性设置CSS样式，用法为：<标签名 style="样式声明;">；
• 这种方法仅对当前的HTML标签起作用，并且是写在HTML标签中的，因此这种方法不能使得内容和表现相分离，没有体现出CSS的优势；

内部样式：

• 把CSS代码写在的

  春眠不觉晓，处处闻啼鸟

  交集选择器：

  • 交集选择器由两个选择器直接连接构成，其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器，这两个选择器之间不能有空格；
  • 它的语法为：

  
  
  
      
  春眠不觉晓，处处闻啼鸟
  
  

  并集选择器：

  • 并集选择器简称集体声明，并集选择器是多个选择器通过逗号连接而成的；
  • 并集选择器可以用来定义风格完全相同，或者部分相同的选择器；
  • 语法为：

  
  
  
      
  第一个
      
  第二个
      
  第三个
      
  第四个
      
  第五个
  
  

  九、继承特性

  • CSS的继承简单的说就是将各个HTML标记看做一个个容器，其中被包含的小容器会继承包含它的大容器的风格样式；
  • 所有的CSS语句都是基于各个标记直接的继承关系，CSS继承是指子标记会继承父标记的所有样式风格，并可以再父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式完全不会影响父标记；