web开发简单的css1 样式和选择器

最新推荐文章于 2024-05-01 22:59:38 发布

Sermiscry

最新推荐文章于 2024-05-01 22:59:38 发布

阅读量221

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/Sermisry/article/details/119493234

版权

web 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

文章目录

样式
选择器
总结
属性选择器

样式

内联样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>内联样式</title>
    </head>
    <body>
        <p>I love CSS</p>
        <p style="color: red; font-size: 14px;">I love HTML</p>
        <p>I <span style="border: 2px black dashed; padding: 5px">love</span> books</p>
    </body>
</html>

内部样式表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>内部样式表</title>
        <style>
        h1 {color: red; }
        p {color: green; font-size: 14px;}
        a {color: #ee82ee; border: 2px black dashed; padding: 5px}
        </style>
    </head>
    <body>
        <h1>I love study.</h1>
        <p>what is your hooby?</p>
        <a href="https://www.baidu.com" target="_blank">进入查询</a>
    </body>
</html>

外部样式表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>外部样式表</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>I love study.</h1>
        <p>what is your hooby?</p>
        <a href="https://www.baidu.com" target="_blank">进入查询</a>
    </body>
</html>

h1 {
    color: red;
}
p {
    color: green; 
    font-size: 14px;
    background: yellow;
}
a {
    color: #ee82ee;
    border: 2px black dashed;
    padding: 5px;
}

选择器

<!DOCTYPE html>
<html>
<head>
    <title>css选择器</title>
    <style type="text/css">
        /* 四个基本选择器，分别是通用选择器、元素选择器、类选择器和id选择器 */
        /*通用选择器*/
        * {
            padding: 10px;
            background-color: #D1FEFF;
        }
        /*元素选择器*/
        h2 {
            text-align: center;
        }
        span {
            color: gray;
            padding: 0px;
        }
        img {
            width: 512px;
        }
        /*类选择器*/
        .slogan {
            text-align: center;
            color: #2ebb96;
            font-size: 20px;
        }
        .content {
            text-indent: 2em;
        }
        /*id选择器*/
        #ol {
            color: red;
        }

        /*复合选择器，分别是交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和通用兄弟选择器*/
        /*交集选择器 元素选择器.类选择器/id选择器
        span.content {
            border: thin black solid;
        }*/
        /*后代选择器
        body .content {
            border: thin black solid;
        }*/
        /*子元素选择器*/
        body > .content {
            border: thin black solid;
        }
        /*并集选择器*/
        h2, p, span {
            font-style: italic;
        }
        /*相邻兄弟选择器*/
        .slogan + p {
            color: yellow;
        }
        /*通用兄弟选择器
        .slogan ~ p {
            color: yellow;
        }*/
    </style>
</head>
<body>
    <h2>铲车人，集合！</h2>
    <p class="slogan">异灵术老师</p>
    <p class="content">有人说老师越来越菜了，在这里我澄清一下，老师一直都那么菜。</p>
    <p class="content">有人说<span class="content">戴佳伟</span>是世界第一术士， 我查了一下，是老师自己说的。</p>
    <p class="content">听说叔叔要删游戏退游了，我当场就哭了，这样我心爱的老师不就是全炉石最菜的了吗</p>
    <p class="content">我在直播间看到你们编段子对老师<span id="ol">大放厥词</span>我都要急哭了，我怎么就想不出来这些段子呢。</p>

    <img src="1.png">
    <img src="2.png">
    <img src="3.png">
    <img src="4.png">
    <img src="5.png">
    <img src="6.png">
</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置文本块</title>
    <style type="text/css">
        /*请设置文本块第一行内容的样式*/
        p::first-line {
            background-color: yellow;
            color: green;
        }
        /*请设置文本块第一个字符的样式*/
        div::first-letter {
            background-color: yellowgreen;
            color: black;
        }
        /*请在a元素的前后分别插入文本*/
        a::before {
            content: url(1.png);
        }
        a::after{
            content: " 结尾";
        }
        /*设置用户选中的部分文本样式*/
        ::selection {
            background-color: red;
            color: yellow;
        }
    </style>
</head>
<body>
    <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem consequatur eaque laudantium ut quas eligendi facilis culpa, nam iure ab velit, rerum quae dignissimos ducimus doloremque beatae repudiandae alias fugiat!</div>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus libero sequi debitis porro dolorem, dignissimos dolores corporis, ab dicta ipsam recusandae quia doloremque ex modi non. Qui aliquid autem ullam?</p>
    <a href="http://www.bilibili.com" target="_blank">哔哩哔哩</a>
</body>
</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>善变的元素</title>
    <style type="text/css">
        /*请在此处订制a元素“4个状态”的不同样式*/
        /*爱恨原则：LoVe & HAte*/
        /*链接未被访问的时候*/
        a:link {
            color: red;
        }
        /*链接被访问的时候*/
        a:visited {
            color: pink;
        }
        /*鼠标悬停在链接上方的时候*/
        a:hover {
            color: black;
        }
        /*鼠标摁下链接的那一刻*/
        a:active {
            color: green;
        }

        /*定义div元素的初始样式*/
        div {
            background-color: red;
            color: white;
            padding: 25px;
            text-align: center;
        }
        /*定义当前用户鼠标悬停在div上的样式*/
        :hover {
            background-color: green;
        }
        /*设置button被激活后background的变化*/
        button:active {
            background-color: green;
        }
        /*设置当input元素获得焦点的样式*/
        input#name:focus {
            background-color: cyan;
        }
        input#birth:focus {
            background-color: pink;
        }
    </style>
</head>
<body>
    <a href="https://blog.csdn.net/Sermisry" target="_blank">进入博主Sermiscry的博客</a>
    <div>测试div元素</div>
    <button>测试button元素</button>
    <form>
        <label>你的名字：</label>
        <input type="text" name="name" id="name"><br><br>
        <label>你的生日：</label>
        <input type="date" name="birth" id="birth">
    </form>
</body>
</html>

UI伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        /*设置表单元素的“可用”与“禁用”这两种状态的CSS样式*/
        :enabled {
            outline: 1px solid #51ad51;
        }
        :disabled {
            background-color: #dddddd;
        }
        /*设置选项被选中时的样式*/
        :checked + span {
            background-color: red;
        }
        /*设置必填和选填的样式*/
        :required {
            outline: 3px solid tomato;
        }
        :optional {
            outline: 3px solid blueviolet;
        }
        /*设置默认元素的样式*/
        :default {
            outline: 3px solid darkseagreen;
        }
    </style>
</head>
<body>
    <form>
        <p>
            <label for="enabled">可用：</label>
            <input type="text" name="enabled">
        </p>
        <p>
            <label for="disabled"> 禁用：</label>
            <input type="text" name="disabled" disabled>
        </p>
        <button>可用按钮</button>
        <button disabled>不可用按钮</button>
    </form><br><br>
    <!--设置选项被选中时的样式-->
    <form>
        <input type="radio" name="gender" value="male"><span>男</span><br>
        <input type="radio" name="gender" value="female"><span>女</span><br>
        <hr>
        <input type="checkbox" name="fruit" value="sugarvcane"><span>甘蔗</span><br>
        <input type="checkbox" name="fruit" value="banana"><span>香蕉</span><br>
        <input type="checkbox" name="fruit" value="egg"><span>鸡蛋</span><br>
        <input type="checkbox" name="fruit" value="mango"><span>芒果</span><br>
    </form><br><br>
    <!--设置必选和可选的样式-->
    <form>
        <p>
            <label for="required">必填：</label>
            <input type="text" name="required" required>
        </p>
        <p>
            <label for="potional">选填：</label>
            <input type="text" name="potional">
        </p>
        <button type="submit">提交</button>
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        /*设置用户输入“合法”与“非法”这两种情况对应的CSS样式*/
        input:valid {
            border: 2px solid green;
        }
        input:invalid {
            border: 2px solid red;
        }
        /*设置用户输入“范围内”与“范围外”这两种情况对应的CSS样式*/
        input:in-range {
            border: 2px solid green;
        }
        input:out-of-range {
            border: 2px solid red;
        }
        /*设置用户输入“只读”与“可读可写”这两种情况对应的CSS样式*/
        input:read-only {
            background-color: red;
        }
        input:read-write {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <form>
        <input type="email" placeholder="请输入您的邮箱"><br><br>
        <input type="number" min="0" max="100" value="55"><br><br>
        <p>普通的input输入框：<input type="text"></p>
        <p>只读的input输入框：<input readonly type="text"></p>
        <button type="submit">提交</button>
    </form>
</body>
</html>

结构伪类选择器

:first-of-type 选择器匹配父元素下相同类型的子元素中的第一个。
:first-child 选择器用于匹配父元素下第一个子元素。
:only-of-type 选择器匹配父元素下唯一类型的子元素
:only-child 选择器匹配父元素下唯一子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style type="text/css">
        /*设置根元素的样式*/
        :root {
            background-color: rgba(236, 214, 87, 0.39);
        }
        /*设置空元素的样式*/
        :empty {
            width: 100px;
            height: 20px;
            background-color: turquoise;
        }
        /*设置第一个作为p子元素的span元素的样式
        span:first-child {
            border: 2px solid blue;
        }*/
        /*设置最后一个p元素的样式*/
        p:last-of-type {
            border: 2px solid tomato;
        }
        /*设置元素里面的唯一子元素的标签*/
        span:only-child {
            border: 2px solid blue;
        }
        /*匹配父元素下唯一一个类型的子元素only-of-type*/
        /*这里只能用only-of-type不能用only-child*/
        strong:only-of-type {
            border: 2px solid greenyellow;
        }
    </style>
</head>
<body>
    <p></p>
    <p>It's a test.</p>
    <p></p>
    <p>冰火九重天</p>
    <p>1、<span>happy of fire</span>火之高兴</p>
    <p>2、<span>sorrow of ice</span>冰之哀伤</p>

    <p>The <strong>difference</strong> of <span>only-child and only-of-type</span></p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first-of-type and first-child</title>
    <style type="text/css">
        /*这里用first-child是没有用的，因为下面的第一个元素是span元素*/
        p:first-child {
            border: 2px solid brown;
        }
        /*这里用first-of-type才有作用*/
        p:first-of-type {
            border: 2px solid black
        }
    </style>
</head>
<body>
    <span>My Hobby.</span>
    <p>I love study</p>
    <p>I love playing computer.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置子元素样式</title>
    <style type="text/css">
        /*设置body第3个子元素的样式*/
        p:nth-child(3) {
            border: 2px solid red;
        }
        p:nth-last-child(3){
            border: 2px solid red;
        }
        /*设置body第3个p元素的样式*/
        p:nth-of-type(3) {
            border: 2px solid green;
        }
        p:nth-last-of-type(3){
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <span>八神器</span>
    <p>1、<span>Supreme light</span>至高之光</p>
    <p>2、<span>Implied darkness</span>默示之暗</p>
    <p>3、<span>Theory of karma and fire</span>业火之理</p>
    <p>4、<span>Axe of thunder</span>天雷之斧</p>
    <p>5、<span>Snow gun</span>冰雪之枪</p>
    <p>6、<span>Fire Emblem</span>烈火之剑</p>
    <p>7、<span>Bow of the wind</span>疾风之弓</p>
    <p>8、<span>Battle of the Virgin</span>圣女之仗</p>
</body>
</html>

其他伪类选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>其他伪类选择器</title>
    <style type="text/css">
        /*:target选择器*/
        :target {
            border: 2px solid red;
        }
        /*为不同语言设置不同颜色*/
        :lang(zh) {
            background-color: red;
        }
        :lang(en) {
            background-color: green;
        }
    </style>
</head>
<body>
    <!--插入页面内锚点-->
    <p><a href="#target2">Jump to target2</a></p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure maxime harum mollitia magnam repellendus corrupti eaque deleniti omnis cum laudantium earum beatae tenetur dignissimos velit, libero est amet nemo sapiente!</p>
    <p>这里是一堆文字</p>
    <p id="target1">Target1 Test</p>
    <p><a href="#target2">Jump to target2</a></p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi est hic aliquam, porro, ab reiciendis quod nihil veritatis repellat deleniti sint nam, rem quaerat qui quasi minus facilis odit quibusdam.</p>
    <p>这里也是一堆文字</p>
    <p id="target2">Target2 Test</p>
    <p><a href="#target1">Back to target1</a></p>
    <!--lang选择器-->
    <p lang="zh">我爱中国！</p>
    <p lang="en">I love China!</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>not</title>
    <style type="text/css">
        /*使用否定选择器*/
        span {
            color: green;
        }
        :not(span){
            color: red;
        }
    </style>
</head>
<body>
    <span>DEMO</span>
    <p lang="zh">我爱中国！</p>
    <p lang="en">I LOVE CHINA!</p>
</body>
</html>

总结

CSS引入伪类和伪元素的概念是为了格式化文档树以外的信息
伪类用于当已有元素处于的某个状态时，为其添加样式
伪元素用于创建一些不在文档树的元素，为其添加样式

可以理解为伪元素相当于一个span元素
伪类相当于p元素里面多了一个class

属性选择器

名称	作用
class=“Wood”	全字匹配
^	class里面Wood开头就能被选中
$	class里面以Wood结束的能被选中
*	class里面包含Wood子字符串能被选中
~	class里面有多个属性值，其中一个是Wood
\|	class里面第一个字符串是Wood，后面有连字符“-”

并不是只有class，其他元素也可以，比如title="var"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style type="text/css">
        /*演示属性选择器*/
        li[class~="Wood"] {
            background-color: red;
        }
        /* 
        并不是只有class，其他元素也可以
        li[class="Wood"]li元素里面的
        class="Wood" 全字匹配
        ^ class里面Wood开头就能被选中
        $ class里面以Wood结束的能被选中
        * class里面包含Wood子字符串能被选中
        ~ class里面有多个属性值，其中一个是Wood
        | class里面第一个字符串是Wood，后面有连字符“-”
        */
    </style>
</head>
<body>
    <p>五行学说最早在道家学说中出现。它强调整体概念，描绘了事物的结构关系和运动形式。</p>
    <p>五行相生:金生水，水生<span class="Wood">木</span>，<span class="Wood">木</span>生火，火生土，土生金</p>
    <ul>
        <li class="Wood-Fire"><span class="Wood">木</span>生火:因为火以<span class="Wood">木</span>料作燃料的材料，<span class="Wood">木</span>烧尽，则火自动熄灭。
        <li class="Fire-Earth">火生土:因为火燃烧物体后，物体化为灰烬而灰烬便是土</li>
        <li class="Earth-Metal">土生金:因为金蕴藏于泥土石块之中，经冶炼后才提取黄金</li>
        <li class="Metal-Water">金生水:因为金若被烈火燃烧，便溶为液体，液体属水;水要依靠铁器来开导疏通</li>
        <li class="Mater-Wood">水生<span class="Wood">木</span>:因为水灌溉树<span class="Wood">木</span>，树<span class="Wood">木</span>便能欣欣向荣</li>
    </ul>
    <p>五行相克:金克<span class="Wood">木</span>，<span class="Wood">木</span>克土，土克水，水克火，火克金</p>
    <ul>
        <li class="water-Fire">水克火:因为火遇水便熄灭</li>
        <li class="Fire-Metal">火克金:因为烈火能溶解金属</li>
        <li class="Metal-Wood">金克<span class="Wood">木</span>:因为金属铸造的割切工具可锯毁树<span class="Wood">木</span></li>
        <li class="Wood-Earth"><span class="Wood">木</span>克土:因为树根苗的力量强大，能突破土的障碍</li>
        <li class="Earth-Water">土克水:因为土能防水</li>
    </ul>
</body>
</html>

Sermiscry

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web开发简单的css1 样式和选择器

文章目录样式内联样式内部样式表外部样式表样式内联样式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>内联样式</title> </head> <body> <p>I love CSS</p> <p style="colo
复制链接

扫一扫