Bước tới nội dung

Sách CSS/Thuộc tính và Giá trị phần tử CSS

Thêm liên kết
Tủ sách mở Wikibooks

Phần tử CSS được dùng để định dạng tể hình trang mạng. Các Phần Tử (selector) của trang mạng đều có Thuộc Tính (Property) và Trị Số Giá Trị (Value)


Phần tử Nền (Background)

[sửa]

Phần tử định dạng nền background trang mạng

Cú pháp 

HTML Element{Background - Thuộc tính : Value}

Thuộc tính và giá trị

  • Background-attachment:Fixed|Scroll
Dạng Nền:Cố Định|Di Động
  • Background-color:Color name | Color code
Màu nền:Tên màu | Mả màu
  • Backgroun-image:image name
Nền hình:tên hình
  • Background-repeat :repeat|repeat-x|repeat-y|no-repeat
Lặp lại: lập lại | lập lại chiều x | lập lại chiều y | không lập lại
  • Background-position:top left|top center|top right|center left|center center|center right|bottom left|bottom center|bottom right|x% y%|xpos ypos
Vị Trí Nền: Trên trái | Trên trung tâm | Trên phải | Trung tâm trái | Trung Tâm trung tâm | Trung tâm phải | Dưới trái | Dưới trung tâm | Dưới phải

Thí dụ

Định dạng thân bài với các tính chất Nền cố địmh, Nền màu đen, Nền hình Sao, Nền lặp lại 

body { 
    background-attachment: fixed;
    background-color: #000000;
    background-image: url("stars.gif");
    background-repeat: repeat;
}

Thuộc Tính Chữ (Text)

[sửa]

Định dạng thuộc tính dòng chữ , Text , của một phần tử mạng

Cú pháp
HTML Element{ Text - Property : Value}


Tham số và giá trị

text-align:left|right|center|justify
text-decoration:none|underline|overline|line-through|blink
text-indent:length|%
text-shadow:none|color|length
text-transform:none|capitalize|uppercase|lowercase
unicode-bidi]]:normal|embed|bidi-override
white-space]]:normal|pre|nowrap
word-spacing]]:normal|length
color:rgb(255,255,0)|blue
direction:ltr|rtl
line-height:normal|number|length|%
letter-spacing:normal|length
Thí dụ
p { 
    color: blue;
    text-align: center;
    text-decoration: underline;
}

Thuộc Tính Phông Chữ (Font)

[sửa]

Định dạng thuộc tính kiểu chữ Font của phần tử trang mạng

Cú pháp
HTML Element{Font - Property : Value}


Tham số và giá trị

  • font - family : Arial, Times new romance, ...
Hệ chữ
  • font - size : xx-small |x-small | small| medium| large| x-large| xx-large| smaller| larger| length|%
Cỡ chữ
  • font - stretch : normal| wider| narrower| ultra-condensed| extra-condensed| condensed|semi-condensed|semi-expanded| expanded| extra-expanded| ultra-expanded
  • font - style : normal| italic| oblique
Kiểu chữ
  • font - variant : normal| small-caps
  • font - weight :normal| bold| bolder| lighter| 100| 200| 300| 400| 500| 600| 700| 800| 900
Dạng chữ
Thí dụ
body {
    font-family: Arial, serif;
    font-size: 10pt;
}

p {
    font-variant: normal;
    font-stretch: ultra-condensed;
}

p.quan-trọng {
    font-style: italic;
}

p.cảnh-báo {
    font-weight: bold;
}

Thuộc Tính Vành Biên (Border)

[sửa]

Định dạng vành biên , Border của phần tử trang mạng

Cú pháp
HTML Element{ Border - Property : Value }

Tham số

border:border-width|border-style|border-color
Chiều Dài:độ dài|Kiểu|Màu
border-bottom:border-bottom-width|border-style|border-color
Vành Biên Dưới Cùng:độ dài|Kiểu|Màu
border-bottom-color:border-color
Màu Vành Biên Dưới Cùng:Màu
border-bottom-style:border-style
Kiểu Vành Biên Dưới Cùng:Kiểu
border-bottom-width:thin|medium|thick|length
Chiều dài Vành Biên Dưới Cùng:Mỏng|Vừa|Dày|độ dài
border-color:color
Màu Vành Biên:Màu
border-left:border-left-width|border-style|border-color
Vành Biên Trái:Chiều dài|Kiểu|Màu
border-left-color:border-color
border-left-style:border-style
border-left-width:thin|medium|thick|length
border-right:border-right-width|border-style|border-color
border-right-color:border-color
border-right-style:border-style
border-right-width:thin|medium|thicklength
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
border-top:border-top-width|border-style|border-color
border-top-color:border-color
border-top-style:border-style
border-top-width:thin|medium|thick|length
border-width:thin|medium|thick|length
Thí dụ
  • style.css


a { 

   color: #003c5e;
   text-decoration: none;

} a:link { 

   color: #003c5e;
   text-decoration: none !important;

} a:visited { 

   color: #003c5e;

} a:active { 

   color: #003c5e;

} a:hover { 

   background: url("timbay.gif");
   background-position: bottom;

}

/* Các thuộc tính scrollbar-... chỉ được sử dụng bởi Internet Explorer. */ textarea { 

   scrollbar-darkshadow-color: #ffffff;
   scrollbar-face-color: #ffffff;
   scrollbar-arrow-color: #4a96ef;
   scrollbar-highlight-color: #f5f5f5;
   scrollbar-shadow-color: #ffffff;
   scrollbar-track-color: #f5f5f5;
   scrollbar-darkshadow-color: #c0c0c0;
   margin: 0px;
   padding: 0px;
   background-attachment: fixed;
   background-repeat: repeat-y;
   background-image: url("bg.gif");
   
   font-size: 11px;
   color: #000000;
   line-height: 130%; 
   font-family: Tahoma, Verdana, Arial, sans-serif;

}

Thuộc Tính viền ngoài (outline)

[sửa]

Định dạng thuộc tính viền ngoài , outline , của phần tử trang mạng

Cú pháp
HTML Element { Outline - Property : Value }

Tham số và giá trị

  • outline - color : color| invert
viền ngoài - màu : màu| đảo nguợc
  • outline - style : none| dotted| dashed| solid| double| groove| ridge| inset| outset
  • outline - width : thin| medium| thick| length
Viền ngoài - Kiểu : bình thường| chấm| gạch ngang| đặc| đôi| dảy| ghép|


Thí Dụ
 p 
{
   border: red solid thin;
   outline: green dotted thick
}


 p
{
border: red solid thin;
}
  p.dotted {outline-style: dotted}
  p.dashed {outline-style: dashed}
  p.solid {outline-style: solid}
  p.double {outline-style: double}
  p.groove {outline-style: groove}
  p.ridge {outline-style: ridge}
  p.inset {outline-style: inset}
  p.outset {outline-style: outset}
}
p 
{
  border: red solid thin;
  outline-style: solid;
  outline-color: #00ff00
}
p.one
{
  border: red solid thin;
  outline-style: solid;
  outline-width: thick
}
p.two
{
  border: red solid thin;
  outline-style: solid;
  outline-width: 2px
}

Thuộc Tính lề trang (margin)

[sửa]

Thuộc Tính lề trang , Margin , của trang mạng

Cú pháp
HTML Element{Margin - Property : Value }

Tham số và giá trị

  • margin - top : auto|length|%
canh đỉnh:tự động| chiều dài|%
  • margin - right : auto|length|%
canh phải:tự động |chiều dài|%
  • margin - bottom : auto|length|%
canh đáy:tự động|chiều dài|%
  • margin - left : auto|length|%
      • canh trái:tự động|chiều dài|%
Thí Dụ
  p.margin 
{
  margin: 2cm 4cm 3cm 4cm
}

p.topmargin 
{
  margin-top: 5cm
}

p.topmargin
{
  margin-top: 25%
}
p.bottommargin
{
  margin-bottom: 2cm
}

p.leftmargin 
{
  margin-left: 2cm
}

p.rightmargin
{
  margin-right:25%
}

Thuộc Tính đệm (padding)

[sửa]

Thuộc Tính đệm padding

Tham số và giá trị

  • padding - top : length|%
đệm đỉnh:chiều dài|%
  • padding - right : length|%
đệm bên phải:chiều dài|%
  • padding - bottom : length|%
đệm đáy:chiều dài|%
  • padding - left : length|%
đệm bên trái:chiều dài|%
Thí Dụ
 td.test1 
{
  padding: 1.5cm
}

 td.test2 
{
  padding: 0.5cm 0.5cm
}

td 
{
  padding-top: 2cm
}

td
{
  padding-top: 10%
}

td
{
  padding-bottom: 10%
}

td
{
  padding-right: 10%
}

Thuộc Tính danh sách(list)

[sửa]

Thuộc tính danh sách list

Cú pháp

Tham số và giá trị

  • list-style-type:none|disc|circle|square|decimal|decimal-leading-zero|lower-roman
kiểu danh sách:không có|hình tròn|hình vuông|thập phân|kiểu số o
  • list-style-position:inside|outside
vị trí danh sách:bên trong|bên ngoài
  • list-style-image:none|url
kiểu hình ảnh danh sách|:không có|đưòng dẩn
Thí dụ
 ul.disc
{
  list-style-type: disc
}

 ul.circle 
{
  list-style-type: circle
}

 ul.square
{
  list-style-type: square
}

 ul.none 
{
  list-style-type: none
}

ol.decimal
{
  list-style-type: decimal
}
ol.lroman
{
  list-style-type: lower-roman
}
ol.uroman
{
  list-style-type: upper-roman
}
ol.lalpha
{
  list-style-type: lower-alpha
}
ol.ualpha 
{
  list-style-type: upper-alpha
}

ul 
{
  list-style-image: url('arrow.gif')
}

ul.inside 
{
list-style-position: inside
}

ul.outside 
{
list-style-position: outside
}

ul 
{
list-style: square inside url('arrow.gif')
}

Thuộc tính bảng(table)

[sửa]

Thuộc tính bảng , table

Cú pháp
HTML Element{border - property - value}

Tham số và giá trị

  • border - collapse : collapse| separate
che lấp đường viền:che lấp|ngăn cách
  • border - spacing : length
cách khoảng đường viền:dài
  • caption - side : top| bottom| left| right
che lấp đường viền:đỉnh |đáy|trái|phải
  • empty - cells : show| hide
ô trống:hiện|ẩn
  • table - layout : auto| fixed
bố trí bảng:tự động|cố định
Thí dụ
table.one
{
  table-layout: automatic
}

table.two
{
  table-layout: fixed
}

table
{
  border-collapse: separate;
  empty-cells: show
}

table.coll 
{
  border-collapse: collapse
}

table.sep
{
  border-collapse: separate
}

table.one 
{
  border-collapse: separate;
  border-spacing: 10px
}
table.two
{
  border-collapse: separate;
  border-spacing: 10px 50px
}

caption
{
  caption-side:bottom
}
Lấy từ “https://vi.wikibooks.org/w/index.php?title=Sách_CSS/Thuộc_tính_và_Giá_trị_phần_tử_CSS&oldid=517848”