1.css介绍及选择器

最新推荐文章于 2023-07-10 19:58:00 发布

121689Stone

最新推荐文章于 2023-07-10 19:58:00 发布

阅读量190

点赞数

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

本文链接：https://blog.csdn.net/qq_37993288/article/details/77365911

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

css概念

：控制标签样式，美化html标签

选择器

1.概念：选择器是一个选择某个标签的过程，给标签定义样式。
2.写法：选择器{属性：值；}

属性	解释
width:20px;	宽
height:20px;	高
background-color:red;	背景颜色
font-size:24px;	文字大小
text-align:left center right;	内容的水平方式对齐
text-indent:2em	首行缩进

※颜色显示方式：

直接写颜色名称
十六进制显示颜色：0-9 a-f

#000000（黑色）,前两位代表红色，中间代表绿色，后边两位代表蓝色.(R G B)。数值越大，颜色色彩值越重。a-f,f为白色，a为深灰色。
rgb显示方式：color:rgb(120,120,120);
rgba显示方式：color:rgba(102,217,120);
a代表alpha不透明度，值是0-1（透明-不透明）

3.选择器

1. 基础选择器

标签选择器
写法：标签{属性；值；}
※将页面所有此标签都给此样式。

<head>
    <style type="text/css">
        div{
            font-size:50px;
            backgrond-color:yellow;
            width:300px;
            height:200px;
        }

    </style>
</head>
<body>
    <div>选择器</div>
    <div>样式表</div>
    <p>css介绍</p>
</body>

类选择器
写法： .自定义类名{属性：值；属性：值；}

<head>
    <style type="text/css">
        .box{
            font-size:40px;
            color:#ff0000;
        }
        .one{
            text-indent:2em;
        }

    </style>
</head>
<body>
    <div class="box one">发表</div>
    <div>前端</div>
    <div class="box">博客</div>
</body>

※特点：
（1）只要某个标签调用了定义的选择器，则样式对此标签生效；
（2）一个标签可以调用多个类选择器；
（3）不同多个标签可以调用同一个类选择器；
※类选择器命名规则：
（1）不能使用纯数字或者数字开头来定义类名；
（2）不能使用特殊符号或者特殊符号开头（_除外）来定义类名；
（3）不建议使用汉字来定义类名；
（4）不推荐使用属性来定义类名，eg:font-size等；
（5）常用的类名定义：
这里写图片描述

<head>
    <style type="text/css">
        .G{
            font-size:200px;
            color:#000099;
        }
        .o1{
            font-size:200px;
            color:#990000;
        }
        .o2{
            font-size:200px;
            color:orange;
        }
        .g1{
            font-size:200px;
            color:#009900;
        }
        .l{
            font-size:200px;
            color:#009900;
        }
        .e{
            font-size:200px;
            color:#990000;
        }
    </style>
</head>
<body>
    <span class="G">G</span>
    <span class="o1">o</span>
    <span class="o2">o</span>
    <span class="g1">g</span>
    <span class="l">l</span>
    <span class="e">e</span>
</body>

ID选择器
写法：#自定义名称{属性：值；}

<head>
    <style type="text/css">
        #box{
            font-size:40px;
            color:rgb(0,0,255);
            background-color:yellow;
        }
        #miss{
            text-align:center;
        }
        .nav{
            text-indent:2em;
        }
    </style>
</head>
<body>
    <div id="box" class="nav">样式</div>
    <div>选择器</div>

</body>

特点：（1）一个id选择器在一个页面只能调用一次;
（2）一个标签只能调用一个id选择器；
（3）一个标签可以同时调用类选择器和id选择器。

通配符选择器

*{属性：值；}
特点：给页面所有标签都起作用，给同一个样式,不推荐使用

<head>
    <style type="text/css">
        *{
            font-size:100px;
            color:red;
        }
    </style>
</head>
<body>
    <div>移动版</div>
    <p>介绍</p>
    <span>管理</span>
</body>

- 复合选择器

概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。

交集选择器
写法：标签+类（id）选择器{属性：值；}

    <head>
        <style type="text/css">
            .box{
                font-size:50px;
            }
            div.box{
                color:red;
            }
        </style>
    </head>
    <body>
        <div class="box">管理学院</div>
        <p class="box">测试</p>
        <div>百度</div>
    </body>

※特点：既要满足某个标签，还要满足使用了类（id）选择器，此交集选择器内的样式才会生效。

- 后代选择器
写法：选择器+空格+选择器{属性：值；}
特点：(1)具有包含嵌套关系，父与子的关系

<head>
    <style type="text/css">
        .box{
            color:red
        }

        div p span{                  
            font-size:50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p><span>管理</span></p>
    </div>
    <div>介绍</div>
</body>

(2)无限制隔代：可以中间跳过一代或者多代进行选择，只要是存在嵌套父子关系即可。

<head>
    <style type="text/css">
        .box{
            color:red
        }

        div  span{                  
            font-size:50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p><span>管理</span></p>
    </div>
    <div>介绍</div>
</body>

（3）只要能代表标签的，标签、类选择器、id选择器可自由组合，存在父子关系即可。

<head>
    <style type="text/css">
        .box{
            color:red
        }

        .box span{                  
            font-size:50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p><span>管理</span></p>
    </div>
    <div>介绍</div>
</body>

子代选择器
写法：选择器>选择器{属性：值；}
特点：选中的是直接下一代的标签元素。

<head>
    <styletype="text/css">
        div>span{
            coloe:red;
            font-size:40px;
        }
        p>span{
            color:green;
        }
    </style>
</head>
<body>
    <div>
        <p><span>介绍</span></p>
        <span>选择器</span>
    </div>
</body>

并集选择器
写法：选择器，选择器，选择器{属性：值；}
特点：（1）只要被选择器选中的标签，样式都生效；
（2）标签，类选择器，id选择器可自由组合。

<head>
    <style type="text/css">
        .box,p,span,#one{
            font-size:100px;
            color:#666;
        }
    </style>
</head>
<body>
    <div class="box">移动</div>
    <p>介绍</p>
    <span>css</span>
    <h1 id="one">选择器</h1>
</body>

121689Stone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.css介绍及选择器

css概念：控制标签样式，美化html标签选择器1.概念：选择器是一个选择某个标签的过程，给标签定义样式。 2.写法：选择器{属性：值；} 属性解释 width:20px; 宽 height:20px; 高 background-color:red; 背景颜色 font-size:24px; 文字大小 text-align:left center rig
复制链接

扫一扫

专栏目录