css屬性
1、僞類選擇器
<!-- 1.僞類選擇器 -->
<style>
a:link {color: orange;}
a:visited {color: green;}
a:hover {color: red;}
a:active {color: pink;}
input:focus {
outline: none;
background-color: red;
}
</style>
2、僞元素選擇器
<!-- 2.僞元素選擇器 -->
<style>
p:first-letter {
color: red;
}
p:before {
content: '*';
color: blue;
}
p:after {
content: "[?]";
color: blue;
}
</style>
3、字體屬性
<!-- 3.字體屬性 -->
<style>
body {
font-family: "Microsoft Yahei", "Arial";
font-size: 14px;
font-weight: normal;
color: rgba(0,0,0,0.5);
text-align: center;
text-decoration: underline;
text-decoration: none;
/* 首行縮進0 */
text-indent: 30px;
}
</style>
4、背景屬性
<!-- 4.背景屬性 -->
<style>
div.c1 {
width: 600px;
height: 400px;
background-color: pink;
background-image: url("https://imgcache.qq.com/bossweb/support/images/logo/logo_363.png");
background-repeat: no-repeat;
/* 若是設置圖片不重複而又鋪不滿時，
能夠經過position屬性來設置位置 */
background-position: 50% 50%;
/* 下面是簡寫 */
background: pink url("") no-repeat 50% 50%;
}
</style>
5、邊框屬性
<!-- 5.邊框屬性 -->
<style>
div.c2 {
height: 200px;
width: 300px;
background-color: pink;
/* 邊框屬性：邊框寬度 邊框樣式 邊框顏色 */
border: 1px solid red;
border-left: 1px solid green;
/* 順序是上，右，下，左 */
margin: 5px 10px 15px 20px;
}
.div1 {
background-color: red;
display: none;
/* 把塊級標籤轉換爲內聯標籤 */
display: inline;
}
.span1 {
background-color: pink;
/* 把內聯標籤轉換爲塊級標籤 */
display: block;
}
/* 改變ul的方向 */
ul {
/* 清除ul的小圓點 */
list-style-type: none;
}
li {
/* 改變方向 */
display: inline;
padding: 20px;
/*border-right: 1px solid #666;*/
}
li.last {
/* 改變最後一個li的樣式 */
border-right: none;
}
li>a {
border-right: 1px solid red;
padding-right: 15px;
}
</style>
6、背景不動
<!DOCTYPE html>
<html>
<head>
<title>背景不動</title>
<style>
.c1 {
height: 500px;
background-color: pink;
}
.c2 {
height: 500px;
background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center;
/* 把背景圖片固定住 */
background-attachment: fixed;
}
.c3 {
height: 500px;
background-color: blue;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
7、浮動
<!DOCTYPE html>
<html>
<head>
<title>浮動</title>
<style>
* {
margin: 0;
padding: 0;
}
.c1 {
height: 500px;
width: 20%;
background-color: pink;
float: left;
}
.c2 {
height: 500px;
width: 80%;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
8、解決父標籤塌陷的問題
緣由：由於浮動會致使脫離本來的位置，漂浮起來，致使本身比父標籤的位置還高
<!DOCTYPE html>
<html>
<head>
<title>解決父標籤塌陷的問題</title>
<style>
* {
margin: 0;
padding: 0;
border:1px solid red;
}
.c1,
.c2 {
height: 100px;
width: 100px;
float: left;
}
/* d1的最後再加一個僞div */
#d1:after {
content: "";
/* 這句話的意思是左邊不能有浮動元素 */
clear: left;
}
</style>
</head>
<body>
<div class="d1">
<div class="c1">我是c1</div>
<div class="c2">我是c2</div>
</div>
</body>
</html>
9、
overflow: hidden;
超出的文本將會被隱藏
全部
<!DOCTYPE html>
<html>
<head>
<title>僞類選擇器</title>
<!-- 1.僞類選擇器 -->
<style>
a:link {color: orange;}
a:visited {color: green;}
a:hover {color: red;}
a:active {color: pink;}
input:focus {
outline: none;
background-color: red;
}
</style>
<!-- 2.僞元素選擇器 -->
<style>
p:first-letter {
color: red;
}
p:before {
content: '*';
color: blue;
}
p:after {
content: "[?]";
color: blue;
}
</style>
<!-- 3.字體屬性 -->
<style>
body {
font-family: "Microsoft Yahei", "Arial";
font-size: 14px;
font-weight: normal;
color: rgba(0,0,0,0.5);
text-align: center;
text-decoration: underline;
text-decoration: none;
/* 首行縮進0 */
text-indent: 30px;
}
</style>
<!-- 4.背景屬性 -->
<style>
div.c1 {
width: 600px;
height: 400px;
background-color: pink;
background-repeat: no-repeat;
/* 若是設置圖片不重複而又鋪不滿時，
能夠經過position屬性來設置位置 */
background-position: 50% 50%;
/* 下面是簡寫 */
background: pink url("") no-repeat 50% 50%;
}
</style>
<!-- 5.邊框屬性 -->
<style>
div.c2 {
height: 200px;
width: 300px;
background-color: pink;
/* 邊框屬性：邊框寬度 邊框樣式 邊框顏色 */
border: 1px solid red;
border-left: 1px solid green;
/* 順序是上，右，下，左 */
margin: 5px 10px 15px 20px;
}
.div1 {
background-color: red;
display: none;
/* 把塊級標籤轉換爲內聯標籤 */
display: inline;
}
.span1 {
background-color: pink;
/* 把內聯標籤轉換爲塊級標籤 */
display: block;
}
/* 改變ul的方向 */
ul {
/* 清除ul的小圓點 */
list-style-type: none;
}
li {
/* 改變方向 */
display: inline;
padding: 20px;
/*border-right: 1px solid #666;*/
}
li.last {
/* 改變最後一個li的樣式 */
border-right: none;
}
li>a {
border-right: 1px solid red;
padding-right: 15px;
}
</style>
</head>
<body>
<div class="div1">div</div>
<span class="span1">span</span>
<span class="span2">span</span>
<ul>
<li><a href="">手機</a></li>
<li><a href="">電腦</a></li>
<li class="last"><a href="">服裝</a></li>
</ul>
</body>
</html>
相關文章
- 1. CSS content 屬性 CSS counter-increment 屬性 CSS counter-reset 屬性
- 2. CSS position屬性、float屬性
- 3. css屬性
- 4. CSS display屬性
- 5. CSS filter 屬性
- 6. css display:flex 屬性
- 7. CSS 屬性
- 8. css-counter屬性
- 9. [CSS] width 屬性
- 10. CSS position 屬性
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • JDK13 GA發佈：5大特性解讀
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
歡迎關注本站公眾號,獲取更多信息
