CSS基础教程笔记

参考的教程是W3Cschool，写给自己看的，很主观，有些太基础的东西就略过了

这里是我一边自学一边写的个人主页，2-3天更新一次，欢迎围观：Your Ideal World

CSS入门基础

1. 基础

1.1.选择器

• 元素选择器：p{}
• 类选择器：.center{}
• 元素+类选择器：p.center{}
• id选择器：#center{}
• 通用选择器（影响HTML页面上的所有元素）：*{}
• 组合选择器：h1,h2,p{}
• 状态选择器a:hover{}
• 子元素选择器ul li{}

1.2.css引入

内部css：

<style>
    body{...}
</style>

外部css：

<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

行内css:

<h1 style="color:blue; text-align:center"></h1>

注意！ 多重样式会层叠为一，当定义项重叠时，执行优先级为：

1. 行内样式（在 HTML 元素中）
2. 外部和内部样式表（在 head 部分）
3. 浏览器默认样式

2. 实用属性

一些占用：inherit /*继承父元素*/

2.1. 颜色

2.1.1. RGB颜色

rgb(red,green,blue)

• 范围0-255，(0,0,0)为黑色
• (255,255,255)为白色
• 灰色则三个值相同

2.1.2. RGBA颜色(RGB+透明度)

在RGB的基础上指定透明度，范围0-1，如
rgba(255, 99, 71, 0.5)为一个半透明的红色色块

2.1.3. HEX颜色(十六进制)

直接表示为#ff00ff

2.1.4. HSL颜色

hsl([0~360], n1%, n2%)

分别代表色相（一个360度的转盘）、饱和度、明度
同样，也有HSLA

2.2. 背景

简写

在一条声明中设置所有背景属性

div {
  background: #ffffff url("tree.png") no-repeat right top;
}

属性值顺序为color, image, repeat, attachment, position. 如果单个属性涉及多个属性值也可以不用带括号直接写下去

background-color

div {
  background-color: 颜色;
  opacity: 透明度;
}

除此之外，还可以通过gradient()生成渐变色背景，详见CSS3渐变

注意: opacity会使所有子元素都继承相同的透明度，只作背景透明不推荐使用，可以用rgba。

background-image

默认情况下，图像会重叠以覆盖整个元素

div {
  background-image: url("./image.png");
  opacity: 0.3;
}

如果想自定义重复方向（水平或数值），或不重复，则用background-repeat指定：

div{
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-repeat: no-repeat;
}

background-attachment

指定背景图像是固定位置or随着页面滚动（默认滚动）

值	描述
scroll(默认)	随着页面滚动
fixed	固定位置
local	随着元素内容滚动
initial	恢复默认style（无论父元素如何指定）
inherit	略

background-position

用于指定背景图像的位置：

 div{
    background-position:[横坐标] [纵坐标];
 }

横纵坐标以页面左上角为原点，值可以是：

值	描述
right left center	左，居中，右
top center buttom	上方，居中，下方
x% y%	水平位置，垂直位置的百分比
xpos ypos	CSS单位的x、y值。如px，em等

不同格式可以混合使用。若仅指定一项，则另一项默认居中。

?background-clip/background-origin

规定背景的绘制区域/相对于什么位置定位

值	描述
border-box（默认）	裁剪到边框盒
padding-box	裁剪到内边距框
content-box	剪裁到内容框

background-size

background-size: length|percentage|cover|contain;

*length:*图像的高度、宽度
*percentage:*按百分比设置高度、宽度
*cover:*自动调整至完全覆盖整个区域
*contain:*TODO

2.3. 框属性

各个框属性的图示如下：

2.3.1 border

简写

其中，border-style是必须声明的，否则将不显示

div{
  border:[border-width],border-style,[border-color]
}

border-width

可以设置一到四个值（用于上边框、右边框、下边框和左边框）

border-color

可以设置一到四个值（用于上边框、右边框、下边框和左边框）

border-style

指定边框样式，有虚线、点线、实线等，详见

• 可以设置一到四个值（用于上边框、右边框、下边框和左边框）

注意：border-style的默认值为空，必须指定，否则不显示

border-radius

设置圆角边框，可用length，百分比，inherit

border-image

语法如下：
border-image: source slice width outset repeat|initial|inherit;

值	解释
border-image-source	边框的图像url
border-image-slice	向内偏移量
border-image-width	边界宽度
border-image-repeat	图像边界是否拉伸(strech,默认值)、重复(repeat)或铺满(round, space)

注意：经常会发现表格内有白边，这是因为默认样式是内外双边框，通过border-collapse=collapse修正这一情况

2.3.2. 边距

外边距：margin

所有外边距属性都可以设置以下值：

• auto - 浏览器来计算外边距，使元素在容器中水平居中. 一般的用法有：margin:auto(上下左右都居中)和margin 0 auto(上下不居中，左右居中)
• length - 以 px、pt、cm 等单位指定外边距
• % - 指定以包含元素宽度的百分比计的外边距
• inherit - 指定应从父元素继承外边距

内边距：padding

简写属性:
padding: top right bottom left

注意1：如果元素定义了width，那么它的宽度将会是width+padding的总和！
要避免这种情况，使用box-sizing将宽度保持在一定的值。详见3.3. box属性

注意2：关于外边距会自动合并的问题，见：https://baijiahao.baidu.com/s?id=1728886703729513261&wfr=spider&for=pc

CSDN、知乎的做法是令上边距=2 × 下边距或下边距=2 × 上边距

2.3.3. 高度和宽度

width, height

规定元素的宽度、高度，不随浏览器的尺寸发生改变。

注意：height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

max-width, max-height

规定元素的宽度、高度，随着浏览器的尺寸发生改变。

2.3.4. 轮廓 outline

可以简单理解为在border之外的一个新的border，可能与其他内容产生重叠。

和border的使用方法基本一致唯一的区别是，可以使用outline-offset: length设置其偏移量。

2.4. 文本

2.4.1. 文本颜色

color定义文本颜色，直接输入css颜色值。

2.4.2. 对齐

text-align:left|right|center|justify

文本对齐，属性值可以是left, right, center, justify(两端对齐)

vertical-align:top|middle|bottom
元素和文本的垂直对齐，可以是上对齐、居中、下对齐

2.4.3. 文本装饰

text-decoration:line|color|style
用于规定文本的上下划线、波浪线等，写md解释器用的。详见说明文档

text-decoration : none 用于取消文本的装饰很有用，如在自定义标签取消它的下划线时

2.4.4. 文字间距

text-indent : [length] 文本第一行的缩进

letter-spacing : [length] 文中字符间的间距，可以是负数

line-height : [length] 行高

word-spacing : [length] 字间距

2.4.5. 文本阴影

text-shadow: 
h-shadow // 必需。水平阴影的位置。允许负值。
v-shadow // 必需。垂直阴影的位置。允许负值。
blur // 可选。模糊的距离。
color // 可选。阴影的颜色。

2.5. 字体

简写

font:包含以下属性值：

• font-style
• font-weight
• font-size/line-height
• font-family

2.5.1. 字体样式

font-size字体大小，可指定px、em、%等
建议使用％ 和 em ，这会令文字在所有主要浏览器中显示相同的大小，并允许所有浏览器调整文本大小.

1em = 1vw = 16px

另外，响应式单位vw可以使字体跟随着浏览窗口大小调整，令尺寸在视觉上保持不变。详见css尺寸

附：一些实用的素材网站

• bootstrap icons&fonts

功能很强大，甚至给你定制好了一整套前端风格喂到你嘴里，可编辑。详见
官方文档

• google font&icons

可以提供白嫖字体的开源免费API，可商用，可编辑。官方文档

• font awesome

需要申请kit，分免费用户和付费用户。官方文档

使用教程以font awesome作为示例，其他步骤都是差不多的

先在官网上申请一个kit，在head中引入：

<script src="https://kit.fontawesome.com/${你申请到的kit名称}.js" crossorigin="anonymous"></script>

然后从官网上查阅免费的素材名称，就可以愉快地使用啦

<i class="图标名称"></i>

2.6. 链接

有四种状态，分别是：

• a:link - 正常的，未访问的链接
• a:visited - 用户访问过的链接
• a:hover - 用户将鼠标悬停在链接上时
• a:active - 链接被点击时

注意：如果为多个链接状态设置样式，请遵循如下顺序规则：

• a:hover 必须 a:link 和 a:visited 之后
• a:active 必须在 a:hover 之后

2.7. 光标

可以通过改变cursor属性定制鼠标移动到元素上时的光标，详见： https://www.w3school.com.cn/tiy/t.asp?f=css_cursor

2.8. 列表

<ul> - 无序列表

<ol> - 有序列表

可设置的css样式：

• (简写)list-style
• list-style-image:url('...') （常用）使用自定义的列表项标记图片
• list-style-type: 使用预设的列表项标记样式，可以指定none以删除预设样式
• list-style-position：可以是outside或inside，影响换行后的缩进

2.9. 表格

html表格标签补习

<table>
  <!-- <tr>表示一行 -->
  <tr>
    <!-- <th>表示表头 -->
    <th>heading1</th>
    <th>heading2</th>
  </tr>
  <tr>
    <!-- td表示一个单元-->
    <td>cell(1,1)</td>
    <td>cell(1,2)</td>
  </tr>
</table>

one`以删除预设样式

• list-style-position：可以是outside或inside，影响换行后的缩进

2.9. 表格

html表格标签补习

<table>
  <!-- <tr>表示一行 -->
  <tr>
    <!-- <th>表示表头 -->
    <th>heading1</th>
    <th>heading2</th>
  </tr>
  <tr>
    <!-- td表示一个单元-->
    <td>cell(1,1)</td>
    <td>cell(1,2)</td>
  </tr>
</table>