快速入门CSS - 喵喵知识园

<style>
       
        p{color: lawngreen} //设置p标签的
        body{color: red} //设置整个body体的颜色
        *{color: blueviolet} //设置*所有类型的设置
        .h5{color: #66afe9} //类别选择器 点为.设置class类型的选择器

    </style>

可以同时写多个相同的class值
pink{text-align: center;color: pink}

我是粉的

派生选择器与属性选择器

  <!--后代选择器-->
<style type="text/css">
    ul em {color: red}
    ul b{color: pink}

body>p{font-size: 100px} //子元素选择器 只能找到他的下属 属性。

相邻兄弟选择器
 body> ul+ol{text-align: center;}//给ol

<ul>
    <li>星期一</li>
    <li><em>星期<b>二</b></em></li>
    <li>星期三</li>
</ul>

<ol>
    <li>天气晴朗</li>
    <li>下大雨</li>
    <li>下大雪</li>

属性选择器

img src="https://s1.ax1x.com/2020/08/11/aLPmMq.png" alt="aLPmMq.png" border="0" />

<a href="js.html"> </a>
[href='js.html']{color: red;}

CSS中伪类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style type="text/css">
        a:link{color: red;}
        a:visited{color: green}
        a:hover{background: pink}
        a:active{color: #9d261d}
        input:focus{background: blue;}
        p:first-child{font-size: 40px}

    </style>
</head>
<body>
    <!--锚伪类-->
    <!--

    :link未被访问的连接添加样式
    ：visited向已被访问的连接添加样式
    :hover向鼠标悬停时向元素添加样式
    :active向被激活的元素添加样式

    ：focus向拥有键盘输入焦点的元素添加样式
    ：first-child 向第一个子元素添加样式

    -->
    <div>
        <p>大家好我是阿giao</p>
        <p>大家好我是阿giao</p>
        <a href="#">php中文网</a>
        <form>
            输入框：<input type="text" name="">
        </form>
    </div>
</body>
</html>

评论