HTML5（CSS核心基础）_html5常用css-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52638405/article/details/120998316

本文详细介绍了CSS样式的设置规则，包括选择器的大小写敏感性、属性间分隔符的使用以及注释的添加。同时，阐述了四种引入CSS样式的方式：行内式、内嵌式、外链式和导入式。此外，还讲解了基础选择器，如标签选择器、类选择器、ID选择器和通配符选择器的用法，以及它们在HTML文档中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.CSS样式规则

设置CSS样式的具体语法规则如下：

//选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；...}
h1{color;green;font-size:14px;}

CSS样式中的选择器严格区分大小写；
多个属性之间必须用英文分号隔开；
如果属性的属性值由多个单词组成且中间包含空格，则必须为这个属性值加上英文引号如：
```
p{font-family:"Times New Roman"}
```
为提高可读性可使用/*注释语句*/来注释；
CSS代码中空格不被解释的，可使用空格、Tab键进行排版

2.引入CSS样式表

(1)行内式

也称内联样式，是通过style标签属性来设置标签的样式，语法如下：<标签名 style="属性1":属性值1;属性2:属性值2;属性:属性值3;">内容</标签名> 通常CSS文件书写在头部标签中行内式却书写在根标签中

（2)内嵌式

书写在头部标签中并用<style>标签定义，其语法格式如下：

<head>
<style type="text/css">
    选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>
</head>

//type="text/css"向浏览器告知<style>标签里包含的是css代码

(3)外链式

也叫链入式，是将所有css样式存放到一个单独的以.css为扩展名的外部样式表文件中，通过<link/>标签将外部样式表文件链接到HTML文档中，语法格式如下：

<head>
<link href="css 文件路径" type="text/css" rel="stylesheet"/>
</head>

//href：定义所链接外部样式表文件的URL；
//type：定义所链接文档的类型；
//rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”表示被链接文档是样式表文件

(4)导入式

与外链式一样，都是针对外部样式表文件的。对HTML头部文档应用style标签并在<style>标签内开头处使用@import语句，语法如下：

<sttle type="texe/css">
@import url(文件路径);或@import "css文件路径"；
//在此处还可以存放其他css样式
</style>

3.CSS基础选择器

(1).标签选择器

是用HTML标签名称作为选择器，按标签名分类，为页面某一类标签指定统一CSS样式，语法如下：

标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3；}
例：p{font-size:12px;color:#666;font-family:"微软雅黑";}

（2).类选择器

类选择器是使用“.”进行标识，后面紧跟类名，语法如下：

.类名{属性1：属性值1;属性2：属性值2;属性3：属性值3;}
例： .red{color:red;font-size:222px;}
引用：<h2 class="red">二级标题</h2>

(3)id选择器

id选择器使用“#”进行标识，后面紧跟id名，语法如下：

#id名{属性1：属性值1;属性2：属性值2;属性3：属性值3;}
例：#bold{font-weigh:bold;}
引用：<p id="bold">段落1</p>

(4).通配符选择器

通配符选择器用“*”表示，它是所有选择器作用范围最广的，能匹配页面中所有的元素，语法如下：

*{属性1：属性值1;属性2：属性值2;属性3：属性值3;}、
例：*{margin:0;padding:0;}
//统配符选择器设置的样式对所有HTML标签生效，不建议使用