HTML+CSS基础知识个人笔记_2
CSS样式
行内样式
写在行内，如下所示 style = “color: green”
<div class="name" id="na" style="color: green">123</div>
内部样式表
写在html文件的head中
<head>
<meta charset="utf-8" />
<title>08_新闻.html</title>
<style>
h3 {
color: orange;
}
h4 {
color: deeppink;
}
p {
color: #036;
}
div {
color: red;
}
</style>
</head>
外部样式表
另起css文件，通过link调用，不用写style
常用，复用性高。
/* CSS文件 */
/*外部样式表不需要style*/
div {
color: red;
}
<!-- HTML文件 -->
<head>
<meta charset="utf-8" />
<title>09_外部样式表.html</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" >
</head>
CSS选择器
基本选择器
标签选择器
形式：
选择器 { 属性： 值； }
/*选择器 { 属性： 值； } ------ 标签选择器，选择标签的*/
th {
color: skyblue;
}
td {
font-size: 14px;
}
tr {
height: 20px;
}
类选择器
类选择器：上面点声明，下面类调用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>10_类选择器.html</title>
<style>
span { /*标签选择器 可以选择 所有的 同种标签 此处让所有的 span 的
font-size 变为150px*/
font-size: 150px;
}
.G { /*类选择器：上面点声明，下面类调用*/
color: blue;
}
.o1 { /*命名规则，不建议使用_ 因为JS中变量一般采用_ 对于需要分割
的，用- 如：first-child*/
color: red;
}
.o2 { /*类选择器 可以选择一种或者多种不同个数标签，同class即可，不一
定同种全部*/
color: yellow;
}
.g {
color: lightblue;
}
.l {
color: green;
}
.e {
color: deeppink;
}
</style>
</head>
<body>
<div class="G">G</div>
<span class="G">A</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="e">e</span>
</body>
</html>
多类名选择器
调用时，class=“red font20”，中间用空格隔开即可。
样式显示效果与调用顺序无关，而是由层叠性决定，样式声明后来者为准，就近原则。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>01多类名选择器.html</title>
<style>
.red {
color: red;
}
.font20 {
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<!-- 样式显示效果和HTML元素的类名先后顺序无关，与CSS样式书写上下顺序有关，后来者有效 -->
<!-- HTML多类名之间用空格隔开 -->
<!-- 类名的简单理解：<a class="nav"> nav就是这个a的名字 这个a就是nav nav就是这个a a:hover 可写成 .nav:hover -->
<div class="red font20">多类名</div>
<div class="font20 red">多类名</div>
<div>多类名</div>
<div>多类名</div>
<p class="red">多类名</p>
<p class="red">多类名</p>
<p>多类名</p>
<p>多类名</p>
</body>
</html>
id选择器
css：
#last {
color: red;
}
html：
<div id="last">id选择器.html</div>
通配符选择器
* { /*通配符选择器，选择所有标签，会拖慢渲染，一般不用*/
color: red;
}
复合选择器
链接伪类选择器
标准写法：
/*请按照 L V H A 的顺序编写！ 简记为:LV HAo 或者 LoVe HAte*/
/*顺序指定原则是，优先级问题，涉及到权值，或者说特殊性值*/
/*实际上确保 L H A 即可，V 的位置可以任意放*/
a:link { /*常态*/
color: #3c3c3c;
font-size: 50px; /*一般用偶数*/
font-weight: 700;
text-decoration: none;
}
a:visited { /*已访问后的状态*/
color: orange;
}
a:hover { /*鼠标悬停或者经过的状态*/
color: #f00;
}
a:active { /*点击但为释放的状态*/
color: green;
实际开发中的链接伪类选择器：
/*建议先写a，再写a:hover*/
/*这里先写hover也没事，因为是伪类,0, 0, 1, 0 > 0, 0, 0, 1*/
/*a是：0001，a:是：0010*/
a {
color: #333;
font-size: 26px;
font-weight: 700;
text-decoration: none;
}
a:hover {
color: #f10215;
}
并集选择器
/*并集使用较多*/
/*并集选择器， 用,隔开， 代表 和 的意思， 也可理解成或运算， 注意与后代选择器用
空格隔开区分*/
/*在集体声明相同样式时*/
div,
p,
span {
color: red;
}
交集选择器
/*交集使用较少*/
/*小心写法，在u1和.red之间，不要出现空格，否则会理解成后代选择器！*/
/*u1.red u1#de这个所用可以，但多次一举*/
ul.red {
color: red;
}
后代选择器
选择所有后代，可跨越，用空格隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_后代选择器.html</title>
<style>
/*后代使用较多*/
/*选所有后代，可跨越*/
/* > 左右可以有空格*/
ul ol > li {
color: red;
}
/*ul div {
color: green;
}*/
</style>
</head>
<body>
<ul>
<li>
<div>第一级</div>
<ol>
<li>
<div>第二级</div>
<div>第二级</div>
<div>第二级</div>
</li>
</ol>
</li>
</ul>
<div>name</div>
</body>
</html>
子代选择器
选择 所有 子代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09_子代选择器.html</title>
<style>
/*子代使用较少*/
/*子代选择器，用 > 符号限定其子代，左右可带空格。
可与后代选择器连用，
综合理解，后代选择器，选择所有后代，不单单子代，可跨越，而不管其所
在位置有多深，
子代选择器，只选择 所有 子代。
如以下做法，ul 下的所有ol 的li子代*/
/*ul ol > li {
color: red;
}
*/
/*所有first类的盒子，包含div.first*/
/*.first {
color: red;
}*/
/*ul下的first类的盒子，div.first不包含*/
/*ul.first {
color: red;
}*/
/*效果同ul.first 因为div.first没有ol的后代的li子代*/
/*.first ol > li {
color: red;
}*/
/*效果同ul.first*/
/*ul.first ol > li {
color: red;
}*/
</style>
</head>
<body>
<ul class="first">
<li>
<div>第一级</div>
<ol>
<li>
<div>第二级</div>
<div>第二级</div>
<div>第二级</div>
</li>
</ol>
</li>
</ul>
<div class="first">test</div>
<ul>
<li>
<div>第一级</div>
<ol>
<li>
<div>第二级</div>
<div>第二级</div>
<div>第二级</div>
</li>
</ol>
</li>
</ul>
<div>name</div>
</body>
</html>