python--前端CSS

時間  2019-11-21
標籤 python 前端 css 欄目 Python 简体版
原文   原文鏈接

一.CSS介紹

　　CSS(Cascading Style Sheet,層疊樣式表)定義瞭如何顯示HTML元素,給HTML設置樣式,讓他更加美觀. 當瀏覽器讀到這個樣式表, 他就會按照這個樣式來對文檔進行格式化(渲染).css

二.CSS語法

　　CSS實例html

　　　　每一個css樣式由兩個組成部分:選擇器和聲明. 聲明包括屬性和屬性值. 每一個聲明以後用分號結束.git

　　　　

三.CSS的幾種引入方式

　　行內樣式(在標籤尖角號裏面的寫屬性, 不建議大規模使用)github

<p style="color: red">Hello world.</p>

　　內部樣式(將css樣式集中寫在網頁的<head></head>標籤對裏面 的<style></style>標籤對 中)瀏覽器

複製代碼 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: red;
        }
    </style>
</head>
複製代碼

　　外部樣式(將css寫在單獨的一個文件中,而後在頁面引入便可.推薦使用)字體

<!--寫在HTML文件的<head>下面-->
<link rel="stylesheet" href="練習.css">  # 如今寫的這個 .css文件是和HTML文件在一個目錄下,若是不在一個目錄,須要加上.css這個文件的路徑

　　而後在css文件中加上HTML文件中想要被渲染元素的效果url

　　　　

四.CSS選擇器(就是找到要渲染的標籤)

　　基本選擇器

　　　　元素選擇器(直接找標籤名)spa

　　　　　　p標籤就寫p{}, div標籤就寫div{}, h標籤就寫h{}  (缺點:若是有不少個p標籤,你只想改其中一個,改不了)3d

　　　　ID選擇器code

　　　　　　 

　　　　　　id不能重複 ,想要給多個div標籤同時添加css樣式,使用id 就會很複雜,須要用下面的類選擇器

　　　　類選擇器

　　注意: 類名不要用數字開頭(有的瀏覽器不認)

　　後代選擇器(用空格表示)

　　　　

　　分組和嵌套

　　　　分組(多個選擇器用逗號分隔)

　　　　　　當多個元素的樣式相同時, 沒有必要重複分別設置, 咱們能夠用逗號隔開設置統同樣式

　　　　

　　　　嵌套

　　　　　　多個選擇器混合使用,好比把c1內部全部的p標籤字體都設置成紅色

.c1 p {
  color: red;
}

　　僞類選擇器

　　　　能夠根據標籤的不一樣狀態在進一步的區分,好比一個a標籤,點擊前,點擊時,點擊後有三個不一樣的狀態.

複製代碼 
/* 未訪問的連接 */
a:link {
  color: #FF0000
}

/* 已訪問的連接 */
a:visited {
  color: #00FF00
} 

/* 鼠標移動到連接上 */  這個用的比較多
a:hover {
  color: #FF00FF
} 

/* 選定的連接 */ 就是鼠標點下去尚未擡起來的那個瞬間，可讓它變顏色
a:active {
  color: #0000FF
}

/*input輸入框獲取焦點時樣式*/
input:focus {   #input默認的有個樣式，鼠標點進去的時候，input框會變淺藍色的那麼個感受
  #outline: none;
  background-color: #eee; #框裏面的背景色
}
複製代碼

　僞元素選擇器

　　

　選擇器的優先級

　　　

五.文本操做

　　文本顏色

複製代碼 
顏色屬性被用來設置文字的顏色。
　　顏色是經過CSS最常常的指定：
   　　1.十六進制值 - 如: ＃FF0000 #前兩位是表示紅，中間兩位表示綠，後面兩位表示藍，F是最高級別，0表示最低級別（無色）
   　　2.一個RGB值 - 如: RGB(255,0,0) #紅綠藍就是RGB的意思，第一個參數是紅，最高255，最低0
   　　3.顏色的名稱 - 如:  red
   　　還有rgba(255,0,0,0.3)，第四個值爲alpha, 指定了色彩的透明度/不透明度，它的範圍爲0.0到1.0之間。
複製代碼

　　文本屬性(寫幾個經常使用的)

複製代碼 
p {
    text-align:left;  #左對齊
    text-align:right; #右對齊
    text-align:center; #居中
}

a {
    text-decoration:none;  #去掉a標籤默認的下劃線
}

p {
　　text-indent: 32px;  # 首行縮進兩個字符,(一個字在頁面上顯示16px)
}
複製代碼

六. 背景屬性

複製代碼 
/*背景顏色*/
background-color: red;
/*背景圖片*/
background-image: url('1.jpg');  #url裏面是圖片路徑，若是和你的html文件在一個目錄下，使用這種相對路徑就好了，來個葫蘆娃圖片試一下

background-repeat: no-repeat; 
/*
 背景重複
 repeat(默認):背景圖片沿着x軸和y軸重複平鋪，鋪滿整個包裹它的標籤
 repeat-x：背景圖片只在水平方向上平鋪
 repeat-y：背景圖片只在垂直方向上平鋪
 no-repeat：背景圖片不平鋪
*/

/*背景位置*/
background-position: right top;
複製代碼

七.邊框

　　邊框屬性　　

1. border-width 寬度
2. border-style 樣式
3. border-color 顏色
4. border-radius 參數>=50%就是正圓
　　border-radius: 50% 就是圓

　　邊框樣式

none       無邊框
dotted     點狀虛線邊框
dashed     矩形虛線邊框
solid      實線邊框

　　通用的簡寫方式

.c1 {
    border: 2px  solid  red;
}

　　固然還能夠分開寫呈現不一樣的效果

複製代碼 
.c1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}
複製代碼

　　下面玩一個神奇的東西

document.body.contentEditable=true

　　display屬性

　　　　用於控制HTML元素的顯示效果

　　常常用的是 display:''inline-block''  既能像塊級元素那樣設置寬高,也能像行內元素那樣在一行內展現, 塊級標籤本身佔一行,行內標籤能夠好幾個佔一行.

八.CSS盒子模型

　　在css裏面,每一個標籤能夠稱爲一個盒子模型.

　　　

　　

1. margin(外邊距):   控制元素之間的距離
2. padding(內邊距):  控制內容與邊框之間的距離
3. border(邊框):     圍繞在內邊距和內容外的邊框
4. content(內容):    盒子的內容,顯示文本和圖像

　　注意: 在建HTML文件的時候如今<head>裏面的<style>裏面寫上body{margin: 0; padding: 0;}

.margin-test {
  margin: 5px 10px 15px 20px;
}
# 這是簡寫 分別對應的是 上右下左

九.float

　　注意: left 和 right類寫在了clearfix類裏面

　　　　

　　給left 和 c3 添加一些效果, float是爲了讓left 浮起來

　　

　　上述操做後會出現下面的效果,可是咱們想要的是讓這兩個塊不重疊

　　

 　　要想出現不重疊的效果須要清除浮動

　　

　　下面這個是清除浮動後的效果

　　

 十.overflow溢出屬性

　　　　兩個主要,經常使用的屬性

hidden    內容會被修剪,而且其他內容是不可見的.
scroll    內容會被修剪可是瀏覽器會顯示滾動條以便查看其他內容

　　舉個例子:

　　　　咱們在一個標籤裏寫大量文字,可是這個標籤很小的時候,文字就會溢出.

　　　　

　　　　結果是這樣

　　　　

　　　　加上overflow:hidden;以後

　　　　

　　　　結果是這樣

　　　　

　　　　設置成overflow:scroll;以後就會出現滾動條.

　　　　

　　　　結果是這樣

　　　　

　　　　圓形頭像設置

複製代碼 
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>圓形的頭像示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      background-color: #eeeeee;
    }
    .header-img {
      width: 150px;  
      height: 150px;
      border: 3px solid white;
      border-radius: 50%;  #圓形的邊框
      overflow: hidden;    #溢出的內容隱藏
    }
    .header-img>img {
      width: 100%; # 若是圖片尺寸大於標籤尺寸那就按照父級大小,若是小於標籤尺寸,就按照本身的來.
    }
  </style>
</head>
<body>

<div class="header-img">
  <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt="">
</div>

</body>
</html>
複製代碼

十一.定位(posizion)

　　relative(相對定位)

　　　　相對定位是對於本身的原始位置開始移動,無論移動到什麼位置,都不會出現塌陷效果.

# 寫在要移動的元素裏面
position:relative;
left:100px;  # 從初使位置移動距離左邊100px
bottom:100;  # 從初使位置移動距離下面100px

　　absolute(絕對定位)

# absolute先找父級定位,若是沒有在往上找,都沒有的話就按照body位置移動
position:absolute;
right:100px;  # 以上級的位置做標準向左移動100px
top: -100px  # 以上級的位置做標準想上移動100px

　　fixed(固定) 無論頁面怎麼滾動,都在屏幕的某個位置

# 固定在屏幕的固定位置
position:fixed
left:100px    # 距離屏幕左邊100px位置
bottom:100px  # 距離屏幕底部100px位置

　　z-index

　　設置對象的層疊順序,通常用在模態對話框上(就是你點擊註冊的時候會彈出來一個框,這個框在你瀏覽的頁面的上層.)

1. z-index 值表示誰壓着誰,數值大的蓋住數值小的.
2. 只有定位了元素,纔能有z-index,也就是說無論相對定位, 絕對定位,固定定位,均可以使用z-index,可是float不行.
3. z-index值沒有單位,就是一個正整數,默認爲0,若是你們的值都同樣,那麼誰寫在HTML後面,誰壓着誰.
4. 從父現象:父親慫了,兒子再牛逼也沒用.
# z-index:1000;

　　寫一個導航欄

　　

複製代碼 
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>li標籤的float示例</title>
  <style>
    /*清除瀏覽器默認外邊距和內填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a標籤默認的下劃線*/
    }

    .c1 {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*刪除列表默認的圓點樣式*/
      margin: 0; /*刪除列表默認的外邊距*/
      padding: 0; /*刪除列表默認的內填充*/
    }
    /*li元素向左浮動*/
    li {
      float: left;
    }

    li > a {
      display: block; /*讓連接顯示爲塊級標籤*/
      padding: 0 15px; /*設置左右各15像素的填充*/   # 寫4個值是上右下左,寫兩個值第一個表明上下,第二個表明左右
      color: #b0b0b0; /*設置字體顏色*/
      line-height: 40px; /*設置行高*/   # 這個line-height的高度要與導航欄的高同樣才能居中
    }
    /*鼠標移上去顏色變白*/
    li > a:hover {
      color: #fff;
    }

    /*清除浮動 解決父級塌陷問題*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 頂部導航欄 開始 -->
<div class="c1">
  <ul class="clearfix">    # <ul> 是無序列表
    <li><a href="">阿里巴巴</a></li>    #<li>是寫在<ul>或者<ol>(有序列表)裏面的
    <li><a href="">騰訊</a></li>
    <li><a href="">百度</a></li>
    <li><a href="">字節跳動</a></li>
    <li><a href="">滴滴</a></li>
    <li><a href="">美團</a></li>
  </ul>
</div>
<!-- 頂部導航欄 結束 -->
</body>
</html>
複製代碼

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程