CSS基础学习

CSS：CSS样式表/层叠样式表

一、CSS语法规范

选择器+一条或多条声明

例如：

p {
    color: red;
}

需要写在style标签中，style标签通常包含在head中

• 属性和属性值之间用":"分开
• 每一个属性之间用";"分开

CSS代码风格

• 使用展开格式（每个属性和属性值占用一行）
• 使用小写字母来书写样式
• 属性值前面，冒号后面，保留一个空格
• 选择器（标签）和大括号中间保留一个空格

二、CSS基础选择器

选择器：用于选择某个标签

选择器分为两大类：

• 基础选择器
• 复合选择器

1、基础选择器

标签选择器

将标签名作为选择器，选出所有标签，修改其样式

p {
    color: green;
}

可以将所有的段落中的文字变为绿色

类选择器

使用类作为选择器，在最前面加上一个点，可以选出所有该类的标签

.red {
    color: red;
}

<p class="red">变红的文字</p>

不能用标签名字作为类名

多个单词之间可以使用短横线（-）来分割，不要使用纯数字/中文命名

多类名：一个标签可以指定多个类名，每个类名都可以选择一个样式

<div class="big red">又大又红的盒子</div>

每个类之间使用空格分隔

id选择器

在前面加上#，可以选择相应id的选择器

#pink {
    color: pink;
}

一个页面中每个元素的id是唯一的

通配符选择器

使用*，表示选取页面中所有元素

* {
    color: red;
}

特殊情况才使用

三、CSS字体属性

1、字体系列

• font-family:定义文本字体类型

p {font-family: “微软雅黑”}

如果有多个字体，需要使用英文逗号隔开；如果一个字体有多个单词组成，需要加上引号

多个字体：优先使用前面的字体，如果没有这种字体就用下一个

2、字体大小

• font-size:定义字体大小

p {font-size: 16px}

px表示像素

3、字体粗细

• font-weight:设置字体粗细，存在的属性有：normal/bold/bolder/lighter/数字

p {font-weight: 1000}

4、文字样式

• font-style:定义文字样式，italic为斜体

复合属性

文字样式/粗细/大小(/行间距)/字体

font: itallc 1000 24px/20px “宋体”

可以省略前两个,但是必须保留后两个

注意：这里的大小/行间距中，行间距可以使用一种不加单位的方法，例如24px/1.5，意思就是行高即为当前文字大小的1.5倍。

四、CSS文本属性

1、文本颜色

• color：表示文本颜色，表示方式：英文（red）/十六进制（#ff0000）/rgb表示法（rgb(255,0,0)）

color: #ff0000

2、文本对齐

• text-align用于设置对齐方式，只能设置水平对齐

text-align: center

本质上是让盒子中的文本位于中间

right:右对齐/left:左对齐

注意：想要图片居中对齐，需要将图片放在一个盒子或其他地方中，并让那个东西设置text-align：center

3、文本装饰

• text-decoration修饰文本，属性有：none/underline下划线/overline上划线/line-through删除线

text-decoration: line-through

经常使用的一句话：

a {
    text-decoration: none;
}

取消a的下划线

4、文本缩进

• text-indent定义首行缩进（10px/2em）

text-indent: 2em

em表示当前文字大小，是一个相对单位。如果当前元素没有设置大小，则会按照父元素的大小

5、行间距

line-height用于控制行间距

line-height: 20px

注意：行间距包含上间距、文本高度、下间距。改变行间距本质上是改变上间距和下间距

五、CSS的引入方式

根据CSS样式书写的方式，CSS样式表可以分为三大类

• 行内样式表（行内式）：在一个标签之中放入style属性，放在双引号之中，不推荐使用
• 内部样式表（嵌入式）：所有CSS放在一个style标签之中，一般放在html的head之中
• 外部样式表（链接式）：将CSS单独写到CSS文件中，适合样式较多的情况。

外部样式表实现方式：

• 把所有代码放在一个.css文件当中
• HTML中的head中放入一个link标签

<link rel="stylesheet" herf="CSS文件路径">

六、chrome调试工具

在chrome浏览器中点击F12或右键检查打开调试工具

左边是html，右边是css；修改右边的css属性可以直接改变页面元素属性

想要选择页面中的元素，可以点击左上角的图标，再去网页中寻找元素

七、emmet语法

使用缩写来提高html/css的编写速度，vscode中已经集成该语法

• 生成多个相同标签：div*3
• 父子级关系的标签：ul>li
• 兄弟关系标签：div+p
• 带有类名或id名的div：.demo/#two
• 在上面的基础上，如果类名中带有自增顺序，可以使用$表示需要自增的数，例如.$*10会生成10个div，类名从1到10
• 生成的标签内部想要写内容，可以在后面添加大括号{},括号里面写内容

例如：.demo$*10{我是一个demo}

快速生成css样式：可以使用首字母缩写

• 例如，text-indent = 2em可以缩写为ti2em

八、CSS的复合选择器

就是对基础选择器进行组合，可以更准确，更高效的选择目标元素

常用的复合选择器：

• 后代选择器
• 子选择器
• 并集选择器
• 伪类选择器

1、后代选择器

使用可以选择父元素里面的子元素，通过两个元素之间空格实现

元素1 元素2 {样式声明}

ul li {
    color: red
}

可以选择出所有ul中的li，而不是其他地方的li（例如ol中的li）

元素2可以是儿子，也可是孙子，只要是元素1的后代即可

后代选择器可以是任意一基础选择器的组合。例如：.nav li表示所有nav类中的li子标签

2、子选择器

只选择它的亲儿子，使用>

元素1 > 元素2 {样式声明}

div > p {
    color: red
}

只会将div的直接子标签p改为red

3、并集选择器

使用逗号，选择多个选择器

元素1, 元素2 {样式声明}

div,
p {
    color: red;
}

4、伪类选择器

用于向某些选择器添加特殊的效果，用冒号表示

例如：div:hover表示所有div被鼠标覆盖的时候显示的样式

链接伪类选择器：

• link：选择所有未被访问的链接
• visited：选择所有已被访问的链接
• hover：选择鼠标指针位于其上的链接
• active：选择活动链接（鼠标按下为松开的链接）

a:link {
    color:red;
}

实际开发中，需要按照link-visited-hover-active的顺序来写链接伪类选择器（LVHA）

.focus伪类选择器

用于选取获得焦点的表单元素（例如光标位于这个表单元素上的时候）

input:focus {
    background-color:yellow;
}

九、CSS元素显示模式

元素显示模式：元素以什么方式进行显示，例如div自己占一行，一行多个span

HTML元素分类：

• 块元素：自己占一行
• 行内元素：一行可以占好几个

1、块元素

独占一行

包含：h1-h6，p，div，ul，ol，li

宽度默认为父级元素的100%，是一个容器及盒子，里面可以放行内或块级元素

注意：文字类的元素不能使用块级元素；p、h1-h6标签等主要用于存放文字，因此内部不能放块级元素

2、行内元素

包括a、strong、b、em、i、del、ins、u、span等

特点：

• 一行可以放多个元素
• 无法设置高度和宽度，默认宽度是其本身的宽度
• 只能容纳文本或其他行内元素

注意：a中不能再放a，但是可以放块级元素

3、行内块元素

行内元素中有几个特殊的标签：img、input、td，同时具有块元素和行内元素的特点，通常称为行内块元素（资料中查不到）

特点：

• 一行可以显示多个，但是每个元素的高度宽度可以设置

4、元素显示模式的转换

一个模式的元素需要另一种模式元素的特性，例如a想要设置宽度和高度

• 转换为块元素：display:block
• 转换为行内元素：display:inline
• 转换为行内块元素：display:inline-block

让单行文字垂直居中的方法：让文字的行高等于文字的高度
例如：盒子中height=40px，则也让line-height=40

十、CSS背景

1、背景颜色

background-color: 颜色（三种颜色表示方式）
transparent表示默认颜色（透明的/清澈的）

注意：可以设置背景图片为透明：

background: rgba(0,0,0,0.3)

其中第四个参数表示透明度，即为alpha值，范围从0到1，0为透明，1为不透明

2、背景图片

background-image：(none/url(图片地址))

例如:background:url(images/logo.png)

常使用于logo或装饰性的小图片或超大背景图片，便于控制位置

3、背景平铺

background-repeat:repeat/no-repeat/repeat-x/repeat-y

分别表示平铺/不平铺/沿x平铺/沿y平铺

注意：可以同时添加背景图片和背景颜色，只不过背景图片会压住背景颜色

4、背景图片位置

background-position: x y;

表示x坐标和y坐标，可以使用方位名词或精确单位

• 方位名词，比如left top或top left，顺序无关，居中表示center，如果省略一个参数则表示居中
• 精确单位：第一个是x，第二个是y（x表示距离左侧，y表示距离上侧）
• 混合使用：第一个也一定是x，第二个也一定是y

5、背景图片固定（背景附着）

background-attachment:scroll/fixed

表示背景是否被固定在屏幕的固定位置还是会移动，scroll表示随对象滚动，fixed表示背景图像固定

6、背景复合写法

背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置

background: black url(pictures/a.png) no-repeat fixed center top;

十一、CSS三大特性

三大特性：

• 层叠性
• 继承性
• 优先性

1、层叠性

给相同选择器设置了相同的样式，但是值不同时：

遵循就近原则：谁离结构近看谁，并且不同样式之间不会覆盖

2、继承性

子标签会继承父标签的某些样式

div {
    color: red;
}

<div>
    <p>我是粉色的，我继承了div的颜色</p>
</div>

主要继承的样式：text-、font-、line-开头的样式，以及color属性

行高的继承性

子元素可以继承父元素的行高，并且如果复合写法中父元素的行高设置为了子元素的n倍，那么这个属性在子元素中也可以被继承，同时子元素的行高看的是子元素自己的字体大小的n倍。

body {
    font: 12px/1.5 宋体
}

这里的1.5表示1.5倍的当前元素的行高，即12px的1.5倍，当子元素继承它时，如果子元素的字体大小是16px，那么最后子元素的行高会变为24px，而不是18px。

优势：子元素可以根据自己的文字大小调整行高

3、优先级

同一个元素指定了多个选择器，首先选择谁？

规则：

• 选择器相同，则执行层叠性（就近原则）
• 选择器不同，则根据选择器权重执行

权重由4组数字组成，并且不会进位。数字从左向右依次比较，如果某一位数字相同则判断下一位

权重叠加：如果是复合选择器，则需要计算权重

例如：

ul li {
    color: red;
}
li {
    color: green;
}

在这种情况下，li的权重为0,0,0,1，而ul li的权重为0,0,0,1+0,0,0,1=0,0,0,2