以下是本人学习w3c css总结的笔记

选择器

h {
    color:red;
}

派生选择器

根据上下文关系确定某个标签的样式

p strong {
    color:red;
}

<p ><strong>我是红色的字</p></strong>

(标签名可以不只是两个,可以是一个或者多个，只要html中能确定它的存在的，目的少写class，id，提升代码简洁性)

后代选择器

h1 em {
    color:red;
}

任何h1元素内的任何em元素
多个h1内将被作用

子元素选择器

比后代选择器的范围更小
选择某元素的子元素

h1 > strong {
    color:red;
}
仅一个h1被作用

相邻兄弟选择器

h1 + p {
    color:red;
}

<h1>This is a heading.</h1>
<p>This is paragraph.</p>

选择器作用在p元素上

id选择器

#name{
    color:red;
}

<p id='name'>我是红色的</p>

id具有唯一性，且区分大小写

id选择器创建派生选择器

# name p {
    color:red;
}

类选择器

.name{
    color:red;
}
<p class='name'>我是红色的</p>

类选择器创建派生选择器

. 类名 标签名 {
    color:red;
}
 该样式会作用于类名为 类名 元素内的< 标签名 >标签

属性选择器

1.  [属性]{
       color:red;
   }
   
   [title]{
       color:red;
   }
   
   <h2 title="Hello world">Hello world</h2>
   
   
   属性和值选择器
   
   [属性=值]{
       color:red;
   }
   
   [title=Hello world]{
       color:red;
   }
   
   相当于是模糊匹配值
   [属性~=值]{
       color:red;
   }
   
   [title~=Hello world]{
       color:red;
   }
   

2. 标签名[属性名]{
       color:red
   } 
   
   a[href] {
        color:red 
   }
   
   标签名[属性名][属性名]{
       color:red
   } 
   
   a[href][title] {
        color:red 
   }
   

伪类

p: first-child 第一个p元素
a: active 被激活的元素添加样式
a: focus 拥有键盘焦点
a: hover 鼠标悬在元素上方
a: link 未被访问的链接添加样式
a: visited 已被访问的链接添加样式

伪元素

p:first-line 文本首行样式
p:first-letter 文本首字母样式
h1:before 在元素内容前面插入
h1:after 在元素内容后面插入

样式表

外部样式表，即XXX.css文件
内部样式表
内联样式，即把样式写在标签里面
多重样式，若某些属性值在以上三种表中定义，那么会使用近的值，即有内联用内联，之后有内部用内部，之后有外部用外部

背景

有关背景不可继承

文本

字体

字体系列
Serif字体
Sans-serif字体
Monospace字体
Cursicve字体
Fantasy字体

链接

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

a:link {text-decoration:none;background-color:#B2FF99;}
a:visited {text-decoration:none;background-color:#FFFF85;}
a:hover {text-decoration:underline;background-color:#FF704D;}
a:active {text-decoration:underline;background-color:#FF704D;}

定位

position属性值
static
relative
absolute
fixed