前端筆記 day1/5 css樣式

css標記

class類

類名可以重名
表示方法.類名

<div class="類名"></div>
<div class="div1"></div>
<div class="div2"></div>

id編號

id具有唯一性
表示方法#id名

<div id="div1"></div>

樣式

字體顏色color

color:字體顏色
#(0-9 a-f6位組合)

.h1{/*爲h1類設置字體顏色*/
	color:#123456;
	color:red
	/*有效顏色爲#和0-9 a-f的6個字符組成*/
}

字體大小 font-size

.h1{
	font-size:16px;/*字體大小 單位是像素*/
}

字體粗細font-weight

• lighter:細
• bolder/bold:粗

.h1{
	font-weight:lighter
}

字體風格font-style

• italic:斜體
• normal:普通

.h1{
	font-style:normal;
}

字體font-family

.h1{
	font-family:"微軟雅黑";
}

位置text-align

• left默認 靠左
• center 居中
• right 靠右

文本修飾 text-decoration

• none:啥也沒有
• line-through:刪除線
• overline:上劃線

<style>
a{
	color:#000;
	text-decoration:none;
}
</style>
<!--以上爲head中代碼
以下爲body中代碼-->
<a href="地址"></a>

首行縮進text-indent

.h1{
	text-indent:5px;
}

字體陰影text-shadow

.h1{
	text-shadow:5px 5px 5px red;
}

溢出隱藏text-overflow

寬高

.h1{
	width:400px;
	height:400px;
}

垂直居中line-height

只適用於僅有一行文字

.h1{
	line-height:400px;/*行高垂直居中*/
}

邊框border

• 線的寬度
• 線的類型:solid 實線 dashed 虛線 dotted點線
• 線的顏色
• border-top:上邊的線
• border-right:右邊的線
• border-bottom:下邊的線
• border-left:左邊的線

.h1{
	border:2px soild red;
}

行內外轉換

• 塊元素轉換爲行內元素:inline
• 行內元素轉換爲塊元素:block
• 隱藏元素:none

div{
	display:line
}
span{
	display:block;
}
p{
	display:none;
}

浮動

是會脫離文檔流的 不佔位

<style>
*{
	margin:0;
	padding:0;
}
ul,ol{/*ul和ol*/
	list-style:none;/*去掉列表樣式*/
	float:left;
}

ul li{/*ul下的li*/
	width:100px;
	height:100px;
	backgroud:pink;
	float:left;/*一般採用左浮動*/
}
</style>

<ul>
	<li>11</li>
	<li>22</li>
	<li>33</li>
</ul>
<span>sssss</span>

清除浮動:
給浮動元素的父元素具體寬高
浮動元素的同級標籤或該標籤設置clear:both;

定位position

想讓他在哪他就在哪裏 不佔位

• 相對定位relative 要有包含關係
• 絕對定位absolute
• 固定定位fixed 固定在一個位置

<style>
#warp{
	width: 100%;
	height: 100%;
	background: yellow;
	position:relative;
}
.top{
	width: 100px;
	height: 100px;
	background: pink;
	position: absolute;
	right: 10px;
}
.center{
	width: 100px;
	height: 100px;
	background: #342234;
	position: absolute;
	left: 10px
}
.bottom{
	width: 100px;
	height: 100px;
	background: #099330;
	position: absolute;
	left: 40%;
}
body{
	height: 2000px;
}
.box{
	background: red;
	position: fixed;
	right:20px;
	bottom: 50px;
}
</style>

<div id="warp">
		<div class="top">上</div>
		<div class="center">中</div>
		<div class="bottom">下</div><!--固定在頁面-->
		<div class="box">go back</div><!--固定在屏幕-->
	</div>

上述代碼實現之後發現外邊warp的背景顏色不見了 是因爲裏邊三個小盒子都絕對定位了(定位不佔位) 所以外邊大div的寬高都變爲0了 所以看不到背景顏色了

僞類選擇器

::before或::after在元素前或後加元素

.top::before{
	content:"*";/*內容是星號*/
	color: red;
	margin-right: 10px;
	font-size: 20px;
}

找子元素

• 用空格尋找子元素:尋找所有子元素 包括孫元素

#warp div{
	background:red;
}

• warp>div: 只找子元素, 孫元素不行

#warp>div{
	background:blue;
}

盒模型

width+padding+margin+border

• padding: 內邊距
  一個值:上下左右都是那個值
  兩個值:上下一個值 左右一個值
  四個值:上右下左順序分配四個值

• margin: 外邊距 規律同padding

• padding. border. margin三者的位置關係
  

頁面佈局

佈局原則

• 從上到下
• 從左到右
• 從外到裏