Wikibooks

Nhập môn CSS/Phần tử

< Nhập môn CSS

Sau đây là danh sách các phần tử CSS

Thuộc tính Nền (Background)

sửa

Định dạng nền , background , của một phần tử 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=Nhập_môn_CSS/Phần_tử&oldid=376536”