css 笔记

CSS样式优先级

行内样式>内部样式表>外部样式表

就近原则：越接近标签的样式优先级越高

CSS基本选择器

  • 标签选择器

image-20240329064111822

  • 类选择器

image-20240329064201048

  • ID选择器

image-20240329064230757

小结
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次

基本选择器的优先级

ID选择器>类选择器>标签选择器

CSS高级选择器

复合选择器

4种复合选择器，分别为后代选择器，子选择器，并集选择器和伪类选择器

后代选择器

body p{
background: red;
}

image-20230510231423662

  • 上述的后代选择器的含义是：先将当前页面中所有的ol标签找到，然后在这些ol标签内找所有的li标签。
  • 注意，只要是ol标签内的后代li标签就行，也就是包含子元素，孙子元素，重孙子元素…，不一定非得是子元素。

子选择器

子选择器：与后代选择器相类似，但是只能选择子元素标签，不可以选择孙子元素标签，元素之间使用>进行分割。

body>p{
background: pink;
}

image-20230511000503444

并集选择器

.active,p {
background: green;
}

并集选择器：集体声明，用于选择多组标签，标签之间使用，分隔，但最后一个标签后不需使用，，表示同时选中多个标签。

并集选择器建议竖着写，每个选择器占一行，能够提高代码的可读性，便于程序员后续地操作。

image-20230510235329651

伪类选择器

伪类选择器：复合选择器的特殊用法，表示选中某个标签元素的某个特定状态。

伪类选择器主要讲以下4类伪类选择器，分别为：

  • a:link 选择未被访问过的链接

  • a:visited 选择已经被访问过的链接

  • a:hover 选择鼠标指针悬停时的状态

  • a:active 选择鼠标指针按下时的状态(鼠标按下了但是未弹起)

background 背景

  • background-color 背景颜色
  • background-image 背景图像
  • background-repeat 水平或垂直平铺 repeat-x repeat-y 不平铺 no-repeat
  • background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
  • background-position 图像在背景中的位置 right top left bottom
  • background-size

image-20240329072946917

Text文本格式

属性描述
color设置文本颜色 color:red;
direction设置文本方向。
letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本,center,right,justify居中或对齐到左或右,两端对齐
text-decoration主要是用来删除链接的下划线none,overline,line-through,underlineimage-20240329074445394
text-indent缩进元素中文本的首行
text-shadow设置文本阴影
text-transform控制元素中的字母
unicode-bidi设置或返回文本是否被重写
vertical-align设置元素的垂直对齐
white-space设置元素中空白的处理方式
word-spacing设置字间距

image-20240329074216208

水平对齐方式：text-align属性

image-20240329074253721

text-shadow属性

image-20240329074714558

font字体

image-20240329075111240

列表

有序和无序列表

list-style-type:circle
list-style-type:square
list-style-type:upper-roman
list-style-type:lower-alpha

image-20240329080242524

image-20240329080416188

CSS渐变样式

1.简单的线性渐变

在这里插入图片描述

.layout{
	width: 100%;
	min-height: 100vh;
	background: linear-gradient(#FFE8E9,rgba(0,0,0,0) 200px);
}

2.层叠多层的渐变（左右+上下+背景图）

在这里插入图片描述

.layout{
	width: 100%;
	min-height: 100vh;
	background:
	url(/static/bg.png) no-repeat 80% 50px,
	linear-gradient(to bottom, transparent -100px,#fff 300px),
	linear-gradient(to right, #D2EEF9,#FFD1DE);
}

3多重径向渐变，（线性渐变+径向渐变的组合）

在这里插入图片描述

.layout{
	width: 100%;
	min-height: 100vh;
	background: 
	linear-gradient(to bottom,transparent,#fff 400px),
	radial-gradient(90% 300px at left top, #95E0DC, transparent),
	radial-gradient(60% 300px at right top, #D3CBFC, transparent);
}

盒子模型

lex布局

display: flex;

flex-wrap:wrap-reverse; 自动换行 倒置显示

flex-wrap: wrap;自动换行

分布样式

justify-content: center; 居中分布

justify-content: space-between; 两端分布

align-items: center;垂直居中和组件中文本的水平居中

align-items: stretch;填充满父组件和组件中文本的垂直居中

flex-direction: column;实现垂直排列

flex-shrink: 0;属性用于设置组件是否被压缩