Html+CSS - 基礎筆記梳理

時間 2019-11-24

標籤 html+css html css 基礎筆記梳理欄目 CSS 简体版

原文原文鏈接

備戰秋招，複習基礎。若有錯誤，歡迎批評指正，共同進步！css

Html

標籤語義化：便於開發者閱讀和開發，便於搜索爬蟲，便於解析，便於維護html

CSS

內嵌內聯外聯

參考資料：真的知道css三種存在樣式（外聯樣式、內部樣式、內聯樣式）的區別嗎？css3

內聯（行內/行級）樣式：

<body>
    <div style="width: 65px;height: 20px;border: 1px solid;">測試元素</div>
</body>
複製代碼

內部（內嵌/頁級）樣式:

<head>
    <meta charset="utf-8" />
    <title>測試</title>
    <style type="text/css">
        div {
            width: 65px;
            height: 20px;
            border: 1px solid;
            background: greenyellow;
        }
    </style>
</head>
複製代碼

外聯樣式：

<link rel="stylesheet" type="text/css" href="*.css" />
複製代碼

link語法格式中，rel指的是關聯(relation)，type指的是類型，href指的是連接文件路徑。git

link的做用主要用來引入CSS和網頁圖標，指示告知搜索引擎，網頁之間的關係等。github

<style>@import url("*.css");</style>
複製代碼

@import語法格式務必寫在style標籤中，後直接加文件路徑便可。web

@import做用在CSS文件和頁面中，能夠在一個CSS文件中引入其餘的CSS文件，例如在index.css文件中引入其餘CSS文件的樣式，整合在一塊兒後，再在index.html中調用一次便可，在實際項目中常用，方便管理和維護。正則表達式

兩者加載順序影響瀏覽器

link和@import都沒有放置順序的要求，可是不一樣的放置位置可能會形成效果顯示的差別。對於link，不管放到哪一個位置，都是一邊加載數據，一邊進行優化，視覺感覺很好；而對於@import，放置到哪裏，才從哪裏開始加載CSS樣式，即先加載數據，而後加載樣式，若是網速不佳，可能會形成只有數據出來，而樣式一點點加載的效果。而且在同一個頁面中，調用兩種方式，link永遠比@import優先級高。bash

在項目中使用的時候，通常在頁面中調用方式爲link，而且放在head標籤中；使用@import除了在CSS文件中，在頁面調用時，通常加載第三方的樣式會使用到，而且須要放置在頁面的底部，不會影響本身的網站。網絡

link是xhtml的標籤，加載css和rss沒有兼容問題。引入css會在頁面載入時同時加載。支持使用js控制dom去修改樣式。 @import是css標籤，低版本不兼容。在頁面徹底載入後加載。不支持js控制dom去修改。

三者的優先級爲：內聯樣式>內部樣式>外聯樣式

經過js代碼動態添加targetObj.style.width的優先級是最高的，它是添加到內聯樣式中

src和href

src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。 <script src ="js.js"></script> 當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加 <link href="common.css" rel="stylesheet"/> 那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用link方式來加載css，而不是使用@import方式。

選擇器

選擇器：採用正則表達式的形式進行樣式指定

屬性選擇器

聲明屬性與屬性值[att=val] 如：

<style type="text/css">
[id=section1]{
    background-color:yellow;
}
</style>
複製代碼

通配屬性選擇器：

[att*=val] 若是元素用att表示的屬性的屬性值中包含用val指定的字符，則使用該樣式。

[att^=val] 以val開頭

[att$=val] 以val結尾

a[href$=\/]:after, a[href$=htm]:after, a[href$=html]:after{
    content:"web"，
    color:red;
}
複製代碼

僞類選擇器

僞類：CSS中已經定義好的選擇器，不能隨便改名。a:link a:visited a:hover a:active

僞類選擇器：針對CSS中已經定義好的僞元素使用的選擇器。

使用方法：

選擇器：僞元素{屬性：值}
選擇器.類名：僞元素{屬性：值}
複製代碼

僞元素選擇器

first-line僞元素選擇器：用於向某個元素的第一行文字使用樣式。

p:first-line{color:#FFF000}
first-letter僞元素選擇器：用於向某個元素中的文字的首字母或第一個字使用樣式。

p:first-letter{color:#FFF000}
before僞元素選擇器：用於在某個元素以前插入一些內容。

li:before{content:前綴文字}
after僞元素選擇器：用於在某個元素以後插入一些內容。

li:after{content:後綴文字}

結構性僞類選擇器

容許開發者根據文檔樹的結構來指定元素的樣式。

root選擇器：將樣式綁定到頁面的根元素中。在HTML頁面中就是指包含整個頁面的部分。

:root{background-color:yellow;}
not選擇器：對某個結構元素使用樣式，但排除這個結構元素下面的子結構元素。

body *:not(h1){background-color:yellow;}
empty選擇器：當元素中內容爲空白時使用的樣式。

:empty{background-color:yellow;}
target選擇器：對頁面中某個target元素（該元素的id被看成頁面中的超連接來使用）指定樣式，只在用戶點擊頁面超連接，且跳轉到target元素後起做用。(是目標元素樣式，不是連接元素樣式！！！)

:target{background-color:yellow;}
first-child / last-child選擇器：單獨指定第一個子元素、最後一個子元素的樣式。

li:first-child{background-color:yellow;}

li:last-child{background-color:yellow;}
nth-child / nth-last-child選擇器：對指定須要的子元素（連同父元素下全部子元素一塊兒計數）使用樣式。

li:nth-child(2){background-color:yellow;}

偶數：li:nth-child(even){background-color:yellow;}

奇數：li:nth-child(odd){background-color:yellow;}

循環：li:nth-child(4n+1){background-color:yellow;}

惟一：li:nth-child(1):nth-last-child(1){} → li:only-child{}
nth-of-type / nth-last-of-type選擇器：只針對同類型子元素計數

h2:nth-of-type(odd){background-color:yellow;}

UI元素狀態僞類選擇器

指定樣式只有當元素處於某種狀態下時才起做用，在默認狀態下不起做用。

經常使用：:hover :active :focus :disabled :checked

`::selection` → 當元素處於選中狀態時的樣式
複製代碼

通用兄弟元素選擇器

指定位於同一個父元素之中的某個元素以後的全部其餘某個種類的兄弟元素所使用的樣式。

<子元素>~<子元素以後的同級兄弟元素>{...}
複製代碼

其餘選擇器

例子	描述
.intro	選擇 class="intro" 的全部元素。
#firstname	選擇 id="firstname" 的全部元素。
*	選擇全部元素。
p	選擇全部<p> 元素。
div,p	選擇全部 <div> 元素和全部 <p> 元素。
div p	選擇 <div> 元素內部的全部 <p> 元素。
div>p	選擇父元素爲 <div> 元素的全部 <p> 元素。
div+p	選擇緊接在 <div> 元素以後的全部 <p> 元素。

選擇器優先級

參考資料：深刻理解CSS選擇器優先級

內聯 > ID選擇器 > 類選擇器 > 標籤選擇器

計算規則：優先級是由 A 、B、C、D 的值來決定的
- 若是存在內聯樣式，那麼 A = 1, 不然 A = 0;
- B 的值等於 ID選擇器出現的次數;
- C 的值等於類選擇器和屬性選擇器和僞類出現的總次數;
- D 的值等於標籤選擇器和僞元素出現的總次數。
例如： #nav-list .item { color: #f00;}優先級是 (0, 1, 1, 0) .nav-list .item { color: #0f0;}優先級是 (0, 0, 2, 0)
比較規則是: 從左往右依次進行比較，較大者勝出，若是相等，則繼續往右移動一位進行比較。若是4位所有相等，則後面的會覆蓋前面的。

#nva-list .item 大於 .nav-list .item
外部樣式覆蓋內聯樣式：!important

盒模型

盒的類型：使用display屬性定義。

類型	特性
block	<div> <p> 一行一個
inline	<span> <a> 一行幾個不指定寬高
inline-block	一行幾個，能夠指定寬高，默認底部對齊
inline-table	表格和文字同一行
list-item	多個元素做爲列表，開頭有列表標記
none	不顯示

盒內容過多：overflow：hidden隱藏 scroll滾動條固定 auto自動滾動條

text-overflow：ellipsis溢出文字顯示省略號
盒陰影：box-shadow:[inset內陰影] x y 模糊半徑 color
盒寬高：限制元素總寬度 box-sizing: ← conent-box 不包括補白與邊框（內容寬度） border-box 包括補白與邊框

css+html寫表格

<head>
...
<style type="text/css">
.table{
    display:table;
    border:solid 3px #00aaff;
}
.caption{  ← 整個表格的標題
    display:table-caption;
    text-align:center;
}
.tr{ ← 表明表格中的一行
    display:table-row;
}
.td{ ← 表明單元格
    display:table-cell;
    border:solid 2px #aaff00;
    padding:10px;
}
.thead{ ← 表明表格中的表頭部分
    display:table-header-group;
    background-color: #ffffaa;
}
</style>
</head>
<body>
<div calss="table">
    <div class="caption">字母表</div>
    <div class="thead">
        <div class="tr">
            <div class="td">1st</div>
            <div class="td">2nd</div>
        </div>
    </div>
    <div class="tr">
        <div class="td">A</div>
        <div class="td">B</div>
    </div>
    <div class="tr">
        <div class="td">C</div>
        <div class="td">D</div>
    </div>
</div>
</body>
複製代碼

position

值	描述
absolute	生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed	生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative	生成相對定位的元素，相對於其正常位置進行定位。所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。
static	默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit	規定應該從父元素繼承 position 屬性的值。

背景與邊框樣式

指定背景顯示範圍 background-clip： border含邊框 padding不含邊框
指定圖像繪製起點background-origin： border padding content
背景圖像尺寸background-size： contain自適應全顯示 cover自適應填滿
平鋪背景background-repeat： space自動調整間距 round自動調整尺寸
線性漸變background: linear-gradient(方向to bottom或角度30deg, red, [起始位置20%], yellow, [結束位置70%]);
放射漸變background-image:radial-gradient([at 座標xy,] orange, red);
圓角邊框border-radius:半徑半徑
圖片邊框border-image:url(border.png) A B C D repeat/stretch

變形和動畫

變形

縮放 transform:scale(0.5)
傾斜 skew(30deg,30deg)
移動 translate(50px, 50px)
旋轉 rotate(45deg)
變形基準點 transfor-origin:left botton

3D變形

變形矩陣 $\left[ \begin{matrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{matrix} \right]$ $\begin{matrix} \\ · \\ \\ \end{matrix}$ $\left[ \begin{matrix} x \\ y \\ 1 \end{matrix} \right]$ → transform:matrix(a, b, c, d, e, f);

動畫

Transition功能：將元素的某個屬性從一個屬性值在指定時間內平滑過渡到另外一個屬性值。

transition:屬性時間過渡方式→ transition: background-color 1s linear;
Animation功能：經過定義多個關鍵幀以及定義每一個關鍵幀中元素的屬性值來實現更爲複雜的動畫效果。

@keyframs mycolor{
    0%{
        background-color:red;
    }
    40%{
        background-color:darkblue;
    }
    70%{
        background-color:yellow;
    }
    100%{
        background-color:red;
    }
}
div:hover{
    animation-name: mycolor;
    animation-duration: 5s;
    animation-timing-function: linear;
}
複製代碼

佈局

css3前主要使用float和position佈局

多欄佈局

各欄寬度相等

div#div1{
    column-count: 2; 欄數目
    column-width: 20rem; 欄寬度
    column-gap: 3rem; 欄間距
    column-rule: 1px solid red; 間隔線
}
複製代碼

盒佈局

容許內部各列不一樣寬

在外部容器設置
#container{
    display: box;
}
複製代碼

彈性盒佈局

使寬度自適應改變

在外部容器設置
#container{
    display:flex;
    flex-direction: row/column; 元素橫向/縱向排列
    flex-wrap:wrap/nowrap; 換行/不換行
    justify-content 在main軸的佈局 cneter居中佈局全部子元素 space-between space-around
    align-items 在cross軸的佈局 baseline基線對齊 stretch高度最接近容器高度
    align-content 指定各行對齊方式 取值和 justify-content 同樣
}
會使子元素的float clear vertical-align屬性失效
複製代碼

經常使用子元素屬性：

flex:1; 子元素使用該屬性，會使全部元素充滿容器。1表示分配空白部分佔比。
- flex-grow:：當父控件還有剩餘空間的時候，是否進行放大(grow)其中數值表明的是放大比例，值爲0的時候表示不放大；
- flex-shrink：當父控件空間不夠的時候，是否進行縮小(shrink)其中數值表明的是與控件大小有關的縮小比例；
- flex-basis：當子空間含有這個屬性的時候，表明了子空間佔主軸的大小，主軸就是flex的主方向row是橫向，column是豎向
order:1 元素顯示順序
align-self 單獨指定某個子元素的對齊方式

@media查詢

針對不一樣的媒體類型定義不一樣的樣式。

.example {
    padding: 20px;
    color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .example {background: pink;}
}
複製代碼

SCSS

轉自(uinika.github.io/web/scss.ht…)

定義變量 $primary-color:#333;

body{
    color: $primary-color:
}
複製代碼

引入 @import

/*===== SCSS =====*/
// _reset.scss
html, body, ul, ol {
  margin:  0;
  padding: 0;
}

// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

/*===== CSS =====*/
html, body, ul, ol {
  margin: 0;
  padding: 0; }

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef; }
複製代碼

混合 @mixin

/*===== SCSS =====*/
@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

/*===== CSS =====*/
.box {
  border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; }
複製代碼

繼承 @extend

/*===== SCSS =====*/
%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-common;
}

.success {
  @extend %message-common;
  border-color: green;
}

/*===== CSS =====*/
.message, .success{
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

.success {
  border-color: green; }
複製代碼

操做計算 width: 600px / 960px * 100%;
引用父級選擇器"&"

/*===== SCSS =====*/
#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

/*===== CSS =====*/
#main {
  color: black; 
}
#main a {
  font-weight: bold; 
}
#main a:hover {
  color: red; 
}
複製代碼

命名空間

/*===== SCSS =====*/
.demo {
  // 命令空間後帶有冒號:
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

/*===== CSS =====*/
.demo {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }
複製代碼

LESS

轉自(less.bootcss.com/)

定義變量 @base:#333;
導入

@import "library"; // library.less
@import "typo.css";
複製代碼

混合

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered(); → 加()爲混入，加{}爲嵌套
}
複製代碼

嵌套 & 父選擇 & 運算與scss相似
@media查詢

/*===== LESS =====*/
.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

/*===== CSS =====*/
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}
複製代碼

轉義

/*===== LESS =====*/
@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

/*===== CSS =====*/
@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}
複製代碼