css基礎樣式

2021-10-21 19:59:13 字數 3738 閱讀 5062

5、float

6、position 定位

1.1給值方式

background: ; 背景顏色

color: ;字型顏色

1.2、透明度

rgba(0~255 ,0~255 ,0~255 ,0~1 )

a代表透明度   0~1  0完全透明 1完全不透明 


只針對當前設定顏色的內容透明
opcity(0~1) 標籤元素的透明度

0~1  0完全透明 1完全不透明
.day031
display:  屬性值 ;
.h3_1
​ 背景屬性；

背景 : backgroud : 顏色 平鋪 位置 跟隨滾動;

順序可以改變,個數不固定
#div_2
背景是否平鋪 backgroud-repeat: 值 ；

repeat     :  平鋪


no-repeat ：不平鋪


repeat-x ：x軸平鋪


repeat-y ：y軸平鋪
背景大小 backgroud-size: px ；畫素值

當之定義乙個值,預設寬度,高度會等比縮放
背景位置 backgroud-position: px /% ;

畫素值  百分比  方向位置的單詞(left right top bottom center)。


如果值提供乙個值,預設設定x軸,另一端預設居中。
#div_1
背景跟隨滾動問題 background-attachment: (了解)

scroll 跟隨滾動


fixed 固定,不跟隨滾動


固定相對於窗體的邊界
color ： 字型顏色

font-size ： 字型大小

font-style ： 字型樣式 正常normal|斜體italic

font-family ：字型設定 可以同時設定多個字型,順位顯示

font-weight ：加粗

​  100~900之間的整數  700以上是粗體  600以下是正常


bold | bolder 加粗 | normal 正常
text-decoration ：none ; 去掉下劃線

underline; 設定下劃線  	


overline 設定中劃線


line-through; 設定上劃線
text-indent 首行縮排

px


em 當前內容的幾個字元的大小
text-align ：center;文字居中

針對塊元素|行內塊有效


可以繼承
​ list-style: none; 清除列表項標記

​ 實體字元:

&+實體名稱+;


&+nbsp; 空格


&+lt < 


&+gt >
p


span
4.1、文字居中

塊元素父級中水平居中

margin: 0 auto;
text-align ：center; 行內元素|塊元素中的內容在元素中水平對齊方式

line-height : px; 行高

利用行中的內容在行高中垂直居中的特點,讓文字的行高與塊元素|行內塊元素登高,就能實現文字在元素中垂直居中。
float 浮動 : 元素向指定方向移動,當遇到其他浮動元素或者瀏覽器的邊界的時候聽下

float: left 左浮


float： right 右浮
.sf_1
​ 需要配合方向值一起使用 top left right botton (上左優先)

position：relative;


position absolute;


position fixed;
​ １＼相對於元素原本本身的位置進行定位,方向屬性對應元素原邊,正值原邊的對面移動,賦值相反方向移動

２＼文件流中的原位置沒有移動

​ ３＼不脫離文件流

position：relative;


top: 300px;


left


: 8px;
１＼相對於瀏覽器視窗進行定位 : 當父級元素沒有設定position:relative;

因為是絕對定位: 所以把元素定位在文件中的某乙個位置,跟隨文件的滾動而滾動

２＼相對於父級元素定位 : 子父級定位 :當父級元素設定position:relative;。

相對於父級位置進行定位

３＼絕對定位特點是,在文件中找到位置,位置一旦確定不會發生改變

４＼完全脫離文件流

固定在視窗的某個位置,不會發生改變,不會隨著滾動條的移動而移動

以上兩個完全脫離文件流

.term


{width


: 200px;


height


: 300px;


position


: fixed;


top:100px;


left：8px;


｝
7、box 盒子

盒子模型:

內容+內邊距+邊框+外邊距

我們能夠看到的元素的大小: 內容+內邊距+邊框

內容: 寬高的設定就是內容的大小,元素中的子內容就顯示在內容區域

內邊距: 不能顯示內容,背景的樣式會自動延伸到內邊距上

外邊距:　邊框外面距離

內外邊距給值方式:

margin


: 100px; //四周的外邊距為100px


margin


: 50px 100px; //上下為50px 左右為100px


margin


: 10px 50px 100px; //上 右 下 左與右相等


margin


: 10px 50px 80px 100px;// 上 右 下 左


padding-top|botton|left|tight
邊框:

border //的三要素


: 寬度 樣式 顏色; 四邊的邊框的設定


border-top|left|bottom|right


: // 寬度 樣式 顏色;


border-color


: //四邊的邊框的顏色


border-style


: //樣式


border-width


: //寬度
注意:

1\行內元素不可以設定上下的內外邊距, 塊元素或者行內塊可以設定上下左右內外邊距

2\當想要定義元素與元素之間的間距時候:

元素沒有邊框|背景樣式,可以使用內邊距或者外邊距

元素有邊框|背景,使用外邊距

CSS基礎樣式

css指層疊樣式表，它作用是控制頁面內容的外觀。這樣就可以將網頁的內容和表現形式分離。層疊的意思是 如果選擇器的權重相同，則後面元素的樣式會覆蓋前面樣式。css樣式表由選擇器和宣告兩個部分組成，其中選擇器是通過名字來標識元素的，宣告用於定義元素的樣式。a 樣式表比較常見的有三種引入方式 1.行內樣式...

CSS基礎樣式

顏色 單位 color 設定文字顏色 text align 設定文字對齊方式 letter spacing 字間距 line height 行高 text indent 首行縮排 text decoration 文字裝飾 text transform 大小寫轉換 text shadow 建立文字陰影...

Css樣式基礎

1.css的語法 css的語法主要由兩個部分組成，乙個是選擇器，乙個是屬性 選擇器又分為以下幾種 1.元素選擇器 即html標籤去掉括號的就是元素 2.類選擇器 所謂的類就是說class 名稱 類的名稱是可以相同，也可以不同。呼叫的時候類名前面要加 3.id選擇器 名稱不能相同，具有唯一性。主要用於...