CSS
第1章 網頁佈局的三個階段和CSS基本概念css
1.1網頁佈局的三個階段
1. table網頁設計內容和樣式（外觀和佈局）混合html
2. table+CSS網頁設計table佈局。CSS指定外觀web
3. div+CSS網頁設計，div放內容，CSS指定樣式（外觀和佈局），內容和樣式完全分離編程
1.2CSS基本概念：
CSS（cascading style sheet，層疊樣式表）是一種製做網頁的新技術，如今已經爲大可能是瀏覽器所支持，成爲網頁設計必不可少的工具之一瀏覽器
1.3CSS的優勢：
1. 使網頁代碼更少，網頁下載更快ide
2. 實現了內容與樣式的分離，使網站維護更加便捷工具
3. 使網頁與瀏覽器的兼容性更好佈局
1.4CSS語法結構
每一個CSS樣式兩部分組成L：選擇器和聲明，聲明又包括屬性和屬性值，每一個聲明以後用分號結束網站
第2章 CSS的三種引入方式：
2.1行內樣式
這是全部樣式中最爲直接的一種，它直接對html標籤使用style屬性，而後直接將CSS代碼寫在裏面url
<body>
<div style="background-color:red">hello</div>
</body>
2.2內部樣式
在head中指定div的標籤來選擇選擇器，達到內容與樣式的分離
<head>
<metacharset="UTF-8">
<meta name="author" content="姜伯洋">
<meta name="copyrught" content="說明信息">
<title>姜伯洋H5頁面</title>
<style>
div{background-color:yellow}
</style>
</head>
<body>
<div>hello</div>
</body>
2.3外部樣式
<style>
div{background-color:yellow
div{background-color:yellow}
div{background-color:yellow}
div{background-color:yellow}
</style>
若是咱們的style選擇器過多的話，能夠使用引入CSS文件辦法
<link rel="stylesheet" href="test.css" type="text/css">
test.css中的內容
div{background-color: green}
第3章 CSS選擇器
3.1標籤選擇器
<style>
div{background-color:red}
</style>
</head>
<body>
<div>hello</div>
</body>
3.2ID選擇器
<style>
div{background-color:red;font-size:25px;}
#jj{background-color:gray;}
</style>
</head>
<body>
<div>hello</div>
<h1 id="jj">nihao,世界</h1>
3.3類別選擇器
<style>
.one{background-color: white}
</style>
</head>
<body>
<div class="one">hello</div>
<h1 id="jj">nihao,世界</h1>
3.4通用選擇器
<style>
*{background-color:orangered}
</style>
</head>
<body>
<h1 id="jj">nihao,世界</h1>
3.5包含選擇器
div p {background:red;}
3.6分組選擇器
div, span, h1 {color:blue;}
3.7僞類選擇器
a:link { color:#ff0000; } /*默認樣式，超連接文字爲紅色*/
a:visited { color:#00ff00; } /*訪問事後，超連接文字爲綠色*/
a:hover { color:#0000ff; } /*鼠標通過，超連接文字爲藍色*/
a:active { color:#ffff00; } /*鼠標按下時，超連接文字爲×××*/
3.8選擇器的優先級
行內樣式—id選擇器—類選擇器—標籤選擇器—通用選擇器
第4章 段落文本屬性和邊框以及背景屬性
4.1文本的行高
line-height：行高值
4.2文本對齊和文本修飾
<style>
div{
text-align: right;
}
</style>
Ø text-align：
left：左對齊
right：右對齊
center：居中對齊
Ø text-decoration：
underline：定義文本下的一條線
overline：定義文本上的一條線
line-through：定義穿過文本的一條線
blink：定義閃爍的文本
4.3邊框設置
border：寬度，樣式，顏色（border：1px solid red）
4.4文字屬性
font-size：字號
color：文字顏色
4.5背景屬性
background-color：背景顏色
background-image：背景圖像
background-position：背景位置
background-position-x：100px
background-position-y：100px
background-repeat：背景重複
repeat 背景圖像平鋪鋪滿整個網頁
repeat-x 背景圖像只在水平方向上平鋪
repeat-y 背景圖像只在垂直方向上平鋪
no-repeat 背景圖像不平鋪
<style>
#img{
border:1px solid yellow;
height:18px;
width:18px;
background-image: url('test.png');
background-position-y: 138px;
}
</style>
</head>
<body>
<div id="img">
</div>
</body>
第5章 佈局屬性（只針對塊級屬性）
5.1外邊距– margin
margin是對外元素的距離，用來控制元素自己的浮動位置
margin取值：
margin：四邊距
margin-top：上邊距
margin-bootom：下邊距
margin-left：左邊距
margin-right：右邊距
margin：0 auto 居中顯示
5.2內邊距– padding
padding是對內元素，用來控制內部元素的位置
padding：四邊距
padding-top：上邊距
padding-bootom：下邊距
padding-left：左邊距
padding-right：右邊距
5.3元素浮動– float
float的取值：left/right/none
<style>
.one {
background-color: yellow;
border: 1px solid red;
width: 100px;
height: 100px;
float: left;
}
.two{
background-color: yellow;
border:1px solid red;
width: 100px;
height: 100px;
float: left;
}
.three{
background-color: yellow;
border: 1px solid red;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="one">hello</div>
<div class="two">hello</div>
<div class="three">hello</div>
</body>
banner頭部製做：
<style>
#head{
background-color: #f5f5f5;
height:18px;
}
#pg-left{
margin-left: 50px;
float: left;
}
#pg-right{
margin-right: 50px;
float: right
}
</style>
</head>
<body>
<div id="head">
<div id="pg-left">請登陸</div>
<div id="pg-right">
<a href="#">收藏</a>
<a href="#">購物車</a>
<a href="#">分類</a>
</div>
</div>
5.4display屬性：
block：將元素編程塊級標籤，能夠設置高度和寬度
inline：將元素變成行內標籤，不能設置高度和寬度
inline-block：同時具備兩種
none：標籤消失
5.5overflow溢出處理屬性：
overflow：水平和垂直均設置
overflow-x：scroll 設置水平方向
overflow-y：scroll 設置垂直方向
5.6定位屬性：
fixed：將某個元素固定在頁面的某個位置
特色：相對於瀏覽器的窗口來進行定位的，固定到窗口的某個位置上，不隨內容而滾動，若是不設置定位座標，就在原來的位置，不然反之
absolute：絕對定位
特色：相對於（祖先元素的定位方式relative來進行定位，找祖先元素是否有定位，若是沒有定位，找到body，就相對於body來定位，若是找到祖先元素有定位，想對祖先元素來定位
relative：相對定位
特色：相對定位是相對於自身的左上角爲座標
定位方式常與定位座標一塊兒使用
定位座標：要定位的元素偏離目標位置多遠的距離
常見取值：top，left，right，bottom
5.6.1fixed定位屬性的使用：
.hot{
position:fixed;
top: 62px;
left: 151px;
}
</style>
</head>
<body>
<div id="pg-content">
<h2>限時搶購</h2>
<div class="item">
<img src="IMGL0036.jpg" >
<p>特價特賣葫蘆娃</p>
<div>
<span class="current">¥144</span><span class="origin">¥188</span>
</div>
<div class="hot">
<img src="hot.jpg" >
</div>
</div>
</div>
5.6.2relative和absolute聯合使用
<style>
#pg-content{
width:700px;
height:500px;
border:1px solid orange;
}
h2{
color: orange;
font-size: 18px;
border:1px solid orange;
margin-top: 0;
padding-left: 12px;
}
.item{
width:150px;
height:200px;
border:1px solid #e7e7e7;
float: left;
margin:11px;
position: relative;
}
img{
width:150px;
height:130px;
}
.itemp, span{
font-size: 13px;
text-align: center;
}
.current{
color: red;
font-size: 16px;
margin-left: 32px;
}
.origin{
text-decoration: line-through;
margin-left: 20px;
}
.hotimg{
width:20px;
height:30px;
}
.hot{
position:absolute;
top: 0px;
right: 0px;
}
</style>
5.6.3淘寶案例：
上面淘寶網的搜索欄是不會隨着滾輪的滑動調整的，始終會在屏幕的最頂端
<style>
.pg-header{
position: fixed;
top:0px;
right:0px;
left:0px;
background-color: blue;
height:48px;
}
.pg-content{
height:2000px;
background-color: beige;
margin:50px;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">nihao</div>
</body>
5.6.4input輸入框案例
<body>
<div style="width: 300px; height: 30px; position: relative;">
<input stype="text" name="username" style="width:300px; height: 30px; padding-right: 25px;;">
<img src="suo.jpg" style="position: absolute;top: 8px; right: -23px;">
</div>
</body>
5.7z-index
設置對象的層疊順序
較大number的值的對象會覆蓋在較小的number值的對象上
<style>
.one{
height:2000px;
background-color: #dddddd;
}
.two{
height:2050px;
background-color: #3ba354;
position: fixed;
top:0;
right:0;
left:0;
opacity: 0.3;
/*z-index:10;*/
}
.three{
height:400px;
width:300px;
position: fixed;
top:100px;
right:400px;
left:800px;
background-color: white;
z-index: 10;
}
</style>
</head>
<body>
<div class="one">
</div>
<div class="three">
</div>
<div class="two"> </div></body
- 1. CSS——CSS樣式
- 2. 【CSS】理解CSS
- 3. CSS Tools: Reset CSS
- 4. CSS——CSS基礎
- 5. CSS之CSS hack
- 6. CSS：關於CSS Hack
- 7. CSS animation & CSS animation 101
- 8. CSS+DIV-CSS與Javascript
- 9. css樣式 --- CSS hack
- 10. CSS 框架 Blueprint CSS
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。