Css 学习笔记 第一章
序
目录
第二节：CSS 选择器
第三节：CSS 选择器 （特殊标签）
第四节：选择器权重
如果把 html 比作房子 css 就像对于 是给房子 做装修
css : 叠层样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="indexcss.css" type="text/css" rel="stylesheet">
<!-- 内嵌方式 -->
<style type="text/css">
p2 {
color: aquamarine;
}
</style>
<!-- 导入式 -->
<style>
@import url("indexcss.css");
</style>
</head>
<body>
<p style="color:red;background: blue; ">1. 行内使用方式</p> <!-- 行内 -->
<p />
<p2>2. 内嵌式使用方式</p2>
<p />
<p3>3. 外联式使用方式</p3>
<p />
<p4>4. 导入式使用方式 (当 html 加载完毕 才去加载css， 当html 内容较多时 显示完毕 再去加载css 会发生页面显示样式的延迟)</p4>
<p />
</body>
</html>
css:
p3{
color: green;
}
p4{
color:blueviolet;
}介绍了 CSS 的四种导入方式
- 行内使用方式
- 内嵌式使用方式
- 外联式使用方式
- 导入式使用方式
第二节：CSS 选择器
CSS 选择器：
- 标签选择器 ：<p></p> 这个页面中所有使用 该标签 都是一个样式
- Class选择器 ：Class 可以在页面中重复使用 ID不可以） class 选择器 要比 标签选择器权限高
- ID 选择器 ：ID 选择器比 Class 选择器 权限高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="indexcss.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>你好 标签选择器（这个页面中所有使用 该标签 都是一个样式）</>
<p class="c1 c2">Class选择器 （Class 可以在页面中重复使用 ID不可以） class 选择器 要比 标签选择器权限高</p>
<p class="c1" id="d1">ID 选择器 ID 选择器比 Class 选择器 权限高</p>
</body>
</html>
CSS
p{
color: red;
}
.c1
{
color: blue;
}
.c2
{
color: blue;
font-size: 33px;
}
#d1{
color: brown;
}
body .c1{ //空格表示 下一个层级的C1
}
c1,c2{ //c1和c2
}
第三节：CSS 选择器 （特殊标签）
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="indexcss.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>pppppp</p>
<div>divdiv</div>
<h1>h1h1h1<h1>
<div>
<p>pppppppppppp</p>
<p class="c1">你好</p>
<p>pppppppppppp</p>
<div>
<p>111111111111</p>
<p>222222222222</p>
</div>
<p class="c2">AAAAAAAAA</p>
<p>gggggggg</p>
<p>pppppppppppp</p>
</div>
<p>pppppppppppp</p>
<a href="http://www.baidu.com">www.baidu.com</a>
<p/>
<a href="http://www.google.com" title="google">www.google.com</a>
<p/>
<a href="https://912cc.com" title="912cc.com">912cc.com</a>
</body>
</html>
css
/* 适用于页面所有（(默认)）标签 */
/* *
{
color:red
}
p */
{
color: aqua;
}
/* 作用范围是 C1 后面（不包括自己）(同级元素)这一个元素 */
.c1+p
{
color:red
}
/* 作用范围是 C2 后面所有（不包括自己）(同级元素) 元素 */
.c2~p
{
color:blue
}
/* 作用范围 所有 div 标签下面的 p 标签(默认效果都会修改) */
div>p
{
color: brown;
}
/* C1 下面所以 P 标签 */
C1 p
{
color: brown;
}
a[title]
{
background: yellowgreen;
}
/* a[href^='http'] 以http开头 */
/* a[href$='com'] 以结尾 com*/
/* a[href*='com'] 包含 com*/
a[href="https://912cc.com"]
{
color:red
}
第四节：选择器权重
CSS 标签 class 是 具有继承 性质 的， 比如 父节点 class 标签 属性 会影响 子元素 属性
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="indexcss.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="c1">
<h3 class="c2" id ="d2" style="color: #FFFF00;">你好</h3>
</div>
</body>
</html>
css
h3{
color: red; /* D */
}
.c2{
color: green; /* C */
}
.c1 .h3{
color: blue; /* cd */
}
.c1 .c2{
color:yellow; /* cc */
}
#d2{
color: black; /* b */
}
.c1 #d2{
color: bisque;/* bc */
}