CSS基础学习(一)

1.设置背景颜色:background-color

例:background-color:#d0e4fe;或background-color:blue;

2.字体颜色·:color

例:color:red;

3.对齐方式:text-align

例:text-align:right;            //右对齐

4.字体样式:font-family

例:font-family:"楷体";

5.字体大小:font-size

例:font-size:50px;

6.左外边距/右外边距:margin-left/margin-right

例:margin-left:50px;

7.CSS注释以 /* 开始, 以 */ 结束.

8.id选择器可以为标有特定 id 的 HTML 元素指定特定的样式,以 "#" 来定义。

注:ID属性不能以数字开头

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS id</title>
<style>
body{
background-color:pink;
}
#id1
{
text-align:center;
color:blue;
}
</style>
</head>

<body>
<p id="id1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

运行结果:

 9.class 选择器用于描述一组元素的样式,在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示。

class 选择器有别于id选择器,class可以在多个元素中使用。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<style>
body{
background-color:pink;
}
.center
{
text-align:center;
font-family:楷体;
font-size:25px;
color:blue;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>

运行截图:

 可以指定特定的HTML元素使用class选择器,未被指定的html元素使用该class选择器不起作用。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<style>
body{
background-color:pink;
}
p.center
{
text-align:center;
font-family:楷体;
font-size:25px;
color:blue;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>

运行截图:

 10.插入外部样式表

使用 <link> 标签链接到样式表,<link rel="stylesheet" type="text/css" href="Test1.css">

浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

 

例:

Test1.css:

@charset "UTF-8";
body{
background-image:url('https://static.runoob.com/images/mix/paper.gif');     //设置图片背景
}
.p{
font-family: 楷体;
font-size: 25px;
text-align:center;
}

 

Test1.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<link rel="stylesheet" type="text/css" href="Test1.css">
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="p">段落居中。</p>
</body>
</html>

 

运行截图:

原文地址:https://www.cnblogs.com/zyj3955/p/14697501.html