search
HomeWeb Front-endFront-end Q&AWhat two parts does css style consist of?
What two parts does css style consist of?Jun 08, 2021 pm 12:10 PM
css styleSelector

css style consists of two parts: "selector" and "declaration block". The selector points to the HTML element that needs to be styled, and the declaration block contains one or more declarations separated by semicolons. Declaration blocks are enclosed in curly braces, and each declaration contains a CSS property name and a value; for example, "p{color:red;}".

What two parts does css style consist of?

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

css styles (rule sets) consist of selectors and declaration blocks:

What two parts does css style consist of?

  • The selector points to the settings you need Styled HTML elements.

  • A declaration block contains one or more declarations separated by semicolons.

  • Each declaration contains a CSS property name and a value, separated by a colon. Properties are properties you wish to change, and each property has a value.

  • Multiple CSS declarations are separated by semicolons, and declaration blocks are enclosed in curly braces.

Example:

body {color: blue}

The above line of code is to define the text color within the body element as blue. In the above example, the body is the selector and the part enclosed in curly braces is the declaration. The declaration consists of two parts: attributes and values. Color is the attribute and blue is the value.

Remember to write quotation marks

Tip: If the value is several words, add quotation marks to the value:

p {font-family: "sans serif";}

Multiple declarations:

Tip: If you want to define more than one declaration, you need to separate each declaration with a semicolon. The example below shows how to define a centered paragraph with red text. The last rule does not require a semicolon, because the semicolon is a delimiting symbol in English, not a closing symbol. However, most experienced designers will add a semicolon at the end of each declaration. This has the advantage of minimizing the possibility of errors when you add or subtract declarations from existing rules. Like this:

p {text-align:center; color:red;}

You should describe only one attribute per line to increase the readability of the style definition, like this:

p {
text-align: center;
color: black;
font-family: arial;
}

Space and case sensitive

Most style sheets contain more than one rule, and most rules contain more than one declaration. Multiple declarations and the use of whitespace make stylesheets easier to edit:

body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}

Whether or not you include spaces does not affect how CSS works in the browser. Also, unlike XHTML, CSS is not case-sensitive. There is one exception: when it comes to working with HTML documents, class and id names are case-sensitive.

(Learning video sharing: css video tutorial)

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

Statement
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
css中id选择符的标识是什么css中id选择符的标识是什么Sep 22, 2022 pm 03:57 PM

在css中,id选择符的标识是“#”,可以为标有特定id属性值的HTML元素指定特定的样式,语法结构“#ID值 {属性 : 属性值;}”。ID属性在整个页面中是唯一不可重复的;ID属性值不要以数字开头,数字开头的ID在Mozilla/Firefox浏览器中不起作用。

如何使用HTML和CSS创建一个幻灯片布局页面如何使用HTML和CSS创建一个幻灯片布局页面Oct 16, 2023 am 09:07 AM

如何使用HTML和CSS创建一个幻灯片布局页面引言:幻灯片布局在现代web设计中被广泛使用,在展示信息或图片时具有很大的吸引力和交互性。本文将介绍如何使用HTML和CSS创建一个幻灯片布局页面,并提供具体的代码示例。一、HTML布局结构首先,我们需要创建一个HTML布局结构,包含一个幻灯片容器和多个幻灯片项。代码如下所示:<!DOCTYPEhtml&

如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式Nov 20, 2023 am 11:52 AM

如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式在CSS中,伪类选择器是一种强大的工具,可以通过特定的选择方式来选取HTML文档中的某些元素。其中,:nth-child()是一种常用的伪类选择器,可以选择特定位置的子元素。:nth-child(n)可以匹配HTML中的第n个子元素,而:nth-child(-n)可以匹配

如何使用HTML和CSS实现一个简单的聊天页面布局如何使用HTML和CSS实现一个简单的聊天页面布局Oct 18, 2023 am 08:42 AM

如何使用HTML和CSS实现一个简单的聊天页面布局随着现代科技的发展,人们越来越依赖于互联网来进行沟通和交流。而在网页中,聊天页面是一种非常常见的布局需求。本文将向大家介绍如何使用HTML和CSS来实现一个简单的聊天页面布局,并给出具体的代码示例。首先,我们需要创建一个HTML文件,可以使用任何文本编辑器。以index.html为例,先创建一个基本的HTML

css伪选择器学习之伪类选择器解析css伪选择器学习之伪类选择器解析Aug 03, 2022 am 11:26 AM

在之前的文章《css伪选择器学习之伪元素选择器解析​》中,我们学习了伪元素选择器,而今天我们详细了解一下伪类选择器,希望对大家有所帮助!

如何使用HTML和CSS实现一个详细页面布局如何使用HTML和CSS实现一个详细页面布局Oct 20, 2023 am 09:54 AM

如何使用HTML和CSS实现一个详细页面布局HTML和CSS是创建和设计网页的基础技术,通过合理使用这两者,我们可以实现各种复杂的网页布局。本文将介绍如何使用HTML和CSS来实现一个详细页面布局,并提供具体的代码示例。创建HTML结构首先,我们需要创建一个HTML结构来放置我们的页面内容。以下是一个基本的HTML结构:<!DOCTYPEhtml&g

如何使用HTML和CSS创建一个响应式卡片墙布局如何使用HTML和CSS创建一个响应式卡片墙布局Oct 25, 2023 am 10:42 AM

如何使用HTML和CSS创建一个响应式卡片墙布局在现代网页设计中,响应式布局是一项非常重要的技术。通过使用HTML和CSS,我们可以创建一个响应式的卡片墙布局,以适应不同屏幕尺寸的设备。下面将详细介绍如何使用HTML和CSS创建一个简单的响应式卡片墙布局。HTML部分:首先,我们需要在HTML文件中设置基本结构。我们可以使用无序列表(<ul>)和

javascript选择器失效怎么办javascript选择器失效怎么办Feb 10, 2023 am 10:15 AM

javascript选择器失效是因为代码不规范导致的,其解决办法:1、把引入的JS代码去掉,ID选择器方法即可有效;2、在引入“jquery.js”之前引入指定JS代码即可。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),