嵌入css 的三种方式和css3 选择器

在html中嵌入css 的三种方式：

内联式适用情况:局部特殊化——一部分

<span style="color:red; font-size:18px;">text</span> 

嵌入式适用情况:统一标签样式格式——一个网页

<style type="text/css"> 
span{color:bule; font-size:19px;}
</style>

外联式适用情况:方便代码重用和管理——多个网页

<link herf="kkk.css" rel="stylesheet" type="text/css">

REL属性用于定义链接的文件和HTML文档之间的关系。StyleSheet，的意思就是样式调用

样式的继承
样式的层叠

继承、特殊性，层叠，重要性的区分。

1. 继承是指标签的样式可以由子代继承，但有些标签是不能继承的，eg：border。

2. 特殊性指用用权重来确定最后起作用的样式，id=100，class=10，标签=1，继承=0.1；

3. 层叠指当权重相同时，后面的样式覆盖前面的样式。 层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

后面的样式会覆盖前面的样式，这是程序的运行顺序。这里程序先运行红色，显示红色；然后再运行绿色，显示绿色，显然绿色把红色覆盖掉了，后面粉色又把绿色覆盖掉了，等到运行到要装饰的标签时，显示的是粉色。
谁离待装饰的标签越近，就用谁的样式
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）在代码中的位置就相当于粉色>绿色>红色。
内联样式表（在标签内部，离待装饰标签最近）> 嵌入样式表（在当前文件中，在二者之间）> 外部样式表（在外部文件中，离待装饰标签最远）

让文字环绕着图片：
img
{
float:right;
}

清除浮动 clear:both

css3 选择器

类型选择器

群组选择器

通用选择器

类选择器

ID选择器

属性选择器

li[data-album] {
    border: 1px solid #ccc;
    margin-left: 1px;
    margin-bottom: 1px;
}

li[data-album~="single"] img {}

li[data-album="multiple"] img {}

li[data-album] img {}

li[data-album^="single"] img {}

li [data-album$="single"] img {}

li [data-album*="single"] img {}

img[alt*="Viva"] {
    border-radius: 50%
}

img[src$="imges/"] {
     border-radius: 50%
}

img[src^=".jpg"] {
    border-radius: 50%
}

伪类选择器

a:link {
    color: #000;
}

a:visited {
    color: #fff;
}

li:hover {
    background-color: #eee;
}

li:active {
    background-color: #000;
}

li:active a {
    color: #fff;
}

li:target {
    background: #eee;
}

#search:focus {
    outline: none;
    border: 2px solid #129fea;
}

#search:disabled {
    background: #f5f5f5;
}


/*伪类：nth-child

:nth-child(1) 父元素的第一个子元素
:nth-child(odd)奇数子元素
:nth-child(even)偶数子元素
:nth-child(an+b)a,b为整数，2n+1，从1开始隔2个
*/


/*
li:nth-child(odd) img{
    border-radius: 50%;
}
*/


/*
伪类：
倒过来选择nth-last-child()
*/


/*
li:nth-last-child(odd) img{
    border-radius: 50%;
}
*/


/*
:nth-child(1)

li:first-child img{
    border-radius: 50%;
}

li:last-child img{
    border-radius: 50%;
}
*/


/*
:first-of-type
:nth-of-type(1)
:last-of-type
:nth-last-of-type(1)
*/


/*
p:first-of-type{
    background-color: #fcebbd;
    color: #af9540;
    padding: 20px;
}
*/


/*
li:nth-of-type(1){
    background-color: #fcebbd;
    color: #af9540;
    padding: 20px;
}
*/


/*
:only-child
:first-child:last-child
:nth-child(1):nth-last-child(1)
:only-of-type
:first-of-type:last-of-type
:nth-of-ytpe(1):nth-last-of-type(1)
*/


/*:empty*/


/*
div:empty{
    width: 170px;
    height: 170px;
    background-color: #eee;
}
*/


/*:not()*/


/*选择不是第一个*/


/*
li:not(:first-child) img{
    border-radius: 50%;
}
*/


/*

第一行
::first-line
::first-letter
*/


/*
p::first-line {
    font-weight: bold;
}
*/

p::first-letter {
    color: #0e90d2;
    font-size: 30px;
    float: left;
    letter-spacing: 5px;
}


/*
::before
::after
*/


/*
h1::before{
    content: 'before';
    font-size: 15px;
    color: #666;
}

h1::after{
    content: 'sunny';
    color: pink;
}
*/

/*后裔*/


/*
div.container img{
    border-radius: 50%;
}

div.container *img{
    border-radius: 50%;
}
*/


/*儿子*/


/*
div.container >img{
    border-radius: 50%;
}
*/


/*兄弟*/

h1+h2 {}

h2~h3 {}

“`