Hướng dẫn css presentation ppt free download - css trình chiếu ppt tải xuống miễn phí

Tiêu đề: Người mới bắt đầu hướng dẫn CSS cho các nhà thiết kế web

Phong cách 1Cascading- CSS Thêm phong cách vào các trang web của bạn
Cascading Style Sheets- CSS Add style to your
web pages

• Devendra Shuklasenior Web Designersingsys Pte Ltd
  Ltd

2definition của CSS
Definition of CSS

• CSS là viết tắt của các bảng phong cách xếp tầng
• Styles - Xác định cách hiển thị các phần tử HTML
• Phong cách thường được lưu trữ theo phong cách
• Sự định nghĩa
• Các bảng kiểu xếp tầng (CSS) là một ngôn ngữ bảng kiểu được sử dụng để mô tả giao diện và định dạng của một tài liệu được viết bằng ngôn ngữ đánh dấu. Bạn viết các quy tắc CSS trong các yếu tố và sửa đổi các thuộc tính của các yếu tố đó như màu sắc, màu nền, chiều rộng, đường viền, phông chữ, v.v.
  language used for describing the look and
  formatting of a document written in a markup
  language. You write CSS rules in elements, and
  modify properties of those elements such as
  color, background color, width, border, font etc.

Outlay 3CSScascading Style Sheets, hay CSS, là một ngôn ngữ biểu định kiểu được sử dụng trên các thông số kỹ thuật CSS của Web được duy trì bởi World Wide Web Consortium (W3C) ba phiên bản CSS tồn tại CSS1, CSS2 và CSS3 4CSS1
lay
3
CSS
Cascading Style Sheets, or CSS, is a style sheet
language used on the Web CSS specifications are
maintained by the World Wide Web Consortium
(W3C) Three versions of CSS exist CSS1, CSS2,
and CSS3
4
CSS1

• Đặc tả CSS đầu tiên trở thành khuyến nghị chính thức của W3C là CSS Cấp 1, được xuất bản vào tháng 12 năm 1996. Trong số các khả năng của nó là hỗ trợ cho-
  W3C Recommendation is CSS level 1, published in
  December 1996. Among its capabilities are support
  for-
• Các thuộc tính phông chữ như kiểu chữ và nhấn mạnh
• Màu của văn bản, hình nền và các yếu tố khác
• Các thuộc tính văn bản như khoảng cách giữa các từ, chữ cái và dòng văn bản
  letters, and lines of text
• Liên kết văn bản, hình ảnh, bảng và các yếu tố khác
  elements
• Lề, biên giới, đệm và định vị cho hầu hết các yếu tố
  elements
• W3C không còn duy trì khuyến nghị CSS 1.
  Recommendation.

5CSS2
CSS2

• Thông số kỹ thuật cấp 2 của CSS được W3C phát triển và được xuất bản dưới dạng khuyến nghị vào tháng 5 năm 1998. Một superset của CSS 1, CSS 2 bao gồm một số khả năng mới như-
  W3C and published as a recommendation in May
  1998. A superset of CSS 1, CSS 2 includes a
  number of new capabilities like-
• Định vị
• Định dạng trực quan
• Các loại phương tiện truyền thông
• Giao diện
• Z-Chỉ số
• và các thuộc tính phông chữ mới như bóng tối.

6CSS3
CSS3

• Làm việc trên CSS cấp 3 bắt đầu vào khoảng thời gian xuất bản khuyến nghị CSS 2 gốc. Bản nháp CSS 3 sớm nhất đã được xuất bản vào tháng 6 năm 1999
  publication of the original CSS 2 recommendation.
  The earliest CSS 3 drafts were published in June
  1999
• Giao diện người dùng
• Khả năng tiếp cận
• Bố cục cột
• Thiêt bị di động
• Đồ họa vector có thể mở rộng

7Andvantages
Advantages

Tách nội dung khỏi trình bày tạo điều kiện cho việc xuất bản nội dung trong nhiều định dạng trình bày dựa trên các tham số danh nghĩa. Các tham số danh nghĩa bao gồm các tùy chọn người dùng rõ ràng, các trình duyệt web khác nhau, loại thiết bị được sử dụng để xem nội dung (máy tính để bàn hoặc thiết bị internet di động), vị trí địa lý của người dùng và nhiều biến khác. Phong cách một lần cho một loạt các yếu tố HTML được chọn theo lớp, loại hoặc mối quan hệ với các yếu tố khác. Điều này hiệu quả hơn nhiều so với việc lặp lại thông tin phong cách nội tuyến cho mỗi lần xuất hiện của yếu tố. Một biểu định kiểu bên ngoài thường được lưu trữ trong bộ đệm trình duyệt và do đó có thể được sử dụng trên nhiều trang mà không được tải lại, giảm thêm truyền dữ liệu qua mạng. 8Dvantages
CSS facilitates publication of content in
multiple presentation formats basedon nominal
parameters. Nominal parameters include explicit
user preferences, different web browsers, the
type of device being used to view the content (a
desktop computer or mobile Internet device), the
geographic location of the user and many other
variables.
Bandwidth
A stylesheet, internal or external, specifies the
style once for a range of HTML elements selected
by class, type or relationship to others. This
is much more efficient than repeating style
information inline for each occurrence of the
element. An external stylesheet is usually stored
in the browser cache, and can therefore be used
on multiple pages without being reloaded,
further reducing data transfer over a network.
8
Advantages

Sự nhất quán trên toàn trang web mà CSS được sử dụng một cách hiệu quả, về mặt kế thừa và "xếp tầng", một bảng kiểu toàn cầu có thể được sử dụng để ảnh hưởng và phong cách trên toàn bộ trang web. Nếu tình huống phát sinh rằng kiểu dáng của các yếu tố cần phải được thay đổi hoặc điều chỉnh, những thay đổi này có thể được thực hiện bằng cách chỉnh sửa các quy tắc trong Bảng kiểu toàn cầu. Trước CSS, loại bảo trì này khó khăn hơn, tốn kém và tốn thời gian hơn. Các kiểu thường được lưu trong các tệp .css bên ngoài. Các bảng kiểu bên ngoài cho phép bạn thay đổi ngoại hình và bố cục của tất cả các trang trong một trang web, chỉ bằng cách chỉnh sửa một tệp duy nhất! 9syntax của CSS
When CSS is used effectively, in terms of
inheritance and "cascading," a global style
sheet can be used to affect and style elements
site-wide. If the situation arises that the
styling of the elements should need to be
changed or adjusted, these changes can be made
by editing rules in the global style sheet.
Before CSS, this sort of maintenance was more
difficult, expensive and time-consuming.
CSS Saves a Lot of Work!
CSS defines HOW HTML elements are to be
displayed. Styles are normally saved in external
.css files. External style sheets enable you to
change the appearance and layout of all the pages
in a Web site, just by editing one single file!
9
Syntax of CSS

• Cú pháp CSS được tạo thành từ 5 phần
• Bộ chọn
• Giá trị tài sản
• Tờ khai
• Khối khai
• Dấu ngoặc nhọn

10syntax của CSS 11Selector
Syntax of CSS
11
Selector

• Các bộ chọn được sử dụng để khai báo phần nào của đánh dấu một kiểu áp dụng cho, một loại biểu thức phù hợp.
  markup a style applies to, a kind of match
  expression.
• 3 loại người chọn
• Bộ chọn thẻ (Body, P, Div, A)
• Bộ chọn ID (trình bao bọc, thanh bên)
• Bộ chọn lớp (.Content, .menu)
• Bộ chọn thường là phần tử HTML bạn muốn tạo kiểu
  want to style
• Người chọn không bao giờ nên bắt đầu với một số, họ cũng không nên có khoảng trống trong đó
  should they have spaces in them

Bộ chọn 12ID
ID Selector

Bộ chọn ID được sử dụng để chỉ định một kiểu cho một phần tử duy nhất. Bộ chọn ID sử dụng thuộc tính ID của phần tử HTML và được xác định bằng "". Quy tắc kiểu bên dưới sẽ được áp dụng cho phần tử với ID "trình bao bọc" trình bao bọc văn bản-AlignCenter Border1px Solid Width Chiều rộng 200px Chiều cao 100px Ví dụ, để xác định một đoạn văn là đầu, sử dụng mã ltdiv IDWRAPPT LT/Divgtdo không bắt đầu tên ID với tên ID có một số! Bộ chọn 13 lớp
single, unique element. The id selector uses the
id attribute of the HTML element, and is defined
with a "". The style rule below will be applied
to the element with id"wrapper"
wrapper text-aligncenter border1px solid
red Width 200px Height 100px
For example, to identify a paragraph as head,
use the code ltdiv idwrappergt lt/divgt
Do NOT start an ID name with a number!
13
Class Selector

Bộ chọn lớp được sử dụng để chỉ định một kiểu cho một nhóm các yếu tố. Không giống như bộ chọn ID, bộ chọn lớp thường được sử dụng nhất trên một số yếu tố. Điều này cho phép bạn đặt một kiểu cụ thể cho nhiều yếu tố HTML có cùng lớp. Bộ chọn lớp sử dụng thuộc tính lớp HTML và được xác định bằng "." Trong ví dụ dưới đây, tất cả các phần tử HTML có lớp "trung tâm" sẽ là lớp liên kết trung tâm "Trung tâm" lớp GTCenter-ALIGED/H2GT LTP "Center" Đoạn văn bản GTCenter.lt/pgt.Center Text-AL GTCenter-ALigned Paragraph.lt/pgtp.Center text-alignleftdo không bắt đầu tên ID có số! Giá trị 14Property
a group of elements. Unlike the id selector, the
class selector is most often used on several
elements. This allows you to set a particular
style for many HTML elements with the same
class. The class selector uses the HTML class
attribute, and is defined with a "." In the
example below, all HTML elements with
class"center" will be center-aligned
lth2 class"center"gtCenter-aligned headinglt/h2gt ltp
class"center"gtCenter-aligned paragraph.lt/pgt
.center text-aligncenter
ltp class"left"gtCenter-aligned paragraph.lt/pgt
p.center text-alignleft
Do NOT start an ID name with a number!
14
Property Value

• The property is the style attribute you want to
  change. Each property has a value

Properties are separated from their respective
values by colons Pairs are separated from each
other by semicolons
15
Declaration

• Definition Each CSS line that includes property
  and value

Each declaration consists of a property and a
value
16
Declaration Block
A declaration block consists of a list of
declarations in braces. Each declaration itself
consists of a property and a value. If there are
multiple declarations in a block.
17
Curly Braces

• The curly braces contain the properties of the
  element you want to manipulate, and the values
  that you want to change them to. The curly braces
  plus their content is called a declaration block.

18
How CSS is Applied to A Web Page

• There are three ways of inserting a style sheet
• Inline style
• Internal style sheet
• External style sheet

19
Inline style

• An inline style loses many of the advantages of
  style sheets by mixing content with presentation.
  Use this method sparingly!
• To use inline styles you use the style attribute
  in the relevant tag. The style attribute can
  contain any CSS property. The example shows how
  to change the color and the left margin of a
  paragraph
• ltp styletext-align center font- weight
  bold color yellowgtThis is a paragraph.lt/pgt

20
Internal style sheet

• An internal style sheet should be used when a
  single document has a unique style. You define
  internal styles in the head section of an HTML
  page, by using the ltstylegt tag, like this
• ltheadgt
• ltstyle typetext/cssgt
• hr colorsienna
• p margin-left20px
• body background-imageurl("images/b
  ack40.gif")
• lt/stylegt
• lt/headgt

21
External style sheet

• An external style sheet is ideal when the style
  is applied to many pages. With an external style
  sheet, you can change the look of an entire Web
  site by changing one file. Each page must link to
  the style sheet using the ltlinkgt tag. The ltlinkgt
  tag goes inside the head section
• ltheadgt
• ltlink rel"stylesheet" type"text/css"
  href"style.css"gt
• ltlink rel"stylesheet" type"text/css"
  href"mystyle.css"gt
• lt/headgt

Link to a separate css file
22
Multiple Style Sheets

• You can link a single style sheet to multiple
  documents in your Web site by using the link
  element or the _at_import element
• You can also link a single document to several
  style sheets

_at_import "container.css" _at_import
"header.css" _at_import "content.css" _at_import
"footer.css"
23
Multiple Style Sheets

• If some properties have been set for the same
  selector in different style sheets, the values
  will be inherited from the more specific style
  sheet.
• For example, an external style sheet has these
  properties for the h3 selector
• h3
• colorred
• text-alignleft
• font-size8pt

24
Multiple Style Sheets

• And an internal style sheet has these properties
  for the h3 selector
• h3
• text-alignright
• font-size20pt

25
Multiple Style Sheets

• If the page with the internal style sheet also
  links to the external style sheet the properties
  for h3 will be
• colorred
• text-alignright
• font-size20pt

26
Cascading order

• What style will be used when there is more than
  one style specified for an HTML element?
• Generally speaking we can say that all the styles
  will "cascade" into a newvirtual" style sheet
  by the following rules, where number four has the
  highest priority
• Browser default
• External style sheet
• Internal style sheet (in the head section)
• Inline style (inside an HTML element)
• So, an inline style (inside an HTML element) has
  the highest priority, which means that it will
  override a style defined inside the ltheadgt tag,
  or in an external style sheet, or in a browser
  (a default value).

27
CSS Box Model
All HTML elements can be considered as boxes. In
CSS, the term "box model" is used when talking
about design and layout. The CSS box model is
essentially a box that wraps around HTML
elements, and it consists of margins, borders,
padding, and the actual content. The box model
allows us to place a border around elements and
space elements in relation to other elements.
28
CSS Box Model
29
Margin, Padding, Border and Content

• Explanation of the different parts
• Margin - Clears an area around the border. The
  margin does not have a background color, it is
  completely transparent
• Border - A border that goes around the padding
  and content. The border is inherited from the
  color property of the box
• Padding - Clears an area around the content. The
  padding is affected by the background color of
  the box
• Content - The content of the box, where text and
  images appear

30
Margin
The CSS margin properties define the space around
elements. The top, right, bottom, and left
margin can be changed independently using
separate properties. A shorthand margin property
can also be used, to change all margins at
once. Possible Values
31
Margin - Individual sides
In CSS, it is possible to specify different
margins for different sides margin-top100px ma
rgin-bottom100px margin-right50px margin-left
50px All CSS Margin Properties
32
Margin - Shorthand property
To shorten the code, it is possible to specify
all the margin properties in one property. This
is called a shorthand property. The shorthand
property for all the margin properties is
"margin"
margin25px
All Four Side
Top bottom - left right
margin25px 75px
Top right left - bottom
margin25px 50px 75px
Top right bottom left
margin25px 50px 75px 100px
33
Padding
The padding clears an area around the content
(inside the border) of an element. The padding is
affected by the background color of the
element. The top, right, bottom, and left
padding can be changed independently using
separate properties. Possible Values
34
Padding - Individual sides
In CSS, it is possible to specify different
margins for different sides padding-top100px p
adding-bottom100px padding-right50px padding-l
eft50px All CSS Padding Properties
35
Padding - Shorthand property
To shorten the code, it is possible to specify
all the padding properties in one property. This
is called a shorthand property. The shorthand
property for all the padding properties is
"padding"
padding25px
All Four Side
Top bottom - left right
padding25px 75px
Top right left - bottom
padding25px 50px 75px
Top right bottom left
padding25px 50px 75px 100px
36
Border
The CSS border properties allow you to specify
the style and color of an element's
border. Borders fall between the padding and
margin and provide an outline around an element.
Every border needs three values, a width, style,
and color. Shorthand values fall in the order of
width, style and color. Longhand, these three
values can be broken up into the border-width,
border-style, and border-color properties. Most
commonly you will see one sized, solid, single
colored borders. Borders do however have the
capability to come in numerous sizes, shapes, and
colors.
37
Border Style
The border-style property specifies what kind of
border to display.
38
Border Width
The border-width property is used to set the
width of the border. The width is set in pixels,
or by using one of the three pre-defined values
thin, medium, or thick. The "border-width"
property does not work if it is used alone. Use
the "border-style" property to set the borders
first.
39
Border Width

.One-box Border-styleSolid biên giới-width5px .two-box-border-styleSolid-widthmedium .three-box-border-styleSolid biên giới-width1px 40 Màu có thể được đặt theo tên - Chỉ định tên màu, như "RED" RGB - Chỉ định giá trị RGB, như "RGB (255,0,0)" Hex - Chỉ định giá trị hex, như "FF0000" Bạn cũng có thể đặt màu viền để "trong suốt". P.ONE Border-StyleSolid Border-Colorred P.TWO Border-StyleSolid Border-Color98BF21 41ALL CSS Border Properties 42CSS Model Thường được gọi là mô hình hộp. Để đặt chiều rộng và chiều cao của một phần tử một cách chính xác trong tất cả các trình duyệt, bạn cần biết cách thức hoạt động của mô hình hộp. Đây là một cách để hình dung nó ... 43 chiều và chiều cao của một phần tử khi bạn đặt các thuộc tính chiều rộng và chiều cao của một phần tử có CSS, bạn chỉ cần đặt chiều rộng và chiều cao của khu vực nội dung. Để tính toán kích thước đầy đủ của một phần tử, bạn cũng phải thêm phần đệm, đường viền và lề. Tổng chiều rộng của phần tử trong ví dụ dưới đây là 44 chiều và chiều cao của nền phần tử FFF Border 6px Solid CCC Chiều cao 100px 20px Padding 20px chiều rộng 400px Để phá vỡ tổng chiều rộng của một phần tử, bao gồm mô hình hộp, sử dụng lề công thức -Nright Border-Right Padding-Right Width Padding-bên trái Biên giới-bên trái so sánh bên trái, tổng chiều cao của một phần tử, bao gồm cả mô hình hộp, có thể được tìm thấy bằng cách sử dụng phần đệm đệm trên đỉnh biên giới lề của công thức-đỉnh-đỉnh-đỉnh-đỉnh- Biên giới đáy đáy đáy đáy 45 chiều và chiều cao của nền phần tử FFF Border 6px Solid CCC Chiều cao 100px Biên 20PX Padding 20px chiều rộng 400px bằng cách sử dụng các công thức và bối cảnh hộp trên chúng ta có thể tìm thấy tổng chiều cao và chiều rộng của ví dụ của chúng tôi. Chiều rộng 492px 20px 6px 20px 400px 20px 6px 20px Chiều cao 192px 20px 6px 20px 100px 20px 6px 20px 46thank bạn!
.two-box border-stylesolid border-widthmediu
m .three-box border-stylesolid border-width
1px
40
Border Color
The border-color property is used to set the
color of the border. The color can be set
by name - specify a color name, like "red" RGB
- specify a RGB value, like "rgb(255,0,0)" Hex -
specify a hex value, like "ff0000" You can also
set the border color to "transparent".
p.one border-stylesolid border-colorred p.
two border-stylesolid border-color98bf21
41
All CSS Border Properties
42
CSS Box Model
This is commonly called the Box Model. In order
to set the width and height of an element
correctly in all browsers, you need to know how
the box model works. Here is a way to visualize
it...
43
Width and Height of an Element
When you set the width and height properties of
an element with CSS, you just set the width and
height of the content area. To calculate the full
size of an element, you must also add the
padding, borders and margins. The total width of
the element in the example below is
44
Width and Height of an Element
div background fff border 6px solid
ccc height 100px margin 20px padding
20px width 400px
To break down the total width of an element,
including the box model, use the
formula margin-right border-right
padding-right width padding-left
border-left margin-left
In comparison, the total height of an element,
including the box model, can be found using the
formula margin-top border-top padding-top
height padding-bottom border-bottom
margin-bottom
45
Width and Height of an Element
div background fff border 6px solid
ccc height 100px margin 20px padding
20px width 400px
Using the formulas and box context above we can
find the total height and width of our
example. Width 492px 20px 6px 20px
400px 20px 6px 20px Height 192px 20px
6px 20px 100px 20px 6px 20px
46
Thank You!

• Devendra Shuklasenior Web Designersingsys Pte Ltd
  Ltd