CSS简介及常用选择器

DW超

已于 2022-05-09 21:20:43 修改

阅读量243

点赞数

文章标签： css webview html

于 2022-05-09 21:15:49 首次发布

本文链接：https://blog.csdn.net/weixin_48678713/article/details/124673415

版权

CSS概述： css是用来美化网页的，在html中定义元素的样式，能够提高工作效率
内部样式

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部</title>
    <style>
        /*内部样式*/
        h2{
            color: aqua;
        }
    </style>
</head>
<body>
    <h2 style="color: blueviolet;">秋水共长天一色</h2>
    <!--修改字体的样式-->
    <h2>秋水共长天一色</h2>
    <h2>坐看云淡风轻</h2>
</body>
</html>

代码运行方式是自上而下，从左网友的第一行文字输出是运行的行内style 后面两行style是定义在head里面的内容，所以会呈现出不同效果

外部样式

外部样式，就是在一个格外的css文件中定义标签的样式，定义好后直接在html文件中引用就可

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式</title>
    <link rel="stylesheet" href="demo.css"> <!--将内部内容与外部的css文件关联-->  
</head>
<body>
    <h2>555</h2>
    <h2>最是人间留不住</h2>
    <h2>好人心</h2>
    <h2 id="t01">秋水共长天一色</h2>
</body>
</html>

可看到在html中并没有直接定义标签h2 而是引用的外部css文件

类选择器

类选择器用于给同样的标签定义不一样的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>/*自己可以定义类  并且为它设定属性*/
        p{
            color: aquamarine;
        }
        .dwc{
            color: blanchedalmond; font-size: 40px;
        }
    </style>
</head>
<body>
    <p class="dwc">两岸猿声啼不住</p>
    <p>轻舟已过万重山</p>
    <p class="dwc">壹亿</p>
</body>
</html>

子选择器和后代选择器

子选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子选择器</title><!--只对选择器的子类有效-->
    <style>
        ul > a{
            text-decoration: none;
            color: rgb(48, 110, 172);
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <ul>
        <a href="">点我！</a>
        <li><a href="">点我</a></li>
        <li><a href="">点我</a></li>
        <li><a href="">点我</a></li>
        <a href="">点我！</a>
    </ul>
</body>
</html>

可看出子选择器只会对子类起作用对子类的子类是不会起作用的

后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title><!--只对选择器内的所有子类都有效-->
    <style>
        ul  a{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <ul>
        <a href="">点我！</a>
        <li><a href="">点我</a></li>
        <li><a href="">点我</a></li>
        <li><a href="">点我</a></li>
        <a href="">点我！</a>
    </ul>
</body>
</html>

后代选择器会对父类的所有下级都起作用子类选择器和后代选择器是类似的写法基差一个>

通配符

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符</title>
    <style>
        *{  /*对所有内容都有用*/
            color: aqua;
            background-color: bisque;
            font-size: 30px;
            font-style: normal;
        }
    </style>
</head>
<body>
    <ul>
        <li>333</li>
        <li>666</li>
        <li>111</li>
        <li>999</li>
        <li>111</li>
    </ul>
    <p>999</p>
    <h1>999</h1>
</body>
</html>

通配符会对网页中所有标签都起作用有整体的规范作用

伪类

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>  
    <style>
        /*伪类  用于定义元素的特殊状态*/
        a:link{
            color: aqua;
        }
        a:visited{
            color: brown;
        }
        a:hover{
            color: blue;
        }
        a:active{
            color: #64db8ccd;
        } 
    </style>
</head>
<body>
    <a href="https://www.runoob.com/css/css-link.html">这是个连接！</a>
</body>
</html>

默认状态下

鼠标悬浮在文字处时

鼠标点击文字时

注意： a:hover 必须在 a:link 和 a:visited 之后 a:active 必须在 a:hover 之后需要严格按顺序才能看到效果。

盒子模型

盒子模型本质上是一个盒子，封装周围的HTML元素，包括边距、边框、内容样式等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子</title>
    <style>
        *{
            font-size: 20px;
        }
        div{
            float: left;
            height: 200px;
            width: 200px;
            margin: 30px;
            padding: px;
            border: 1px solid rgb(30, 156, 224);
            text-align: center;
            line-height: 200px;
            color: rgb(224, 95, 226);
        }
    </style>
</head>
<body>
    <div id="box01">1</div>
    <div id="box01">2</div>
    <div id="box01">3</div>
</body>
</html>

在此代码中 float是浮动样式 height是盒子高度 width是盒子宽度 margin是外边距 padding是内边距 border是盒子的边框样式 text-align: center; 是让文本居中

DW超

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS简介及常用选择器

CSS概述： css是用来美化网页的，在html中定义元素的样式，能够提高工作效率内部样式<!DOCTYPE html><html lang="zn-CH"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi.
复制链接

扫一扫