What three parts does a css style sheet consist of?-Front-end Q&A-php.cn

Table of Contents

应用选择one

应用选择器two

应用选择器three

Home

Web Front-end

Front-end Q&A

What three parts does a css style sheet consist of?

青灯夜游

May 18, 2022 pm 05:16 PM

css css3 html

The three components of a css style sheet: 1. Selector, used to tell the browser which objects in the page the specified style will act on; 2. Properties, which are set style options provided by CSS, mainly Including font attributes, text attributes, background attributes, layout attributes, etc.; 3. Attribute value is the valid value of the specified attribute, and the attribute and attribute value are separated by ":".

What three parts does a css style sheet consist of?

# The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Composition of css style sheet

The CSS style sheet includes three parts: selectors, attributes and attribute values. The syntax style is as follows:

选择符{属性：属性值;}

Copy after login

The syntax description is as follows:

Selector (Selector): also known as selector, is a very important concept in CSS, all in HTML Markers are controlled through different CSS selectors.
It tells the browser which objects in the page the style will act on. These objects can be a certain tag, all web page objects, specified class or id values, etc. When the browser parses this style, it renders the display effect of the object based on the selector.
Property: It is a set style option provided by CSS, mainly including font attributes, text attributes, background attributes, layout attributes, border attributes, list item attributes, and table attributes. etc. content. Some of these properties are only supported by some browsers, so their use becomes more complicated using CSS properties.
Attribute value (value): The valid value of the specified attribute. Attributes and attribute values are separated by ":". When there are multiple attribute values, use ";" to separate them.

What three parts does a css style sheet consist of?

CSS selector

Commonly used CSS selectors are tag selector, category selector, inclusion selector, and ID selection. selector, class selector, etc. Use selectors to control different HTML tags to achieve various effects. The three basic selectors are introduced in detail below.

1. Tag selector

HTML page is composed of many tags, such as image tags

What three parts does a css style sheet consist of? , hyperlink tag , table tag

, etc., and the CSS tag selector is to declare which tags in the page use which CSS tags, such as a selection Device is used to declare the style of all

tags in the page. For example: define a tag selector, and define the font and color of the hyperlink in the tag selector.

<style>
	a{
		font_size:9px;
		color:#F93;
	}
</style>

Copy after login

2. Category Selector

Using the tag selector is very fast, but it has certain limitations. If a page declares a tag selector, all content of that tag in the page will change accordingly. There are three

`tags in the join page. If you want each`

to be displayed differently, you cannot use the tag selector. This is Then you need to introduce a category selector. The name of the type selector is defined by yourself and starts with ".". The defined attributes and attribute values must also comply with CSS specifications. To apply the HTML tag of a category selector, simply declare it using the class attribute.

Example:

<html>
	<style>
	.one{
			font-family:宋体;
			font-size:24px;
			color:red;
		}
	.two{
			font-family:宋体;
			font-size:16px;
			color:red;
		}
	.three{
			font-family:宋体;
			font-size:12px;
			color:red;
		}
	</style>
	</head>
	<body>
		<h2 id="应用选择one">应用选择one</h2><!--定义样式后，页面会自动加载样式-->
		<p>正文内容1</p>
		<h2 id="应用选择器two">应用选择器two</h2>
		<p>正文内容2</p>
		<h2 id="应用选择器three">应用选择器three</h2>
		<p>正文内容3</p>
	</body>
</html>

Copy after login

What three parts does a css style sheet consist of?

3.ID Selector

ID Selector The ID attribute in the HTML page is used to select and add styles. It is basically the same as the category selector. However, it should be noted that since the HTML page cannot contain two identical ID tags, the defined ID selector is also Can only be used once.

The named ID selector should start with a "#" sign, followed by the ID attribute value in the HTML tag.
For example: use ID selector to control the style in the page.

<html>
	<style>
	#first{
			font-size:18px
		}
	#two{
			font-size:24px
		}
	#three{
			font-size:36px
		}
	</style>
	<body>
		<p id="first">ID选择器1</p>
		<p id="two">ID选择器2</p>
		<p id="three">ID选择器3</p>
	</body>
</html>

Copy after login

What three parts does a css style sheet consist of?

Extended knowledge: new features of CSS 3

Modules and modular structure

CSS 3 does not adopt an overall structure, but adopts a modular structure of division of labor and collaboration. This patterned structure is adopted to avoid the situation where the browser does not fully support a certain module. If the whole is divided into several modules, each browser can choose which module to support and which module to not support.

Commonly used modules in CSS 3 are shown in the following table:

Module name	Function description
Basic Box Model	Define various box-related modules
Line	Define various line-related modules Styles
Lists	Define various styles related to lists
Text	Define various styles Text-related styles
Color	Define various color-related styles
Font	Define various font-related styles
Background and Border	Define various background- and border-related styles
Paged Media	Define the styles of various page element data such as headers, footers, page numbers, etc.
Writing Modes	Define page Chinese The layout of this data

(Learning video sharing: css video tutorial, web front-end)

The above is the detailed content of What three parts does a css style sheet consist of?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7583

CakePHP Tutorial

1386

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

122

Related knowledge

How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

How to write split lines on bootstrap Apr 07, 2025 pm 03:12 PM

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to resize bootstrap Apr 07, 2025 pm 03:18 PM

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

How to set up the framework for bootstrap Apr 07, 2025 pm 03:27 PM

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

See all articles