CSS学习记录1

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中，类选择器以一个点号来表示

  .class1{
    color:red;
  }

 <p class="class1">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元素后面出现的段落。然后变成红色