css 新手入门基本实例教程

日期:2021-03-13 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

1、CSS英语的语法:
h1 {color:blue;font-size:12px;}
h1便是HTML的标识,又叫选被器,是被挑选款式化的目标,color:blue;便是实际效果1,font-size:12px;实际效果2
2、来个事例:
p {color:red;text-align:center}
或这样,更便捷载入
p
{
color:red;
text-align:center;
}
放到HTML里的编码便是:

拷贝编码
编码以下:

<html>
<head>
<style type="text/css">
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>

3、CSS注解用/* 这里是被注解的內容 */

拷贝编码
编码以下:

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial
}

4、CSS的id和Class挑选器来操纵款式
id能够用作款式化1个独立的目标,例如大家要对某1个P元素做个实际效果,而别的的默认设置实际效果。
id在CSS中的界定方法便是:

拷贝编码
编码以下:

#para1
{
text-align:center;
color:red
}

这里的para1便是HTML文档中某1个元素的id,看个事例

拷贝编码
编码以下:

<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

看实际效果图,仅有id为para1的P元素合理果。
Class也便是类挑选器,能够表明1组元素的款式,id只对1个合理
[code]
<html>
<style>
.cen {text-align: center}
</style>
<body>
<h1 class="cen">
This heading will be center-aligned
</h1>
<p class="cen">
This paragraph will also be center-aligned.
</p>
</body>
</html>

这样h1和p的內容都会全自动垂直居中了
上1页12 3 下1页 阅读文章全文
上一篇:css 处理报表边框无法显示的难题 返回下一篇:没有了