CSS基础以及选择器

已于 2022-01-24 14:45:31 修改
阅读量336 收藏
点赞数 1
分类专栏： 前端HTML与CSS 文章标签： html css
于 2022-01-21 13:28:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45799465/article/details/122617889
版权

目录

一、CSS的引入方式

（一）、行内样式

（二）、内部样式

（三）、外链式。

 二、css常用的修饰属性

三、css选择器

（一）、类型选择器(标签选择器) 

 （二）、calss选择器(类选择器)

(三)、ID选择器

 （四）、通配符

（六）、群组选择器

 （七）、后代选择器(包含选择器)

（八）、子选择器

（九）相邻兄弟选择器

（十）、通用兄弟选择器

（十一）、属性选择器

（十二）、伪类选择器

1，结构伪类

 2，UI状态伪类

3，否定伪类

4，目标伪类

四、选择器的权重问题

一、CSS的引入方式

（一）、行内样式

<标签   style="属性:属性值; 属性:属性值;"></标签>

仅做了解,缺点是把HTML结构和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>Document</title>
</head>
<body>
    <!-- 作为属性值直接写入 -->
    <div style="width:200px;height:200px;">我是行内样式</div>
</body>
</html>

（二）、内部样式

  • 先在body里面创建想要修饰的对象，<div></div>。
  • 再在head里面创建<style type="text/css"></style>。
  • 最后在style里面书写相关的修饰过程，语法 ：    修饰的对象{修饰的过程}   选择器(选择符){声明分为 属性:属性值;}

代码展示：

<!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>
    <!--在head里书写style样式-->
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 创建修饰对象 -->
    <div>我是行内样式</div>
</body>
</html>

（三）、外链式。

  • 适合整站开发或者比较长的页面
  • 先在body里面创建想要修饰的对象，<div></div>。
  • 在css文件里面书写想要修饰的过程，语法     修饰的对象{修饰的过程}
  • 通过link或者import把HTML文件和CSS文件产生关联。
  1. <link  rel="stylesheet" href=""  type="text/css"/>本质上看  link是HTML标签，加载顺序,link是HTML结构和CSS的样式同时进行加载的。
  2. <style>@import  url();</style>，本质上看  import是CSS的一种语法书写，加载顺序,import引入的CSS是等HTML结构全部加载完毕之后,再加载CSS,在网速比较慢的时候,有闪烁效果,用户体验不好，兼容性  import在IE5以下的浏览器不兼容。

代码展示： 

 二、css常用的修饰属性

宽度width
高度height
背景颜色background
颜色color
文字大小font-size

三、css选择器

（一）、类型选择器(标签选择器) 

 直接写div{}  p{}这样的,叫做类型选择器(元素选择器/标签选择器) 让{}前面指定的所有都执行样式,但是没有区分效果，想改变某个元素的默认样式时或者统一文档某个元素的显示效果时。

语法：  标签{属性：属性值；}   例如：div{width：200px；}

<!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">
    <link rel="stylesheet" href="./css基础.css">
    <title>Document</title>
    <style>
        /* 标签选择器 */
        div{
            width: 200px;
        }
    </style>
</head>
<body>
    
    <div>盒子</div>
</body>
</html>

 （二）、calss选择器(类选择器)

 想要区分某个标签的时，比如想要区分2个div。

语法：<标签 class=“box”></div>   .Class名字{属性：属性值；}  例如：.box{width：300px；}

<!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">
    <link rel="stylesheet" href="./css基础.css">
    <title>Document</title>
    <style>
        /* class选择器 */
        .box{
            width: 200px;
        }
    </style>
</head>
<body>
    
    <div class="box">盒子</div>
</body>
</html>

(三)、ID选择器

 想要区分某个标签时使用，比如想要两个div时使用。

语法： <标签 id=“box1”></div>    #ID名字{ 属性：属性值；}  例如：#box1{width:200px;}

ID属性具有唯一性，属性值只能为一个。

注意点：

  1. id里面的属性值命名的时候,不能数字开头
  2. id里面的属性值命名的时候,不建议使用中文
  3. id里面的属性值命名的时候,不建议特殊符号()  %等不行  可以用-或者_符号
  4. id的属性值只能是1个,可以重复使用

代码展示：

<!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">
    <link rel="stylesheet" href="./css基础.css">
    <title>Document</title>
    <style>
        /* ID选择器 */
        #box{
            width: 200px;
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    
    <div id="box">盒子</div>
</body>
</html>

 （四）、通配符

想让所有的标签同时改变样式的时候。

语法： *{属性：属性值；}  例如： *{margin:0;padding:0;} 清除所有标签自带的间距。

代码展示：

<!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">
    <link rel="stylesheet" href="./css基础.css">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    
    <div>盒子</div>
</body>
</html>

（六）、群组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。整体没有权重的说法,单独的看自己的权重。

语法:某某1,某某2,某某3{}

代码展示：

<!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">
    <link rel="stylesheet" href="./css基础.css">
    <title>Document</title>
    <style>
        h1,h2,h3,h4,h5,h6{
            width: 100px;
            height: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
    
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
</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">
    <link rel="stylesheet" href="./css基础.css">
    <title>Document</title>
    <style>
        /* h1下的所有p,包括儿子p，孙子p... */
       h1 p{
           width: 200px;
           height: 200px;
       }
    </style>
</head>
<body>
    
    <h1>
        <p>
            <p></p>
        </p>
    </h1>


</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">
    <link rel="stylesheet" href="./css基础.css">
    <title>Document</title>
    <style>
        /* h1下的p,只包括儿子p */
       h1>p{
           width: 200px;
           height: 200px;
       }
    </style>
</head>
<body>
    
    <h1>
        <p>
            <!-- <p></p> -->
        </p>
    </h1>


</body>
</html>

（九）相邻兄弟选择器

想要修饰某个元素后面紧挨着的元素，权重是算和。

语法：某某1+某某2{}

代码展示： 

<!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">
    <link rel="stylesheet" href="./css基础.css">
    <title>Document</title>
    <style>
        /* h1旁边的兄弟h2 */
       h1+h2{
           width: 200px;
           height: 200px;
           background-color: red;
       }
    </style>
</head>
<body>
    <h1></h1>
    <h2></h2>
</body>
</html>

（十）、通用兄弟选择器

想要修饰某个元素后面所有的元素，权重是算和。

语法：父元素~子元素{}

（十一）、属性选择器

标签[属性]{}选择到该标签且有指定属性的变
标签[属性="属性值"]{}选择到该标签且有指定属性且属性值必须是一模一样的变
标签[属性^="属性值"]{}选择到该标签且有指定属性且属性值是指定开头的变
标签[属性$="属性值"]{}选择到该标签且有指定属性且属性值是指定结尾的变

代码展示：

（十二）、伪类选择器

1，结构伪类

以-child结尾
:first-child{}某个父元素下面的第一个子元素变
:last-child{}某个父元素下面的最后一个子元素变
:nth-child(){}把n=0开始往里面计算就可，如（2n，2n+1.-n+1等）
:nth-last-child(){}倒数第几个孩子
:only-child{}只有一个子元素的的时候

以-type结尾的
:first-of-type{}某个父元素下面的同类的第一个子元素变
:last-of-type{}某个父元素下面的同类的最后一个子元素变
:nth-of-type(){}把n=0开始往里面计算就可
:nth-last-of-type(){}倒数第几个同类孩子
:only-of-type{}只有一个同类子元素的的时候

 2，UI状态伪类

:checked{}设置表单选中之后的样式
:disabled{}禁用之后的样式
:enabled{}可用的样式

 主要用于input表单。

3，否定伪类

:not(里面书写否定的条件){}

4，目标伪类

:target{}主要跟锚点一起使用,修改的是id所在对象的样式

四、选择器的权重问题

当给同一个标签,书写很多样式的时候,可能会发生冲突,发生冲突之后解析规则如下：

选择器权重相同，后来者居上,就是后面书写的CSS代码最终解析，或者按照就近原则分析也可。

选择器权重不同，高权重的样式,覆盖低权重的样式。

这个过程解释了CSS的层叠性。

码字不易点个赞吧~~~~~

大聪明码农徐
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大聪明码农徐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值