CSS基础知识

CSS基础

CSS的介绍

• CSS：层叠样式表
• 用于设置和布局网页的一种计算机语言，告知浏览器如何渲染解析页面元素

CSS的组成

• 选择器：选择HTML元素的方式。可以使用标签名、class属性值、id值等多种方式
• 样式声明：用于给HTML元素设置具体的样式。格式是属性名：属性值

CSS引入方式

1. 内联样式

   • 在标签中通过style属性来控制样式。只影响当前这一行

   • 格式

     <标签 style=“属性名：属性值； 属性名：属性值；”>内容</标签>
     

2. 内部样式

   • 在标签中通过

• 在标签中通过标签来引入独立的css文件。可以影响不同的文件

• 格式

  <link rel="stylesheet" href="css文件">
  

CSS的注释

1. 什么是注释

   • 注释适用于解释说明程序的

2. 注释的格式

   • /注释的内容/

3. 注释的特点

   • 被注释掉的样式，不会被浏览器解析

CSS的选择器

1. 什么是选择器

   • 一个HTML文件中存在多个元素，如果对不同的元素添加不同的样式，就需要使用选择器了，即选择器就是用来选择制定的元素的！

2. 选择器的分类

   • 基本选择器

     名称	符号	作用	示例
     元素选择器	标签名	根据标签名匹配元素	div{}
     类选择器	.	根据class属性值匹配元素	.center{}
     id选择器	#	根据id属性值匹配元素	#username{}

   • 属性选择器

     名称	符号	作用	示例
     属性选择器	[]	根据指定属性匹配元素	[type]{}
     			[type=text]{}

   • 伪类选择器

     名称	符号	作用	示例
     伪类选择器	标签名：link	未访问的状态	a:link{}
     	标签名：visited	已访问的状态	a:visited{}
     	标签名：hover	鼠标悬浮的状态	a: hover{}
     	标签名：active	已选中的状态	a: active{}

   • 组合选择器

     名称	符号	作用	示例
     后代选择器	空格	可以使用空格结合多个选择器，基于第一个选择器，匹配第二个选择器的所有元素	.center li{}
     分组选择器	，	可以同时匹配多个元素	div,span，p{}

CSS常用的一些样式

1. 边框样式

   边框名称	作用	属性值
   border	设置所有边框
   border-top	设置上边框	solid—实线
   border-left	设置左边框	double—双实线
   border-right	设置右边框	dotted—原点
   border-bottom	设置下边框	dashed—虚线
   border-radius	设置边框弧度

2. 文本样式

   样式名称	作用	属性值
   color	文本颜色	颜色单词（red），RGB值（#ff0000）
   font-family	字体	微软雅黑，宋体等等
   font-size	字体大小	像素点 20px
   text-decoration	文字下划线	none：无；underline：下划线；overline上划线；linethough：删除线
   text-align	水平对齐方式	left：居左；right：居右；center：居中
   line-height	行间距	像素点 20px
   vertical-align	垂直对齐方式	top：居上；bottom：居下；middle：居中；百分比调节

3. 表格标签

   标签名称	作用	属性
   table	表格标签	width：宽度；height：高度；border：边框；align：对齐方式
   tr	行标签	align：对齐方式
   td	单元格标签（列标签）	rowspan：合并行；colspan：合并列
   th	表头标签（加粗和居中）
   thead	表头语义标签
   tbody	表体语义标签
   tfoot	表脚语义标签

4. 样式控制

   样式名称	作用	属性
   background-repeat	控制背景重复	no-repeat：不重复；repeat-x：水平重复；repeat-y：重置重复；repeat：水平+垂直重复
   outline	控制轮廓	double：双实线；dotted：原点；dashed：虚线；none：无
   display	控制元素	inline：内联元素（无换行，无长宽）；block：块级元素（有换行）；inline-block：内联元素（有长宽）；none：隐藏元素

5. 盒子模型

   • 盒子模型是通过设置边框和元素内容的边距，从而实现布局的方式，分为内边距和外边距两种方式
   • 如果要实现布局，可以采用设置内边距和外边距来实现
   • 内外边距的设置，取决于所选视角，一般经常使用的是外边距

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kNz8oP6M-1642301169579)(/Users/heroma/Library/Application Support/typora-user-images/image-20220115221035302.png)]

   外边距名称	作用	举例
   margin-top	上外边距	margin-top：50px；
   margin-left	左外边距	margin-left：50px；
   margin-right	右边距	margin-right：50px；
   margin-bottom	下边距	margin-bottom：50px；
   margin	通用上下左右边距	margin：50px；
   margin	通用单独上下左右外边距	margin：70px 35px 40px 80px；
   margin	自动计算外边距并水平居中	margin：auto；

   内边距名称	作用	举例
   padding-top	上外边距	padding-top：50px；
   padding-left	左外边距	padding-left：50px；
   padding-right	右边距	padding-right：50px；
   padding-bottom	下边距	padding-bottom：50px；
   padding	通用上下左右边距	padding：50px；
   padding	通用单独上下左右外边距	padding：70px 35px 40px 80px；
   padding	自动计算外边距并水平居中	padding：auto；