一、CSS基础
1.css简介
//为结构化文档添加样式。css解决的问题如下
1.如何显示html元素
2.内容和表现分离
2.css语法
//两部分组成:选择器和一条或多条说明,更好的描述可一行只有一个属性。
如:p{color:red; text-align:center;}
还有css注释:/* */
3.css id和class选择器
/html中设置css样式,需要元素中设置id和class选择器
1.css中的id选择器以“#”定义
<style>
#para1
{
text-align:center;
color:red;
}
</style>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
注意:id属性不要以数字开头,在某浏览器中不显示
2.class选择器
//在css中类选择器以"."号显示。
<style>
.center
{
text-align:center;
}
</style>
<body>
<h1 class="center">标题居中</h1>
</body>
3.所有的p元素使用class="center"让该元素居中。
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
</body>
4.多个class选择器可使用空格分开
<style>
.center {
text-align:center;
}
.color {
color:#ff0000;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center color">段落居中,颜色为红色。</p>
注意:类名的第一个字符不能使用数字,否则在浏览器中不显示。
4.css创建
//插入样式表的方法有三种,内部样式,外部样式,内联样式
1.外部样式
定义一个style.css文件
h3{
color:blue;
}
1.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外部样式</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h3>显示蓝色,是外部样式</h3>
</body>
</html>
注意:如果外部样式放在内部样式后面,外部样式将覆盖内部样式。
外部样式关键语法
<link rel="stylesheet" type="text/css" href="style.css" />
5.css背景
1.背景颜色background-color
常以下面形式拥有不同的背景颜色,颜色可以用十六进制,rgb,颜色名称定义。
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
2.背景图像
backgroud-image
body
{
background-image:url('https://static.runoob.com/images/mix/paper.gif');
background-color:#cccccc;
}
注意:背景图像-水平或垂直平铺可能导致看起来不协调
可以设置图像只在水平方向平铺
<style>
body
{
background-image:url('https://static.runoob.com/images/mix/gradient2.png');
background-repeat:repeat-x;
}
</style>
利用backgroup-position改变图像在背景中的位置。
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
3.背景简写
body {background:#ffffff url('img_tree.png') no-repeat right top;}
6.css文本
1.文本的对齐方式
当text-align:justify时,每一行的宽度相同,左右边距是相同的。
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
2.文本修饰
是用来设置是否有下/上划线,none等。
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
3.文本转换和缩进
转换是大小写,缩进文本的第一行。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
p {text-indent:50px;}
总结
当你把一件事做到极致,你就会成为这方面的大佬!