CSS选择器

最新推荐文章于 2024-07-30 10:27:19 发布

HHYY Starry

最新推荐文章于 2024-07-30 10:27:19 发布

阅读量239

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_58090164/article/details/121697879

版权

什么是CSS？

1.CSS 指层叠样式表 (Cascading Style Sheets)

2.样式定义如何显示 HTML 元素

3.样式通常存储在样式表中

4.把样式添加到 HTML 中，是为了解决内容与表现分离的问题

5.外部样式表可以极大提高工作效率

6.外部样式表通常存储在 CSS 文件中

7.多个样式定义可层叠为一个

样式解决了一个很大的问题

HTML 标签原本被设计为用于定义文档内容，如下实例：

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

CSS 实例

CSS声明总是以分号(;)结束，声明总以大括号({})括起来:

p {color:red;text-align:center;}

CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":


#para1
{
    text-align:center;
    color:red;
}

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。


.center {text-align:center;}

所有的 p 元素使用 class="center" 让该元素的文本居中:


p.center {text-align:center;}

外部样式表


<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表


<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式


<p style="color:sienna;margin-left:20px">这是一个段落。</p>

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式


<head>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
</head>
<body>
    <h3>测试！</h3>
</body>

多彩诗句如下图所示：

<style>
        * {
            list-style: none;
        }
        
        .conten {
            align-items: center;
            text-align: center;
            font-weight: bold;
        }
        
        h1>a {
            color: blue;
            font-size: 15px;
        }
        
        .a1 {
            color: blue;
            font-size: 20px;
        }
        
        .a1 a {
            color: green;
            font-size: 15px;
        }
        
        .a2 {
            color: red;
            font-size: 20px;
        }
        
        .a2 a {
            color: pink;
            font-size: 10px;
        }
        
        .a3 {
            color: blue;
            font-size: 20px;
        }
        
        .a3 a {
            font-size: 10px;
        }
        
        .a4 {
            color: green;
            font-size: 20px;
        }
        
        .a4 a {
            color: red;
            font-size: 15px;
        }
        
        .a5 {
            color: blue;
            font-size: 20px;
        }
        
        .a6 {
            color: green;
            font-size: 20px;
        }
        
        .a7 {
            color: blue;
            font-size: 20px;
        }
        
        .a8 {
            color: red;
            font-size: 20px;
        }
        
        .a8 a {
            color: red;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div class="conten">
        <h1>沁园春·长沙<a></a></h1>
        <p class="a1">独立寒秋， <a>湘江北去</a>，橘子洲头。</p>
        <p class="a2">看万山红遍，层林尽染， <a>漫江碧透</a>，百舸争流。</p>
        <p class="a3">鹰击长空，<a>鱼翔浅底</a>，万类霜天竞自由。</p>
        <p class="a4"><a>怅寥廓</a>，问苍茫大地，谁主沉浮？</p>
        <p class="a5">携来百侣曾游，忆往昔峥嵘岁月稠。</p>
        <p class="a6">恰同学少年，风华正茂；书生意气，挥斥方遒。</p>
        <p class="a7">指点江山，激扬文字，粪土当年万户侯。</p>
        <p class="a8">曾记否，到中流击水，浪遏<a>飞&nbsp;&nbsp;&nbsp;舟&nbsp;&nbsp;？</a></p>
    </div>

</body>

摆弄形状如下图所示

<!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>
    <!-- 我们应该在此<head>标记中链接什么文件? -->
    <link rel="stylesheet" href="./assets/css/style.css">
</head>

<body>
    <div id="container">
        <div id="first-row" class="row">
            <div class="square"></div>
            <div class="circle green"></div>
            <div class="square"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
        </div>

        <div id="second-row" class="row">
            <div class="circle"></div>
            <div class="square fancy"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="circle fancy green"></div>
        </div>

        <div id="third-row" class="row">
            <div class="circle"></div>
            <div class="circle green"></div>
            <div class="circle"></div>
            <div class="square fancy"></div>
            <div class="square"></div>
        </div>

        <div id="fourth-row" class="row">
            <div class="square"></div>
            <div class="circle"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>

        <div id="fifth-row" class="row">
            <div class="circle"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="square"></div>
            <div class="circle green"></div>
        </div>
    </div>
</body>

</html>

body {
    font-family: "Karla";
    background: #edeae5;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0px;
    text-align: center;
}

a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
    transition: 0.4s;
}

a:hover {
    color: rgba(0, 0, 0, 0.7);
}

div {
    transition: linear 0.2s;
}

#container {
    width: 480px;
    height: 480px;
    position: absolute;
    top: calc(50% - 240px);
    left: calc(50% - 240px);
}

.circle {
    width: 60px;
    height: 60px;
    background: white;
    display: inline-block;
    margin-right: 30px;
    border-radius: 50%;
}

.square {
    width: 60px;
    height: 60px;
    background: #e67e22;
    display: inline-block;
    margin-right: 30px;
}

.row {
    margin-bottom: 30px;
}

.green {
    background: #78c272;
}

.fancy {
    border: 3px inset rgba(74, 74, 74, 0.25);
    width: 54px;
    height: 54px;
}

#third-row .circle {
    background: #de6868;
}

.circle.fancy {
    border-style: dotted;
}

:first-child.circle {
    opacity: 0;
}

.green,
.fancy {
    background: #6392c0;
}

:hover.circle {
    opacity: 0.5
}

#second-row :hover.circle {
    transform: scale(1.25)
}

百度首页如下图：

<!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>
        * {
            list-style: none;
        }
        
        .nav {
            margin-top: 20px;
            margin-left: 20px;
        }
        
        .nav a {
            color: black;
            font-family: 宋体;
            font-weight: bold;
            text-decoration: none;
        }
        
        .c:link {
            color: blue;
        }
        
        .c:visited {
            color: black;
        }
        
        .c:hover {
            color: blue;
            font-size: 150%;
            text-decoration: none;
        }
        
        .logo {
            text-align: center;
        }
        
        .con {
            text-align: center;
        }
        
        .text {
            height: 40px;
            width: 400px;
        }
        
        .btn {
            width: 100px;
            height: 30px;
            background-color: blue;
            color: white;
        }
        
        .map {
            margin-top: 30px;
        }
        
        .map a {
            text-decoration: none;
        }
        
        .footer {
            margin-top: 30px;
        }
        
        .footer a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="nav"><a href="#" class="c">新闻</a>&nbsp;&nbsp;&nbsp;
        <a href="#" class="c">网页</a>&nbsp;&nbsp;&nbsp;
        <a href="#" class="c">地图</a>&nbsp;&nbsp;&nbsp;
        <a href="#" class="c">直播</a>&nbsp;&nbsp;&nbsp;
        <a href="#" class="c">视频</a>&nbsp;&nbsp;&nbsp;
        <a href="#" class="c">贴吧</a>&nbsp;&nbsp;&nbsp;
        <a href="#" class="c">学术</a>&nbsp;&nbsp;&nbsp;
        <a href="#" class="c">更多</a>
    </div>
    <div class="logo"><img src="./images/bdlogo.gif" </div>
        <div class="con">
            <input type="text" class="text">&nbsp;<input type="submit" value="百度一下" class="btn" />
        </div>
        <div class="map">
            <img src="./images/ic.jpg"><a href="">百度地图带你吃喝玩乐，全心全意为人民服务</a>
        </div>
        <div class="footer">
            <span><a href="">把百度设为主页</a></span>
            <span><a href="">安装百度浏览器</a></span>
            <br/>
            <span><a href="">加入百度推广</a></span>
            <span>|</span>
            <span><a href="">搜索风云榜</a></span>
            <span>|</span>
            <span><a href="">关于百度</a></span>
            <span><a href="">|</a></span>
            <span><a href="">About Badidu</a></span>
            <P>&copy;2013 Baidu <a href="">使用百度前必读</a> 京ICP证030173号</P>
        </div>

</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>
</head>
<style>
    .con {
        width: 800px;
        height: 750px;
        background-color: #e0e0e1;
        margin: 20px auto auto;
    }
    
    .con_left {
        width: 200px;
        height: 700px;
        background-color: #5b5b5e;
        padding: 0;
        float: left;
        text-align: center;
    }
    
    .con_center {
        width: 595px;
        height: 330px;
        float: left;
        margin-left: 0.3em;
    }
    
    .con_right {
        width: 595px;
        height: 370px;
        float: left;
        margin-left: 0.3em;
    }
    
    .logo {
        color: aliceblue;
        font-size: 70px;
        font-weight: 700;
        margin-top: 10px;
    }
    
    .cat {
        color: aliceblue;
        margin-top: 10px;
        font-size: 15px;
    }
    
    .ul {
        margin-top: 50px;
    }
    
    .img {
        float: left;
        padding: 5px;
    }
    
    p {
        font-weight: bold;
        color: blueviolet;
    }
</style>

<body>
    <div class="con">

        <div class="con_left">
            <div class="logo">logo</div>
            <div class="cat">短毛猫摄影专辑</div>
            <div class="ul">
                <dl>
                    <dt>网站首页</dt>
                    <dt>咨询中心</dt>
                    <dt>产品展示</dt>
                    <dt>关于我们</dt>
                    <dt>联系我们</dt>
                </dl>
            </div>
        </div>
        <div class="con_center">
            <img src="images/banner.jpg" width="595" height="330" alt="banner">
        </div>
        <div class="con_right">
            <p>当前位置：首页>关于我们</p>
            <hr/>
            <img class="img" src="images/01.jpg" width="214" height="140">
            <p>
                水墨（风格）摄影和传统的水墨画一样，现市面上出现的水墨摄影作品，按题材，可以分为风景和花鸟，对应国画中的山水画和花鸟画；按手法和意境，可以分为抽象和具象，对应国画中的写意和工笔。 水墨风格的摄影照片虽然免不了使用Photoshop等软件的后期加工，但是这并不意味着可以任意扭曲原照片。全息摄影是指一种记录被摄物体反射波的振幅和位相等全部信息的新型摄影技术。普通摄影是记录物体面上的光强分布，它不能记录物体反射光的位相信息，因而失去了立体感。全息摄影采用激光作为照明光源，并将光源发出的光分为两束，一束直接射向感光片，另一束经被摄物的反射后再射向感光片。人眼直接去看这种感光的底片，只能看到像指纹一样的干涉条纹，但如果用激光去照射它，人眼透过底片就能看到原来被拍摄物体完全相同的三维立体像。一张全息摄影图片即使只剩下一小部分，依然可以重现全部景物。全息摄影可应用于工业上进行无损探伤，超声全息，全息显微镜，息摄影存储器,全息电影和电视等许多方面。
            </p>
        </div>

    </div>

</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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .nav {
        width: 100%;
        height: 100%;
    }
    
    .nav:after {
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    
    .nav_button {
        width: 100%;
        line-height: 80px;
    }
    
    button {
        background-color: blue;
        border: none;
        width: 8em;
        height: 3em;
        margin-left: 15px;
    }
    
    a {
        text-decoration: none;
        color: white;
    }
    
    button:hover {
        background: blueviolet;
        text-decoration: none;
    }
    
    span {
        display: block;
        color: #333;
        text-align: center;
        background: #f1f1f1;
        padding: 10px 0px;
    }
    
    .img_link {
        width: 350px;
        height: 300px;
        float: left;
        margin-left: 20px;
        margin-top: 10px;
    }
    
    span:hover {
        background: purple;
        text-decoration: none;
    }
</style>

<body>
    <div class="nav">
        <div class="nav_button">
            <button type="button"><a href="">艺术摄影</a></button>
            <button type="button"><a href="">婚纱摄影</a></button>
            <button type="button"><a href="">纪实摄影</a></button>
            <button type="button"><a href="">儿童摄影</a></button>
            <button type="button"><a href="">摄影器材</a></button>
            <button type="button"><a href="">创意摄影</a></button>
        </div>
        <div class="img">
            <div class="img_link">
                <a href="">
                    <img src="images/objpic01.jpg" alt="摄影艺术" width="350" height="250">
                    <span>摄影艺术</span>
                </a>
            </div>
            <div class="img_link">
                <a href="">
                    <img src="images/objpic02.jpg" alt="摄影艺术" width="350" height="250">
                    <span>摄影艺术</span>
                </a>
            </div>
            <div class="img_link">
                <a href="">
                    <img src="images/objpic03.jpg" alt="摄影艺术" width="350" height="250">
                    <span>摄影艺术</span>
                </a>
            </div>
            <div class="img_link">
                <a href="">
                    <img src="images/objpic04.jpg" alt="摄影艺术" width="350" height="250">
                    <span>摄影艺术</span>
                </a>
            </div>
            <div class="img_link">
                <a href="">
                    <img src="images/objpic05.jpg" alt="摄影艺术" width="350" height="250">
                    <span>摄影艺术</span>
                </a>
            </div>
            <div class="img_link">
                <a href="">
                    <img src="images/objpic06.jpg" alt="摄影艺术" width="350" height="250">
                    <span>摄影艺术</span>
                </a>
            </div>
            <div class="img_link">
                <a href="">
                    <img src="images/objpic07.jpg" alt="摄影艺术" width="350" height="250">
                    <span>摄影艺术</span>
                </a>
            </div>
            <div class="img_link">
                <a href="">
                    <img src="images/objpic08.jpg" alt="摄影艺术" width="350" height="250">
                    <span>摄影艺术</span>
                </a>
            </div>
            <div class="img_link">
                <a href="">
                    <img src="images/objpic09.jpg" alt="摄影艺术" width="350" height="250">
                    <span>摄影艺术</span>
                </a>
            </div>
        </div>
    </div>
</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>Document</title>

    <style>
        p {
            /* font-family: Cambria, "Microsoft Yahei", Cochin, Georgia, Times, 'Times New Roman', serif; */
            /* font-size:32px; */
            /* font-weight: bold; */
            /* 100-900 */
            /* font-weight:500; */
            /* italic 斜体   normal 正常 */
            /* font-style: normal; */
            /* 1.font style
                2.fonot weight
                3.font size 
                4.font family
             */
            font:italic bolder 18px  "Microsoft Yahei";
            /* 字体颜色 */
            /* 1.英文单词
                2.十六进制
                3.rgb()
            */
            color: #cccccc;
            /* color: rgb(130, 184, 247); */
         /* 继承 */
         /* 1.文本的属性   text-
            2.字体的属性    font-
            3.list-style    列表样式
          */
            text-align: center;

            text-indent: 1em;
        }
        /* 块级元素，子元素的宽度  默认为父元素的宽度 */
        .one {
            /* height: 300px;
            width: 200px; */
            /* 文本缩进 */
            /* text-indent: 2em; */
        }

        a {
            text-decoration:line-through;
            color: steelblue;
        }

        header{
            text-align: center;
            line-height: 30px;
        }

        div {
            /* height: 100px;
            width: 150px; */
        }

        .one {
            height: 100px;
            width: 150px;
            float: left;
            background-color: rgb(4, 172, 12);
        }

        .two {
            height: 100px;
            width: 150px;
            float: left;
            background-color: red;
        }

        .three{
            height: 100px;
            width: 150px;
            float: left;
            background-color: yellow;
        }
        .four {
            /* width: auto; */
            height: 100px;
            background-color: #cccccc;
        }

        .parent {
            /* overflow: hidden; */
            /* content: "";
            display: block;
            height: 0;
            clear: both; */
            background-color: rgb(121, 235, 255);
        }

        .clearFix::after{
            content: "";
            display: block;
            height: 0;
            clear: both;
        }

        .new {
            /* height: 0;
            clear: both; */
        }
    </style>
</head>

<body>

    <!-- 字体样式 -->
    <!-- 
        font-family   字体样式  微软雅黑  Microsoft Yahei、宋体,
        可以连续添加几个，会根据顺序读取，若当前浏览器没有安装该字体，会读取下一个  
        font-size 字体大小  一般默认大小为16
        font-weight  字体粗细  normal正常 bold粗  bolder特粗 lighter细体，100-900 数字  不加单位
        font-style  normal  italic 斜体
        font: 
     -->
    <!-- <p>这是一个p标签
        <span>123</span>
    </p>
    <div class="one">
        这是父元素的div
    </div>
    <div class="two">这是子元素的div</div>

    <a href="#">这是我们的a标签</a>
    <header>这是头部</header> -->

    <!-- 文本颜色 -->
    <!-- 文本对齐 -->
    <!-- 拓展  元素转换
    display:block; 设置为块级元素
    inline -  设置为行内元素
    inline-block   设置为行内块元素
    -->
    <!-- 文本下划线 -->
    <!-- 下划线  删除线 上划线 -->
    <!-- overline  line-through -->
    <!-- 文本缩进 -->
    <!--  px   em   , em相当于当前元素1个字符的像素大小 -->

    <!-- 行间距 -->
    <!-- line-height -->

    <!-- 浮动 -->
    <!-- 1.脱离标准文档流，
        下面文档流的内容会顶上 占有它原本的位置
        2.不会覆盖文字。会覆盖其他内容
        3.一浮全浮
    
    -->
    <div class="parent clearFix">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
        <!-- <div class="new"></div> -->
    </div>
    
    <div class="four">four</div>

    <!-- 清除浮动 -->
    <!-- 额外标签法 -->
    <!-- 给父元素overflow：hidden -->
    <!-- 父级添加after伪元素 -->
    <!-- 父级添加双伪元素    用的最多 -->

</body>

</html>