寒假总结第三章 CSS入门 3.1-CSS核心基础

最新推荐文章于 2024-05-27 00:00:00 发布

鲁同学

最新推荐文章于 2024-05-27 00:00:00 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/qq_45870494/article/details/104405397

版权

3.1 CSS核心基础

一、CSS样式规则

具体格式：

 选择器{：属性1：属性值1；属性2：属性值2；属性3：属性值3；}

例如：二级标题字体大小为20像素，颜色为红色

  h2{ font-size:20px;clolr:red;}

注意：

1.css样式中的选择器严格区分大小写，属性和属性值不区分大小写，按照书写惯例一般将“选择器，属性，值”都采用小写格式。
2.多个属性之间必须用英文状态下的分号隔开，最后一个属性后面的分号可以省略，但是，为了便于增加新样式最好保留
3.如果属性的值由多个英文单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号如：

   p{ font-family:"Timed New Roman";}

4.在编写css代码时，为了提高代码的可读性，通常会加上注释
5.在css代码中空格是不被解析的，花括号以及分号前后的空格可有可无。

二、引入CSS样式表

1.行内式

行内式也称为内联样式，是通过标记的style属性来设置元素的样式
基本语法格式：

<标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名>

任何HTML标记都拥有style属性，行内式只对其所在的标记及嵌套在其中的子标记起作用

2.内嵌式

内嵌式是将CSS代码集中写在HTML文档中的< head >头部标记中，并且用< style >标记定义，
基本语法格式：

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

< style >标记一般位于< head >之中< title >标记之后，也可以把它放在HTML文档的任何位置。同时，必须设置type的属性文css/text 这才浏览器才知道< type>包含的是CSS代码，因为< style>还可以包含其他的代码，所以必须要写为css/text

3.链入式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过 < link />标记将外部样式表文件链接到HTML文档中。
基本语法格式如下：

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

该语法中，< link >标记需要放在 < head >头部标记中，并且必须指定 < link />标记的三个属性，具体如下：

① href：定义所链接外部样式表文件的URL,可以是想对路径，也可以是绝对路径
②tyoe:定义所链接文档的类型，在这里需要指定为 text/css，表示链接的外部文件为css 样式表
③rel:定义当前文档与被链接文档之间的关系，在这里需要指定为stylesheet,表示被链接的文件是一个样式表文件。

链入式最大的好处就是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个< link />标记链接多个CSS样式
链入式是使用频率最高，也是最实用的CSS样式表。它将HTML代码与CSS代码分离为两个或多个文件，实现了结构与表现的完全分离，使得网页的前期制作与后期维护都十分方便

4.导入式

导入式与链入式相同都是针对外部样式表文件的。对HTML头部文档应用style标记，并在
< style >标记内的开头处使用@ import语句，即可导入外部样式表文件。
基本语法格式：

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

## 三、选择器基础

1.标记选择器

基本语法格式：

 标记名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

该语法中所有HTML中的标记名都可以作为标记选择器，例如body,h1,p,strong等。用标记选择器定义的样式对页面中该类型的所有标记都有效。
例如：

 p{ font-size:455px;color:red;font-family:"微软雅黑";}

*标记选择器最大的优点就是能快速为页面中同类型的标记统一样式，同时这也是它的缺点，不能涉及差异化样式*

2.类选择器

基本语法格式：

.类名{属性1:属性值1;属性2;属性3:属性值3;}

这个 "."为英文字符下的
类名即为HTML元素的class属性值，大多数HTML原色可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式

类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符

3.id选择器

基本语法格式：

 #id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应文档中某一个具体的元素。
id选择器不支持像类选择器那样定义多个值，类似“id=“bold font24” ”的写法是完全错误的

4.通配符选择器

它是所有选择器中作用范围最广的
（不建议使用）

 *{属性1:属性值1;属性2:属性值2;属性3:属性值3:}

鲁同学

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
寒假总结第三章 CSS入门 3.1-CSS核心基础

CSS样式规则格式：选择器{：属性1：属性值1；属性2：属性值2；属性3：属性值3；}
复制链接

扫一扫

寒假总结 第三章 CSS入门 3.1-CSS核心基础

3.1 CSS核心基础

一、CSS样式规则

二、引入CSS样式表

1.行内式

2.内嵌式

3.链入式

4.导入式

1.标记选择器

2.类选择器

3.id选择器

4.通配符选择器

寒假总结第三章 CSS入门 3.1-CSS核心基础