前端___基礎 2(文字 字型 格式等等) 待改
阿新 • • 發佈：2018-12-05
分析w3c架構:
一 架構分析
頁面=>div的層級結構 =>具有采用哪些功能標籤顯示內容
結構層 > 位置層(佈局層) > 內容層
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>架構分析</title>
</head>
<body>
<div class="wraper">
<div class="header"></div>
<div class="nav"></div>
<div class="mian">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
<!-- box架構 -->
<!-- .box>(h2+p*2+h3) -->
<div class="box">
<h2></h2>
<p></p>
<p></p>
<h3></h3>
</div>
<!-- .img-box架構 -->
<div class="img-box">
<img src="" alt="">
<div class="text">
<h2></h2>
<p></p>
<p></p>
</div>
</div>
</body>
</html>
css三種引入:
三 三種引入"優先順序"分析:
1. 沒有優先順序
2.不同的屬性樣式協同操作,相同的樣式採用覆蓋機制,懸著邏輯最下方的
3.行間式一定是邏輯最下方的
行間式: 簡單直接,針對性強(js操作樣式都是行間式)
<div style="width: 100px;height: 110px">
</div>
內聯式 :解耦合了,可讀性強
<head>
<style>
選擇器{
width:100px;
height:100px;
}
</style>
</head>
外聯式: 適合團隊高效率開發,耦合性低,複用性強
/* index.css */
選擇器{
width:100px;
height:100px;
}
<!-- index.html -->
<link rel="stylesheet" href="./02.css">
舉例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css三種引入</title>
<!-- 內聯式 -->
<style type="text/css">
/* css註釋 */
/* 選擇器 p|作用域{}|樣式塊 */
p{
width: 150px;
height: 156px;
}
</style>
<!-- 外聯式 -->
<!-- 要講css檔案與該html檔案建立練習 =>link -->
<!-- 相對路徑(目標檔案相對於本檔案的位置 ./當前路徑 ../上一層路徑)|絕對路徑 -->
<link rel="stylesheet" href="./02.css">
</head>
<body>
<!-- css:層級樣式表 完成頁面佈局 -->
<!-- 組成部分:選擇器 作用域 樣式塊 -->
<!-- 1.行間式 -->
<div style="color: red">一段話,將要被css處理</div>
<!--
1.書寫在標籤的style全域性屬性中
2.樣式格式為 => key: value(單位)
3.以;隔開多個樣式
4.最後的;可以省略
-->
<!-- 寬 高 背景顏色 -->
<div style="width: 200px; height: 200px;</div>
<!-- 2.內聯式 -->
<!--
1.樣式書寫在head標籤內的style標籤中
2.樣式格式為 => 選擇器 { 樣式塊 }
3.樣式塊 => key : value(單位)
4.以;隔開多個樣式
5.最後的;可以省略
-->
<p></p>
<!-- 3.外聯式 -->
<!--
1. 樣式書寫在外部css檔案中,不需要寫任何標籤
2.樣式格式為 => 選擇器 { 樣式塊 }
3.樣式塊 => key : value(單位)
4.以;隔開多個樣式
5.最後的;可以省略
-->
<h3></h3>
</body>
</html>
三個基礎選擇器:
基礎選擇器:
/*優先順序：id選擇器 > 類選擇器 > 標籤選擇器 > 通配選擇器*/
標籤:一般用於最內層樣式修飾
類:使用範圍最廣,佈局的主力軍
id:唯一標識的佈局,不能重複
舉例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基礎選擇器</title>
<style type="text/css">
/*div => 標籤名 => 標籤選擇器： 開發過程中儘可能少的運用，運用範圍為最內層的顯示層*/
/*dd => class名 => 類選擇器： 佈局的主力軍*/
/* d => id 名 => id選擇器： id一定是唯一的*/
/* * => 通配選擇器 => html,body,body下所有用於顯示內容的標籤*/
/* *{
border: 1px solid black
}*/
/*三種選擇器有優先順序 */
div{
width: 200px;
height: 200px;
background-color: red;
}
/*類選擇器：.類名{}*/
.dd{
background-color: orange;
}
/*id 選擇器： #id名{}*/
#d{
background-color: green;
}
/*優先順序：id選擇器 > 類選擇器 > 標籤選擇器 > 通配選擇器*/
/*作用範圍越精確，優先順序越高*/
</style>
<style type="text/css">
/*多類名:類名與類名之間不能擁有任何符號隔斷*/
.div.red{
background-color: red;
}
</style>
</head>
<body>
<!-- ****** -->
<!-- 選擇器：css選擇html標籤的一個工具 => 將css與html建立起來聯絡，那麼css就可以控制html樣式 -->
<!-- 選擇器其實就是給html標籤起名字 -->
<div></div>
<div class="dd"></div>
<div class="dd" id="d"></div>
<div class="div"></div>
<div class="div red r"></div>
<div class="div"></div>
</body>
</html>
長度單位與顏色:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>長度與顏色</title>
<style type="text/css">
.div{
/*px mm cm in em vw vh*/
width: 110px;
height: 200px;
/*顏色單詞|rgb()|rgba()|#六位十六位進位制數*/
/*rgb(255,0,255) 顏色分佈度 不帶透明度的*/
/*rgba(255,0,255,0.5) 帶透明度*/
/*#abc #abcdef*/
background-color: #fb0;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
文字樣式:
舉例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字樣式操作</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: orange;
}
/*字型樣式*/
.box{
width: 400px;
/*字族*/
/*STSong作為首選字型,微軟雅黑作為備用字型*/
font-family: "STSong","微軟雅黑"
}
.box.uu{
/*字型大小*/
font-size: 40px;
/*字重100~900 共九個*/
font-weight: 900;
/*風格 none清除系統字型風格*/
font-style: none;
/*行高:某段文字在自身行高中垂直居中顯示=> 文字垂直居中*/
line-height: 200px;
/*字型整體設定*/
/*字重 風格 大小/行高 字族 (風格可以省略)*/
font:100 normal 60px/200px "STHeiti","微軟雅黑";
}
i{
/*normal清除系統字型風格*/
font-style: normal;
}
</style>
<style type="text/css">
.wrap{
width: 200px;
height: 100px;
background-color: yellow;
}
/*文字樣式*/
.w1{
/*換行方式*/
word-break: break-all;
}
.w2{
width: 500px;
/*水平居中:left|center|right*/
text-align: center;
/*字劃線:overline|line-through|underline*/
text-decoration: overline;
/*字間距*/
letter-spacing: 2px;
/*詞間距*/
word-spacing: 5px;
/*縮排*/
/*1em相當於一個字的寬度*/
text-indent: 2em;
}
</style>
</head>
<body>
<div class="box uu">普通文字</div>
<i>i的文字</i>
<hr>
<div class="wrap w1">一二三 一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三</div>
<hr>
<div class="w2"> hello word hello world</div>
</body>
</html>
display:
舉例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 80px;
height: 40px;
background-color: orange
}
.box{
/*block:塊級標籤,獨佔一行,支援所有css樣式*/
/*display:block;*/
/*inline: 內聯(行級)標籤,同行顯示,不支援寬高*/
/*display:inline;*/
/*inline-block: 內聯塊標籤,同行顯示,支援所有css樣式*/
display: inline-block;
/*標籤的巢狀規則*/
/*1. block可以巢狀所有顯示型別標籤,div|h1~h6|p
註釋:hn和p屬於文字型別標籤,所以一般只巢狀inline標籤*/
/*2.inline標籤只能巢狀inline標籤,span|i|b|sup|sub|ins*/
/*3.inline-block可以巢狀其他型別標籤,但是不建議簽約任意型別標籤 img|input*/
}
.b1{
height: 110px;
}
.b2{
height: 50px;
}
.b3{
height: 200px;
}
.box{
/*文字線基線對齊*/
vertical-align: baseline;
}
</style>
</head>
<body>
<div class="box b1">1234</div>
<div class="box b2">456
<!-- 巢狀 -->
<span>783455</span>
</div>
<div class="box b3">895 124 789 345</div>
</body>
</html>