CSS (Cascading Style Sheets, 层叠样式表) is a style sheet language used for describing the presentation of a document written in a markup language like HTML or XML. It controls the layout, colors, fonts, and overall appearance of web pages. Here's an introduction to CSS:
1、Basic Syntax
CSS rules consist of selectors and declarations.
A selector points to the HTML element you want to style.
Declarations contain one or more declarations separated by semicolons.
Each declaration has a property name and a value, separated by a colon.
selector {
property: value;
}2、The 'style' Attribute
You can use thestyle attribute within an HTML tag to apply CSS directly.
<h1 style="color: blue; text-align: center;">This is a heading</h1>3、Internal and External Style Sheets
Internal CSS: Placed within the<style> section in the<head> of an HTML document.
<head>
<style>
body {background-color: lightblue;}
h1 {color: white; text-align: center;}
p {font-family: verdana; font-size: 20px;}
</style>
</head>External CSS: Written in a.css file and linked to an HTML document using the<link> element.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>4、CSS Selectors
Element Selector: Selects all elements of a given type.
p { color: red; }Class Selector: Selects elements with a specific class attribute.
.className { color: blue; }ID Selector: Selects elements with a specific id attribute.
#elementId { background-color: yellow; }5、Combinators
Descendant Selector: Selects all descendant elements of a specified type.
div p { font-size: 14px; }Child Selector: Selects only direct child elements.
div > p { font-size: 14px; }Adjacent Sibling Selector: Selects elements that are preceded by a specified element.
h1 + p { margin-top: 0; }6、Box Model
Every HTML element is considered a box, which includes content, padding, border, and margin.
The box model helps in understanding how elements are displayed and spaced on a page.
7、Layout Techniques
Float: Allows an element to be placed beside other content.
Positioning: Controls the exact location of an element on a page usingposition,top,right,bottom,left,z-index, and related properties.
Flexbox: A powerful layout model for distributing space and aligning items within a container.
Grid: A two-dimensional layout system for the web, providing more control over page layouts.
8、Responsive Design
Media queries allow styles to change based on the characteristics of the device rendering the page, such as width, height, and orientation.
@media (max-width: 600px) {
body { background-color: lightblue; }
}9、Transitions and Animations
CSS transitions allow properties to change smoothly over a given duration when triggered by certain events.
CSS animations provide the ability to animate multiple properties and can be controlled precisely via keyframes.
10、CSS Frameworks
Popular frameworks like Bootstrap simplify responsive design and front-end development by providing pre-defined classes and components.
By mastering these basics, you can start creating visually appealing and functional web pages using CSS. For further exploration, you can refer to comprehensive guides and tutorials available online.