0 【CSS】笔记--- CSS概述；HTML引入CSS样式的三种方式；列表样式；绝对定位

第三种方式：链入外部样式表文件，这种方式最常用，将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了......楔子：
1、什么是CSS ，有什么作用？
1)CSS(Cascading Style Sheet):层叠样式表语言。
2)CSS的作用是：
修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
HTML还是主体， CSS依赖HTML 。CSS的存在就是修饰HTML ，所以新建的文件还是xx.html文件。
2、CSS需要掌握到什么程度？
第一，常见的CSS样式会写，第二，别人写的CSS样式能看懂。
3、在HTML页面中嵌套使用CSS的三种方式：
第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
语法格式：
<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>
第二种方式：在head标签中使用style块，这种方式被称为样式块方式。
语法格式：
<head>
<style type="text/css">
选择器 {
样式名 : 样式值;
样式名 : 样式值;
.....
}
选择器 {
样式名 : 样式值;
样式名 : 样式值;
.....
}
</style>
</head>
第三种方式：链入外部样式表文件，这种方式最常用（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）。
语法格式：
<link type="text/css" rel="stylesheet" href="https://tazarkount.com/read/css文件的路径" />

这种方式易维护，维护成本较低。
正文：
1、HTML引入样式的第一种方式：内联定义方式：
代码：
<!DOCTYPE html><html> <head><meta charset="utf-8"><title>HTML引入样式的第一种方式：内联定义方式</title> </head> <body><div style="width: 500px;height: 60px;background-color: #CCFFFF;"></div><br /><br /><div style="width: 500px;height: 60px;background-color: #CCFFFF;display: none;"></div><br /><br /><div style="width: 500px;height: 60px;background-color: #CCFFFF;border-color: red;border-width: 1px;border-style: solid;"></div><br /><br /><div style="width: 500px;height: 60px;background-color: #CCFFFF;border: red 1px solid;"></div> </body></html>谷歌浏览器：

文章插图

2、HTML中引入CSS样式的第二种方式：样式块：
代码：

<!doctype html><html>	<head><title>HTML中引入CSS样式的第二种方式：样式块</title><!--固定格式--><style type="text/css">/*id选择器语法格式：#id{样式名 : 样式值;样式名 : 样式值;样式名 : 样式值;....}*/#usernameErrorMsg {color : red;font-size : 12px;}/*标签选择器语法格式：标签名 {同上（id选择器）}标签选择器作用的范围比id选择器广 。*/div {background-color : black;border : 1px solid red;width : 100px;height : 100px;}/*类选择器语法格式：.类名{同上上（其他俩个选择器）}*/.student {border : 1px solid red;width : 400px;height : 30px;}</style>	</head>	<body><!--设置样式字体大小12px ， 颜色为红色--><span id="usernameErrorMsg">对不起 ， 用户名不能为空！</span><div></div><div></div><!--class相同的标签可以认为是同一类标签 。--><br><br><br><input type="text" class="student"/><br><br><br><select class="student"><option>专科</option><option>本科</option></select>	</body></html>

谷歌浏览器：

文章插图
3、在HTML中使用CSS样式的第三种方式：引入外部独立的css文件：
html代码：

<!DOCTYPE html><html>	<head><meta charset="utf-8"><title>在HTML中使用CSS样式的第三种方式：引入外部独立的css文件</title><!--引入css--><!--rel ， type都是固定写法 ， href后加引入的css路径--><link rel="stylesheet" type="text/css" href="https://tazarkount.com/read/css/1.css" /></head><body><a href="http://www.baidu.com">百度</a><span id="baiduSpan">点击我链接到百度哦！</span>	</body></html>

css代码：

/*标签选择器*/a {	/*使下划线消失*/text-decoration : none;}/*	cursor : 鼠标样式 ， pointer是小手 ， hand也是 ， 但是hand有浏览器兼容问题 ， 建议使用pointer*//*id选择器*/#baiduSpan {/*下划线；鼠标光标变为小手*/	text-decoration: underline;	cursor: pointer;}

谷歌浏览器：（小手没截成功。。。）

文章插图
4、列表样式：
代码：

<!DOCTYPE html><html>	<head><meta charset="utf-8"><title>列表样式</title><style type="text/css">/*标签选择器*/ul{/*让列表中的标志消失list-style-type: none;*//*让列表中的标志变为空心圈圈list-style-type: circle ;*//*让列表中的标志变为黑心方块*/list-style-type: square ;}</style>	</head>	<body><ul><li>中国<ul><li>北京</li><li>上海</li><li>重庆</li></ul></li><li>美国</li><li>俄国</li></ul>	</body></html>

谷歌浏览器：

文章插图
5、CSS样式的绝对定位：
代码：

<!DOCTYPE html><html>	<head><meta charset="utf-8"><title>CSS样式的绝对定位</title><style type="text/css">/*id选择器*/#div1{background-color: red;border: 1px black solid;width: 300px;height: 300px;position : absolute; /*绝对定位*/left: 100px;top: 100px;}</style>	</head>	<body><div id="div1"></div></body></html>

谷歌浏览器：

文章插图
【0 【CSS】笔记--- CSS概述；HTML引入CSS样式的三种方式；列表样式；绝对定位】