css複習記錄

css複習全記錄
本文只是個人複習記錄所用，初學者可以借鑑，會寫大部分基礎的用法，以及我個人的感悟
初學者如果想快速查詢可以直接 ctrl +f 找到你想要的，下面的東西都是實際中用到的。

理論：

css 規則由兩個主要的部分組成選擇器和一條聲明或者多條聲明
選擇器：需要改變的樣式的html元素
屬性：希望設置的樣式屬性
聲明：以分號;分開，聲明組以大括號{}括起來

table{
padding:20px;
color:red;
}

CSS註釋

 /* 註釋內容 */

選擇器

id選擇器  <p id="a">123</p>  
class選擇器  <p class="b">123</p>  
<style>
  #a{
  }
  .b{
  }
</style>

樣式優先級從內往外

外部樣式表

<link rel="stylesheet" type="text/css" href="mystyle.css">

內部樣式表

    <style>
         css內容
    </style>

內聯樣式表

 <h5  style="color:red;"></h5>

背景設置

background-color：顏色

 1. 十六進制 - 如："#ff0000"    
 2. RGB - 如："rgb(255,0,0)"   
 3.  顏色名稱 - 如："red"

background-image：圖像，設置圖片

 1. body {background-image:url('paper.gif');}

background-repeat：背景圖像，水平或垂直平鋪

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;     （repeat-x  repeat-y   水平或者垂直平鋪，no-repeat; 或者不平鋪）
}

background-attachment 背景圖像是否固定或者隨着頁面的其餘部分滾動。

scroll	背景圖片隨頁面的其餘部分滾動。這是默認
fixed	背景圖像是固定的
inherit	指定background-attachment的設置應該從父元素繼承
local	背景圖片隨滾動元素滾動

background-position 背景圖像定位（元素：right,top,left,booton,center 也可以用百分比來控制 50%，50%）

css 文本

文本顏色

color：

設置文本方向

direction：默認（rtl    right-to-left）自行發揮

設置文本間距

letter-spacing ：2px;

設置行高(是行與行之間的高)

line-height 90% (百分比)

設置文本對齊方式

text-align  元素：center  left  reight top  button

設置文本裝飾方式（上劃線，下劃線，中線）

text-decoration   元素：overline,line-through,underline

縮進元素中文本的首行

text-indent :  50px

設置文本陰影

text-shadow: h-shadow v-shadow blur color;  允許負值  就是反方向
text-shadow    只能設置兩個方向  5px 5px  #fff000 顏色

設置英文大小寫

text-transform  元素：uppercase 全部大寫  capitalize  全部小寫  lowercase 首字母大寫

設置文本方向

unicode-bidi  embed正方向  bidi-override反方向

設置元素垂直對齊設置元素與元素之間的對齊比如圖片和文字的錯位位置

 vertical-align    元素：top middle bottom

是否保存原文本的換行和空格

white-space 元素  nowrap:不會換行 一行  pre-wrap pre-line 保留換行

設置字間隔

word-spacing  word-spacing:30px;

字體

定義字體： https://www.w3cschool.cn/cssref/css-websafe-fonts.html 鏈接給出類型
字體樣式：

 - Serif 字體 
 - sans - serif字體 
 - Monospace 字體

font-style:

 - 正常：normal 
 - 斜體：italic 
 - 傾斜：oblique

字體大小：三種像素（40px）和em 2.5em 或者百分比 50%

 - font-size ：40px
 - font-size ：2.5em
 - font-size ：50%

控制字體粗細：

font-weight 元素 :

 - bold 粗  
 - bold 更粗  
 - lighter細   
 - 或者數值   400相當於normal（自行發揮）

鏈接

鏈接樣式：

 - a:link - 正常，未訪問過的鏈接
 - a:visited - 用戶已訪問過的鏈接
 - a:hover - 當用戶鼠標放在鏈接上時
 - a:active - 鏈接被點擊的那一刻      後面都可以跟上顏色，

背景修飾

 - a:link {background-color:#B2FF99;}
 - a:visited{background-color:#FFFF85;} 
 - a:hover {background-color:#FF704D;}
 - a:active {background-color:#FF704D;}

文本修飾

text-decoration  屬性主要用來刪除鏈接中的下劃線   元素  none 無  underline  有

**列表樣式

列表屬性作用如下**

設置不同的列表項標記爲有序列表    ol
設置不同的列表項標記爲無序列表    ul  
設置列表項標記爲圖像

list-style-type屬性設置列表前面的標點

none：不使用項目符號
disc：實心圓
circle：空心圓
square：實心方塊
demical：阿拉伯數字 
lower-alpha：小寫英文字母 
upper-alpha：大寫英文字母 
lower-roman：小寫羅馬數字 
upper-roman：大寫羅馬數字

或者作爲列表爲標記的圖像

list-style-image: url('sqpurple.gif');

實例：

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}
ul li {
  background-image: url(sqpurple.gif);
  background-repeat: no-repeat;
  background-position: 0px 5px;
  padding-left: 14px;
}

table表格

表格邊框

border
table, th, td
{
border: 1px solid black;
}

摺疊邊框

border-collapse
table
{
border-collapse:collapse;
}

表格寬度和高度

table,td,th
{
	border:1px solid black;
}
table
{
	width:100%;
}
th
{
	height:50px;
}

表格文字對齊

td
{
text-align:right;
}
td
{
height:50px;
vertical-align:bottom; 這裏可以控制文本的位置
}

表格填充在表的內容中控制空格之間的邊框，應使用td和th元素的填充屬性：

td
{
padding:15px;
}

表格顏色指定邊框的顏色，和th元素的文本和背景顏色：

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

盒子模型：外邊距，邊框，內邊框，內容

Margin（外邊距） - 清除邊框區域。Margin沒有背景顏色，它是完全透明
Border（邊框） - 邊框周圍的填充和內容。邊框是受到盒子的背景顏色影響
Padding（內邊距） - 清除內容周圍的區域。會受到框中填充的背景顏色影響
Content（內容） - 盒子的內容，顯示文本和圖像

border 邊框

border-style  邊框風格：

	    dotted: 定義一個點線框
	    dashed: 定義一個虛線框
	    solid: 定義實線邊界
	    double: 定義兩個邊界。 兩個邊界的寬度和border-width的值相同
	    groove: 定義3D溝槽邊界。效果取決於邊界的顏色值
	    ridge: 定義3D脊邊界。效果取決於邊界的顏色值
	    inset:定義一個3D的嵌入邊框。效果取決於邊界的顏色值
	    outset: 定義一個3D突出邊框。 效果取決於邊界的顏色值

單獨設計各個邊：

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid; 

border-style 	用於設置元素所有邊框的樣式，或者單獨地爲各邊設置邊框樣式。
border-width 	簡寫屬性，用於爲元素的所有邊框設置寬度，或者單獨地爲各邊邊框設置寬度。
border-color 	簡寫屬性，設置元素的所有邊框中可見部分的顏色，或爲 4 個邊分別設置顏色。
border-bottom 	簡寫屬性，用於把下邊框的所有屬性設置到一個聲明中。
border-bottom-color 	設置元素的下邊框的顏色。
border-bottom-style 	設置元素的下邊框的樣式。
border-bottom-width 	設置元素的下邊框的寬度。
border-left 	簡寫屬性，用於把左邊框的所有屬性設置到一個聲明中。
border-left-color 	設置元素的左邊框的顏色。
border-left-style 	設置元素的左邊框的樣式。
border-left-width 	設置元素的左邊框的寬度。
border-right 	簡寫屬性，用於把右邊框的所有屬性設置到一個聲明中。
border-right-color 	設置元素的右邊框的顏色。
border-right-style 	設置元素的右邊框的樣式。
border-right-width 	設置元素的右邊框的寬度。
border-top 	簡寫屬性，用於把上邊框的所有屬性設置到一個聲明中。
border-top-color 	設置元素的上邊框的顏色。
border-top-style 	設置元素的上邊框的樣式。
border-top-width 	設置元素的上邊框的寬度。

表格輪廓

outline-style   ：
					    元素：
					    dotted
					    dashed
					    solid
					    double
					    groove
					    ridge
					    inset
					    outset

CSS Margin(外邊距) CSS Margin屬性接受任何長度單位、百分數值甚至負值 CSS Margin(外邊距)屬性定義元素周圍的空間。

padding 填充：屬性定義元素邊框與元素內容之間的空間。

元素 top botton reight left

顯示display和可見性visibility

display屬性設置一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏。

h1.hidden {visibility:hidden;}

visibility屬性雖然隱藏了，但是依然佔空間，，佈局存在
display  正好相反

Positioning定位允許您將佈局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。

Static 定位

HTML元素的默認值，即沒有定位，元素出現在正常的流中。靜態定位的元素不會受到top, bottom, left, right影響。

Fixed 定位

元素的位置相對於瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動： p.pos_fixed { position:fixed;
top:30px; right:5px; }

Relative 定位

相對定位元素的定位是相對其正常位置。

Absolute 定位

絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於: p.pos_fixed {
position:Absolute ; top:30px; right:5px; }

float 浮動會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用於圖像，但它在佈局時一樣非常有用。
清除浮動

.text_line { clear:both; }

水平浮動:

float:right

中心對齊,使用margin屬性

.center { margin-left:auto; margin-right:auto; width:70%;
background-color:#b0e0e6; }

css組合選擇符

組合選擇符說明了兩個選擇器直接的關係。
在 CSS3 中包含了四種組合方式:

 - 後代選取器(以空格分隔) 
 - 子元素選擇器(以大於號分隔） 
 - 相鄰兄弟選擇器（以加號分隔） 
 - 普通兄弟選擇器（以波浪號分隔）

導航欄加下拉列表

自行發揮

<ul class="frits1">
  <li><a href="#home" class="active">主頁
  <span class="tooltiptext">我是主頁</span>
  </a></li>
  <li><a href="#news">新聞</a></li>
  <li><a href="#content">聯繫</a></li>
  <li class="right">
  <div class="dropdown">
     <a href="#about" class="dropbtn">關於</a>
     <div class="dropdown-content">
      <a href="#">公司簡介</a>
      <a href="#">招聘信息</a>
      <a href="#">工商編號</a>
     </div>
  </div>   
     </li>
</ul>
**css**
<style>
.frits1{
	margin: 0;
    padding: 0;
	list-style-type:none;
	overflow:hidden;
    margin:0px;
	padding:0px;
	background-color:#F0F;
	border-radius:6px;
	}

ul li{
	
	float:left;}
ul li a{
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	
	}	
.right{
	float:right;
	}
ul li a:hover:not(.active) {background-color:#0F0;}
ul.topnav li a.active {background-color: #F0F;}


	
.dropdown-content {
    display: none;
    position:fixed;
    top:60px;
    right:5px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content>a:hover {background-color:#00F}
.dropdown:hover .dropdown-content {
    display: block;
}
</style>

最後來說網頁佈局：

https://www.runoob.com/try/try.php?filename=trycss_website_layout_blog
菜鳥教程上的例子，完全適用大部分佈局，自行發揮

理論：

CSS註釋

選擇器

樣式優先級從內往外

背景設置

css 文本

字體

鏈接

table表格

盒子模型：外邊距，邊框，內邊框，內容

css組合選擇符

導航欄加下拉列表

美團一面：項目中有 10000 個 if else 如何優化？想了半天，被問懵了！

京東面試：如何進行JVM調優？

Python 將PowerPoint (PPT/PPTX) 轉爲HTML

SQL優化-20231016

sql注入學習第一篇---基礎

django-layui-表格-搜索

Django項目開發流程（具體）

django 接入支付寶支付接口 ----測試（2020年成功）

eclipse 導入django項目顯示沒有找到可用導入的項目

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

css複習記錄

理論：

CSS註釋

選擇器

樣式 優先級 從內往外

背景設置

css 文本

字體

鏈接

table表格

盒子模型：外邊距，邊框，內邊框，內容

css組合選擇符

導航欄加下拉列表

樣式優先級從內往外