CSS学习随记
CSS学习笔记
1.什么是CSS
Cascading Style Sheet简称CSS，是层叠样式表
主要用于变现层（用于美化网页）
2.CSS快速入门
1.语法
选择器{
声明1；
声明2；
声明3；
}
2.css的优势
①内容和表现分离
②网页结构表现统一，可以实现复用
③样式十分的丰富
④使用独立的HTML和CSS文件
⑤利于SEO，容易被搜素引擎收录
3.三种CSS导入方式
1.行内样式:在标签元素中，编写一个style属性，编写样式即可
<h1 style="color:red">你好,CSS</h1>
2.内部样式：
<style>
h1{
color:red;
}
</style>
3.外部样式
<head>
<link rel="stylesheet" href="../resources/css/index.css">
</head>
ps:样式优先级问题：
一般： 就近原则（谁离这个标签近，谁的优先级就高）。
3.三种基本选择器 --重要
1.选择器的作用
选择页面上的某一个或者某一类元素
①标签选择器 -->标签选择器，会选择到页面上所有的这个标签的元素
h1{
color:red;
}
②类选择器 -->好处：可以多个标签归类，是同一个class，可以复用
.class的名称{
}
③ID选择器 --> id必须保证全局唯一
#id名称{
}
三种选择器的优先级：
id选择器>类选择器>标签选择器
4.高级选择器
4.1层次选择器
4.1.1后代选择器：在某个元素的后面
body p{} -->body标签里面的所有p标签都生效。
4.1.2子选择器
body>p{} -->body标签的子代p元素才会生效。
4.1.3相邻兄弟选择器
.ccl + p{} -->类选择器相邻的p元素才生效 （只有一个生效，对下不对上）。
4.1.4通用选择器
.ccl~p{} -->类选择器同级的p元素才会生效 （一样的对下不对上）。
4.2结构伪类选择器
ul li:first-child{} -->选择ul后代中的第一个子元素
ul li:last-child{} -->选择ul后代中的最后一个元素
p:nth-child(1){} -->选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
p:nth-of-type(2){} -->选中父元素下的p元素的第二个，按类型来选择
a:hover{} -->当鼠标移动到a标签时，会发生改变
4.3属性选择器 -- 重要
a[id]{} -->选择a标签中有id属性的元素
a[id=first]{} -->选择a标签中id为first的元素
5.CSS的作用
1.有效的传递页面信息
2.美化网页
3.凸显页面的主题
4.提高用户的体验
span标签：重点要突出的字，使用span套起来。
6.盒子模型
border:边框 粗细 样式 颜色（1px,solid,red）
margin：可以是元素居中
padding:内边距
浙公网安备 33010602011771号