01-CSS基础知识

目录

一、选择器

1.1、单一选择器

(1)、id选择器

语法：HTML元素以id属性来设置id选择器,以 "#" 来定义。
例如：#para1 {}

(2)、类选择选择器

语法：HTML元素以class属性来设置类选择器,以 "." 来定义。
例如：.center {}

(3)、标签选择器

语法：HTML元素以元素名称来设置标签选择器。
例如：h1 {}

(4)、通配符选择器

语法：与文档中的任何元素匹配,以 "*" 来定义。
例如：* {}

1.2、复合选择器

(1)、后代选择器

语法：父级 某层子级 {属性:属性值}
例：div p {} 选择div下所有层的p标签

(2)、子代择选择器

语法：父级>子级 {属性:属性值}
例：div>p {} 选择div的下一级p标签

(3)、交集选择器

语法：标签类名 {属性:属性值}
例：p.one {} 选择即是p标签又是.one类

(4)、并集选择器

语法：选择器1, 选择器2, 选择器3 {属性:属性值}
例：p, .one, #two {} 选择p标签和.one类和#two类

(5)、链接伪类选择器

​ 顺序尽量颠倒，按照 lvha 的顺序

a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标悬停链接上
a:active 鼠标点击链接时

(6)、属性选择器

选择符 描述
E[att] 选择具有att属性的E元素
E[att='val'] 选择具有att属性且值为val的E元素
E[att^='val'] 选择具有att属性且值为val开头的E元素
E[att$='val'] 选择具有att属性且值为val结尾的E元素
E[att*='val'] 选择具有att属性且值包含val的E元素

(7)、结构伪类选择器

选择符 描述
E:first-child 匹配父元素中的第一个元素E
E:last-child 匹配父元素中的最后一个元素E
E:nth-child(n) 匹配父元素中的第n个元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个n
E:nth-of-type(n) 指定类型E的第n个
示例： 
ul li:first-child {
	background-color: pink;
}

(8)、伪元素选择器

选择符 描述
::before 在原始内部的前面插入内容
::after 在原始内部的后面插入内容

示例：

/*before和after创建一个元素属于行类元素，且必须有content属性。*/ 
div::before {
	content: '';
}

1.3、继承 层叠 优先级

(1)、优先级

表达式或示例 说明 权重
!important div 无穷
嵌入式央视 style = "" 1000
ID选择器 #aaa 100
类选择器 .aaa 10
标签选择器 h1 元素的tagName 1
属性选择器 [title] 详见这里 10
相邻选择器 selecter + selecter 拆分为两个选择器再计算
兄长选择器 selecter ~ selecter 拆分为两个选择器再计算
亲子选择器 selecter > selecter 拆分为两个选择器再计算
后代选择器 selecter selecter 拆分为两个选择器再计算
通配符选择器 * 0
各种伪类选择器 如:link， :visited， :hover， :active， :target， :root， :not等 10
各种伪元素 如::first-letter,::first-line,::after,::before,::selection 1

(2)、层叠

​ 优先级就近原则，同权重情况下样式定义最近者为准;

(3)、继承

  • 字体系列属性：font-family，font-weight，font-size，font-style。
  • 文本系列属性：text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，color。
  • 元素可见性：visibility
  • 列表布局属性：list-style(list-style-type、list-style-image)
  • 光标属性：cursor

二、标签样式

2.1、背景(background)

Property 描述 属性值
background 简写属性。
background-attachment 背景图像是否固定或者随着页面滚动。 fixed、scroll、inherit
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。 repeat-x/y、no-repeat

2.2、字体(font)

Property 描述 属性值
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-weight 指定字体的粗细。

2.3、文本(text)

Property 描述 属性值
color 设置文本颜色
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
Property 描述
a:link 未访问链接
a:visited 已访问链接
a:hover 鼠标移动到链接上
a:active 鼠标点击时

2.5、列表(ul)

2.6、表格(table)

2.7、边框(border)

Property 描述 属性值
border-style 边框样式 dotted、dashed、solid、double...
border-width 边框宽度
border-color 边框颜色

三、布局

3.1、盒子模型

3.1.1、介绍

​ 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

3.1.2、margin

(1)、属性值

值 说明
auto 设置浏览器边距。 这样做的结果会依赖于浏览器
length 定义一个固定的margin（使用像素，pt，em等）
% 定义一个使用百分比的边距

(2)、简写

margin属性可以有一到四个值。

  • margin:25px 50px 75px 100px：上、右、下、左的边距。
  • margin:25px 50px 75px：上、左右、下的边距。
  • margin:25px 50px：上下、左右的边距。
  • margin:25px：4个边距

3.1.3、padding

(1)、属性值

值 说明
length 定义一个固定的填充(像素, pt, em,等)
% 使用百分比值定义一个填充

(2)、简写
​ 和margin属性一样书写。

3.1.4、box-sizing

语法：box-sizing: content-box|border-box|inherit;

属性值：

  • content-box：在宽度和高度之外绘制元素的内边距和边框。
  • border-box：元素设定的宽度和高度决定了元素的边框盒。

3.2、浮动(float)

3.2.1、定义

3.2.2、属性值

属性 描述 值
clear 指定不允许元素周围有浮动元素。 left right both none inherit
float 指定一个盒子（元素）是否可以浮动。 left right none inherit

3.2.3、特性

  • 脱离标准普通流控制，浮动到指定位置，浮动的盒子不在保留预先的位置
  • 浮动元素会在一行显示并且顶部对齐
  • 浮动元素具有行内块元素特性

3.2.4、清除浮动

方式一：额外标签（隔墙法）

<style>
	.clear {
		clear: both;
	}
</style>
<div class="box">
	<div class="clear"></div><!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
</div>

方式二：父级添加overflow

.box {
	/* 清除浮动 */
	overflow: hidden;
}

方式三：父级添加:after伪类元素

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix { 
	/* IE6、7 专有 */
	*zoom: 1;
}

方式四：父级添加双伪元素

.clearfix:before,.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

3.3、定位(Position)

3.3.1、定义

3.3.2、分类

(1)、static

​ HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

(2)、relative

​ 相对定位元素的定位是相对其正常位置。移动相对定位元素，原本所占的空间不会改变。

(3)、absolute

​ 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于，定位使元素的位置与文档流无关，因此不占据空间。

(4)、fixed

​ 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动，Fixed定位使元素的位置与文档流无关，因此不占据空间。

(5)、sticky

​ 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

3.3.3、定位堆叠顺序

z-indent = 1;

3.4、显示

3.4.1、visibility

语法： visibility : inherit | visible | collapse | hidden
参数：

  • inherit：继承上一个父对象的可见性
  • visible：对象可视
  • hidden：对象隐藏

注意：hidden隐藏某个元素，元素仍需占用与未隐藏之前一样的空间。

3.4.2、display

语法：display : none | inline | block | inline-block | ...
参数：

  • none： 隐藏对象。
  • inline： 指定对象为内联元素。
  • block： 指定对象为块元素。
  • inline-block： 指定对象为内联块元素。（CSS2）

注意：与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

3.4.3、Overflow

​ CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
posted @ 2020-06-29 07:48  ciyelc  阅读(153)  评论(0)    收藏  举报