日度归档:2020年1月7日

CSS 分组和嵌套 选择器的简介说明


摘要:
下文讲述css脚本中编写的快捷方式,分组选择器及嵌套选择器的用法简介说明,如下所示:


分组选择器

分组选择器可以减少代码编写,每个元素间使用逗号分隔;
分组选择器可以将相同样式的元素的css代码编写一起,如下:

 
h1{color:blue;}
h2{color:blue;}
p{color:blue;}
----对于以上三个css定义脚本,我们可以对齐进行组合为一个分组选择器,如下
h1,h2,p{
color:blue;
}


嵌套选择器

嵌套选择器,是对一个类别下的指定类型的样式进行选择。
如下所述:
p{ }: 为所有 p 元素指定一个样式。
.className { }: 为所有 class=”className” 的元素指定一个样式。
.className p{ }: 为所有 class=”className” 元素内的 p 元素指定一个样式。
p.className { }: 为所有 class=”className” 的 p 元素指定一个样式。

p
{
    color:red;
    text-align:center;
}
.className
{
    background-color:blue;
}
.className p
{
    color:white;
}
p.className{
    text-decoration:underline;
}

例:

<html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(maomao365.com)</title> 
<style>
p
{
	color:blue;
	text-align:center;
}
.className
{
	background-color:red;
}
.className p
{
	color:white;
}
p.className{
    text-decoration:underline;
}
</style>
</head>

<body>
<p>这个段落是蓝色文本,居中对齐。</p>
<div class="className">
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="className"元素内的 p 元素指定一个样式,但有不同的文本颜色。</p>
	
<p class="className">带下划线的 p 段落。</p>
</body>
</html>

CSS padding(内边距)属性设置及简介说明


摘要:
下文讲述css中设置内边距的方法分享,如下所示:


css padding简介

在html编码的世界中,我们可以通过使用Padding设置内边距的方式,使元素离内部边框产生一定的距离,如下所示:

实现思路:
通过设置padding属性或
单边内边距
padding-top —上内边距
padding-bottom —下内边距
padding-right —右内边距
padding-left —左内边距
属性
—-这些属性值我们可以放入
auto
length(px pt em等浏览器支持的长度单位)
百分比%
—————–注意事项—————
padding可以快速简写输入外边距
例:
————————————–
padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px
————————————–
padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px
————————————–
padding:25px 50px;
上下填充为25px
左右填充为50px
————————————–
padding:25px;
所有的填充都是25px

例:
设置 元素的内边距

  <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(maomao365.com)--设置元素内边距</title> 
<style>
p
{
	background-color:blue;
}
p.padding
{
	padding:25px 50px;
    /*上下填充为25px
      左右填充为50px
    */
}
</style>
</head>

<body>

<p>无内边距的元素</p>
<p class="padding">上下填充为25px
      左右填充为50px</p>

</body>
</html>

CSS margin(外边距)属性设置及简介说明


摘要:
下文讲述css中设置外边距的方法分享,如下所示:


css margin简介

在html编码的世界中,一个元素一定存在一个外边框(margin),外边框是没有背景颜色,是一个透明的空间占位符,
我们可以通过设置margin属性的上 下 左 右的距离,使其同其他元素的间隔。

margin--边距说明

margin–边距说明



实现思路:
通过设置margin属性或
单边边距
margin-top —上边距
margin-bottom —下边距
margin-right —右边距
margin-left —左边距
属性
—-这些属性值我们可以放入
auto
length(px pt em等浏览器支持的长度单位)
百分比%
—————–注意事项—————
margin可以快速简写输入外边距
例:
margin:15px 60px 85px 90px;
上边距为15px
右边距为60px
下边距为785px
左边距为90px

margin:15px 60px 55px;
上边距为15px
左右边距为60px
下边距为55px

margin:15px 25px;
上下边距为15px
左右边距为25px

margin:15px;
上下左右4个边距都是15px

例:
设置 元素的外边距

  <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(maomao365.com)--设置元素外边距</title> 
<style>
p
{
	background-color:blue;
}
p.margin
{
	margin:90px 20px;
}
</style>
</head>

<body>

<p>无外边距的元素</p>
<p class="margin">设置上下边距90px 左右边距20px</p>

</body>
</html>
css margin 外边距_应用举例

css margin 外边距_应用举例