前端入门系列--CSS（1）

最新推荐文章于 2024-09-27 12:31:53 发布

黄家琛

最新推荐文章于 2024-09-27 12:31:53 发布

阅读量134

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_44427572/article/details/104526232

版权

前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

在学习完了html的相关知识后，开始学习css的相关知识

CSS层叠样式表

主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式

1、CSS的三种引入方式

1.1行内式

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

这种方式没有实现结构与样式分离，容易造成代买冗余

1.2内部样式表

<head>
<style>
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

这种方法只能控制当前页面的样式，且没有彻底实现结构与页面相分离

1.3外部样式表

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

把另一个css文件引入，前面是固定的，后面是href文件固定路径

2、CSS选择器详解

上面讲了三种引入方式，在后两种引入方式中都需要用到选择器这一功能；
即要针对页面中特定的部分写特定的css样式，则需要给特定的选择器以特定的属性；

2.1标签选择器

标签名{
 		   属性1:属性值1;
 		   属性2:属性值2; 
 		   属性3:属性值3;
 		    }

其可以把某一类标签全部选择，但是这样失去灵活性，但在一些初始标签样式更改时非常有用，后面会用到；

2.2类选择器

//样式中：
.类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}
//标签中：
<p class='类名'></p>

注意具体class命名规范可搜索相关文档
此外，一个标签中还可以有多个类名，其样式会叠加到标签上去，如：<p class='类名1 类名2 类名3'></p>

2.3id选择器

//样式中
#id名 {
		属性1:属性值1;
		属性2:属性值2; 
		属性3:属性值3;
	  }
//标签中			  
<p id="id名"></p>

注意：一个页面中可以有重复class的标签但不能有重复id的标签，所以class用的最多，id一般用于页面唯一元素上（少用）

2.4通配符选择器

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

其是作用于页面中所有元素的，较少用，但项目中一般用

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

来清除html标签的所有默认边距（若保留会出现如：页面上方不能紧贴浏览器边框的瑕疵）

3、CSS字体样式

在这里插入图片描述
1、首先font-size中一般用px作为单位，一般给body指定一个font-size为16px决定整个页面的文字大小；
2、font-family指定字体，且可以同时指定多个字体，但浏览器不支持第一个字体时则自动使用下一个字体并以此类推，如：p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}；
3、font-weight设置字体粗细，可以写100-900的值。其中400相当于写normal，700相当于写bold；
4、font-style设置是否倾斜，其值有normal以及italic两者；一般用normal将斜体的i或者em标签转为非斜体；
5、综合是将上述属性全部写到一起，格式如下：`

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

其中size和family不可省略

4、CSS外观属性

4.1颜色属性

color属性用于定义文本颜色，有三种形式：
1、直接写相应颜色，如：red
2、十六进制写法，如：#FF0000
3、RGB形式，如：rgb(255,0,0)或rgb(100%,0%,0%)

4.2文本对齐方式

text-align是文本对齐方式，有left、right、center三种，注意是盒子中的文本而非盒子

4.3行间距（重要）

line-height用于设置行间距，一般来说行间距比字号大7-8像素，如字体为16px则行间距设为24px左右；
这个属性通常用于设置文字在其父级盒子的中间（网页常见效果）。首先基线与基线之间的距离称为行高，但在自己用fw工具测量时用的是上一行的底线到下一行的底线（中文的最底部）作为行高，在实际中当我们将行高line-height设置为父级盒子的高度时则会居中显示在父盒子中；