[UI] 01 - CSS

時間 2019-11-07

標籤 css 欄目 CSS 简体版

原文原文鏈接

前言

1、認識

From: http://www.runoob.com/css/css-tutorial.htmlcss

CSS 指層疊樣式表 (Cascading Style Sheets)html

解決內容與表現分離的問題。api

2、結構

形式：屬性-值

class 選擇器

<style>
body {background-color:tan;}
h1   {color:maroon;font-size:20pt;}
hr   {color:navy;}
p    {font-size:11pt;margin-left:15px;}
a:link    {color:green;}
a:visited {color:yellow;}
a:hover   {color:black;}
a:active  {color:blue;}
</style>

id 選擇器

<style>
#para1
{
    text-align:center;
    color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
</body>

分組選擇器

爲了儘可能減小代碼，你可使用分組選擇器。瀏覽器

h1
{
    color:green;
}
h2
{
    color:green;
}
p
{
    color:green;
}
----------------> 簡寫爲以下
h1,h2,p
{
    color:green;
}

嵌套選擇器

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8"> 
　　<title>菜鳥教程(runoob.com)</title> 

　　<style>
　　p
　　{
　　    color:blue;
　　    text-align:center;
　　}
　　.marked
　　{
　　    background-color:red;
　　}
　　.marked p
　　{
　　    color:white;
　　}
　　p.marked{
　　    text-decoration:underline;
　　}
　　</style>

</head>

<body>
　　<p>這個段落是藍色文本，居中對齊。</p>
　　<div class="marked">
　　　　<p>這個段落不是藍色文本。</p>
　　</div>
　　<p>全部 class="marked"元素內的 p 元素指定一個樣式，但有不一樣的文本顏色。</p>
    
　　<p class="marked">帶下劃線的 p 段落。</p>
</body>
</html>

p{ }: 爲全部 p 元素指定一個樣式。
.marked{ }: 爲全部 class="marked" 的元素指定一個樣式。
.marked p{ }: 爲全部 class="marked" 元素內的 p 元素指定一個樣式。
p.marked{ }: 爲全部 class="marked" 的 p 元素指定一個樣式。

設置了三個樣式

組合選擇符

Ref: http://www.runoob.com/css/css-combinators.htmlapp

(1) 後代選擇器(以空格分隔)ide

div p
{
  background-color:yellow;
}

(2) 子元素選擇器【必須有父元素，也體現了 '僞類' 的效果】函數

div>p
{
  background-color:yellow;
}

(3) 相鄰兄弟選擇器【既然相鄰，就只能有一個】佈局

div+p
{
  background-color:yellow;
}

(4) 後續兄弟選擇器字體

div~p
{
  background-color:yellow;
}

3、樣式表

內部樣式表

上述例子。url

外部樣式表

瀏覽器會從文件 mystyle.css 中讀到樣式聲明，並根據它來格式文檔。

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

內聯樣式

寫在html內部，有點箭頭函數的意思。

<p style="color:sienna;margin-left:20px">這是一個段落。</p>

多重樣式 - 優先級

優先內部樣式。

（內聯樣式）Inline style > （內部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認樣式

屬性詳談

1、背景

純色背景

body {background-color:#b0c4de;}
h1   {background-color:#6495ed;}

圖片背景

body
{
　　background-image:url('gradient2.png');
　　# 平鋪設置
　　background-repeat:repeat-x;
　　# 不平鋪
　　background-repeat:no-repeat;
　　background-position:right top;
}

等價於：

爲了簡化這些屬性的代碼，咱們能夠將這些屬性合併在同一個屬性中.

<style>
body
{
    background:#ffffff url('img_tree.png') no-repeat right top;
    margin-right:200px;
}
</style>

當使用簡寫屬性時，屬性值的順序爲：

1 background-color
2 background-image
3 background-repeat
4 background-attachment
5 background-position

View Code

2、文本

基本屬性

#三種寫法
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);} #對齊方式
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

#縮進
p {text-indent:50px;}

高級屬性

# 劃線
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;} # 文本轉換
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

其餘詳見：http://www.runoob.com/css/css-text.html

字體樣式、大小

font-family 屬性應該設置幾個字體名稱做爲一種"後備"機制，若是瀏覽器不支持第一種字體，他將嘗試下一種字體。

p{font-family:"Times New Roman", Times, serif;}

p.normal  {font-style:normal;}
p.italic  {font-style:italic;}
p.oblique {font-style:oblique;}

大小，外層body的百分比控制內部全部文字縮放比例。

body {font-size:100%;}
h1  {font-size:2.5em;}
h2  {font-size:1.875em;}
p   {font-size:0.875em;}

連接

設置同一個連接的四個不一樣狀態。

這裏使用了「僞類」的概念。

a:link {color:#000000;}      /* 未訪問連接*/
a:visited {color:#00FF00;}   /* 已訪問連接 */
a:hover {color:#FF00FF;}     /* 鼠標移動到連接上 */
a:active {color:#0000FF;}    /* 鼠標點擊時 */

a:link {text-decoration:none;}
a:link {background-color:#B2FF99;}

a:hover 必須跟在 a:link 和 a:visited後面
a:active 必須跟在 a:hover後面

注意順序

文字框

Goto: http://www.runoob.com/css/css-border.html

文字邊框屬性。

輪廓（outline）

Goto: http://www.runoob.com/css/css-outline.html

<style>
p 
{
    border:1px solid red; outline:green dotted thick;
}
</style>

margin（外邊距）與 padding（內邊距）

margin-top    :100px;
margin-bottom :100px;
margin-right  :50px;
margin-left   :50px;

padding-top   :25px;
padding-bottom:25px;
padding-right :50px;
padding-left  :50px;

'簡寫形式' 以及 '順序' 請見：

Goto: http://www.runoob.com/css/css-margin.html

Goto: http://www.runoob.com/css/css-padding.html

尺寸 (Dimension)

控制元素的高度和寬度。

Goto: http://www.runoob.com/css/css-dimension.html

3、列表

常規標記

每一條前加個 ‘點’。

<head>
<style>
　　ul.a {list-style-type:circle;}
</style>
</head>

<body>
<p>無序列表實例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<body>

圖片標記

<style>
　　ul 　　＃這裏居然沒有考慮<li>
　　{
　　    list-style-image:url('sqpurple.gif');
　　}
</style>
</head>

<body>
<ul>
　　<li>Coffee</li>
　　<li>Tea</li>
　　<li>Coca Cola</li>
</ul>
</body>

瀏覽器兼容性解決方案

其實就是不採用瀏覽器默認處理方式，而改成直接設置各個屬性，達到顯示一致的效果。

詳見：http://www.runoob.com/css/css-list.html

4、表格

使用 CSS 可使 HTML 表格更美觀。

邊框

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8"> 
　　<title>菜鳥教程(runoob.com)</title>
　　<style>
　　　　table,th,td
　　　　{
   　　　　 border:1px solid black;
　　　　}
　　</style>
</head>

<body>
　　<table>
　　　　<tr>
　　　　　　<th>Firstname</th>　　# <th>在單元格中加粗顯示
　　　　　　<th>Lastname</th>
　　　　</tr>
　　　　<tr>
　　　　　　<td>Peter</td>
　　　　　　<td>Griffin</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>Lois</td>
　　　　　　<td>Griffin</td>
　　　　</tr>
　　</table>
</body>
</html>

不要空隙：

table
{
　　border-collapse:collapse;　　# 去掉邊框間空隙
}
table,th, td
{
　　border: 1px solid black;
}

寬度和高度

table 
{
    width:100%;
}
th
{
    height:50px;
}

文字對齊

td
{
    text-align:right;　　　　　　# 水平對齊
    height:50px;
    vertical-align:bottom;     # 垂直對齊
}

內部間距：

td
{
    padding:15px;
}

顏色

# 邊框顏色
table, td, th
{
　　border:1px solid green;
}

# 背景填充顏色
th
{
　　background-color:green;
　　color:white;
}

5、Display(顯示) 與 Visibility（可見性）

Display

注意, 實例中的隱藏標題不佔用空間。

h1.hidden {display:none;}

Visibility

注意, 實例中的隱藏標題仍佔用空間。

h1.hidden {visibility:hidden;}

6、內聯方式

內聯元素

Ref: HTML 內聯元素

內聯元素在顯示時一般不會以新行開始。

例子：, <td>, <a>, <img>

- HTML <div> 元素是塊級元素，它是可用於組合其餘 HTML 元素的容器。
- HTML 元素是內聯元素，可用做文本的容器。

(1) 變爲內聯，變得沒換行。

<style>
　　li{display:inline;}
</style>

(2) 變爲block，變得有換行。

span
{
    display:block;
}

空間位置

1、盒子模型（Box Model）

概念

代碼

div {
    background-color: lightgrey;

    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

效果

計算方法

# 求顯示的總寬度

300px (寬)
+ 50px (左 + 右填充)
+ 50px (左 + 右邊框)
+ 50px (左 + 右邊距)

= 450px

2、Position 定位

position 屬性的五個值
- static
- relative
- fixed
- absolute
- sticky

相對位置

<style>
h2.pos_left
{
    position:relative;
    left:-20px;
}

h2.pos_right
{
    position:relative;
    left:20px;
}
</style>
</head>

<body>
<h2>這是位於正常位置的標題</h2>　　# 注意，都是以這個做爲‘位置參照’，而不是上一條。
<h2 class="pos_left">這個標題相對於其正常位置向左移動</h2>
<h2 class="pos_right">這個標題相對於其正常位置向右移動</h2>

sticky屬性

三，圖片位置浮動

圖片在文字中的浮動

<style>
img 
{
    float:right;
}
</style>

<p>
<img src="logocss.gif" width="95" height="84" />
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
</p>

【效果】

mix組件的浮動

img與string經過div構成了一個組件。浮動時做爲總體處理。浮動的佈局考慮同級目錄便可。

<div>
<img src="logocss.gif" width="95" height="84" /><br>
CSS is fun!
</div>

<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

【效果】

圖片們的浮動

<style>
.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}
</style>

<body>
<h3>圖片庫</h3>
<p>試着調整窗口,看看當圖片沒有足夠的空間會發生什麼。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>

【效果】

清除浮動 - 使用 clear

.text_line
{
    clear:both;
}

4、對齊

【元素居中】：從總體看去

<style>
.center { margin: auto;
    width: 60%;　　# 必須設置
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>

顯示效果：

【文本居中】：文本在元素內居中對齊

<style>
.center { text-align: center;
    border: 3px solid green;
}
</style>

【圖片居中】：可使用 margin: auto; 並將它放到塊元素中

<style>
img {
    display: block;
    margin: auto;
    width: 40%;
}
</style>

【左右對齊】- Position + left/right

.right {
 position: absolute;
 right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

也可使用下面介紹的 float 的方式。

【嵌套佈局】- body -> container -> right

當使用 position 來對齊元素時, 一般 <body> 元素會設置 margin 和 padding 。

這樣能夠避免在不一樣的瀏覽器中出現可見的差別。

body {
    margin: 0;
    padding: 0;
}
 
.container {
    position: relative;
    width: 100%;
}
 
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}

嵌套代碼結構：

<body>
　　<div class="container">
　　    <div class="right">
　　    <p><b>注意: </b>當使用浮動屬性對齊,老是包括 !DOCTYPE 聲明!若是丟失,它將會在 IE 瀏覽器產生奇怪的結果。</p>
　　    </div>
　　</div>
</body>

【Float對齊】

<style>
.right { float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>

可見，也可使用 float 屬性來對齊元素：

float: right

-- 相似於 --
position: absolute;
right: 0px;

【溢出問題】

在父元素上添加 overflow: auto; 來解決子元素溢出的問題。

.clearfix {
    overflow: auto;
}

<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
菜鳥教程 - 學的不只是技術，更是夢想！！！</div>

<p style="clear:right">在父元素上經過添加 clearfix 類，並設置 overflow: auto; 來解決該問題:</p>

<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
菜鳥教程 - 學的不只是技術，更是夢想！！！</div>

溢出效果：

【垂直居中對齊】 - 使用 padding

.center {
    padding: 70px 0;
    border: 3px solid green;
}

【水平垂直居中】

在垂直居中基礎上添加水平居中便可。

.center {
    padding: 70px 0;
    border: 3px solid green;
 text-align: center;
}

【垂直居中 - 番外篇】

* 經過行高設置，達到垂直居中效果。

<style>
.center { line-height: 200px; height: 200px;
    border: 3px solid green;
    text-align: center;
}

/* 若是有多行文本，能夠設置以下 */

.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}
</style>

* 垂直居中 - 使用 position 和 transform

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

僞類、僞元素

From: http://www.runoob.com/css/css-pseudo-classes.html

From: http://www.runoob.com/css/css-pseudo-elements.html

1、啥是僞類

anchor僞類

a:link {color:#FF0000;}    /* 未訪問的連接 */
a:visited {color:#00FF00;} /* 已訪問的連接 */
a:hover {color:#FF00FF;}   /* 鼠標劃過連接 */
a:active {color:#0000FF;}  /* 已選中的連接 */

僞類的語法

selector:pseudo-class {property:value;}

# CSS類也可使用僞類
selector.class:pseudo-class {property:value;}

2、first-child 僞類

匹配第一個 元素

p:first-child
{
    color:blue;
}

匹配全部 元素中的第一個 元素

<head>
　　<meta charset="utf-8"> 
　　<title>菜鳥教程(runoob.com)</title> 
　　<style>
　　p > i:first-child
　　{
    　　color:blue;
　　} 
　　</style>
</head>

<body>
　　<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
　　<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
　　<p><b>注意:</b> 當 :first-child 做用於 IE8 以及更早版本的瀏覽器, ！DOCTYPE 必須已經定義.</p>
</body>

匹配全部做爲第一個子元素的 元素中的全部 元素

<head>
　　<meta charset="utf-8"> 
　　<title>菜鳥教程(runoob.com)</title> 
　　<style>
　　p:first-child i
　　{
　　    color:blue;
　　} 
　　</style>
</head>

<body>
　　<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
　　<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
　　<p><b>注意:</b> 當:first-child 做用於 IE8 及更早版本的瀏覽器, DOCTYPE 必須已經定義.</p>
</body>

Goto: 全部CSS僞類/元素，請見原連接。

3、CSS 僞元素

語法

CSS僞元素是用來添加一些選擇器的特殊效果。

# 僞元素的語法：
selector:pseudo-element {property:value;}

# CSS類也可使用僞元素：
selector.class:pseudo-element {property:value;}

first-line 僞元素

<head>
　　<meta charset="utf-8"> 
　　<title>菜鳥教程(runoob.com)</title> 
　　<style>
　　p:first-line 
　　{
　　color:#ff0000;
　　font-variant:small-caps;
　　}
　　</style>
</head>

<body>
　　<p>你可使用 "first-line" 僞元素向文本的首行設置特殊樣式。</p>
</body>

效果圖：

first-letter 僞元素

<style>
p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}
</style>

效果圖：

多個僞元素

<style>
　　p:first-letter
　　{
　　    color:#ff0000;
　　    font-size:xx-large;
　　}
　　p:first-line 
　　{
　　    color:#0000ff;
　　    font-variant:small-caps;
　　}
</style>

before 僞元素

<style>
　　h1:before {content:url(smiley.gif);}
</style>

after 僞元素

<style>
　　h1:after {content:url(smiley.gif);}
</style>

Goto: 全部CSS僞類/元素，請見原連接。

1. 01-UI基礎-01-概述
2. 01.UI交互
3. CSS 小測 - 01
4. 01-UI基礎-02UILable
5. css學習01
6. 初學css（01）
7. 01 Basic HTML&CSS 【FCC】
8. 01-UI基礎-04-01-UITextView : UIScrollVie
9. 01-UI基礎-05-01-UIButton : UIControl
10. CSS-MUI：筆記-01
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 適用於PHP初學者的學習線路和建議
• Git五分鐘教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

[UI] 01 - CSS

前言

1、認識

2、結構

3、樣式表

屬性詳談

1、背景

2、文本

3、列表

4、表格

5、Display(顯示) 與 Visibility（可見性）

6、內聯方式

空間位置

1、盒子模型 （Box Model）

2、Position 定位

三，圖片位置浮動

4、對齊

僞類、僞元素

1、啥是僞類

2、first-child 僞類

3、CSS 僞元素

1、盒子模型（Box Model）