关于css一点笔记

css

1 .css基础选择器

1.1 css选择器的分类

选择器分为基础选择器和复合选择器两大类

基础选择器

• 基础选择器是由单个选择器组成的
• 基础选择器包括标签选择器、类选择器、id选择器和通配符选择器

1.1.1标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为网页某一类标签制定统一的css样式

优点：可以统一同类型标签样式

缺点：不能差异化

1.1.2 类选择器

可以选择一个或多个标签

。类名{
	属性1：属性2；
	。。。
}

将所有拥有red类的html元素均为红色

。red{
	color；red；
}

不过结构需要加上class属性来区分自己是哪一类的
<div class='red'>变红色 </div>

1.1.3 类选择器-多类名

一个标签可以指定多个类名

1. 使用方式

   <div class="red font20">亚瑟</div>
   

   class属性里可以写多个类名，但不同类名之间必须用空格空开

1.1.4 id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义

#id名 {
	属性1：属性值1；
	。。。
}

例如将id为nav的元素中的内容设置为红色。
#nav {
	color : red;
}

1.1.5 类选择器和id区别

id选择器 样式#定义，结构id调用，只能调用一次

类就可以一直用、

1.1.6 通配符选择器

通配符使用“ * ”，定义，他表示选取页面中所有的元素（标签）。

语法

* {
	属性1 ： 属性值1；
	。。。
}

通配符选择器不用调用，直接给所有元素使用样式

2 .css字体属性

css Font（字体）属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

2.1字体系列

css 使用font-family 属性定义文本的字体系列

p {
	font-family:"微软雅黑";
}
div {
	font-family:Arial,"Microsoft Yahei","微软雅黑"；
}

2.2 大小

css中用 font-size属性定义字体大小

p {
	font-size: 20px;
}

2.3 粗细

css使用font-weight属性设置weight属性设置文本字体的粗细

2.4字体样式（如斜体）

css使用 font-style 属性设置文本的风格

2.5字体复合属性

字体属性可以把以上文字样式综合来看，这样写可以更节约代码

例：
body {
	font :font-style font-weight font-size/line-height font-family;
}

注：**不能更换顺序

比较麻烦，先不管了，有需要再看

总结

属性	表示	注意点
font-size	字号	我们通常用的单位是px像素，一定要跟上单位
font-size	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是700不加粗是400（数字后不跟单位）
font-style	字体样式	italic是倾斜
font	字体连写	字体连写是有顺序的

3.css文本属性

文本属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

3.1 文本颜色

color属性用于定义文本的颜色

div {
	color :red;
}

3.2 对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式

div {
	text-align: center;	
}

3.3 装饰文本

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等

属性值	描述
underline	下划线
overline	上划线
line-through	删除线

3.4文本缩进

text-indent 属性用于指定文本的第一行缩进，通常是将段落的首行缩进

3.5 行间距

line-height 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离

p {
	line-height:26px;
}

3.6 总结

属性	表示	注意点
color	文本颜色	我们通常用 十六进制
text-align	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常我们用于段落首行缩进2个字的距离 text-indent:2em
text-decoration	文本修饰	记住添加下划线 underline 取消下划线 none
line-height	行高	控制行与行之间的距离

4.css引入方式

4.1css的三种样式表

三大类

1. 行内样式表
2. 内部样式表
3. 外部样式表

4.1.1内部样式表

是将所有css代码抽取出来放到《style》标签中，并写在html页面内部

4.1.2行内样式表

直接在标签内加入style属性

4.1.3外部样式表

<link rel="stylesheet" href="css路径">

2 css第二天

2.1 emmet语法

可以使用缩写来提高编写速度

2.1.1 快速编写html结构语法（重要）

1. 生成标签直接输入标签名摁回车或者TAB就行
2. 如果想要生成多个相同标签，加上*就可以了，比如div *3就可以快速生成3个div
3. 如果有父子级关系的标签，可以用 > 比如 ul> li就可以了
4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
5. 如果生成带有类名或者id名字的，直接写.demo或者 #two tab 键就可以了
6. 如果生成的div类名是有顺序的，可以用自增符号$再 * 几 就代表有几个顺序数
7. 如果想生成的标签内部写内容可以用{ }表示

2.1.2 快速生成css样式格式

1. 比如 w200按 回车 可以生成 width：200px；
2. lh26 按回车 可以生成 line-height：26px；

3.css复合选择器

1.1 后代选择器（重要）

后代选择器又称为包含选择器，可以选择父元素里的子元素，其写法就是把外层标签写到前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成了外层标签的后代

标签1 标签2 {
	asjd
}

上述语法表示选择元素1里面所有的元素2

1.2 子选择器（重要）

子元素选择器（子选择器）只能选择作为某个元素的最近一级子元素，简单理解就是说选亲儿子元素

元素1>元素2 {
	sasaf
}

1.3 并集选择器（重要）

并集选择器可以同时选择多组标签，为他们定义相同的样式，通常用于集体声明

1.4 伪类选择器（重要）

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素

伪类选择器用“ ： ”表示

1.4.1 链接伪类

a:link    /*选择所有未被访问的链接*/
a:visited  /*选择所有已被访问的链接*/
a:hover    /*选择鼠标指针位于其上的链接*/
a：active   /*选择活动链接（鼠标按下未弹起的链接）*/

注意事项

1. 为了生效，请按照LVHA的顺序声明：link ：visited ：hover ：active下

1.4.2 foucs伪类选择器

用于选取获得焦点的元素（即光标）一般都是input类表单元素才有

input:foucs {
	background-color:yellow;
}

总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只能选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 .nav,header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover实际开发的写法
focus选择器	选择获得光标的表单	跟表单相关	较少	input：foucs 记住这个写法

4.css的元素显示模式

4.1 什么是元素的显示模式

元素显示模式就是元素（标签）以什么方式进行显示

HTML元素一般分为块元素和行内元素两类

4 .1.1块元素

特点

1. 宽度高度内外边距都可以设置
2. 独占一行
3. 宽度默认是容器（父级宽度）100%
4. 是容器，可以放别标签

4.1.2 行内元素

特点

1. 相邻行内元素在一行，一行可以显示多个
2. 高宽直接设置是无效的
3. 默认宽度就是他本身内容的宽度
4. 行内元素只能容纳文本或其它行内元素

4.1.3 行内块元素

特点

1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2. 默认宽度就是它本身内容的宽度（行内元素特点）
3. 高度，行高，外边距以及内边距都可以控制（块级元素特点）

例：

4.2 元素显示模式转换

转化为块元素： display：block；

转化为行内元素： display：inline；

转化为行内块： display：inline-block

小技巧：让文本在区间内垂直居中

只要让行高等于盒子高度就可以了

line-height=height

5.css背景

5.1 背景图片

控制位置很方便

background-image：url（）；

5.2 背景平铺

background-repeat

5.3 背景图片位置（重要）

backgound-position属性可以改变图片在背景中的位置

5.4 背景半透明

backgroung：rgba（0，0，0，0.3）；

• 最后一个参数是alpha透明度，取值在0~1之间

5.5 背景总结

6 css三大特性

层叠性、继承性、优先级

6.1优先性

相同选择器选择相同的样式，此时一个样式会覆盖另一个冲突的样式

• 就近原则，哪个样式离结构近，就执行哪个样式

6.2继承性

子标签会继承父标签某些样式，如文本颜色和字号

可以继承（text-，font-，line-这些元素开头的可以继承，以及color属性）

6.2.1 行高的继承性

6.3 优先级

一个元素指定多个选择器

• 选择器相同，则执行层叠性
• 选择器不同，按权重

7 盒子模型

边框border

内容content

外边距margin

内边距padding

7.1 border

border-width 定义边框粗细，单位是px

border-style 边框的样式

border-color 边框颜色

border-collapse:collapase; 合并边框

7.2 padding

padding-left

padding-right

padding-top

padding-bottom

复合写法：padding：

运用实例：可以不设置盒子宽和高，用padding来撑开盒子，盒子大小就随文字而变。

7.3 margin

margin-left。。。。。。与padding一致

7.3.1 外边距典型应用（重要）

1. 盒子必须指定宽度
2. 盒子左右的外边距都设置了auto

div {
	width:960px; margin:上下边距 auto;
}

上述方法只能让块级元素居中，==行内元素和行内块元素水平居中给其父元素添加 text-align：center即可

7.3.2 嵌套块元素塌陷

解决方法

1. 可以为父元素加上个边框
2. 可以为父元素定义一个内边距
3. 可以为父元素添加overflow:hidden.

清楚内外边距

不同浏览器自带的不同，所以干脆把所有边距清零

* {
	padding:0;
	margin:0;
	
}

额外补充去掉列表前符号用list-style ：none；

8。圆角边框

border-radius:length;

radius半径（圆的半径）原理：（椭）圆与边框的交际形成圆角效果

border-radius：属性；属性可以有四个，顺时针 左上-》右上-》右下-》左下

也可以分开写border-top-left-radius左上角，必须top在前面

7.盒子阴影

语法

box-shadow:h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色，请查阅css颜色值
inset	可选，将外部阴影（outset）改为内部阴影

8.文字阴影

text-shadow

text-shadow:h-shadow v-shadow blur color;

值	描述
h-shadow	必须水平阴影的位置，允许负值
v-shadow	必须，垂直阴影的位置，允许负值
blur	可选。模糊的距离
color	可选。阴影的颜色

9.浮动

• 普通流
• 浮动
• 定位

9.1 标准流

1. 按照规定好的默认方式排列

9.2 浮动

浮动可以改变标签默认排列方式

语法
选择器 {
	float:属性值;
}

属性值	描述
none	元素不浮动（默认）
left	元素向左浮动
right	元素向右浮动

浮动特性

设置了浮动，会脱标，不保留原来位置

浮动元素会具有行内块元素特性

浮动元素经常和标准流父级一起用

来保证浮动元素不是按浏览器排

网页布局第一准则：左右浮动，上下标准

网页布局第二准则：先设置盒子大小，再设置盒子位置

浮动注意点

1. 浮动和标准流的父盒子搭配
2. 一个元素浮动了，理论上其余的兄第元素也要浮动

9.3清除浮动

• 如果父盒子有高度则不需要清除浮动
• 清除浮动后，符集会根据浮动的子盒子自动检测高度。父级有了高度就不会影响下面的标准流

选择器 { clear:属性值；}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动影响）
right	不允许右侧有浮动元素
both	同时清除左右两侧浮动的影响

在实际工作中几乎只用both

一般都是在浮动元素后面再增加一个空元素，为这个空元素定义“clear：both”

10。定位

定位布局

position来实现四种方式

属性值	说明
fixed	固定定位
relative	相对定位
absolute	绝对定位
static	静态定位（默认值）

10.1 静态定位

了解一下，现在不重要

10.2 绝对定位

绝对定位是相对它父元素来说

选择器 {
position：absolute；
top:像素值；
bottom:像素值；
left:像素值；
right：像素值；//他们结合起来用，之后的几种定位都是一样
}

特点：

1. 如果父元素没有定位，则以浏览器为准定位
2. 如果父元素有定位，则以最近一级的有定位祖先元素为参考点移动位置

10.3 相对定位

相对于他原来的位置

选择器 {position:relative}

1. 他是相对于自己原来的位置来移动的
2. 原来在标准流的位置继续占有
3. 相对定位没有脱标，最典型的应用是给绝对定位当爹。

10.4 固定定位

position：fixed

以可视化窗口为参考对象

跟父元素没关系

不随滚动条滚动

固定工位不占有原来的位置

11 .显示与隐藏元素

display属性

display：none;隐藏对象（位置也没了）

display：block；除了转化为块级元素之外，同时还有显示元素的意思

visibility可见性

visible可见

hidden隐藏（位置保留）

overflow溢出位置

visible显示

hidden隐藏

scroll溢出部分显示滚动条

auto在需要的时候添加滚动条