1.css三种引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
CSS: 专业美化网页的
1. html没有的css有
2. html有也没有css方便
*/
h2{
color: blue;
}
span{
font-size: 60px;
}
</style>
</head>
<body>
<!--
需求A: h1标签添加红色
需求B: font设置大小
-->
<h1> <!--h1没有clor属性-->
<font color="red">标题</font>
</h1>
<font size="7">span1</font> <!--代码冗余-->
<font size="7">span2</font>
<font size="7">span3</font>
<hr>
<!-- 111111111111111111111111111111111111111111111111111111如下用css -->
<h2>标题</h2>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
css三种引入方式
0. 独立一套语法,最终还是用来html中
1. 行内样式 (写在标签行内)
1. 任何标签都有一个style属性(属性值 = css内容)
2. 语法: css属性1:值1 ; css属性2:值2... 作用范围: 只对当前标签
2. 内部样式(写在当前html内部)
1. 在html中添加一个style标签(在内部写css内容)。写在哪里无所谓, 软性规范(head标签里)
2. 语法:
选择器{
css属性1:值1 ;
css属性2:值2...
}
3. 外部样式(css单独一个文件,然后导入某个html)
1. 编写css文件(放css文件夹)：new-stylesheet
里面的内容同上删除style标签
2. 导入
link标签: rel= "stylesheet" 固定值
rel：relationship 关系
href= css文件的位置
static web默认相对路径: 当前文件所在的位置
java中默认相对路径: 当前工程
优先级:
行内 > 内部 = 外部
html被浏览器的加载顺序: 从上之下，下面内容会覆盖上面内容
-->
<link rel="stylesheet" href="../css/my.css">
<style>
span{
color: green;
font-size: 40px;
}
</style>
</head>
<body>
<font color="green" size="4"></font> <!-- 里面没写内容看不到-->
<span style="color: red;font-size: 30px">字体</span> <br> <!-- 行内样式-->
<span >字体</span> <br>
<span >字体</span> <br>
</body>
</html>
2.css三种基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
选择器: selector
0. css选择器的作用: 定位html中一些标签的
1. id选择器
1. 所有的标签都有id属性(值唯一，id值不能为数字，java中标识符以数字开头不行)
2. #id值
2. class选择器
1. 所有的标签都有class属性(值可重复)
2. .class属性值
3. 标签选择器
标签名
优先级 : id > class > 标签 。定位越精准即范围越小,优先级越高
-->
<style>
#myid{
color: red;
}
.myclass{
color: green;
}
span{
color: blue;
}
</style>
</head>
<body>
<span >span</span> <br>
<span id="myid" class="myclass">span1</span> <br>
<span class="myclass">span2</span> <br>
<span class="myclass">span2</span> <br>
<span >span3</span> <br>
<span >span3</span> <br>
<span >span3</span> <br>
</body>
</html>
3.扩展选择器_层级/并集/属性/伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
需求: 让div下的span变red
层级选择器:
父选择器 子选择器{ .xx类选择器也是子选择器
}
*/
div .xx{
color: red;
}
</style>
</head>
<body>
<div>div</div>
<div>
<span>div下的span</span>
<span class="xx">div下的span xx</span>
<span class="xx">div下的span xx</span>
<span>div下的span</span>
<span>div下的span</span>
</div>
<span class="xx">span</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
需求: span和div都变red
并集选择器:
选择器1,选择器2...{
}
*/
span,div h1{
/*div h1是层级选择器 */
color: red;
}
</style>
</head>
<body>
<span>span</span>
<div>div</div>
<div>
<h1>div下的h1</h1>
</div>
<h1>h1</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
属性选择器：
标签名[属性名] : 选中有某种属性的标签
标签名[属性名="属性值"] : 某种属性=某个特定的值的标签
*/
font[size][face]{
color: red;
}
font[size='3']{
color: green;
}
</style>
</head>
<body>
<font size="1" face="楷体">font1</font>
<font size="3">font3</font>
<font size="5">font5</font>
<font size="3">font3</font>
<font>font</font>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
超链接的不同状态:
1. 未点击 link: 蓝色
2. 鼠标悬浮 hover: 蓝色
3. 激活 active: 红色
4. 访问过后 visited: 紫色
伪类选择器 : 选中某种状态下的标签
选择器1:状态{
}
*/
a:link{
color: black;
}
a:hover{
color: green;
}
a:active{
color: deeppink;
}
a:visited{
color: grey;
}
</style>
</head>
<body>
<a href="#">超链接</a> <br>
<a href="#">超链接</a> <br> <!--这个超链接点完后，上面超链接也变为紫色了，因为都为# -->
<a href="#1">超链接</a> <br>
<a href="#2">超链接</a> <br>
<a href="#3">超链接</a> <br>
<a href="#4">超链接</a> <br>
<a href="#5">超链接</a> <br>
</body>
</html>
B站/知乎/微信公众号：码农编程录
