css基础1
今天是2019年6月15日周六，老师给我们讲了css的第一节课：css基础部分，写个随笔留个印记！
一、css的概念
css：cascading style sheet 中午翻译过来就是层叠样式表，它主要是用于定义html的内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等
优势： 1、实现了内容与表现的分离
2、提高了代码的可维护性
使用场景：能用css取代html属性就要用到css，有些属性无法取代：如input属性的 type ，img属性的alt。
二、css的三种引入方式
1、行内样式（内联样式）
语法：新增标签的style属性在style属性的值中写css
格式：css属性1：属性值1；css属性2：属性值2；
特点：01，没有实现内容如表现的分离，只针对当前标签有效。
02，优先级别最高
使用场景：通过js动态给一些元素加样式
<body>
<div style="width:100px;height:100px;background:red;">
</div>
</body>
2、内部样式表
语法：在头部新增style标签，在style标签的内容中写css。
选择器：规定了页面上哪些元素可以使用定义好的css
格式：选择器 {
css属性：属性值；
}
特点：01，没有实现内容与表现的分离
02，有一定的可重用性和可维护性
使用场景： 没有使用场景
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内部样式表</title>
<style>
div {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="box">我是div</div>
</body>
</html>
3、外部样式表
语法：新建外部以.css结尾的文件，将所有的css代码写在外部的文件中，在需要使用的html中通过link引入。
格式：<link rel="stylesheet" href="css路径">
注释：html注释 <!--html注释--> css注释 /*css注释*/
html部分：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>外部样式表</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
css部分：
.box {
width: 299px;
height: 200px;
background: pink;
}
三、css样式表的特征
1、继承性：大多数css属性是可以被继承的，例如字体、文本相关样式可以被继承；宽度、高度、边框、背景等等不能继承。由于标签嵌套出现父子关系、祖先后代关系（包括父子关系）也可以被继承。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承性</title>
<style>
div {
color: purple;
}
</style>
</head>
<body>
<div>
我是div文本内容
<p>我是p文本内容</p>
</div>
</body>
</html>
2、层叠性：如果代码多处都找到同一个标签，设置了很多样式，在不冲突的情况下，这些样式会层叠为一个，共同作用到标签上。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>层叠性</title>
<style>
div {
width: 400px;
height: 400px;
background: pink;
}
</style>
</head>
<body>
<div style="width: 300px"></div>
</body>
</html>
3、优先级别：
01，浏览器缺省设置：user agent stylesheet （优先级别最低）
02，内部样式表和外部样式表优先级别一样，采取就近原则，谁在下以谁为准。
03，内联优先级别最高
04，！important手动提高优先级别，写在需要提高优先级css属性的后面以空格分割，需谨慎使用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>important</title>
<style>
div {
width: 400px !important;
height: 400px;
background: orange;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="width: 800px"></div>
</body>
</html>
四、css选择器
概念：规定了页面上哪些元素可以使用定义好的样式
1、通配符：通用选择器
语法：* {
css代码
}
功能： 匹配页面上所有的元素
注意：要谨慎使用，效率比较低。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通配符</title>
<style>
* {
color: orange;
}
</style>
</head>
<body>
<div>我是div</div>
<p>我是p段落</p>
<span>我是span标签</span>
</body>
</html>
2、标签选择器（元素选择器）
语法：将标签名作为选择器
使用场景：一般用于定义标签的默认样式，或者去除标签默认样式，使用场景很少。在html、css中如html,body,p,h1-h6,ul,li,ol这些元素都带有默认的外边距和内边距。
3、类选择器
语法：.class值 {
css代码
}
属性：class属性的功能就是将标签分类，注意不是以标签名分类。
class属性的值命名规范：由字母数字下划线分隔符组成，尽量不要使用拼音，英文名应见名知意。注意：当这个类由多个单词组成，中间使用下划线或分隔符隔开。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style>
.zhy {
width: 300px;
height: 300px;
background: pink;
}
.zy {
width: 400px;
height: 400px;
background: blue;
}
.zjx {
width: 500px;
height: 500px;
background: orange;
}
</style>
</head>
<body>
<div class="zhy">我是zhy</div>
<div class="zy">我是zy</div>
<div class="zjx">我是zjx</div>
</body>
</html>
4、分类选择器
语法：将标签选择器和类选择器结合起来使用，从而实现对于一些元素不同属性精确定义。
格式：标签选择器.class值 {
css代码
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>分类选择器</title>
<style>
.box {
width: 200px;
height: 200px;
background: orange;
}
p.zhy {
color: red;
}
</style>
</head>
<body>
<div class="box">div标签</div>
<p class="zhy">p标签</p>
</body>
</html>
5、多类选择器
定义：class属性可以定义多个值，多个值之间以空格分割。
含义：一个标签具有class属性且值为多个。
使用场景：用于提升选择器的优先级
格式：.属性值1.属性值2.属性值3 {
css样式
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>分类选择器</title>
<style>
.box {
width: 200px;
height: 200px;
background: orange;
margin-top: 10px;
}
.zy {
color: black;
}
.zhy {
color: red;
}
.zjx {
color: purple;
}
.box.zjx.zxm {
font-size: 25px;
}
</style>
</head>
<body>
<div class="box zy">div1</div>
<div class="box zhy">div2</div>
<div class="box zjx zxm">div3</div>
</body>
</html>
6、id选择器
定义：给一个标签设置一个id属性，通过选择id属性的值来选择这个标签。
注意：一个id属性只能有一个值，不能和其他标签的id属性重复。id属性是一个标签独一无二的身份证明。
语法：#id值 {
css代码
}
使用场景：在静态页布局中用于最外层的盒子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
#box {
width: 200px;
height: 200px;
background: orange;
}
</style>
</head>
<body>
<div id="box">我是div</div>
</body>
</html>
7、群组选择器
功能：定义多个选择器的公共样式
语法： 选择器1，选择器2，选择器3...选择器 {
css样式
}
8、子代选择器：由于标签的嵌套，标签之间会产生两种关系：父子关系和祖先后代（包含父子）的关系。
格式：选择器1>选择器2
注意：选择器1和选择器2之间的关系是父子的关系，最终选中的是选择器2。
9、后代选择器
格式：选择器1 选择器2
注意：选择器1和选择器2之间的关系是祖先后代关系，最终选中的是选择器2。
备注：祖先后代是包含子代的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子后代选择器</title>
<style>
#box>div {
color: red;
}
#box div {
color: blue;
}
#box .zhy {
color: orange;
}
</style>
</head>
<body>
<div id="box">
<div class="zhy">
子代div标签
<div>
后代div标签
<span>我是
<a href="#">a标签</a>
</span>
</div>
</div>
</div>
</body>
</html>
10、伪类选择器：正常情况下选择的是元素，伪类选择器选中的是选中的一种状态。
动态伪类：1、hover：匹配元素鼠标移入时的状态
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hover</title>
<style>
#box {
width: 200px;
height: 200px;
background: orange;
}
#box:hover {
width: 300px;
height: 300px;
background: purple;
}
</style>
</head>
<body>
<div id="box" class="zhy"></div>
</body>
</html>
2、focus：获取焦点时的状态，匹配的是表单控件。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>focus</title>
<style>
input:focus {
width: 400px;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
3、active：匹配元素激活时的状态，一般用于a标签。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>active</title>
<style>
a:active {
color: green;
}
a:link {
color: red;
}
a:visited {
color: pink;
}
</style>
</head>
<body>
<a href="#">我是超链接</a>
</body>
</html>
链接伪类：1、link：访问前的状态
2、visited：访问后的状态
未完，待续！
上一篇： Flutter 安装笔记
下一篇： uni-app学习（三）好用的插件1