CSS樣式操作
- 給字體設定長寬
- 字體顏色
- 語意
- 背景圖片
- 邊框
- display
- 盒子模型
- 浮動(**************)
  - 浮動帶來的影響
  - clear
- overflow溢位屬性
- 定位
  - 位置的辯護是否脫離檔案流
- opacity

CSS樣式操作

給字體設定長寬

只有塊級標簽才可以設定長寬

行內標簽設定了沒有任何作用(僅僅只取決于內部文本值)

<!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標簽默認的下劃線

背景圖片

默認是鋪滿整個區域

通常一個頁面上的一個個小圖示，并不是單獨的，而是通過一個非常大的圖片，該圖片上有網址所用到所有的小圖示，

通過控制背景圖片的位置，來顯示不同的圖示樣式

<!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=https://www.cnblogs.com/colacheng0930/p/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>

邊框

后面跟三個引數

顏色，字體，樣式

可以單獨設定：樣式，顏色，粗細

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

既可以調顏色，也可以調字體

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/103968.html

標籤：Html/Css

上一篇：CSS3 3D變形 transform---rotateX(), rotateY(), rotateZ(), 透視(perspective)

下一篇：前端之css（二）

day 46