CSS选择器的常见用法

最新推荐文章于 2024-07-12 20:49:16 发布

潮起且11

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量350

点赞数 12

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_75107566/article/details/136626576

版权

CSS(Cascading Style Sheet)，层叠样式表, ⽤于控制⻚⾯的样式.(美化你的网页)

CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离.

CSS 可以理解为"东⽅四⼤邪术" 之化妆术.

对⻚⾯的展⽰进⾏"化妆"

一.基本语法:

二.更改内容:

选择器+{声明}

选择器是用来选择修改对象(画眼睛还是画鼻子)

声明是决定对对象干嘛

声明是键值对的模式,中间用:来间隔

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
         color: #c11e1e;   
        }
    </style>
</head>
<body>
    <p>我是个栗子</p>
</body>
</html>

css一般要被style标签包裹起来

style可以放在任何位置(一般会放在head标签中)

下面基于上述栗子演示几种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
         color: #c11e1e;   
        }
    </style>
</head>
<body>
    <p style="color: blue;">我是个栗子</p>
</body>
</html>

上述是行内样式,而第一个则是内部样式

读者运行一下就会发现栗子变成了蓝色,说明css是就近原则的.当然在企业中一半会使用文件来存放css代码,然后通过<link>标签引入

css选择器可以根据标签的不同属性进行选择

上述使用的就是标签选择器

下面我们再介绍几种选择器:

1.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .栗子{
         color: #c11e1e;   
        }
    </style>
</head>
<body>
    <p class="栗子">我是个栗子</p>
</body>
</html>

class选择器前面用.

2.id选择器(前面用#)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .栗子{
         color: #c11e1e;   
        }
        #i1{
            color: #714ec3;
        }
    </style>
</head>
<body>
    <p class="栗子" id="i1">我是个栗子</p>
</body>
</html>

还有通配符选择器用*,复合选择器(用于多级标签)例如:ul li a{},表示在ul标签下的li标签下的a标签进行更改/

二.更改内容:

color:颜色

font-size:字体大小(以像素为单位)

border:lpx solid purple(边框粗细样式颜色)

width:宽度

height:高度(宽和高如果只设置一个另外一个会自适应)

padding:内边距(同一个标签下各个元素的距离)

margin:外边距(同等级标签之间的距离)

内边距和外边距都是可以设置(上下左右四个方向的距离)

如果有用的话请给个一键三连吧~

潮起且11

关注

12
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
CSS选择器的常见用法

读者运行一下就会发现栗子变成了蓝色,说明css是就近原则的.当然在企业中一半会使用文件来存放css代码,然后通过标签引入。还有通配符选择器用*,复合选择器(用于多级标签)例如:ul li a{},表示在ul标签下的li标签下的a标签进行更改/CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离.CSS(Cascading Style Sheet)，层叠样式表, ⽤于控制⻚⾯的样式.(美化你的网页)声明是键值对的模式,中间用:来间隔。
复制链接

扫一扫