前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

Posted dengl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器相关的知识,希望对你有一定的参考价值。

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

一丶CSS简介

???叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化

????特点:

??????1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠

??????2.使数据和显示分开

??????3.降低网络流量

??????4.使整个网站视觉效果一致

??????5.使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css)

二丶CSS的引入方式

行内样式

### 在body标签内
<!-- 行内样式:优先级最高-->
    <p style="color: darkcyan">唉不穿的覆盖惠健康</p>

内接样式

### 在head标签内
<!--  内接样式  -->
    <style>
        div
            color: darkmagenta;
        
    </style>

外接样式-链接式

### 在head标签内
<!--  外接样式 链接式  -->
    <link rel="stylesheet" href="commons.css">

外接样式-导入式

<!--外接样式 导入式 -->
    <style>
        @import url('commons.css');
    </style>

三丶CSS的基本选择器

???????CSS优先级 : id选择器 > 类选择器 > 元素选择器

标签选择器

???????标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“

body
    color:gray;
    font-size: 12px;


/*标签选择器*/
p
    color: red;
font-size: 20px;

span
    color: yellow;

类选择器

???????所谓类:就是class . class与id非常相似 任何的标签都可以加类,但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类,用空格隔开

<style>
    .lv
     color: green;
     
     .big
         font-size: 40px;
     
     .line
        text-decoration: underline;
     
</style>


<body>
<!-- 公共类    共有的属性 -->
     <div>
         <p class="lv big">段落1</p>
         <p class="lv line">段落2</p>
         <p class="line big">段落3</p>
    </div>
</body>

ID选择器

??????同一个页面中id不能重复。

???????任何的标签都可以设置id ,id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

<style>
    #box
        background:green;
    

    #s1
        color: red;
    

    #s2
        font-size: 30px;
    
</style>

<body>
    <div id="box">娃哈哈</div>
    <div id="s1">爽歪歪</div>
    <div id="s2">QQ星</div>
</body>

通用选择器

<style>
    /*通用选择器:
       如果标签没有设置属性,会被统一进行操作.比如:上色
       所有的标签都会被选中*/
    * 
        color: yellow;
    
</style>

<body>
    <p>段落</p>
    <div>div标签</div>
</body>

四丶CSS的高级选择器

后代选择器用法如下:??

???????使用 空格 表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)

<style>
        /*后代选择器
             使用 '空格' 表示后代选择器
        */
        div span 
            color: peachpuff;
        
</style>      

<body>
    <!--后代选择器
            使用 空格 表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)
    -->
    <div>父选择器
        <span>子代选择器</span>
        <div>
            <p>
                <span>重孙代选择器</span>
            </p>
            <span>孙代选择器</span>
        </div>
    </div>
</body>

子代选择器用法如下:??

???????使用 > 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

<style>
        /*子代选择器
            > 号, 只找子代div标签的span儿子标签
        */
        div>span
            color: darkorange;
        
</style>      

<body>
    <!--子代选择器
            > 号,找到div下的所有的子标签
    -->
    <div>
        <span>div-->span  子标签</span>
        <p>
            <span>span 子标签</span>
        </p>
        <div>
            <span>div-->span 子标签</span>
        </div>
    </div>
</body>

毗邻(兄弟)选择器用法如下:??

<style>
        /*  毗邻(兄弟)选择器
            + 相连 ,所有的邻居应用样式
        */
        span+a
            color: aqua;
        
</style>      

<body>
        <!--邻居选择器
              + 号相连, span标签的 a标签应用样式
        -->
            <div>
                <a href="#">第一个a标签</a>
                <span>span 标签 </span>
                <div>
                    <span>span标签</span>
                    <a href="#">第二个a标签</a>
                </div>
                <div><a href="#">第三个a标签</a></div>
                <a href="#">第四个a标签</a>
                <span >span 标签 </span>
                <a href="#">第五个a标签</a>
            </div>
</body>

弟弟选择器用法如下:??

<style>
    /*  弟弟选择器
            ~ 相连,在div之下的都是弟弟标签,都应用样式,嵌套必须重新定义div,否则无效
      */
        div~span
            color: darkturquoise;
        

</style>      

<body>
    <!--
        弟弟选择器
            ~ 号 ,只找所有的弟弟,在其之下的都是弟弟标签
    -->
        <div>
            哥哥1
            <div>
                <span>这是孙代标签</span>
            </div>
            <span>这是嵌套的弟弟</span>
        </div>
        <hr>
        <span>这是离得近的弟弟标签</span>
        <span>这是离得近的弟弟标签</span>
        <span>这是离得近的弟弟标签</span>
        <hr>
        <div>哥哥2</div>
        <a href="#">123</a>
        <label>这是邻居</label>
        <br>
        <span>这是离得远的弟弟标签</span>
</body>

并集选择器(组合选择器)用法如下:??

???????多个选择器之间使用 逗号 隔开.表示选中的页面中的多个标签.一些共性的元素,可以使用并集选择器

<style>
    /*  并集选择器
        逗号分隔,所有的标签都应用样式
       */
         ul,ol,span
            background-color: darkturquoise;
        
</style>      

<body>
        <!--并集选择器(组合选择器)
             逗号分隔 , 所有的标签都应用样式
        -->
        <ul>
            <li>u-li1</li>
            <ul>
            <li>u-li2</li>
            </ul>
        </ul>

        <ol>
            <li>o-li</li>
        </ol>
        <div>
            <div> <span>span标签</span></div>
        </div>
        <span>123
            <br>
            <span>span标签</span></span>
</body>

交集选择器用法如下:??

??????使用 . 表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.box1.box2那么它表示两者选中之后元素共有的特性。

<style>
        /*交集选择器*/
        div.box1.box2
            background-color: red;
            width: 200px;
            height: 200px;
        
        div.box1
            background-color: green;
            width: 200px;
            height: 200px;
        
</style>      

<body>
    <!--交集选择器
        点( . ) , 应用符合div标签的类选择器的标签
    -->
    <div class="box1 box2">box1box2</div>
    <div class="box2">box1</div>
    <div>aaa
        <div class="box1">这是嵌套的div</div>
    </div>
    <span class="box1 ">span标签</span>

</body>

伪类选择器用法如下:??

??????伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则" LoVe HAte

 <style>

        a:link
            /* 没有浏览过,应用此颜色 */
            color: cornflowerblue;
        
        a:visited
            /* 浏览过后,应用此颜色*/
            color: chartreuse;
        
        a:active
            /* 鼠标点击事件 */
            color: rebeccapurple;
        
        a:hover
            /* 鼠标悬浮事件*/
            color: firebrick;
        
        
        input:focus
          /* 点击聚焦事件*/
            background-color: fuchsia;
        

        div
            width: 100px;
            height: 100px;
            background-color: lightgray;
        
        div:hover
            /* div标签 鼠标悬浮事件 */
            background-color: pink;
        
</style>
<body>
    <!--####    伪类选择器
             a : link visited active
            input: focus
            通用: hover
    -->
    <a href="http://www.xiaohuar.com">这是应用了伪类选择器</a>
    <input type="text">
    <div></div>
</body>

伪元素选择器用法如下:??

??????W3C更多~~更全

<style>
        /* 伪元素选择器   */
        p:first-letter
            /* 在文本的最开头用于第一个字 */
            color: greenyellow;
        
        div:before
          /* 在文本的最开头添加content 内容,并应用样式 */
            content: '$$$';
            color: pink;
        
        span:after
        /* 在文本的最末尾添加content 内容,并应用样式 */
            content: 'abc';
            color: aqua;
        
</style>

<body>
    <!--####    伪元素选择器
        标签:first-letter  在文本的最开头用于第一个字
        标签:before   在文本的最开头添加content 内容,并应用样式
        标签:after    在文本的最末尾添加content 内容,并应用样式
    -->
    <p>你好啊~~,今天吃了吗1</p>
    <div>你好啊~~,今天吃了吗2</div>
    <span>你好啊~~,今天吃了吗3</span>
</body>

属性选择器用法如下:??

??????属性选择器,字面意思就是根据标签中的属性,选中当前的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /* 属性选择器
        语法:属性选择器 [属性]/[属性='值']
            # 单个属性 : input[type='text']
            # 多个属性 : input[type='password'][id='in']
     */
        input[type='text']
            background-color: mediumspringgreen;
        
        input[type='password'][id='in']
            background-color: gold;
        
    </style>
</head>
<body>
<div>
    <input type="text">
    <input type="password" id="in">
</div>
</body>
</html>

以上是关于前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器的主要内容,如果未能解决你的问题,请参考以下文章

前端之css

Java学习总结(二十四)——前端:CSS样式设计(CSS引入,选择器,盒子模型,浮动元素)

前端基础CSS 入门

前端开发 - CSS - 总结

前端开发CSS

前端- css - 总结