CSS笔记

CSS笔记

一、什么是CSS
CSS全称cascading style sheets,层叠样式表，即效果可以叠加
二、为什么学习CSS
1.虽然HTML的标签中的属性可以设置样式效果，可是细节处理不好。
2.HTML实现样式会有大量的重复代码，维护成本高。CSS能够做到网页和内容分离，对网页中元素的位置排版等效果进行像素级的精准控制。CSS用来美化网页，需要依赖HTML。
三、CSS的基本使用
1.行内样式
将样式定义在HTML标签上的style属性中；
用行内样式写的CSS耦合度较高。
< p style=“color:red; font-size:20px”>< /p>
2.内部样式（内嵌式）
定义在head标签中的style标签中
< head>
p {color=“red”; font-size=“20px”}
(p 指的是HTML中的段落，称为标签选择器)
< /head>
3.外部样式（链接式，常用，CSS自成为一个文件）
通过link标签将外部的CSS文件引入到HTML中。
< link rel=“stylesheet” type=“text/css” href=“路径”>
rel：当前文件与引入文件之间的关系
type：引入文件的类型，此处为CSS类型
href：（超链接a标签中的必须属性）引入文件的路径。

注意：1.CSS的优先级遵循就近原则。 2.CSS声明要以分号结尾，声明要用{}括起来；3.规范：一行写一个声明，如果属性值由多个单词组成，要给值加上双引号。4.CSS的注释：同java，/* 注释内容 */
四、基本选择器
1.通用选择器：选择所有标签
星号 {属性名：属性值}


2.元素选择器：选择指定标签
标签名 {属性名：属性值}


3.id选择器：通过id来精准选择唯一的属性
井号#id属性值 {属性名：属性值}


注意：不要忘记加#号，不同的id要保持唯一性，定义id的规则：不能以数字开头，可由字母、下划线、数字，中划线组成。
4.class选择器：选择指定class属性值的元素
.class属性值{属性名：属性值}


5.选择器的优先级问题（权重值）：
id选择器 100>类选择器 10>元素选择器 1>通用选择器

五、组合选择器
1.后代选择器（以空格分开）
选择指定元素的所有后代的元素


.nba li{} 意思为指定class为.nba元素后的所有li元素
2.子代选择器（以大于号隔开）
选择指定元素的后代的第一代元素


.nba+li{} 意思为指定class为.nba元素后的第一代li元素
3.普通兄弟选择器（以~隔开）
选择指定元素后的指定的兄弟元素，只会向下找


4.相邻兄弟选择器（以+隔开）
选择与指定元素的相邻的下一个兄弟元素，只会向下找


六、CSS的常用属性
1.背景属性
background-color 设置元素的背景颜色
background-image：url（图片地址）设置元素的背景图片你，默认背景重复显示。设置背景是否重复：no-repeat 不重复 repeat-x 纵向重复 repeat 横向重复
background-size：设置图片的大小 ？xp

2.文本属性
color 字体颜色
text-align 对齐方式（默认left左对齐）
text-decoration 文本修饰 overline 上划线
underline下划线 line-through 中划线
当把三个结合起来时，可同时实现上中下划线。 none 去除文本修饰（常用于去除超链接下面的线段）
text-indent：2em 设置缩进效果（一个em为一个字的宽度）
text-align：水平对齐方式 ；左中右，justify两端对齐

3.字体属性
font-family ：宋体设置字体
font-size：10px
font-style：字体风格 normal正常体 italic斜体 oblique斜体（强制斜体）
font-weigth：字体加粗 normal正常粗 bold一般加粗 bolder着重加粗 lighter轻微加粗 number：100-900之间的加粗

4.display属性（展示属性）

5.float浮动属性

不要纠结什么时候用，到后期会用框架来处理

6.边框border属性

1. 一起设置元素边框的宽度、类型、颜色

2. 单独设置边框的宽度、类型、颜色
   border-color
   border-width
   border-style边框类型

   dotted：点线
   dashed：虚线
   solid：实线
   double：两个边框
   groove：3D沟槽边框
   ridge：3D脊边框
   inset：3D嵌入边框
   outset：3D突出边框
   

3. 设置属性值的顺序：
   设置一个属性值：表示四个边框均一致
   设置两个属性值：表示上下一致，左右一致
   设置三个属性值：表示上右下不一致，左右一致
   设置四个属性值：表示四个框都不一致
   
   

4. border-collapse：设置是否将表格边框折叠为单一边框
   属性值：collapse（单元格边框合并，常用来合并table中的边框）
   separate（默认，单元格边框独立）
   

7.内边距padding属性：
用来设置内边距：（顺序：上右下左）
设置一个值：四个方向一致
设置两个值：上下一致，左右一致
设置三个值：上右下不一致，左右一致
设置四个值：四个方向都不一致

![加粗样式](https://img-blog.csdnimg.cn/20210201215220209.p
使用top right bottom left 可单独设置四个方向的内边距。
8.外边距margin
道理同padding一样，使用top right bottom left 可单独设置四个方向的外边距。