CSS 学习笔记_css style= font color-CSDN博客

本文链接：https://blog.csdn.net/weixin_45397995/article/details/113396860

CSS 引用方式

行间样式

直接在 html 的标签上写样式
```
<div stylt="属性名:属性值;">test</div>
```
样式中间有多个参数中间用空格隔开
内部样式表
```
<style>
	内部写样式
</style>
```
外部引入
```
<head>
	    <link rel="stylesheet" href="index.css">
</head>
```
```
<head>
    
    <style>
        @import "index.css";
    </style>
</head>
```
index.css ➡️ css 的文件名
两种方式区别：
1. link 是 XHTML 标签，除了加载 css 外，还可以定义 RSS 等其他事务；@import 属于 css 范畴，只能加载 css。
2. link 引用 css 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
3. link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
4. link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。
（发现在 vscode 中，改变 css 文件保存后浏览器不会自动更新，回到 html 页面 ctrl + s 保存后就可以）

一般用 link 比较多

CSS 选择器

标签选择器

css 中直接写 html 中对应的标签名

div {
    font-size: larger;
    color: #008c8c;
}

类选择器

可以重复

多类名：一个标签可以有多个类名，中间用空格隔开

<div class = "name1 name2">
    test
</div>

使用场景：不同的标签有公共样式时，可以提取出来；减少代码量

<body>
    <div class="box">input style</div>
</body>

..box {
    color: orange;
    font-size: 30px;
}

id 选择器

class 名是可以重复出现的，但是 id 只能唯一

一般和 js 搭配食用

<body>
	<div id="testID">testID</div>
</body>

#testID {
    color: violet;
    font-size: 30px;
}

通配符选择器

符号：*

样式将应用于所有的标签

字体相关

font-family

从做向右读，字体间用逗号分隔
font-weight：字重，normal、bold、bolder、lighter（更细）

定义由粗到细的字符（100-700）。400 等同于 normal，而 700 等同于bold
font-style

normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。

normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。

文本属性

color

文本颜色
text-align

水平对齐方式
- left：左对齐
- center：水平居中
- right：右对齐
text-decoration
- none：没有(可以用于去掉 a 标签的下划线)
- underline：下划线
- line-through：删除线
text-indent

文本缩进

em：相对文本文字的单位，1em = 一个文字大小
line-height

行高，行间距 = 上间距 + 文字高度 + 下间距

Emmet 语法

标签名*n：快速生成 n 个标签
大于号 “>”：包含关系
```
div>span
<div>
	<span></span>
</div>
```
兄弟级 “+”：并列关系
```
div + p
<div></div>
<p></p>
```
标签名 + . + 类名

不加标签名默认是 div

（同理：把.换成#就是 ID）
```
p.nav
<p class="nav"></p>
.nav
<div class="nav"></div>
```

生成类名或者内容是有顺序的

使用$ 和 {}

.demo$*5
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>

div{test}
<div>test</div>

div{test$}*5
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
<div>test5</div>

复合选择器

后代选择器
```
元素1 元素2 {

}
```
中间用空格分隔，元素 2 是元素 1 的后代
子元素选择器

只能选择最近一级的子元素
```
元素1 > 元素2 {

}
```
并集选择器
```
div, p{
	
}
```
元素 1 和元素 2 中间用逗号分隔

同一级的

可以和其他选择器一起用

伪类选择器

用:

例如 a:hover

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

注意事项：写的顺利注意按 link > visited > hover > active

元素显示模式

块级元素

常见的有：div、h、p、ul、ol、li
自己独占一行
width、height、padding、margin 都可以控制
宽度不给默认就继承父元素的
相当于一个容器、里面可以放行内元素或者块级元素

注：p 、h 标签里不能放其他块级元素，这两个都是文字类

行内元素

一行可以显示多个
宽、高直接设置是无效的
默认高度 = 内容高度
行内元素只能容纳文本或者其他行内元素
a 里面不能放 a ，但是 a 里面可以放块级元素

行内块元素

可以直接设置宽、高
一行可以放多个
常见：img、input、td

显示模式的转换

块 to 行：display:block
行 to 块：display:inline
to 行内块：display:inline-block

CSS 背景

background-color

背景颜色
background-image:none | url

背景图片，默认是平铺的
background-repeat:no-repeat|repeat-x|repeat-y
🍅 background-position:x y|方位名词

方位名词：center、top、left 等，写的顺序没关系

只写一个另外一个位置都是默认居中
background-attachment

fixed：固定
合并写法

background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；
背景色半透明

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

最后这个参数就是透明度设置，取值在 0 ~ 1 之间

对盒子内容是不影响的

CSS 三大特性

层叠性
- 样式冲突：就近原则，代码从上往下执行，应该是后面的样式会把前面的覆盖掉
继承性
- 子标签会继承父标签的某些样式：如文本字号、颜色
- 用的好可以降低代码的复杂性
优先级
- 选择器相同：按就近原则
- !important > 行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 继承或者 *
- 遇到复合选择器就会有权重叠加，但是不会有进位
- 继承的权重是 0

盒子模型

margin：外边距

p {
    margin: 5px 10px 5px, 10px; 对应为：上、右、下、左（顺时针）
    margin：5px,10px; // 5px 是上下，10px 是左右
}

border：边框
- border-width：边框粗细
- boder-style：样式
- border-color：颜色
- border:1px solid red
- boder-top/right/bottom/left
- border-collapse：边框合并问题
- 边框会影响盒子的实际大小
padding：内边距
- 内容和盒子边界的距离
- padding 也会影响盒子大小
- padding 其他的和 border 差不多