CSS簡介

標簽： CSS css

一、CSS簡介

1、什么是CSS

CSS:Cascading Style Sheet

是一組樣式設置規則，用于控制頁面的外觀樣式

2、為什么使用CSS

實現內容與樣式的分離，便于團隊開發
樣式復用，便于網站的后期維護
頁面的精確控制，讓網頁更精美

3、CSS作用

頁面外觀美化
布局和定位

二、基本用法

1.CSS語法

<head>
    <style>
        選擇器{
            屬性名：屬性值；
            屬性名：屬性值；
        }
    </style>
</head>

選擇器：要修飾的對象（東西）
屬性名：修改對象的哪個屬性（樣式）
屬性值：樣式的取值

2、CSS應用樣式

也稱為CSS引用樣式，有三種方式：內部樣式、行內樣式、外部樣式

2.1內部樣式

也稱為內嵌樣式，在頁面頭部通過style標簽定義

對當前頁面中所有符合樣式選擇器的標簽都起作用

2.2行內樣式

也稱為嵌入樣式，使用HTML標簽的style屬性定義

只對設置style屬性的標簽起作用

2.3外部樣式

使用單獨的CSS文件來定義，然后在頁面中使用link標簽或@import指令引入

@import指令導入外部樣式文件

<style>
    @import "css樣式文件的路徑";
    @import url(css樣式文件的路徑);
</style>

三、選擇器

1、基礎選擇器

1.1 標簽選擇器

也稱為元素選擇器，使用HTML標簽作為選擇器名稱

以標簽名作為樣式應用的依據

1.2 類選擇器

使用自定義名稱，以.點號 作為前綴，然后通過HTML標簽的class屬性調用類選擇器

以標簽的class屬性作為樣式應用的依據

注意事項：

調用時不能添加.點號

同時調用多個類選擇器時以空格分隔
類選擇器定義時，名稱不能以數字開頭

1.3 ID選擇器

使用自定義名稱，以 #號作為前綴，然后通過HTML標簽的id屬性進行名稱匹配

以標簽的id屬性作為樣式應用的依據，一對一的關系

2.復雜選擇器

2.1復合選擇器

標簽選擇器和類選擇器、標簽選擇器和ID選擇器，一起使用

必須同時滿足兩個條件才能應用樣式

2.2 組合選擇器

也稱為集體聲明

將多個具有相同樣式的選擇器放在一起聲明，使用逗號隔開

2.3 嵌套選擇器

在某個選擇器內再設置選擇器，通過空格隔開

只滿足層次關系最里層的選擇器所對應的標簽才會應用樣式

注意：使用空格時不區分父子還是后代，使用CSS3中新增的>時必須是父子關系才行

2.4 偽類選擇器

根據不同的狀態來顯示不同的樣式，一般多用于<a>標簽

四種狀態：

.link未訪問的鏈接
.visited已訪問的鏈接
.hover鼠標移動鏈接上，即懸浮在鏈接上
.active選定的鏈接，被**

注意：默認超鏈接為藍色、下劃線

2.5 偽元素選擇器

:first-lentter為第一個字符添加樣式

:first-line為第一行添加樣式

:before在元素內容的最前面添加內容，需要配合content屬性使用

:after在元素內容的最后面添加內容，需要配合content屬性使用

3、選擇器的優先級

3.1 優先級

行內樣式>ID選擇器>類選擇器>標簽選擇器
原因：首先加載標簽選擇器，再加載類選擇器然后加載ID選擇器，最后加載行內樣式

3.2內外部樣式加載順序

就近原則
原因：按照書寫順序依次加載，在同優先級的前提下，后面加載的會覆蓋前面加載的同名樣式，所以離的越近越優先

3.3 !important

可以使用!important使某個樣式有最高的優先級
————————————————
版權聲明：本文為CSDN博主「wsgjm1314」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/wsgjm1314/article/details/105101685

四、常用的CSS屬性

1、字體屬性

定義字體相關的樣式

屬性	含義	說明
font-size	大小，尺寸	可以使用多種單位
font-weight	粗細
font-family	字體
font-style	字體樣式
font	簡寫

1.1 font-size

取值：

inherited繼承，默認從父標簽繼承字體大小（默認值），所有CSS屬性的默認值都是inherited
pix像素pixel
%百分比,相對于父標簽的字體大小的百分比
em倍數,相對于父標簽字體大小的倍數

HTML根元素默認字體的大小為16px,也稱為基礎字體大小

1.2 font-weight

取值：

normal普通(默認)
bold粗體
自定義400 normal 700 bold

1.3 font-family

要求系統中要安裝指定的字體

一般建議寫3種字體：首選、其次、備用，以逗號隔開

1.4 字體樣式

取值：

normal普通
italic斜體

1.5 font

簡寫屬性，font:font-style/font-weight/font-size/font-family

必修按此順序書寫

2、文本屬性

屬性	含義	說明
color	顏色
line-height	行高	行的高度
text-align	水平對齊方式	取值：left、right、center
vertical-align	垂直對齊方式	取值：top、middle、bottom可以用于圖片和文本的對齊方式
text-indent	首行縮進
text-decoration	文本修飾	取值：underline、overline、line-through
text-transform	字母打大小	取值：lowercase、uppercase、capltalize（首字母大寫）
letter-spacing	字符間距
word-spacing	單詞間距	只對英文有效
while-space	空白的處理方式	文本走出后是否換行，取值：nowrap

2.1 color

取值：四種寫法：

顏色名稱：使用英文單詞

16進制的RGB：#RRGGBB

特殊情況下可以簡寫：

#FFFFFF--->#FFF   白色
#000000--->#000   黑色
#00FF00--->#0F0   綠色
#0000FF--->#00F   藍色
#FF0000--->#F00   紅色
#CCCCCC--->#CCC   灰色
#FF7300--->無法簡寫  橙色

注意：不區分大小寫

rgb函數：rgb(red、green、blue)

每個顏色的取值范圍[0,255]

rbg(255,0,0)---->紅
rgb(0,255,0)---->綠
rgb(0,0,255)---->藍

rgba函數：rgba(red,green,blue,alpha)

可以設置透明度，alpha取值范圍：[0,1]0表示完全透明 1表示完全不透明

rgba(255,0,0)-->純紅
rgba(255,0,0,0,5)

3.背景屬性

屬性	含義	說明
background-color	背景顏色
background-image	背景圖片
background-repeat	背景圖片重復方式
groung-position	背景圖片顯示位置
ground-attachment	背景圖片是否跟隨滾動
background	簡寫

3.1background-color

取值：transparent 透明的

3.2background-image

必須使用url方式指定圖片的路徑
如果是css樣式文件中使用相對路徑，此時是相對于CSS文件，不是相對于html文件

3.3background-repeat

取值：repeat（默認）、repeat-x、repeat-y、no-repeat

3.4 ground-position

默認情況下圖片顯示在左上角

取值：

關鍵字：top（頂部）、bottom（底部）、left（左邊）、right（右邊）、center（居中）
坐標：左上角為（0、0）座標點，向右為x的正方向，向下為y的正方向

CSS 的雪碧圖，即CSS的sprites，也就是CSS的精靈，是一種CSS圖像合并技術

含義：將網頁中許多的小圖標/圖片整合到一張大圖，當訪問頁面是只需下載一次，可以減少訪問服務器的次數，提高性能

原理：使用background-position 進行背景的定位，使用坐標精確的定位出背景圖片的位置

3.5ground-attachment

取值：scrom、fixed固定不動

3.6backfround

簡寫屬性：background：background-color background-image ground-repeat background-position

以空格隔開，書寫順序沒有要求

4.列表屬性

屬性	含義	說明
list-style-tple	設置列表的標記
list-style-image	將圖像作為列表的標記
list-style-poslition	設置標記的位置	取值：outside（默認）、inside
list-style	簡寫屬性

4.1list-style-typle

取值：none（啥也沒）、disc（實心圓）、circle（空心圓）、square（矩形）、decimal（順序）

此時不在區分有序列表還是無序列表，只要設置列表的標記符號就可以了

4.2list-style

簡寫屬性：list-style list-style-typelist-style-image list-style-position

書寫時無順序要求

5.表格屬性

border-collapse 表格中相鄰的邊框是否合并（折疊）為單一邊框

取值：separate 默認，collapse

6.使用Livereload

可以實現當保存頁面文件時實時刷新瀏覽器
步驟：

在Chrome中安裝LiveReload擴展程序將 livereload 解壓–>chrome瀏覽器選擇"…"–>更多工具–>擴展程序–>開啟“開發者模式”–>加載已解壓的擴展程序–>選擇文件夾名 livereload 提示：“允許”在所有網站上讀取和更改留存信息 2. 在sublime中安裝livereload插件將"livereload.rar-----sublime中使用"解壓到sublime中的插件目錄packages/中 3. 配置Sublime中的LiveReload插件 preference–>packages settings–>livereload–>settings-default
```
1.{ 
2.		"enabled_plugins": [    
3.      "SimpleReloadPlugin"    
4.    "SimpleRefresh"     
5.        ]
6.}
```
1. 在瀏覽器中啟用LiveReload
先打開瀏覽器要訪問的頁面，然后點擊瀏覽器地址欄右側的黑色圓圈，當中心的小圓圈變為實心圓時表示已啟用
1. 在sublime中啟用liveReload 按ctrl+shift+P–>搜索livereload,選擇enable–>搜索simple reload:選擇enable

五、盒子模型

1.簡介

盒子模型是網頁布局的基礎，將頁面中所有元素都看作是一個盒子，盒子都包含以下幾個屬性：

width 寬度
height 高度
border 邊框
padding 內邊距
margin 外邊距

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7OI3OojI-1587873785078)(C:\Users\Lenovo\Desktop\2020-04-12 15_25_16-Microsoft Edge.png)]

2.盒子模型

2.1 border(邊框)

表示盒子的邊框
分為四個方向：

上top、右right、下bottom、左left

border-top、border-right、border-bottom、border-left
每個邊框包含三種樣式：

border-top-color、border-top-width、border-top-style

border-right-color、border-right-width、border-right-style

border-bottom-color、border-bottom-width、border-bottom-style

border-left-color、border-left-width、border-left-style
樣式style的取值：

solid實線、dashed虛線、dotted點線、double雙線、inset內嵌的3D線、outset外嵌的3D線
簡寫，三種方式：

按方向簡寫：
border-top、border-right、border-bottom、border-left
書寫順序：
border-順序：width style color
按樣式簡寫：
border-color（顏色）、border-width（粗細）、border-style （樣式）
書寫順序：
border-樣式：top right bottom left
必須按順時針方向書寫，同時可以縮寫：
border-width:2px;--------->四個邊框的寬度均為2px
border-width:1px 2px;
border-width:1px 2px 4px;
規則：如果省略，則認為上下一樣，左右一樣
終級簡寫：
如果四個邊框樣式完全相同，border:width style color;

2.2padding

表示盒子的內邊距，即內容與邊框之間的距離
同樣也分為四個方向，也可以簡寫（按順時針方向，默認上下一樣，左右一樣）
注意：如果上下沖突，則以上為準，如果左右沖突，則以左為準

2.3 margin

表示盒子的外邊距，即盒子與盒子之間的距離
同樣也分為四個方向，也可以簡寫（按順時針方向，默認上下一樣，左右一樣）
居中對齊：

1./* 元素的水平居中 */
2./* 1.塊級元素的水平居中 */ 
3.		margin:0 auto;        
4.		/* 提示：塊級元素必須指定寬度 */       
5.		/* 2.文本的水平居中 */        
6.		text-align:center;        
7.		/* 3.垂直居中，將height和line-height設置為相同 */      
8.		height:100px;      
9.		line-height:100px;

3.其他

3.1元素所占空間

頁面中元素的實際所占空間：

寬度=width+左右的padding+左右的border+左右的margin
高度+height+上下的padding+上下的border+上下的

3.2盒子屬性默認值

不同標簽的盒子屬性默認值可能不同，需要自己設置

1. body,ul,ol,dl,li,p,h1,h2,h3,h4,h5,h6,form{    
2. 	margin:0;   
3. 	padding:0; 
4.}

3.3外邊距的合并

也稱為外邊距的折疊，指的是兩個塊級元素垂直外邊距相遇時，它們將合并為一個外邊距，合并后的外邊距值為其中較大的那個外邊距值
兩種情況：

當一個元素出現在另一個元素上面時，第一個元素的下邊距與第二元素的上邊距會發生合并
當一個元素包在另一個元素中時，并且沒有內邊距或邊框把外邊距分隔開時，兩個元素的上外邊距會發生合并
外邊距的合并的好處，讓排版在視覺上顯得更美觀

六、定位方式

1.簡介

通過position屬性實現對元素的定位，有四種定位方式

常用取值：

取值	含義	說明
static	默認值	按照常規文檔流進行顯示
relative	相對定位	相對于標簽原來的位置進行的定位
absoute	絕對定位	相對于第一個非static定位的父標簽的定位
fixed	固定定位	相對于瀏覽器窗品進行定位

設置定位方式后，還要設置定位屬性（偏移量）：top、bottom、left、right

2.相對定位

先設置元素的position屬性為relative,然后再設置偏移量

3.絕對定位

先設置父標簽為非static定位，然后設置元素的position屬性為absolute，最后再設置偏移量
注意：

一般來說都會將父標簽設置為非static定位
如果父標簽不是非static定位，則會相對于瀏覽器窗口進行定位
設置元素為絕對定位后，元素會浮到頁面上方

4.固定定位

先設置元素的position屬性為fixed，然后再設置偏移量
設置元素為固定定位后，元素會浮動在面面上方

5.z-indx

設置元素定位方式后，元素會浮在頁面上方，此時可以通過z-index屬性設置優先級，控制元素的堆疊順序
取值為數字，值越大優先級越高，默認為auto(大多數瀏覽器默認為0)
注意：只能給非static定位的元素設置z-index屬性

七.其他css屬性

1.浮動和清除

1.1浮動屬性

通過float屬性實現元素的浮動，可以讓塊級元素脫離常規文檔流，向左或向右移動，在同一行顯示，如果一行顯示不下則會換行顯示
常用取值：

left左浮動
right右浮動
none不浮動，默認值

設置float屬性后，元素會浮在頁面的上層，此時父容器無法計算自己的尺寸，通常會在容器末尾添加一個清除了float的空的div來解決

1.2清除屬性

通過clear屬性實現清除，設置元素的哪一側不允許出現浮動元素，目的是為了和其他浮動元素換行隔開，只對塊級元素有效
常用取值：

left左側不允許出現浮動元素
right右側不允許出現浮動元素
both兩側不允許出現浮動元素
none允許兩側有浮動元素,默認值

結論：

對于非浮動元素，兩邊均可設置清除（常用）
對于浮動元素，向哪邊浮動，就只能設置哪邊的清除

2.元素的顯示和隱藏

2.1diaplay

通過display屬性設置元素是否顯示，以及是否獨占一行顯示

常用取值：

取值	含義	說明
none	不顯示
inline	顯示為內聯元素，行級元素的默認值	將塊級元素變為行級元素，不再獨占一行
block	顯示為塊級元素，塊級元素的默認值	將行級元素變為塊級元素，獨占一行
inline-block	顯示為內聯元素，但是可設置寬和高	在inline基礎上允許設置寬和高

注意：行級元素默認無法設置寬和高,可以為行級元素設置display：inline-block，然后就可以設置寬和高了

2.2visibility

也可以通過visibility屬性設置元素的顯示和隱藏

常用取值：

取值	說明	含義
visible	顯示
hidden	隱藏

2.3區別

display屬性隱藏時不再占據頁面中的空間，后面的元素會占用其位置
visibility隱藏時會占據頁面中的空間，位置還保留在頁面中，只是不顯示

3.輪廓屬性

3.1簡介

輪廓outline,用于在元素周圍繪制一個輪廓，位于border的外圍，可以突出顯示元素

3.2基本用法

常用屬性：

outline-width輪廓寬度
outline-color:輪廓顏色
outline-style輪廓樣式
outline簡寫

在瀏覽器，當鼠標單擊或使用TAB鍵讓一個表單元素或鏈接元素獲得焦點時，該元素周圍會出現一個輪廓 outline
優點：可以提高表單元素的用戶體驗
缺點：有時會影響美觀

3.3outline與border的區別

border可以應用于所有的html元素，而outline主要用于表單元素、超鏈接
當元素獲得焦點時會自動出現outline輪廓效果，當失去焦點時會自動消失，這是瀏覽器默認行為
outline不影響元素的位置和尺寸，而border會影響

4.其他屬性

4.1寬高相關

max-width設置元素的最大寬度
min-width設置元素的最小寬度
max-height設置元素的最大高度
min-height:設置元素的最小高度

4.2overflow屬性

當元素內容溢出時該如何處理
常用取值：

visible溢出時可見，顯示在元素外，默認值
hidden溢出的部分不可見（常用）
scroll無論時否出現溢出始終出現滾動條
auto溢出時自動出現滾動條

4.3coursor屬性

用來設置光標的形狀
常用屬性：

default默認光標，一般為箭頭
pointer手形，光標移動到超鏈接上時一般顯示為手形圖標
move表示可以移動
text文本
wait表示程序正忙，需要等待
help表示幫助

八、頁面布局

1.簡介

常見頁面布局

表格布局
div布局

2.表格布局

2.1簡介

不適合于復雜布局，僅適用于簡單、有規則的結構
定位相對準確，與瀏覽器基本無關，適用于簡單分隔

2.2基本用法

table常用樣式屬性：

border在表格外圍設置邊框
border-spacing設置單元格之間的距離（相當于table標簽的cellspacing屬性，即間距）
border-collapse表格中相鄰單元格邊框是否合并，取值，separate、collapse

th/td常用樣式屬性：

border為單元格設置邊框
padding設置單元格的邊距（相當于table標簽的cellpadding屬性，邊距）

3.div布局

定位絕對準確，使用靈活，適合于復雜的布局方

3.1簡單布局

兩種形式:

1-1-1布局
1-2/3-1布局

3.2圣杯布局

頁面結構，兩邊的邊欄寬度固定，中間主體在一定范圍內可自適應，并且主體優先被加載
一般防止頁面縮放影響瀏覽，都會為頁面設置一個最小寬度

3.3雙飛翼布局

源自淘寶的UED(用戶體驗設計)團隊
雙飛翼布局和圣杯布局要實現的效果是相同的，只是思路不同
圣杯布局和雙飛翼布局的區別

雙飛翼布局比圣杯布局多創建一個div
雙飛翼布局不用設置內邊距和相對定位，也不用設置偏移量
雙飛翼布局使用的margin,圣杯布局使用的是padding

實際開發中建議使用CSS3中新增的flex彈性盒子布局，更簡間

適合于復雜布局，僅適用于簡單、有規則的結構
定位相對準確，與瀏覽器基本無關，適用于簡單分隔

2.2基本用法

table常用樣式屬性：

border在表格外圍設置邊框
border-spacing設置單元格之間的距離（相當于table標簽的cellspacing屬性，即間距）
border-collapse表格中相鄰單元格邊框是否合并，取值，separate、collapse

th/td常用樣式屬性：

border為單元格設置邊框
padding設置單元格的邊距（相當于table標簽的cellpadding屬性，邊距）

3.div布局

定位絕對準確，使用靈活，適合于復雜的布局方

3.1簡單布局

兩種形式:

1-1-1布局
1-2/3-1布局

3.2圣杯布局

頁面結構，兩邊的邊欄寬度固定，中間主體在一定范圍內可自適應，并且主體優先被加載
一般防止頁面縮放影響瀏覽，都會為頁面設置一個最小寬度

3.3雙飛翼布局

源自淘寶的UED(用戶體驗設計)團隊
雙飛翼布局和圣杯布局要實現的效果是相同的，只是思路不同
圣杯布局和雙飛翼布局的區別

雙飛翼布局比圣杯布局多創建一個div
雙飛翼布局不用設置內邊距和相對定位，也不用設置偏移量
雙飛翼布局使用的margin,圣杯布局使用的是padding

實際開發中建議使用CSS3中新增的flex彈性盒子布局，更簡間

案例
在這里插入圖片描述

本文鏈接：https://blog.csdn.net/hgftyh/article/details/105766044

智能推薦

css float 浮動簡介

float浮動這個屬性，對于剛學習的人來說其實還有點不太好理解，有時候總不能按照自己的意圖來工作。對于剛剛接觸css的人來說，更是有點蒙圈。在這里，我就根據我在網上找到的一些文章，寫寫自己的理解。（大神請飄過。。。） float浮動值的屬性：值描述 left 元素向左浮動。 right 元素向右浮動。 none 默認值。元素不浮動，并會顯...

CSS shapes簡介 css Shapes 允許我們通過自定義文本內容可以環繞的幾何形狀，圖像和漸變，來創建有趣且獨特的布局。本次教程會教你如何使用他們。在 CSS Shapes問世之前，為網頁設計文本自由環繞的雜志式布局幾乎是不可能的。相反，網頁設計布局傳統上一直用網格，盒子和直線構造。 CSS Shapes允許我們自定義環繞的幾何形狀。這些形狀可以是圓，橢圓，簡單或復雜的多邊形，甚至圖像...

CSS簡介筆記

一、CSS簡介 1、什么是CSS CSS:Cascading Style Sheet 是一組樣式設置規則，用于控制頁面的外觀樣式 2、為什么使用CSS 實現內容與樣式的分離，便于團隊開發樣式復用，便于網站的后期維護頁面的精確控制，讓網頁更精美 3、CSS作用頁面外觀美化布局和定位二、基本用法 1.CSS語法選擇器：要修飾的對象（東西）屬性名：修改對象的哪個屬性（樣式）屬性值：樣式的...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...