css的基本语法结构是什么_CSS的基本语法

css的基本语法结构是什么

So let's have our first look at Cascading Style Sheets. As you probably already know, all programing languages have their own syntax, and while HTML and CSS aren't exactly programming languages, they do have their own syntax.

因此,让我们首先看一下层叠样式表 。 您可能已经知道,所有编程语言都有自己的语法,而HTML和CSS并非完全是编程语言,但它们确实具有自己的语法。

CSS syntax is not much of a trouble. CSS rules are defined as a property name followed by a colon and then a property value. Individual rules are terminated by semicolons, with the final rule having an optional semicolon. Phew! Let's look at this sentence more closely.

CSS语法没什么大麻烦。 CSS规则定义为属性名称,后跟冒号 ,然后是属性值 。 各个规则以分号终止,最终规则具有可选的分号。 ! 让我们更仔细地看这句话。

property-name1 : value1;  . . . property-nameN : valueN;

CSS rules can be placed directly within most HTML tags by using the style attribute. For example to set the color and alignment of an h1 heading, we can use:

通过使用style属性,可以将CSS规则直接放置在大多数HTML标签中。 例如,设置h1标题的颜色和对齐方式,我们可以使用:

<h1 style = "color:red; text-align:center;">Hello, CSS!</h1>

Such direct use of CSS is called Inline styling and which generally should be avoided due to its interference with the HTML tags, increase in HTML file size , and no reusability of the styles.

这种直接使用CSS的方式称为内联样式 ,通常应避免使用它,因为它会干扰HTML标记,HTML文件大小增加且样式不可重复使用。

Instead, we can create a style that binds itself to a particular element or a set of elements, which can be reused as required further. Consider the example below showing the correct CSS syntax broken down to its individual components.

相反,我们可以创建一种将自身绑定到特定元素或元素集的样式,可以根据需要进一步重用该样式。 考虑下面的示例,该示例显示了分解为各个组件的正确CSS语法。

CSS Syntax
Note: The final declaration in a style block does not require a semicolon. However, for good measure and easy insertion of properties later, always consider using semicolons after all the properties. 注意:样式块中的最终声明不需要分号。 但是,为了更好地度量和稍后轻松插入属性,请始终考虑在所有属性之后使用分号。

CSS property names are separated by dashes when they use multiple words, example: font-face, line-height, font-size, etc. Also, do keep in mind that CSS is not whitespace sensitive, hence

CSS 属性名称使用多个单词时,用短划线分隔,例如: font-faceline-heightfont-size等。此外,请记住CSS 不对空格敏感 ,因此

h1{ 
    font-size: large; 
    text-align: center; 
    font-family: Arial
}

will render the same as

将呈现与

h1{font-size: large; text-align: center; font-family: Arial }

Also, note that CSS is case insensitive meaning that

另外,请注意CSS 不区分大小写,这意味着

h1{ 
    FONT-SIZE: large; 
    text-align: CENTER; 
    FONT-FAMILY: Arial 
}

is the same as

是相同的

h1{ 
    font-size: large; 
    text-align: center; 
    font-family: Arial
}

However in some cases, such as with URL values, font names and certain selectors (example: class), case will be enforced. Hence to avoid confusion and mistakes it is better to assume that CSS is case sensitive.

但是,在某些情况下(例如带有URL值,字体名称和某些选择器(例如:类)),将强制使用大小写。 因此,为避免混淆和错误,最好假设CSS 区分大小写

Style Sheets can be put together in the same document as HTML using a <style>...</style> block as seen earlier. However, it can be put in an external file and referenced via a <link> tag, which is enclosed within the <head> tag of a HTML document. Consider a sample style sheet.

如前所述,可以使用<style>...</style>块将样式表与HTML放在同一文档中。 但是,可以将其放在外部文件中并通过<link>标记引用,该标记包含在HTML文档的<head>标记内。 考虑一个样本样式表。

使用<style>标记: (Using the <style> tag:)

<style type = "text/css">h1 { color: red; text-align: center; }
   p { line-height: 150%; }
</style>

使用<link>标记: (Using the <link> tag:)

<link href = "mystyle.css" rel = "stylesheet" type = "text/css"/>

The mystyle.css would simply contain the CSS rules, with no HTML tags.

mystyle.css仅包含CSS规则,没有HTML标记。

mystyle.css (mystyle.css)

h1{ color: red; text-align: center; }
p{ line-height: 150%; }

Before we move ahead, it should be noted that even though CSS and HTML together make a great team, CSS is distinct from HTML and infact relies on it. CSS is not a replacement for markup, instead it can only be used to style HTML.

在我们继续前进之前,应该注意的是,即使CSS和HTML组成了一个强大的团队,但CSS与HTML截然不同,实际上它是依赖HTML的。 CSS不能替代标记,而只能用于设置HTML样式。

翻译自: https://www.studytonight.com/cascading-style-sheet/css-syntax

css的基本语法结构是什么

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值