HTML中引入CSS樣式的方式有三種：
1.最常用的，引入樣式表，在樣式表中編寫樣式，引入方式如下：
<link href="css/style.css" rel="stylesheet" type="text/css">
2.在Html頭部用<style></style>包起來，在這里面編寫樣式：
<style type="text/css">
*{
padding: 0;margin: 0
}
</style>
3.在標簽里面直接編寫行內樣式。
<div style="color: #333"><div>
下面就簡單的介紹下利用JS對內聯樣式進行操作：
腳本化CSS最直接的方法就是更改單獨的文檔元素的style的屬性值，類似大多數的HTML的屬性，style也是元素對象的屬性，其可以在JS中對其進行操作。由於style具有特殊性，通常style中的屬性不只有一個，因而style的值不單單只是一個字符串，而是一個CSSStyleDeclaration對象。通過對該對象的操作可以利用JS更改元素的樣式。利用JS操作CSS樣式需要注意以下幾點：
（1）通常通過HTML的屬性和利用<style>標簽定義的樣式屬性的面子中會包含有一個或者多個連字符如：background-color，但是在JS中兩字符是減號，像前面那樣書寫會報錯的。因而在利用JS對屬性進行操作時首先將連字符去掉，同時需要將原來緊連着連字符的后的字符轉換為大寫。這樣CSS屬性border-width就轉換為了：borderWidth。JS中通過如下的方法對CSS樣式屬性進行訪問：e.style.borderWidth="2px"。另外CSS屬性中如果使用了JS中的保留字，則需要在上述的基礎上加上CSS，如CSS中的float屬性，利用CSSStyleDeclaration對象的cssFloat屬性來進行設置。
（2）CSS樣式屬性值在CSSStyleDeclaration對象中使用時需要利用字符串形式。同時所有的定位屬性(如：width，height，top，left等)都需要加上單位px。這樣再利用JS 對其進行運算時需先對字符串進行處理（可以利用字符串對象的方法split）。
（3）JS中獲取屬性值和給屬性賦值的幾種方式：
a、直接利用CSSStyleDeclaration對象進行操作
b、getAttribute（）和setAttribute（）分別對獲取屬性值和給某屬性賦值。
但是通過以上兩種方式對CS樣式的屬性進行操作時，只能獲取已經通過JS代碼進行設置過的值或者通過HTML元素顯示設置了想要的內聯樣式的值（即在HTML標簽中通過屬性style進行設置了的屬性值）。也就是說文檔可能包含一個樣式表以設置div的寬度均為300px,但是通過JS讀取該屬性時將會得到一個空的字符串，除非在JS中已經有一個style屬性覆蓋了樣式列表中的設置。
c、利用window對象的方法getComputedStyle（）獲取計算后的樣式，該方法是可以獲取上面不能獲得到的屬性值得，但是通過該方法獲取到的屬性是只讀的，同時都是絕對值（如width用百分比表示的會計算轉換為具體的數值，顏色會轉換成rgba），而且該方法不計算復合屬性，不能獲取符合屬性的值。
d、通過獲取元素對象后利用element.css({width:50px; height:50px;})的方式也可以為元素對像添加樣式。