CSS代码是什么样子的？
CSS的代码是类似json数据的键-值对，即key: value。当然，每句话前都要有分号(；)完毕。记住，没有分号会有问题。
其实类似json的数据在我们的生活中是很常见的，比如下面的例子:
姓名:小明
性别:男
班级:19计算机预科班
上例中“名称”可以称为字段，也可以称为属性，姑且称之为“属性”，而后面的“小明”则是属性值，这样就形成了一个清晰的数据集。同样，先看一下CSS代码:
background-color：red; color:green; font-size:2em; ......
你找到了吗？其实这两种方法差不多。“背景色”是属性，其值为“红色”。这样，背景色设置为红色。只有CSS代码必须跟一个加号(；)结束，这里再次提醒。
当然还有一点要提醒初学者，在计算机编程中，所有标点符号的输入都必须切换到英文输入的状态，否则会出现一些莫名其妙的错误。
三种CSS选择器及其优先级
好了，上面描述了CSS代码是什么样子，那么接下来的问题就很清楚了:代码写好之后，如何才能应用到HTML上呢？也就是如何用CSS控制HTML的显示效果。
在具体应用中，我们引入“选择器”的概念。
什么是选择器？其实按照我们的理解，你写完CSS代码之后，你要把这些写好的代码应用到某个地方，对吧？这些受体是选择器。
CSS有三个选择器，分别是标签、类和ID。
标签（tag）
标签指的是HTML标签，也就是所有的HTML标签都是标签选择器。注意，如果要使用标签选择器，它必须是HTML标签，不允许定制。先看下面的例子(可以将下面的代码保存为html文件，然后用浏览器打开看看效果):
<html><head><style>p{ background-color:red; color:green; font-size:2em; } </style></head><body><p>注意这里显示的颜色</p><p>再留意显示这里的颜色</p><b>好吧，再次留意这里的颜色</b></body></html>
在上面的代码中，第4~8行是标签选择器的应用方法。格式很简单，就是直接写HTML标签(上例用的是P标签)，后面加一对花括号({})，具体的CSS代码写在花括号里。上面这个案例的作用是将“红色背景，绿色文字，2em字体”应用到HTML中所有的P标签内容(第12~13行)。
类（class）和ID
我们有这样一个场景:在下面的代码中，我们给P标签添加了一个绿色的字体颜色，这意味着第12~13行的文本是绿色的。如果我需要给两行文字“注意此处显示的颜色”和“再次注意此处显示的颜色”添加不同的颜色怎么办？
<html><head><style>p{ background-color:red; color:green; font-size:2em; } </style></head><body><p>注意这里显示的颜色</p><p>再留意显示这里的颜色</p><b>好吧，再次留意这里的颜色</b></body></html>
解决这个问题有两种方法，即class和ID。
先用class的方法:我们可以手动将class添加到两个P标签中，或者只添加到其中一个标签中。具体方法如下。
<html><head><style>p{ background-color:red; color:green; font-size:2em; } .yellow{ color:yellow; } </style></head><body><p class="yellow">注意这里显示的颜色</p><p>再留意显示这里的颜色</p><b>好吧，再次留意这里的颜色</b></body></html>
在上面的代码中，我在第15行的P标记中添加了一个class属性，属性值为“yellow”。然后第9~11行是yellow类的具体实现，这样我就可以给“注意这里显示的颜色”的文本添加***效果。
总结该类的语法:。
:{ & lt具体的CSS代码>:} .
注意:类名是自定义的，您可以使用您喜欢的任何类名。但是，你命名的类名也必须符合一些规则:首先，必须以字母或下划线(_)开头，后跟数字，不能有其他符号；其次，类名是区分大小写的，这意味着一个字母的大写和小写状态是两个不同的类名。
好了，这里还有一个实现方法，用ID。
ID方法的实现在形式上类似于class。在CSS选择器中，class的语法是添加一个点(。)在类名前面。ID的区别在于它在ID名称前加了一个#号。具体方法如下:
<html><head><style>p{ background-color:red; color:green; font-size:2em; } #yellow{ color:yellow; } </style></head><body><p id="yellow">注意这里显示的颜色</p><p>再留意显示这里的颜色</p><b>好吧，再次留意这里的颜色</b></body></html>
在上述情况下，文本“注意此处显示的颜色”也可以通过ID的方式更改为***显示效果。
可以对比一下class和ID的实现方法。它们只是符号和引用方式不同。那真的只是形式上的不同吗？
事实并非如此。这两种方式之所以存在，是因为它们各有的特点。
类的特点:类最大的特点是可以重用，同一个类可以应用在很多不同的标签中。例如，下面的情况:
<html><head><style>p{ background-color:red; color:green; font-size:2em; } .yellow{ color:yellow; } </style></head><body><p class="yellow">注意这里显示的颜色</p><p>再留意显示这里的颜色</p><b class="yellow">好吧，再次留意这里的颜色</b></body></html>
在上面的代码中，我定义了一个电影类(第9~11行)，然后分别应用于“注意这里显示的颜色”(第15行)和“好的，再次注意这里的颜色”(第17行)这两个文本。
ID的特点: ID，顾名思义，就是一个标识，是唯一的。而ID的作用就是识别唯一性。也就是说，只要一个ID被应用到某个标签上，就不能再在其他标签上使用。
至于这三个选择器的优先级，下面是结论:ID优先级最高，class优先级第二，label优先级最低。您可以运行以下代码来查看结果:
<html><head>???????? <style>???????????? p{ ????????????????? color:?brown; ???????????? } ???????????.cl{ ???????????????? color:?black; ????????????} ????????????#ii{ ???????????????? color:?green; ????????????} ????????</style>????</head>????<body>???????? <p?class="cl">注意这里显示的颜色</p>???<!--?显示颜色为black?-->????????<p?class="cl"?id="ii">再留意这里显示的颜色</p>????<!--?显示颜色为green?-->????</body></html>
符号选择器
符号，严格来说，不能称为“选择器”。指的是在使用选择器的时候使用一些符号，使得选择器的功能更加丰富。这里有三个。
星号（*）空格（ ）逗号（,）
1。星号(*):星号表示“无所不包”，例如:
2。空格:空格在这里有限制作用。
比如下面这个例子，我现在有这样一个需求，需要将基础科目中的三科(语文、数学、英语)设置为蓝色加粗显示；而专业科目中两科(计算机和学前教育)的课文设置为绿色加粗，该如何处理？<html>???? <head>??????? <style>???????????? ???????? </style>????</head>????<body>????????<ul>????????????<p>基础科目：</p>????????????<li>语文</li>???????????? <li>数学</li>???????????? <li>英语</li>???????? </ul>???????? <ul>???????????? <p>专业科目</p>???????????? <li>计算机</li>???????????? <li>幼儿教育</li>????????</ul>????</body></html>
如果我为“李”标签设置CSS，那么所有的“李”标签都是同一个样式，所以基础科目和专科科目没有区别。在这里，我可以这样解:
给各自的“ul”添加类，用这个“li”的父元素来限定各自的子元素（如第15行和第21行所示）。用“空格”限定（如第4~11行所示）。
解决方案如下:
<html>???? <head>???????? <style>???????????? .ul1?li{ ????????????????color:?blue; ???????????????font-weight:?bold; ????????????? } ???????????? .ul2?li{ ???????????????? color:?green; ???????????????? font-weight:?bold; ???????????? } ???????? </style>???? </head>????<body>???????? <ul?class="ul1">???????????? <p>基础科目：</p>???????????? <li>语文</li>???????????? <li>数学</li>???????????? <li>英语</li>???????? </ul>???????? <ul?class="ul2">???????????? <p>专业科目</p>???????????? <li>计算机</li>???????????? <li>幼儿教育</li>???????? </ul>????</body></html>
特别说明:
在HTML标签中，每个标签称为一个“节点”。利用HTML标签的包含关系，每个节点都有一个相对的父子节点。包含的元素称为父节点，包含的元素称为子节点。在上面的代码中，ul和li的关系，ul是父节点，li是子节点。
3。逗号:对多个选择器应用相同的CSS样式。
对于多个选择器，无论是标签选择器、类选择器还是ID选择器，如果这些选择器被标注了相同的CSS样式，那么它们可以用逗号分开，写在一起。代码如下:
<html>???? <head>???????? <style>???????????? p,b,.cl,#ii{ ????????????????? color:?brown; ????????????????? font-weight:?bold; ????????????? } ???????? </style>????</head>????<body>???????? <p>注意这里显示的颜色</p>????????<p>再留意显示这里的颜色</p>????????<b>好吧，再次留意这里的颜色</b>????????<div?class="cl">用类的方式标识选择器</div>????????<p?id="ii">用ID的方式标识选择器</p>????</body></html>
在上面代码的第4~7行中，四个选择器P、B、.cl和#ii都应用了相同的CSS样式，带有逗号。
VS代码一些常用快捷键
CTRL+？:添加注释
CTRL+Enter:强制换行，不管光标是否在末尾。
本文来自倾听雪落投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/652834.html
微信扫一扫 
