2022年11月1日 星期二

CSS - selector # - Extjs panel 元件的 bodyStyle 設定方式 - font-size - px,pt,cm

 目的: Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)是用來描述HTML的樣式

selector(選取器),也就是要定義的對象。

將樣式套用在 selector(選取器)

我們想設定一些標籤的基本樣式

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-size: 20px;
}



方法1:完整的html如下,請記得這些內容要放在<head> </head>中,而不是放在<body> </body>中:

<!DOCTYPE html>
<html>
<head>
<style>
body {
       background-color: lightblue;
}

h1 {
color: white;
text-align: center;
background-color: darkblue;
}

p {
font-size: 20px;
}

</style>
</head>

<body>

<h1>吳濟聰</h1>
<p>輔大資管系助理教授</p>
<p>印地安那大學博士</p>

</body>

</html>

2>方法2:

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>


<h1>吳濟聰</h1>

<p>輔大資管系助理教授</p>

<p>印地安那大學博士</p>


</body>

</html>


my.css的內容則不需要有<style></style>,如下面的範例:

body {

background-color: lightblue;

}


h1 {

color: white;

text-align: center;

background-color: darkblue;

}


p {

font-size: 20px;

}




CSS的語法是一開始是selector(選取器),也就是要定義的對象。

selector可以是

  1. html的基本元素(element),如:body、h1等等。上面的範例就是針對基本元素定義樣式。

  2. 當我們希望只針對某一個特定元件定義樣式,我們可以利用在html中所定義的id定義樣式。

  3. 當我們希望只針對某一群元件定義樣式,我們可以利用在html中所定義的class定義樣式。

要針對id定義樣式的話,在selector前加「#」:


1>針對特定元件(id)設定樣式 - 由 id="xxxx" 設定樣式


<!DOCTYPE html>

<html>

<head>

<style>

#primaryHeading {

text-align: center;

color: red;

}

</style>

</head>

<body>


<h1 id="primaryHeading">HTML</h1>

<h1>CSS</h1>


</body>

</html>


2>多元件(class)套用同一樣式
     因為在同一個網頁中id是不能重複,如果有多個元件要套同一個樣式,
     那就要使用class,要針對class定義樣式的話,在selector前加「.」:



<!DOCTYPE html>

<html>

<head>

<style>

.importantHeadings {

text-align: center;

color: red;

}

</style>

</head>

<body>


<h1 class="importantHeadings">HTML</h1>

<h1 class="importantHeadings">CSS</h1>

<h1>JavaScript</h1>

<h1>jQuery</h1>


</body>

</html>


3>利用 tag (p, body, h1) 套用樣式



<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

}


h1 {

color: white;

text-align: center;

background-color: darkblue;

}


p {

font-size: 20px;

}

</style>

</head>

<body>


<h1>吳濟聰</h1>

<p>輔大資管系助理教授</p>

<p>印地安那大學博士</p>


</body>

</html>


4>div span

雖然div及span都算是html的基本語法,但是,通常是用在樣式的設定上。

div與span的差別在於div是可以用來定義一個區塊的樣式,而且在<div></div>前後會換行。

span只能在一行之中,而且不會換行

<!DOCTYPE html>

<html>
<head>

<style>

.importantHeadings {

text-align: center;

color: red;

background-color:black;

padding:20px

}

</style>

</head>

<body>


<div class="importantHeadings">

<h1>My Important Heading</h1>

<h1>My Second Heading</h1>

</div>


<p>hello</p>

</body>

</html>




<!DOCTYPE html>

<html>

<head>

<style>

.importantHeadings {

text-align: center;

color: red;

background-color:black;

padding:20px

}

</style>

</head>

<body>


<h1><span class="importantHeadings">My Important Heading</span></h1>

<h1><span class="importantHeadings">My Second Heading</span></h1>

<p>hello</p>



</body>

</html>


2>Extjs 的 panel. bodyStyle 設定 兩種方式   CSS 字串


1>CSS字串方式:
bodyStyle: 'background:#ffc; padding:10px;

2>object 方式設定  CSS:
   bodyStyle: { background: '#ffc', padding: '10px' }


 {
            xtype: 'panel', bodyStyle: "background-color:transparent; border: 1px red solid;",  padding: "0",            
            layout: 'border',            
            items: [
                {  //sub_panel1 : table panel                                        
                    xtype: 'panel',
                    id: 'sub_panel1',                    
                    layout: 'fit',                    
                    items: [],                                       
                },  //end of panel1                                                    
            ] // end of   layout: "vbox", padding: "5", items: [
        }  //end of  sub_PrnTableFlds , items[{


3>font-size 的設定

說到font-size,就必須要知道該屬性設定值的問題,font-size可設定的值Amos會將其區分成三大類:
關鍵字 :  small  , large, larger,
絕對單位:  
                        px (1pixel = 1/96in) , 螢幕上顯示數據的最基本的點
                        pt (1point = 1/72in) ,
是印刷行業常用單位
                        cm
                        mm

                       in (1inch = 96px = 2.54cm)

相對單位:   % (百分比)


沒有留言:

張貼留言