css选择器 + 块内联元素

最新推荐文章于 2024-11-03 12:02:27 发布

Jelly_Believer

最新推荐文章于 2024-11-03 12:02:27 发布

阅读量131

点赞数

本文链接：https://blog.csdn.net/weixin_42438346/article/details/121363844

版权

web 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

ID选择器（ID selector，IS）
语法：#S{…}(使用#标识selector)

<style>
#name{
  color:red;
}
</style>
<!--下面文字是红色的-->
<p id="name">red text</p>

类选择器（class selector, CS）
语法: .S{…}（使用.标识selector）

<style>
.value{
  text-align:center;
}
</style>
<!--下面的文字是居中对齐的-->
<p class="value">center text</p>

元素/标签选择器（element selector, ES）
语法：S{…}(使用标签名作为selector)

<style>
p{
  font-style:italic;
}
</style>
<!--下面的文字是斜体的-->
<p style="font-style:italic">italic text</p>

包含选择器（后代选择器）
语法：A B{…}（A和B都是标签）
.A B{…}（A是类名，B是标签）

<style>
.first span{
  color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
  <li><span>内容也是红色</span></li>
  <li><span>内容也是红色</span></li>
</ol></p>

</body>

css中逗号，空格，冒号，点号的含义

#a, b{…} 一个id叫a和一个标签是b的样式
#a b{…}一个id叫a下面的一个标签是b的样式
#a:b{…}一个id叫a的伪类b，如a:hover
#a.b{…} 一个id叫a的下面的class叫b的样式

块级元素（block）特性：

总是独占一行，表现为另启一行开始，其后的元素也必须另起一行显示；
width height padding margin都可以控制

内联元素（inline）特性

和相邻内联元素在同一行
width height 内边距的top/bottom(padding-top/paddind-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面图片或者图片的大小

css中块级，内联元素的应用

display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

Jelly_Believer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录