前端学习笔记day02--CSS
前端学习笔记day02–CSS
一、CSS知识
CSS（cascading style sheet）：层叠样式表（级联样式表）
作用：设置html标签的字体、颜色、背景、边框、边距和宽高等，使界面美观、漂亮，从而提高用户体验。html搭起结构，CSS起美观作用，html和CSS分离、解耦，方便统一修改维护。
二、CSS和html结合
写法：
选择器{
声明；（属性名：属性值；）
}
1.行内样式
行内样式作用域小，只作用于行内。style属性：style=""
属性值 == 样式属性名：属性值；样式属性名：属性值；
color:red;字体颜色，font-size:数字px 字体大小。
<h1 style="color:red;font-size: 4px;">123h1>
2.内部样式
作用域在当前页面，实现了内容和样式的初步分离。在head标签内，写style标签。
选择器{
属性名：属性值;
属性名：属性值;
}
<head>
<meta charset="UTF-8">
<title>title>
<style>
h1{
color:blue;
font-size:50px;
}
style>
head>
<body>
<h1>1312312h1>
<h1>241h1>
body>
3.外部样式
作用域是所有页面。
首先创建一个.css文件，不用写style标签，直接写选择器：
h1{
color:blue;
font-size: 20px;
}
然后在.html文件的head中写一个。用href属性配置CSS文件；rel表示连接的文件是什么类型的， 默认为rel="stylesheet"，样式表。
<link rel="stylesheet" href="CSS/test.css" />
<style>
@import url("CSS/test.css");
style>
除了link标签，还有另一种调用方式。
<style>
@import url("CSS/test.css");
style>
两种方式在加载时不同。先把CSS导入到html中，结构和样式同时显示；@import先加载html，后用CSS渲染。
4.样式的优先级
如果一个页面同时用了多种样式方法，我们需要知道哪个样式会起作用，也就是哪个样式的优先级更高。
行内样式 > 内部样式 > 外部样式
优先级存在就近原则。
三、CSS选择器
1.基本选择器
（1）标签选择器
在head中写，标签中写一个p选择器。该选择器可以在中选中所有p标签。同样的，如果想选中或者，写相应的选择器即可。
<style>
p{
color:red;
}
a{
color:blue;
}
style>
<body>
<p>
123
p>
<h1>
456
h1>
<a>
789
a>
body>
（2）id选择器
在中需要添加id的元素中添加id，如：456
，标签中写一个#id格式的选择器，该选择器可以唯一的选择一个元素，注意id不能用数字作开头。
<style>
#title{
color:red;
}
style>
<body>
<h1 id="title">456h1>
body>
（3）类选择器
类选择器选中的是带有class属性的元素，同一个class属性可作用在多个元素上。
在选中的元素中添加class属性：class=""，在head中写 ，标签中写.class属性值的选择器，该选择器会选中带有相同class属性值的所有元素。
<style>
.red{
color:red;
}
style>
<body>
<h1 class="red">h1标签h1>
<p class="red">p标签p>
body>
（4）全局选择器
在head中写，在标签中写一个*选择器。全局选择器可以选中页面内所有的元素，不区分元素类型。
<style>
*{
color:green;
}
style>
<body>
<a>aa>
<p>pp>
<h1>h1h1>
body>
（5）并集选择器
结合了标签选择器和id选择器的功能，写选择器时将标签和id标签用逗号隔开，可以写多个标签作为选择器。
<style>
a,p,#qwe{
color:gold;
}
style>
<body>
<a>aa>
<p>pp>
<h1 id="q