day 46

CSS樣式操做

給字體設置長寬

只有塊級標籤才能夠設置長寬html

行內標籤設置了沒有任何做用(僅僅只取決於內部文本值)瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Yeah</title>
    <style>

        div {
            width: 200px;
            height: 100px;
        }
        span {
            width: 500px;
            height: 400px;
        }

    </style>

</head>
<body>
<div>
    div
</div>
<span>span</span>

</body>
</html>

字體顏色

color後面能夠跟多種顏色數據字體

  • 顏色英文:red
  • rgb(1,1,1):能夠利用截圖軟件獲取三基色數字,數字範圍只能是0~255
  • 直接使用 pycharm 提供的取色器
  • rgba(128,128,128,0.4):最後一個數字能夠調節顏色的透明度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YEAH</title>
    <style>
        p {
            font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif;
            font-size: 48px;
            font-weight: lighter;
            /*color: red;*/
            /*color: rgb(156,59,24);*/
            /*color: #c3ff69;*/
            color: rgba(61,94,86,0.7);
        }
        
    </style>

</head>
<body>

<p>
    鵝鵝鵝,曲項向天歌。
</p>

</body>
</html>

語義

a {
text-decoration: none;
}
取消a標籤默認的下劃線ui

背景圖片

默認是鋪滿整個區域url

一般一個頁面上的一個個小圖標,並非單獨的,而是經過一個很是大的圖片,該圖片上有網址所用到全部的小圖標。spa

經過控制背景圖片的位置,來顯示不一樣的圖標樣式code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YEAH</title>
    <style>
        #d1 {
            height: 800px;
            background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573737709470&di=3763ef1067405bd66e3c372343454bc6&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201608%2F24%2F20160824232248_PdVQU.jpeg");
            background-attachment: fixed;
        }

    </style>

</head>
<body>
<div style="height: 600px;background-color: red"></div>
<div style="height: 600px;background-color: blue"></div>
<div id="d1"></div>
<div style="height: 600px;background-color: greenyellow"></div>
</body>
</html>

邊框

後面跟三個參數htm

顏色,字體,樣式繼承

能夠單獨設置:樣式,顏色,粗細

border-top-style:dotted;

border-top-color:red;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:none;

能夠單獨設置某一邊的樣式

border-top: 3px solid red;

border-left: 1px dotted green;

border-right: 5px dashed blue;

border-bottom: 10px solid pink;

也能夠簡寫統一設置

display

inline 將塊級標籤變成行內標籤

block 可以將行內標籤設置成長寬和獨佔一行

inline-block 便可以設置長度,也能夠在一行展現

display:none 隱藏標籤,而且標籤原來佔的位置也消失了

visibility:hidden 隱藏標籤,可是標籤原來的位置還在

盒子模型

以快遞盒爲例

1.兩個快遞盒之間的距離(標籤與標籤之間的距離)

2.快遞盒盒子的厚度(邊框border)

3.快遞盒中的物品距離內邊框的距離(內部文本與內邊框之間的距離)

4.物品的大小(文本大小)

margin: 10px; 只寫一個參數,上下左右全是

margin: 10px 20px; 第一個控制的是上下,第二個則是左右

margin: 10px 20px 30px; 第一個控制的是上,第二個是左右。第三個是下

margin: 10px 20px 30px 40px; 第一個控制的是上,第二個是右,第三個是下,第四個是左

margin:0 auto; 左右居中,不能上下居中

浮動(**************)

float

CSS中,任何元素均可以浮動。

浮動的元素,是脫離正常的文檔流(原來的位置會空出來)

瀏覽器會優先展現文本內容(**********)

浮動帶來的影響

會形成父標籤塌陷

clear

可清除浮動帶來的影響

.clearfix:after {
    content: '';
    clear: both;    /*左右兩邊都不能有浮動的元素*/
    display: block;
}
哪個父標籤塌陷了,就給它加clearfix這個類屬性值

overflow溢出屬性

visible 默認值。內容不會被修改,會呈如今元素框以外

hidden 內容會被修剪,而且其他內容是不可見的

scroll 內容會被修剪,可是瀏覽器會顯示滾動條以便查看其他的內容。

auto 若是內容被修剪,則瀏覽器會顯示滾動條以便查看其他的內容

inherit 規定應該從父元素繼承 overflow屬性的值

定位

全部的標籤默認都是靜態的,沒法改變位置

position: static;

必須將靜態的狀態修改爲定位以後

相對定位(瞭解) relative

​ 相對於標籤原來的位置,移動

絕對定位(購物車) absolute

​ 相對於已經定位過(只要不是static均可以 relative)的父標籤,再作定位(**************)

固定定位(回到頂部) fixed

​ 相對於瀏覽器窗口,固定在某個位置不動

位置的辯護是否脫離文檔流

1.不脫離文檔流

​ 相對定位

2.脫離文檔流

​ 浮動的元素

​ 絕對定位

opacity

既能夠調顏色,也能夠調字體

相關文章
相關標籤/搜索