目录
(3)带透明的rgb值(0--1的代表透明度0%--100%)
一、CSS概念
对html的结果进行美化,优点是
1.
功能强大
2.
将内容展示和样式控制分离
降低耦合度。解耦
让分工协作更容易
提高开发效率
二、CSS的样式
1.行内样式
写在标签内部的样式,仅对该行标签有用
<p style="color: blue; background: chartreuse;">窗前明月光,疑是地上霜</p>
2.内部样式
定义在head标签内,通过<style></style>控制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>一级标题</h1>
</body>
</html>
3.外部样式
先在css文件夹中新建css文件,定义样式
![](https://i-blog.csdnimg.cn/blog_migrate/6d4ab40c3e12cd1f4b2fc15ba9a48e7a.png)
然后在html文档中用link引入样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<link rel="stylesheet" type="text/css" href="css/css001.css"/>
</head>
<body>
<h1>一级标题</h1>
<h1>一级标题</h1>
</body>
</html>
4.优先级和区别
行内样式只能控制本行
内部样式只能控制本文档
外部样式只要被引用就可以控制
生效优先级
行内样式>内部样式>外部样式
在定义和引用时要先引用外部样式,然后再用style定义内部样式
多种样式对同一个标签生效时,先按优先级生效。多出来的部分会叠加生效
如下,内部样式定义标签红色,外部样式标签浅蓝,底下蓝色背景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<link rel="stylesheet" type="text/css" href="css/css001.css"/>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h1>一级标题</h1>
</body>
</html>
三、CSS语法
选择器 {
属性1:值1;
属性2:值2;
}
选择器:筛选具有相似特征的元素
例如
h1{
color:red;
}
四、注释
/* */
/*这是CSS的注释*/
div {
color: red;
/*文字颜色是红色*/
}
五、选择器
1.id选择器
以#id为选择器名字,为指定id的标签定制样式,id属性不要以数字开头,id尽量不要一样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<style type="text/css">
#ss{
color:red;
}
</style>
</head>
<body>
<div id="ss"> id选择器</div>
</body>
</html>
2.class选择器
选择具有相同class属性值的元素,class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。只要名字一样就可以
以 点加类名的方式命名,“.class{}”
类名的第一个字符不能使用数字!它无法在
Mozilla
或
Firefox
中起作用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<style type="text/css">
.cl{
color: #0000FF;
}
</style>
</head>
<body>
<div class="cl"> clas