理解CSS | 青训营笔记

iam阿缪
85 阅读6分钟

这是我参与第四届青训营笔记创作活动的的第2天。

一 什么是CSS

Cascading Style Sheet 层叠样式表是一组样式设置的规则，用于控制页面的外观样式。CSS是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。

二 CSS的作用

  1. 实现内容与样式的分离，便于团队开发。
  2. 样式复用，便于网站的后期维护。
  3. 页面的精确控制，让页面更精美（布局和定位）。
  4. 设置字体和颜色，设置位置和大小，添加动画效果。

三 CSS的语法

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>

四 CSS应用方式

内部样式

也称为内嵌样式，在页面头部通过style标签定义，对当前页面中所有符合样式选择器的标签都起作用。只能在当前页面中使用，项目中使用较少，学习和测试使用较多。

p{
 color:purple;
 background-color: pink;
}

行内样式

也称为嵌入样式，使用HTML标签的style属性定义，只对设置style属性的标签起作用。

<div style="width: 200px; height: 200px;">Hello World！！</div>

外部样式

使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令引入。

<!-- 使用link标签链接外部样式文件 -->
<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">
<!-- @import指令导入外部样式文件 -->
<style>
	@import "CSS样式文件路径";
	@import url(CSS样式文件路径);
</style>

五 CSS是如何工作的

image.png

六 CSS的选择器

  • 我们在写代码的时候，经常需要给特定的网页元素设置样式。那么我们就可以按照一定的规则，选择出符号条件的选择器，为之添加CSS样式。

通用选择器

{样式声明} （匹配所有元素，但是的效率非常低，不建议使用）
例：*{margin:0；padding:0}

元素选择器

标签关键字{样式声明;}
例：div{}

ID选择器

<元素 id=“id值”>，id在一个页面中不能重复，所有id选择器只被一个元素应用。
例：#id值{样式声明}

类选择器

使用.定义样式，哪个元素想用，用class都能调用
<元素 class=“类名”>
例：.类名{样式声明}

①.多类选择器

  • <元素 class="类名1 类名2 类名3.......">

②.分类选择器

  • 元素选择器.类选择器{样式声明}
  • .类选择器.类选择器{样式声明}
  • .tooltip.show{}

③.类名的定义规范

  • 必须有.
  • 不能以数字开头
  • 只能包含- 或者_
  • 尽量见名知意

组合选择器

选择器1,选择器2,选择器3.....{样式声明}
例：#d1,.c1,div,p.c2{color:red;background-color:yellow}

后代选择器

通过元素的后代关系，来匹配元素
后代关系：一层嵌套或者多于一层嵌套称为后代
例：选择器1 选择器2 选择器3{样式声明}

子代选择器

通过元素子代关系，来匹配元素
子代关系，一层嵌套为子代
例：选择器1>选择器2>选择器3{样式声明}
子代和后代选择器可以混合使用
例：#d1>p span{color:red;}

image.png

伪类选择器

匹配元素在某一个状态时的样式,只适用于a标签的伪类

  • 未被访问:link a:link{color:red}
  • 已被访问:visited a:visited{color:green}

所有元素都能用的伪类:

  • :hover 鼠标悬停的状态
  • :active 激活状态
  • :focus 元素获取焦点时的状态（input button）

七 选择器的权重

选择器权值，代表选择器的重要程度，重要程度高，优先显示：
!import >1000
内联样式 1000
id选择器 100
类选择器 10
伪类选择器 10
元素选择器 1
通用选择器 0
继承的样式 无\

  • 当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加值最大的显示
  • 有多个选择器的权值一样大，按照就近原则。
  • 添加了!important当前css样式直接获取最高优先级。
  • 群组选择器，不相加，个算个的。
  • 选择器权值的计算，不会超过本选择器权值的最大数量级。

八 CSS一些常见的属性

属性含义说明
font-size大小、尺寸可以使用多种单位
font-weight粗细
font-family字体
font-style样式
color颜色
line-height行高行之间的高度
text-align水平对齐方式取值：left、center、right
background-color背景颜色
background-image背景图片
background-repeat背景图片的重复方式
list-style-type设置列表前的标记
list-style-image将图像作为列表前的标记
list-style-position设置标记的位置取值：outside(默认)、inside

九 溢出处理

overflow:visible; 溢出部分显示，默认值 
overflow:hidden;溢出部分隐藏 
overflow:scroll; 带滚动条，不管是否溢出，都添加x/y轴的滚动条 
overflow:auto; 自动， 不溢出就没有滚动条，溢出自动在溢出方向添加滚动条 
overflow-x:scroll; 单独让x轴出现滚动条 
overflow-y:scroll; 单独让y轴出现滚动条

十 边框

<!-- 同时设置4个方向的边框 -->
border: width style color; 
/*width- - - - 边框的粗细 
style - - - -边框样式 solid 实线 
					dotted 小圆点虚线 
					dashed 短线虚线 
					doubel 双实线 
color - - - -合法颜色，transparent */
取消边框 border:none / 0 ; 
最简方式 border: style; border:solid;

十一 边框的圆角

把直角倒成圆角 
border-radius:圆角的半径 
取值：1.px为单位的数字 
	  2.% 50%就是圆 
单角的定义，圆角之间会相互影响 
border-top-right-radius: 值;

十二 元素阴影

box-shadow: h-shadow v-shadow blur spread color; 
h-shadow x轴偏移量 
v-shadow y轴偏移量 
blur 阴影模糊程度 
spread 阴影大小 
color 阴影颜色 
inset 内部阴影

十三 一些重要的样式属性

显示方式

display:block; 让元素按照块级元素去显示 
display:inline; 让元素按照行内元素去显示 
display:inline-block; 让元素按照行内块方式显示 
display:table; 让元素按照表格的方式显示 
display:none; 隐藏，脱离文档流的隐藏

显示效果

visibility:visible; 默认值，显示 
visibility:hidden; 隐藏，不脱离文档流的隐藏

透明度

opacity:0.9; 取值0~1 0全透明，1不透明
opacity和rgba的区别\

  •      rgba只改变当前颜色的透明度\
  •      opacity元素以及元素后代所有与颜色相关的都会变透明

1.opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定 一些事件，如click 事件，那么点击该区域，也能触发点击事件的

2.visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已 经绑定的事件 ，隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

3.display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素。 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

列表的样式

list-style-type:disc; 实心圆 
				square; 实心小方块 
				circle;空心圆 
				none; 去除列表标识项 
list-style-image: list-style-position:outside; 默认值，在li外侧显示列表标示 
				  inside； 在li中显示列表标识

光标的样式

cursor:default; 默认值 小箭头 
cursor:pointer; 小手 
cursor:text; 提示文本输入 的 I 
cursor:wait; 等待加载 
cursor:help; 帮助 
cursor:crosshair; 十字

参考资料

字节青训营教学视频及PPT
CSS基础
w3school 在线教程

avatar
文章
阅读
粉丝