css

CSS

1.网页分为3个部分

html(结构)
css(表现)
javascript(行为)

2.声明方式

选择器{
    样式
};

3.编写位置

<!-- 1.内联样式：在标签内部通过style设置属性
        缺点：改变样式时，需要一个一个一次的修改，并且不能同时设置样式
-->
<p>这是<span style="color: red;">一个</span>p标签</p>

<!-- 2.内部样式表:写在head中的style标签内部 写css选择器选中元素设置样式
        缺点：在不同页面中无法直接使用，只能对一个网页起效
-->
<p>这是一个p标签</p>
<style>
    p{
        font-size: 20px;
        color:purple;
    }
</style>

<!-- 3.外部样式表：写在网页外面，编写进一个.css文件,之后link标签引入当前网页中 -->
p{
    color: tomato;
    text-decoration: underline;
}
<!-- 放的位置更改样式，后面覆盖前面 -->

4.选择器

4.1标签选择器

<!-- 标签{
    样式
} -->
<h1>zzh是猪</h1>

 h1{
    color: royalblue;
    text-decoration:overline;
}

4.2类选择器

<!-- .类名{
    样式
} 
作用：选中一组元素
-->
<p><span class="green">成功</span>的项目管理</p>

.green{
    color: green;
}

4.3 id选择器

<!-- #id名{
    样式
} 
作用：选中一个元素
-->
<div id="red">我是红色的</div>

#red{
    color: red;
}
/* 可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的  */

4.6 通用选择器

<!-- 
    *{}
作用：选中所有的标签元素
-->

* {
    color: red;
    font-size:20px;
}

4.4 子代选择器

<!-- A > B {
    样式
} -->

<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>

.food>li {
/*添加边框样式（粗细为2px， 颜色为红色的实线）*/
    border: 2px solid red;
}

4.5 后代选择器

<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>

.food li {
    /*添加边框样式（粗细为1px， 颜色为红色的实线）*/
    border: 2px solid red;
}

4.7 交集选择器

<!-- 
    作用:选中同时满足条件的元素(相交的部分)
    用法:选择器1选择2{}
-->
<h1 class="red">sdaf</h1>
<p class="red">13223</p>
<h2 class="blue">da fasdf </h2>

 h1.blue{
    color: red;
}  

4.8并集选择器(分组选择器)

<!-- 
    作用：同时选中多个元素
    用法：选择器1，选择器2{}
-->

4.9属性选择器

<!-- 
    [属性名] 选择含有指定属性的元素
    用法：
        [属性名=属性值]选中属性名 等于 属性值的元素
        [属性名^=属性值]选中以属性值 开头 的元素
        [属性名$=属性值]选中以属性值 结尾 的元素
        [属性名*=属性值]选中 含有 属性值的元素
-->
    <p title="abc">床前明月光</p>
    <p title="abcdef">疑是地上霜</p>
    <p title="def">举头望明月</p>
    <p>低头思故乡</p>

/* [title] */
 /* [title=abc] */
/* [title^=abc] */
[title$=def]
{
    color: red;
}

4.10 伪类选择器，伪元素选择器

4.10.1

<!-- 
    伪类(不存在的类，特殊的类):描述一个元素的特殊状态
    伪元素
-->
<ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
</ul>

/* ul>li:first-child 选中第一个元素,使用类选择器与位置耦合了 */
/* ul>li:last-child 最后一个元素 */
/* ul>li:nth-child() 选中第n个元素 n,even,odd*/
/* first-of-type  */
ul>li:nth-child(n)
{
    color: red;
}

4.10.2 a标签的伪类

<!-- 
    超链接的伪类(4)
        1.没访问过的链接
        2.访问过的链接
-->
<a href="https:www.baidu123.com">百度</a>
<a href="https:www.baidu.com">百度</a>

/* 从未被访问过 */
a:link{
    color: red;
}
/* 已访问 */
a:visited{
    color: blanchedalmond;
}
/* 悬浮状态 */
a:hover{
    color: green;
}
/* 鼠标长按状态 */
a:active{
    color: hotpink;
}

4.10.3伪元素

<p>lorem</p>

<!-- 
    first-letter
    first-line
    selection 选中的内容

    before:元素的开始
    after:元素的结尾 结合content
-->
p::first-letter{
    font-size: 50px;
}
p::before{
    color: red;
    content: "adaf ads ";
}

4.11 继承

<!-- 
    继承：设置的元素会被其后代继承 
    背景，布局不会被继承
-->

4.12 选择器的优先级

<!-- 
    内联样式 >  1000
    id选择器 >   100
    类选择器 >    10
    元素选择器 >   1
-->
<div id="red" class="blue">dsa fasd f</div>

#red{
    color: red;
}
.blue{
    color: royalblue;
}
div{
    color: yellow;
}