<p>CSS (Cascading Style Sheets) is a language used for web page style design. It controls the appearance and layout of web pages by defining styles. This article will introduce how to define CSS.
Definition of CSS
Internal definition
<p>In HTML files, you can use
<style> in the
tag
tags to define CSS styles, such definitions are called internal styles.
<head>
<style>
p {
color: red;
}
</style>
</head>
<p>In this example, we define the text color of the
<p>
element to be red. All CSS styles should be written in
<style>
tags.
External definition
<p>In HTML files, you can also use external style sheets. An external style sheet is a separate file containing CSS styles, with the suffix
.css
. This can be introduced into an HTML file using the
<link>
tag.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<p>This code introduces the external style sheet
style.css
into the HTML document. The
href
attribute specifies the location of the style sheet.
Inline definition
<p>In addition to defining styles internally and externally, styles can also be defined inline within HTML elements. This way of definition is called inline style.
<p style="color: red;">Hello World!</p>
<p>In this example, we define a color style for the
<p>
element using the
style
attribute.
CSS syntax
<p>CSS syntax consists of selectors, attributes and values. We can use selectors to select a page element and then set its properties and values.
Selector
<p>A selector is an identifier used to select elements. The following are some common selector types:
- Tag selector: Select all elements of this tag type in the page, such as
p
, div
, a
.
- Class selector: Select elements with the same class in the page, such as
.carousel
.
- ID selector: Select elements with the same ID in the page, such as
#header
.
- Attribute selector: Select elements based on their attribute values, such as
[type="text"]
Select all elements whose type value is text.
- Pseudo-class selector: Set styles for elements in specific states, such as
:hover
, :active
.
Properties and Values
<p>Properties are specific characteristics of a style, such as color, font size, padding, etc. The value is the specific style applied to the attribute, such as red, 12pt, 20px, etc.
<p>The following are some common properties and values:
- color: Set the text color, such as
color: red;
.
- font-family: Set the font family, such as
font-family: Arial, sans-serif;
.
- font-size: Set the font size, such as
font-size: 16px;
.
- background-color: Set the background color, such as
background-color: #f0f0f0;
.
- border: Set the border, such as
border: 1px solid black;
.
- margin: Set the outer margin of the element, such as
margin: 10px;
.
- padding: Set the inner margin of the element, such as
padding: 10px;
.
- width: Set the element width, such as
width: 100px;
.
- height: Set the element height, such as
height: 100px;
.
CSS Example
<p>The following example demonstrates how to set the color and width properties of the ID selector:
<head>
<style>
#header {
background-color: #333333;
color: #ffffff;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<h1>Hello World!</h1>
</div>
</body>
<p>In this example, we have an ID of The
header
element sets the background color, text color, width, and text alignment. We used the tag selector to select the heading element
<h1>
.
Summary
<p>This article introduces the definition method, syntax, selectors and properties of CSS. Armed with this knowledge, you can easily use CSS to design and control the style and layout of your web pages. When you need more learning and practice materials about CSS, check out CSS tutorials and resources online.
The above is the detailed content of An article introducing the definition method of CSS. For more information, please follow other related articles on the PHP Chinese website!