前端學習筆記（一）：css學習筆記

一、概述

將前端結構化，html 是文檔結構、css 是設置樣式（美化頁面）、js是邏輯結構

重點是 “選擇器” 和 “盒子模型”

發展史

CSS1.0CSS2.0：DIV（塊）+CSS，HTML與CSS結構分離的思想，網頁變得簡單，SEOCSS2.1：浮動，定位CSS3.0：圓角、陰影、(動畫…瀏覽器兼容性~)

二、快速入門

位置

行內關聯 ：就是在標簽內部設置樣式，在標簽內 寫style

內部關聯

和 html 在一個文件中，即寫入head 里面

外部關聯

就是將css 專門寫成一個單獨的文件

使用 link 關鍵字，在href 加入地址

使用improt

優先級

就近原則，誰離的近 誰的樣式就生效 —行內樣式離的最近

三、基本選擇器

標簽選擇器 --標簽名

類選擇器 – “.類名”

Id 選擇器 --“#id名”

優先級關系

id 選擇器>類選擇器>標簽選擇器

css 預處理器

CSS 預處理器技術已經非常的成熟了，為了提升css的能力、代碼復用能力、以及開發效率，涌現出了越來越多的 CSS 的預處理器框架。

主要有：sass 、less 和 stylus，都是在現在的 vue 和 react 項目中經常用到的，用法也很簡單，只要學會一種，其他兩種都很容易上手，項目中用哪一種就要看自己的喜好了。

sass

Sass 是一種 CSS 的預編譯語言，Sass 為 CSS 賦予了更強大的功能。

它提供了 變量（variables）、嵌套（nested rules） [混合（mixins）、函數（functions）等功能，并且完全兼容 CSS 語法。

Sass 能夠幫助復雜的樣式表更有條理， 并且易于在項目內部或跨項目共享設計。

層疊樣式表

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

CSS邊框

邊框屬性：

border-radius：創建圓角邊框

box-Shadow：附加一個或者多個下拉框的陰影

border-image（不支持IE）：使用圖像創建一個邊框

CSS圓角

指定border-radius的每個圓角，如果只指定一個值，則生成四個圓角；若在每個角上指定，則使用如下規則：

四個值：四個值分別指定左上角、右上角、右下角、左下角。

三個值：第一個值為左上角，第二個值為右上角和左下角，第三個值為右下角。

兩個值：第一個值為左上角和右下角，第二個值為右上角和左下角。

一個值：四個圓角值相同。

創建橢圓邊角：

border-radius：50px/15px;

border-radius: 50%;

圓角屬性：

border-radius 所有四個邊角屬性的縮寫

border-top-left-radius 左上角的弧度

border-top-right-radius 右上角的弧度

border-bottom-left-radius 左下角的弧度

border-bottom-right-radius 右下角的弧度

CSS web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。