CSS学习

css概述

css指层叠样式表

样式用来定义如何显示html的元素

样式通常存储在样式表(style)中

多个样式定义可以层叠为一个

外部样式通常存在css文件中

外部样式表极大提高工作效率

css基本语法

css规则主要由两部分构成：选择器和一条或者多条申明

选择器通常就是你要改变样式的元素。

而每条申明是由一个属性和一个值组成，属性和值用冒号分隔，多条申明用分号隔开

提示：请用花括号包裹申明部分。

eg：

p { color: #f00; } 单条申明 
p {  多条申明
  text-align: center;
  color: black;
  font-family: arial;
}

css高级语法

选择器的分组

可以对选择器进行分组，被分组的选择器就享有共同的申明部分。

用逗号将分组的选择器分隔开。

  h1,h2,h3,h4,h5,h6 {
  color: green;
  }

选择器

id选择器

为html中的元素，标记特定的id。

然后才能使用id选择器对需要修改的样式进行修改。

标记id后，语法：

  #p1{
    color:red;
    }

    <p id = "p1">this is p </p>

注意：id以及后面的class 都不能以数字开头。

类选择器

在class中，类选择器以一个点号来表示

  #p1{
    color:red;
    }

    <p id = "p1">this is p </p>

元素选择器

元素选择器就比较简单了，选择器通常就是某个元素了。

  p{
    color:red;
    }

属性选择器

为带有指定属性的html元素设置样式。

带有指定属性的

[title]{
为带有title属性的元素设置样式
}

属性和值选择器

[title=name]{
为所有title=name的元素设置样式
}

一些常见的属性值搭配的选择器

后代选择器

后代选择器可以选择某个元素的后代元素。

又称包含选择器

eg：

h1 em{
} 
<h1>this <em>is</em> h1</h1>

如上，h1 m1 就是后代选择器。

em是h1的后代元素，上面的样式就会作用到em的部分。

子元素选择器

如果不想选择任意的后代元素，那么就要用到子元素选择器。

h1 > strong {
    color :red;
}
<h1>This is <strong>very</strong><strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

这个规则就会把第一个h1下面的两个strong都变成红色，但是第二个不会受到影响。

相邻兄弟选择器

是选择紧接在另一个元素后的元素。

关键是：二者必须有相同的父类元素。才能使用兄弟选择器。

h1 + p {
        color:red;
}
//这句话的意思紧接在h1元素后面出现的段落。然后变成红色