CSS基本知識一文通

本文參考:

mdn web docs: https://developer.mozilla.org/zh-CN/docs/Learn/CSS

W3School: https://haiyong.site/doc/w3/css/index.html

1 CSS是何物?

Cascading Style Sheets，层叠样式表，定義如何顯示HTML元素，⽤于设计⻛格和布局。
1994推出CSS第一版，1998第二版，从1999到現在都在做CSS3。
CSS优勢是簡洁、灵活、兼容性強、能減少開發維護成本、提高頁面性能。
語法組成: 選擇器{属性: 值; 属性: 值;…}

2 選擇器
要用css对HTML中的元素控制，當然要先選擇到那個元素。選擇器可以進行分組，用逗號分開的一組選擇器分享相同的聲明。子元素的属性繼承父元素。

1 id選擇器
為標有特定id的HTML元素指定樣式，HTML元素設id属性，css以”#”定義，一個id只能一個元素使用。
#para1{text-align:center;color:red;

2 class選擇器
HTML設class，css以”.”定義，可以在多個元素中使用。
.center{text-align:center;}

3 標簽選擇器(元素)
選擇所有該名字的元素
1
2
3
4
label{
color:red;
text-align: center;
}
如果標簽和class一起出現，就是選中每個类的該標簽元素。

4 属性選擇器
1
2
3
4
[title]{
color: blue;
}
<h1 title= "helloworld">Hello world</h1>
可以使用属性和值:[title=helloworld]，包含該属性的所有元素:[title~=hello]

5 偽類選擇器
用來添加一些特列效果的選擇器
1
2
3
4
a:link{color:#000000;}/*未訪問*/
a:visited{color:#00FF00;}/*已訪問*/
a:hover{color:#FF00FF;}/*鼠標懸停*/
a:active{color:#0000FF;}/*點击時*/
6 偽元素選擇器
選擇特殊元素
1
2
3
4
5
p:first-line{
color:#ff0000;
font-variant:small-caps;
}
/*:first-letter,:first-line,:before,:after*/
7 組合選擇器
后代:以空格分隔
子元素:以”>”號分隔
相鄰兄弟:以”+”號分隔
普通兄弟:以”-“分隔

8 樣式優先級
層疊是用來解決样式冲突的，多重樣式將層疊為一個，优先級: 內聯樣式(元素內)>內部樣式表(head里style)>外部樣式表>瀏覽器缺省設置。
css樣式來源优先級: ⽤户代理样式表中的 !important 声明> ⽤户样式表中的 !important 声明> 作者样式表中的 !important 声明 > 作者样式表中的常规声明（这些是我们 web 开发⼈员设置的样式) ⽤户样式表中的常规声明(由⽤户设置的⾃定义样式)>⽤户代理样式表中的声明(例如，浏览器的默认样式，在没有设置其他样式时使⽤)。
外部樣式表是最佳選擇，指将 CSS 编写在扩展名为.css 的单独文件中，并从 HTML元素引用它。

2 CSS樣式
1 背景
background-color: 背景色
background-image: 背景图像
background-repeat: 背景图像平鋪，默認从左上角向兩個方向平舖，可以用repeat-x和repeat
background-position: 背景定位，可以用top，left等關鍵字，也可以用長度值和百分比值(兩個參數，如果只提供一個，默認水平方向)。

background-attachment: 背景關聯，可以設定可視区是否受到滾动的影响

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
    /*background-attachment:fixed*/
  }

2 文本

text-indent: 文本縮進，縮進每個元素第一行，p{text-indent: 5em;}
text-align: 水平对齊，有值left、right、cener、juctify(兩端对齊)、inherit(繼承)
word-spacing: 字間隔，可用px和em
letter-spacing: 字母間隔
text-transform: 处理文本大小寫，有值none、uppercase、lowercase、captialize(对首字母大寫)
text-decoration: 文本裝飾，有值none、underline、overline(上划戕)、line-through、blink(閃爍)
white-space: 处理空白符，有normal(各个字之間只會有一個空格)、pre(不會忽略)、nowrap(不換行)、pre-line、pre-wrap
direction: 文本方向，有ltr和rtl

3 字体
font-family: 定義字体系列
font-style: 規定斜体文本，有值normal、italic、oblique
font-variant: 用small-caps設定小型大寫字母
font-weight: 設置粗細
font-size: 文本大小

4 列表
list-style-type: 修改列表项標誌
list-style-image: 列表項图像
list-sryle-position: 標志位置

5 表格
border-collapse: 是否把表格边框合并为单一的边框
border-spacing: 设置分隔单元格边框的距离
caption-side: 设置表格标题的位置
empty-cells: 设置是否显示表格中的空单元格
table-layout: 设置显示单元、行和列的算法
3 盒模形
在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

1 內边距

padding: 接受長度值或百分比，不允許负值

h1{padding: 10px;}/*各边都有*/
h1{padding: 10px 0.25em 2ex 20%;}/*上右下左順序*/
he{padding-top: 10px;}/*單一边*/
/*內边距的百分數值是相對于其父元素的width計算的，width改变他
們也會改变*/

2 边框

border-style

可以通过border-style設定边框樣式，也可通过border-top-style設置單边樣式

none: 無边框
hidden: 無边框
dotted: 点狀边框
dashed: 定義虛線
solid: 定義實線
double: 雙線
groove: 3D凹槽边框
ridge: 3D壟狀边框
inherit: 繼承

border-width

边框寬度，可以指定長度值，如2px或0.1em，也可用關鍵字:thin、medium和thick。
border-color

边框顏色，可以接受4個頻色值，可以是命名顏色，也可以是十六進制和RGB值，顏色值小于4個，值复制就會起作用。默認值為透明transparent。
1
2
3
4
p {
border-style: solid;
border-color: blue red;/*上下藍，左右红*/
}
3 外边距
外边距與內边距不同的是外边距可以為任意長度單位，甚至是負值

外边距合井:當兩個垂直外边距相還，將形成一個外边距，高度等于兩個外边距高度中的較大者。
一個元素在另一元素上，下和上會合并:

包含時:

4 展示，定位
CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。HTML頁面的正常布局流是從左到右，從上到下的。
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，其高度寬度與父元素一致。

1 display
用于定義建立布局時元素生成的顥示框類型
block: 顯示為块級元素，前后有換行符
inline: 默認，內聯元素
inline-block: 行內块元素
list-item: 作為列表
table: 作為表格

display: flex
彈性布局，能擴展收縮flex容器內的元素以最大限度填充可用空間，設為flex布局后，block、float、clear和vertical-align將失效，當把一個元素的display設置為flex或inline-flex后，它就成了一個容器。

它存在兩根軸:水平主軸和垂直交叉軸，flex容器又有自己的属性。
可以用flex-grow和flex-shink規定flex容器相对于其他項進行收縮和擴展的量，用flex-basis初始化item占據主軸空間的尺寸，而flex是上面三個合并的簡寫。
flex-direction: 定義主軸

justify-content: item在主軸上的對齊方式

space-around每個item兩側間隔相等，所以之間的間隔比和邊框的間隔大一倍

align-items: item在交叉軸上的对齊方式

baseline是以item第一行文字的基線對齊

flex-wrap: item太多超过一行時是否換行，flex-flow是flex-direction和wrap的簡寫
align-content: 当有換行后，就會有多行的items，这個属性用來控制多行(多根主軸線)的對齊方式

display: grid

将网页划分成一个个可以任意组合的网格，可以用align-item，justify-content等属性

grid-template-columns: 列寬

grid-template-rows: 行高

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

grid-gap: 間距

跨列: grid-column-start(列从哪開始)，grid-column-end(列到哪結束)，grid-column: 1/span3(从第一根線開始合井3個單元格)

body{
  margin: 0;
  padding: 0;
  list-style: none;
}
ul{
  display: grid;
  grid-template-columns: repeat(5,auto);		
}
li{
  height: 150px;
  background-color: #eee;
  border: 1px solid gray;
  font-size: 2rem;
  text-align: center;
  line-height: 150px;
}
li:nth-of-type(1){
  /* 列合并 */
  /* grid-column-start: 1;
  grid-column-end: 5; */
  grid-column: 1 / span 4;
}

跨行: 和跨列一样，但变成了grid-row

minmax函數: minmax(300px,600px)，>=300，<=600

body{
  margin: 0;
  padding: 0;
  list-style: none;
}
ul{
  display: grid;
  /* minmax函数 */
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));		
}
li{
  background-color: #eee;
  border: 1px solid gray;
  font-size: 2rem;
  text-align: center;
  line-height: 150px;
}

2 float

把一个元素“浮动”(float) 起来，会改变该元素本身和在正常布局流中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流 (normal flow) 中移除，这时候其他的周围内容就会在这个被设置浮动的元素周围环绕。

float有属性值left、right、none和inherit
如果想元素框不挨着浮动框，可以用clear属性，值可以是left、right、both或none，然后給外边框添加适当的空間就可以得到想要的效果了

因為浮动元素脫離了文档流，所以包圍图片和文本的div不占空間也可以用clear一個空完素的方法解決

也可以在包裏元素上添加overflow: auto(或者除了visible外的其他值)
也可以使用display: flow-root值，或者直接对容器進行浮動

3 position
允許从正常的文檔布局中取出元素，并使它們具有不同的行為，例如不同的位置

position: static
正常布局，沒什么特別的

position: relative
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留，因此，移動元素會導玫它覆盖其他框。
設置左边和頂部的相對位置，相當於有一個力推動這個元素
1
2
3
4
5
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
position: absolute
設置為絕對定位的元素從文檔流完全刪除，井相對於其包含块定位，原先在正常流中所占空間關閉，定位后生成一個块框。
1
2
3
4
5
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
如果所有的父元素都没有定义 position 属性，那么所有的父元素默认情况下 position 属性都是 static，那么绝对定位元素会被包含在初始块容器中。初始块容器有着和浏览器视口一样的尺寸，整個也被包含在这个容器里面。因此绝对定位元素会被放在元素的外面，根据浏览器窗口来定位。
可以用z-index來改变元素的堆疊順序，數值越大放的越上面

position: fixed
与绝对定位的工作方式完全相同，但固定定位固定元素是相对于浏览器窗口本身。这意味着可以创建固定的有用的 UI 元素，如导航菜单。

position: sticky
相对位置和固定位置的混合體，被定位的元素表現得像相對定位一樣，直到滾動到某個點后变得固定，可用于使導航欄隨頁面滾動到特定點，然后粘在頁面頂部。

4 響應式設計
允許Web頁面适應不同屏幕寬度，不同因素進行布局和外觀的調整，响应式 Web 设计不是单独的技术，它是描述 Web 设计的一种方式，用来建立可以响应查看内容的设备的样式的一个词。

媒體查詢
响应式设计仅仅是因为媒介查询才新兴起来的，媒介查询允许我们运行一系列测试，例如用户的屏幕是否大于某个宽度或者某个分辨率，并将 CSS 选择性地适应用户的需要应用在样式化页面上。
下面的媒體查詢用來得知當前的Web頁面是否展示在一個屏幕媒體上，且窗口至少有800像素寬，下面的CSS只會在这些天提下應用
1
2
3
4
5
@media screen and (min-width: 800px) {
.container {
margin: 1em 2em;
}
}
使用媒体查询时的一种通用方式是，为窄屏设备（例如移动设备）创建一个简单的单栏布局，然后检查是否是大些的屏幕，在你知道你有足够容纳的屏幕宽度的时候，开始采用一种多栏的布局。这经常被描述为移动优先设计。
使用媒体查詢可參考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries

灵活网格
通过使用像素并把布局转化为百分数的方式设计，例如如果我们的预期栏尺寸为 60 像素，而且它所在的上下文（或者容器）为 960 像素，用 960 去除 60，就能得到CSS的值
1
2
3
.col {
width: 6.25%; /* 60 / 960 = 0.0625 */
}
多栏式布局
可以用column-count創定指定數量的列，由浏覧器計算出每一列分配多少空間。
用column-width設置列寛，但瀏覽器會按指定寬度尽可能多地創建列，剩餘的空間會被現有的列平分
column-gap改變間隙
column-rule在列間加入分割線，這是column-rule-color和column-rule-style的縮寫，和border類似
1
2
3
4
5
.container {
column-count: 3;
column-gap: 20px;
column-rule: 4px dotted rgb(79, 185, 227);
}
响应式排版
把一级标题设置为4rem，也就是说它将会有我们的基础字体的四倍大，这真的是太大了，若我们只想在大些的屏幕上有这么个超大的标题，那我们先弄个小点的标题，再使用媒体查询，在我们知道用户使用至少1200px的屏幕的时候，拿大些的尺寸覆写它。
1
2
3
4
5
6
7
8
9
10
11
12
html {
font-size: 1em;
}
h1 {
font-size: 2rem;
}

@media (min-width: 1200px) {
h1 {
font-size: 4rem;
}
}

1 CSS是何物?

2 選擇器

1 id選擇器

2 class選擇器

3 標簽選擇器(元素)

4 属性選擇器

5 偽類選擇器

6 偽元素選擇器

7 組合選擇器

8 樣式優先級

2 CSS樣式

1 背景

2 文本

3 字体

4 列表

5 表格

3 盒模形

1 內边距

2 边框

3 外边距

4 展示，定位

1 display

display: flex

display: grid

2 float

3 position

position: static

position: relative

position: absolute

position: fixed

position: sticky

4 響應式設計

媒體查詢

灵活网格

多栏式布局

响应式排版