CSS学习笔记

css是层叠样式表（Cascading Style Sheets）

html专注于结构，css则专注于样式

例子：

<head>

　　<style>

　　　　p{/*标签选择器*/

　　　　　　color: red;

　　　　　　font-size: 12px;

　　　　}

　　　　div{

　　　　　　color: green;

　　　　}

　　</style>

</head>

<body>

<p>改变颜色和大小</p>

</body>

## 2.2选择器分类

选择器分为基础选择器和复合选择器

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

1. 标签选择器

```

<style>

p/*标签名为p*/{

color:green;

}

</style>

div{

color:pink;

}

```

2. 类选择器（开发常用）

若想差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。例如将所有拥有red类的HTML元素改为红色

```

<style>

.red{

color:red;

}

</style>

```

3. 多类名

```

<style>

.red{

color:red;

}

.font35{

font-size:35px;

}

</style>

<body>

</body>

```

注意提取共用的属性单独成类选择器

4. id选择器

id选择器和类选择器类似，但只能使用一次

```

<style>

#turnPink {

color:pink;

}

</style>

<body>

</body>

```

5. 通配符选择器

作用于页面中所有元素

```

<style>

属性1:属性值1;

}

</style>

```

## 3.1字体系列

css使用font-family:'微软雅黑';(宋体)设置字体

使用font-size:20px;设置字体大小(标题需要单独指定)

使用font-weight:bold;(font-weight=700;)数字范围为100-900

控制字体粗细

使用font-style:italic;设置字体倾斜

字体复合属性

font:font-style font-weight font-size/lineheight font-family;以上顺序不能更换font-size与font-family不能省略

```

<head>

<style>

div{

font:italic 700 16px 'Microsoft yahei'

}

</style>

</head>

<body>

</body>

```

使用color: red;设置字体颜色。也可以采用十六进制 #ff0000; 或 rgb(255,0,0);

使用text-align:center;设置文字居中

使用text-decoration:underline;设置文本下划线,下面例子为取消超链接默认下划线

```

<head>

<style>

text-decoration:none;

color:#333;

}

</style>

</head>

<body>

</body>

```

使用text-indent:20px(2em,em为相对单位);设置文本缩进

使用line-height:26px;设置行边距

## 5.1 CSS引入方式

1. 行内样式表（行内式）

```

```

2. 内部样式表（嵌入式）

```

<style>

div{

color:red;

font-size:12px;

}

</style>

```

3. 外部样式表（链接式）

新建后缀为.css的样式文件

```

```

rel定义当前文档和被链接文档的关系，stylesheet代表样式表文档。

____

---

____

# 1. Emmet语法

1. 快速生成html结构语法

1. 生成标签直接输入标签名按tab即可

2. 生成多个相同的标签 div*3+tab

3. 父子级关系的标签 ul>li+tab

4. 兄弟级关系的标签 div+p+tab

5. 生成带有类名或者id名字 .demp+tab和#two+tab .和#号前可加上标签名，例如div#two

2. 快速生成css样式语法

3. 快速格式化代码\

VSCode右键格式化代码\

也可以设置当我们保存页面时自动格式化代码 VSCode用户设置里搜索emmet.include 在setting.json中输入

```

"editor.formatOnType":true,

"editor.formatOnSave":true,

```

# 2. 复合选择器

包括后代选择器、子选择器、并集选择器、伪类选择器

1. 后代选择器

又称为包含选择器,可以配合class来使用

```

<style>

ol li{

color:pink;

}

ol li a{

color:red;

}

.nav li a{

}

</style>

<body>

<ol>

biaoti

</ol>

<ul>

</ul>

</ul>

</body>

```

2. 子选择器

只选择某元素的最近一级

```

<style>

.hot>a{

color:red;

}

</style>

<ul>

</ul>

</div>

```

3. 并集选择器

选择多组标签，声明相同样式

```

<style>

div,

.pig li{

color:pink;

}

</style>

<body>

</ul>

</body>

```

4. 链接伪类选择器\

a:link /*选择所有未被访问的链接*/\

a:visited /*选择所以已被访问的链接*/\

a:hover /*选择鼠标指针悬停的链接*/\

a:activate /*选择鼠标按下不抬起的链接*/\

书写顺序不能颠倒\

书写顺序不能颠倒

```

<style>

a:link{

color:#333

}

a:visited{

}

a:hover{

}

a:activate{

}

</style>

<body>

</body>

```

实际开发的写法

```

color:gray;

}

a:hover{

color:red;

}

```

5. focus 伪类选择器

修改光标选中的样式

```

<style>

input:focus{

}

</style>

<body>

</body>

```

# 3. 元素显示模式

分为块元素和行内元素

## 块元素

常见块元素有

```<h123456><p><div><ul><li>```

1. 一个占一行

2. 高度，宽度，外边距以及内边距都可以控制

3. 宽度默认是父容器宽度

4. 是一个容器及盒子，里面可以放行内或块级元素

5. 文字类元素内部不能使用块级元素，比如```<p>```\

## 行内元素

有```<a><strong><b><em><i><del><span><u>等```

1. 一行多个

2. 高度宽度设置无效

3. 默认宽度就是他本身内容的宽度

4. 行内元素只能容纳文本或其他行内元素

5. 链接里面可以放块级元素

## 行内块元素

```<img />、<input />、<td>```

1. 和相邻行内元素、行内块元素在一行上，中间会有空白。

2. 高度，行高，外边距，内边距都可以控制

3. 默认宽度就是它本身内容宽度

## 显示模式转换

```

<style>

width:150px;

height:50px;

display:block;/*变为块级元素*/

}

div{

width:300px;/*改变为行内元素时，宽高设置变为无效*/

height:100px;

background-color:purple;

display:inline;

}

span{

width:300px;

height:100px;

background-color:skyblue;

display:inline-block;

}

</style>

<body>

</body>

```

# 4 CSS背景

/*默认透明*/\

background:url(images/123.png)/*默认为none，无背景图片*/\

background-repeat:no-repeat;/*不平铺，默认开启平铺*/\

background-position:x y/*改变图片在背景的位置,x为水平位置，y为垂直位置*/\

如果是x和y是方位名词，例如top、center、right 则方位名词前后顺序无关。\

如果只写一个方位名词，另一个默认为center\

精确单位和方位名词可以混用，前者一定是水平，后者是垂直\

background-attachment:scroll|fixed/*scroll背景图像随对象内容滚动，fixed背景图像固定*/\

背景合并写法 background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;\

background: transparent url(image.img) repeat-y fixed top;\

背景半透明 background: rgba(0,0,0,0.3);\

背景图片常用于logo或者一些装饰性小图片（精灵图）或超大背景图片，优点是便于控制位置

# 5 CSS三特性

1. 层叠性：样式冲突则执行覆盖的

2. 继承性：子标签继承父标签关于文字的样式\

行高的继承性

```

body{

font:12px/1.5/*子元素大小为12*1.5*/

}

```

3. 优先级：继承或*<元素选择器<类选择器，伪类选择器<ID选择器<行内样式style<!important重要的

```

color:pink!important;

```

继承的权重为0

```

<style>

#father{

color:red;

}

color:pink;

}

</style>

<body>

<p>你还是</p>/*颜色为pink*/

</div>

</body>

```

```<a>``` 超链接浏览有默认样式为蓝色下划线覆盖需要重新定义

```

/*权重虽然会叠加但不会进位*/

ul li{

color:green;

}

li{

color:red;

}

/*0010+0001=0011*/

.nav li{

color:pink;

}

<style>

<body>

</body>

```

# 6 CSS 盒子模型

CSS盒子封装HTML元素包括:边框，外边距，内边距和实际内容。

```

<style>

div{

border-width:5px;

border-style:soild;/dashed;/dotted;

boredr-color:pink;

}

</style>

```

边框的其他写法

```

border:1px soild red;/*无顺序要求*/

border-top:

border-bottom:

border-left:

border-right:

```

表格的边框应用

```

<style>

table{

width:500px;

height:249px;

}

table,

td,th{

border:1px soild pink;

border-collapse:collapse;/*重叠线条像素不叠加*/

font-size:14px;

text-align:center;

}

</style>

```

padding内边距，padding会撑大盒子原本大小

```

padding-left/right/top/bottom:20px;

padding:5px;/*上下左右各5*/

padding:5px 10px;/*上下为5 左右为10*/

padding：5px 10px 20px/*上为5 左右为10 下为20*/

padding:5px 10px 20px 30px/*上右下左*/

```

外边距

```

margin-top/bottom/left/right 简写同padding一致

```

外边距实现水平居中:

盒子必须制定宽度

盒子左右的外边距都设置为auto

一般设置为margin:0 auto;

行内元素和行内块元素水平居中，需要给其父元素添加text-align:center 即可

```

.div{

width:900px;

margin:100px auto;

text-align:center;

}

<span>里面的文字</span>

</div>

```

使用margin定义块元素垂直外边距，可能会出现外边距的合并，值会取二者之中的较大者，这种现象称为相邻块元素垂直外边距合并\

解决方案:\

可以为父元素定义上边框\

可以为父元素定义上内边距\

可以为父元素添加overflow:hidden

```

<style>

.father{

weight:400px;

height:400px;

margin-top:50px;

/*border:1px soild transparent;*/

/*padding:1px*/

overflow:hidden;

}

.son{

width:200px;

height:200px;

margin-top:100px;

background-color:pink;

}

</style>

<body>

</div>

</body>

```

清除默认内外边距

```

margin:0;

padding:0;

}

```

行内元素为了照顾兼容性，尽量仅设置左右内外边距，不要设置上下内外边距，但是转换为块元素或行内块就可以了

圆角边框,数值越大越弯曲,设置为高度的一半即可制作圆形

```

border-length:10px;

border-length:10px 20px 30px 40px;/*左上右上右下左下*/

border-top-left-length:10px;

```

边框阴影，属性顺序：水平阴影位置，垂直阴影位置，模糊距离（0位纯实阴影），阴影尺寸，阴影颜色，是否为内部阴影(outset为默认，不能写)。/*前两项属性必选*/

```

box-shadow:10px 10px 10px 10px rgba(0,0,0,.3) inset;

<style>

div:hover{

box-shadow:...;/*鼠标移动至div显示阴影*/

}

</style>

```

文字阴影,属性顺序：水平阴影位置，垂直阴影位置，模糊距离（0位纯实阴影），阴影颜色

```

text-shadow: 5px 5px 6px rgba(0,0,0,.3);

```

# 7 CSS浮动布局

浮动最典型应用在于让多个块级元素一行内排列显示。

多个块级元素纵排列用标准流，横排列用浮动。

```

<style>

.left{

float:left;

}

.right{

float:right;

}

</style>

<body>

</body>

```

浮动元素会脱离标准流位置（脱标），窗口缩小会自动换行\

任何元素都可以浮动，添加浮动后具有行内块元素相似特性。如果块级盒子没有设置宽度，默认宽度和父级一样宽，添加浮动后，大小根据内容来决定。

网页布局一般采用父级元素排列上下位置。之后内部子元素采取浮动排列左右位置。

浮动样例

```

<style>

.box{

width:1200px;

height:460px;

margin:0 auto;

}

.left{

float:left;

width:230px;

height:460px;

background-color:purple;

}

.right{

float:left;

width:970px;

height:460px;

background-color:purple;

}

</style>

<body>

</body>

```

浮动样例2

```

<style>

margin:0;

padding:0;

}

li{

list-style:none;

}

.box{

width:1226px;

height:285px;

margin:0 auto;

background-color:pink;

}

.box li{

background-color:purple;

float:left;

width:296px;

height:285px;

margin-right=14px;

}

.box .last{/*不能用.last 权重不够会被覆盖*/

margin-right:none;

}

</style>

<body>

</body>

```

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

一个盒子内的子盒子浮动，理论上其兄弟盒子也要浮动。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

## 7.1 清除浮动

额外标签法

额外标签法会在浮动元素末尾添加一个空的标签，例如<div style="clear:both"></div>。新的空标签必须是块级元素

```

<style>

.erma{

float:left

}

.clear{

clear:both;

}

</style>

<div>

</div>

```

overflow法

```

<style>

.box{/*box为父级元素,溢出部分被切除*/

overflow:hidden;

}

</style>

```

:after法是额外标签法的升级版，基本无缺点

```

<style>

.clearfix:after{

content:"";

display: block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix{/*照顾低版本IE浏览器*/

*zoom:1;

}

</style>

<body>

</body>

```

双标签:after法，最常用

```

<style>

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{

clear:both;

}

.clearfix{/*照顾低版本IE浏览器*/

*zoom:1;

}

</style>

<body>

</body>

```

CSS属性书写顺序：布局定位、自身属性、文本属性、其他属性(css3)

# 8 定位

浮动可以让多个块级盒子一行内无缝隙显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。\

定位=定位模式+边偏移\

定位模式用于指定一个元素在文档中的定位模式。边偏移则决定了该元素的最终位置。\

定位模式：static静态定位、relative相对定位、absolute绝对定位、fixed固定定位\

边偏移：top、bottom、left、right

相对定位relative是元素在移动位置的时候，相对于原来的位置来说的。

选择器{position:relative;}\

特点：原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。\

相对位置并没有脱标，典型的应用是给绝对定位当爹。

绝对定位absolute是元素在移动位置的时候，是相对于它祖先元素来说\

{position:absolute;}\

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位\

如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点。\

绝对定位不再占有原先的位置（脱标）

子绝父相，子级是绝对定位，父级要用相对定位。

1. 子级绝对定位，不会占有位置，可以放到父盒子里面任何一个地方，不会影响其他兄弟盒子。

2. 父盒子需要加定位限制子盒子在父盒子内显示

3. 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

总结:因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是相对定位。如果父元素不需要占位置，子绝父绝。

固定定位是元素固定于浏览器可视区的位置。浏览器在页面滚动时元素位置不会改变。

语法：选择器{position:fixed;}

固定定位的特点：

1. 以浏览器的可视窗口为参照点移动元素。跟父元素没有关系。

2. 不随滚动条滚动

3. 固定定位不再占有原先位置（脱标）。

固定定位-定位到版心右侧

1. 让固定定位的盒子left：50% 走到浏览器可视区一半的位置

2. 让固定定位的盒子margin-left:夺走版心宽度的一半距离

```

.fixed{

left:50%;

margin-left:400px/*版心宽度一半*/

}

```

总结：

1. 相对/绝对/固定定位：区别在于是否脱标（只有相对不脱标），坐标原点在哪（相对于自身位置/带有定位的父级/浏览器可视区域）

2. 子绝父相

定位叠放次序

使用z-index控制盒子前后次序：z-index:1;\

数值可以正数负数或0，默认为auto，即后来居上\

数字不加单位，只有定位的盒子才有z-index属性

绝对定位与固定定位实现水平居中与垂直居中（margin: 0 auto不能实现）

1. left:50%

2. margin-left:-100px;/*自身宽度一半*/

以上为水平居中，垂直居中为 top和margin-top

绝对定位和固定定位也和浮动类似：

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度

2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

3. 浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题。

4. 浮动元素会压住它下面标准流的盒子，但是不会压住下面标准流的文字。绝对定位（固定定位）会压住标准流下所有内容。浮动之所以不会压住文字，因为浮动产生的目的是为了做文字环绕效果。

网页布局总结：通过盒子模型，清楚知道大部分html标签是一个盒子。通过CSS浮动、定位可以让每个盒子排列称为网页。一个标准的网页由标准流、浮动、定位共同完成。

1. 标准流：让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

2. 浮动：让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。

3. 定位：定位最大特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局

元素显示与隐藏：类似网站广告，点击关闭不见，重新刷新页面则显示。\

display:none隐藏对象\

display:block转换为块级元素，同时显示元素。\

display隐藏元素后，不再占有原来的位置。

visibility属性用于指定一个元素应可见还是隐藏。\

visibility：visible;元素可见\

visibility：hidden;元素隐藏\

元素隐藏后继续占有原来的位置（不想要占有位置用display:none）

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）会发生什么\

visible: 不剪切内容也不添加滚动条\

hidden: 不显示超过对象尺寸的内容，超出的部分隐藏掉\

scroll:不管是否有超出内容。总是显示滚动条.\

auto:当有超出内容时，显示滚动条，无超出不显示。\

如果是有定位的盒子，慎用oveflow:hidden 因为它会隐藏多余部分。

# 9 精灵图

一个网页会应用很多小的背景图像作为修饰，浏览器单独为每个小图片发送请求，服务器会频繁接受和发送请求图片，压力过大。\

将网页中的小背景图片整合到一张大图，服务器只需要一次请求。提高页面加载速度

1. 大图片称为精灵图、雪碧图sprits

2. 移动背景图片位置，使用background-position（精确测量x y值）,一般数值为负值

字体图标的优点：轻量级，灵活性，兼容性。字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。遇到简单样式的图标用字体样式，复杂的还是需要精灵图。

字体图标网站下载

1. http://icomoon.io 追加图标使用import json文件

2. http://www.iconfont.cn/

CSS画三角

```

div{

width:0;

height:0;

line-height:0;

font-size:0;

border:50px soild transparent;

border-left-color:pink;

}

```

改变鼠标样式

```

```

cursor:pointer/move/text/not-allowed

outline:none;取消表单选中轮廓

resize:none;防止拖拽文本域

图片实现与同行文字垂直居中，默认同行为基线对准(可消除行内元素或行内块元素的底部空隙)

```

vertical-align:middle;

```

bottom/baseline/middle/top从底向上

文字单行显示加省略号

1. 强制一行内显示文本 white-space:nowrap;

2. 超出部分隐藏 overflow:hidden;

3. 文字用省略号代替超出部分 text-overflow:ellipsis;

布局技巧

1. margin给负值，相邻边框重叠

2. 鼠标经过盒子，更改盒子边框颜色，发现重叠。如果盒子没有定位，position:relative可以提升盒子层级。如果有定位，可以使用z-index

3. 文字环绕图片简单实现

```

<head>

<style>

padding:0;

margin:0;

}

.box{

width:300px;

height:70px;

margin: 0 auto;

padding:10px;

}

.pic{

float:left;

width:120px;

height:60px;

margin-right:5px;

}

.pic img{

width:100%;

}

</style>

</head>

<body>

</div>

<p>环绕图片的文字</p>

</div>

</body>

```

css三角强化

```

.box{

width:0;

height:0;

border-top:100px solid transparent;

border-right:50px solid skyblue;

}

```

或者单行写法

```

.box{

width:0;

height:0;

border-color: transparent red transparent transparent;

border-style:solid;

border-width:22px 8px 0 0;

}

```

CSS初始化

*{/*初始内外边距清零*/

margin:0;

padding:0;

}

em,i{/* 斜体变正体*/

font-style:normal;

}

li{

list-style:none;/* 去除li的小圆点*/

}

img{

border:0;/* 照顾低版本浏览器*/

vertical-align:middle;/* 取消图片底部空隙*/

}

button{

cursor:pointer;/* 鼠标经过按钮变成小手图标*/

}

color:#666;

text-decoration:none;

}

a:hover{

color:#c81623;

}

button,

input{

font-family:Microsoft YaHei;

}

body{

-webkit-font-smoothing:antialiased;/* 抗锯齿性*/

font:12px/1.5 Microsoft Yahei;

color:#666;

}

.hide,

.none{

display:none;

}

.clearfix:after{/* 清除浮动*/

visibility:hidden;

clear:both;

display:block;

content:".";

height:0;

}

.clearfix{

*zoom:1;

}

————————————————————————————————

引用：

https://www.bilibili.com/video/BV14J4114768?p=4

发表于 2021-04-26 10:46 naturesx 阅读(81) 评论(0) 编辑收藏举报

刷新页面返回顶部

CSS学习笔记

公告