CSS学习笔记

1. CSS介绍

CSS：层叠样式表
CSS作用：给页面HTML标签设置样式

2. CSS引入方式

A. 内嵌式

CSS写在style标签中
style标签通常写在head标签中

B. 外联式(常用)

CSS写在一个单独的.css文件中
通过link标签引入网页中

C. 行内式(常配合JS使用)

CSS直接写在标签的style属性中

3. 选择器

A. 标签选择器

写法： 标签名{CSS属性名: 属性值;}

1	`示例： p {color: red;}`

标签选择器选择一类标签中的所有，而不是单独某一个

B. 类选择器

写法：.类名{CSS属性名: 属性值;}

1 2	`.red{color: red;} .size{font-size: 88px;}`

<body>
    <p>一段话</p>
    <p class="red size">红且变大</p>
    <div class="red">也变红</div>
</body>

注意：

类名由数字、字母、下划线和中划线组成，但不能以数字或中划线开头。
一个标签可以同时有多个类名，类名之间以空格隔开

C. ID选择器

写法： #ID属性值{CSS属性名: 属性值;}

1	`#blue{color: blue;}`

1	`<div id="blue">我是blue</div>`

注意：

id属性值在一个页面是唯一的，不可重复！
一个标签只能有一个id属性值，是一对一的

D. 通配符选择器

写法： *{CSS属性名：属性值;}
作用：对页面中所有标签设置相应样式

4. 字体样式

A. 属性

属性名	属性值	作用
font-size	数字+px	字体大小
font-weight	100~900整百数	字体粗细
font-style	normal/italic	字体是否倾斜
font-family	微软雅黑/宋体/等等	字体系列

p{ font-size: 30px;
   font-weight: 900;
   font-style: italic;
   font-family: 宋体;}

1	`<P>这是一段30像素、加粗、倾斜的宋体文字</p>`

B. 样式的层叠性

给同一个标签设置相同属性，样式会层叠，最下面的生效

p{
    color: red;
    color: blue;
}

此时blue样式生效，red样式不生效。

C. font的复合属性

写法: font: style weight size family;

1
2
3

例：
p{font: italic 700 50px 宋体;}
p{font: 100px 微软雅黑;}

**注意：**只能省略前两个(style和weight)，size和family必须存在

5. 文本样式

属性名	作用	取值
text-indent	文本缩进	数字+px; 数字+em(1em=1个字的大小)
text-align	文本水平对齐	left, center, right(左中右)
text-decoration	文本修饰	underline:下划线(常用) none:无装饰线(常用) line-through:删除线 overline:上划线
line-height	行高	数字+px; 倍数(当前font-size的倍数)

6. 标签水平居中

让div、p、h等标签大盒子水平居中

1	`margin: 0 auto;`

7. 选择器进阶

A.复合选择器

1. 后代选择器
根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
语法：选择器1 选择器2{css}

1	`div p{color: red;}`

1
2
3

<div>
    <p>这是div的儿子p</p>
</div>

2. 子代选择器: >
根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
语法： 选择器1>选择器2{css}

1	`div>a{color: red;}`

<div>
    父级
    <a href="#">这是div里面的a</a>
    <p><a href="#">这是div中p的a</a></p>
</div>

B. 并集选择器

同时选择多组标签，设置相同的样式
语法： 选择器1,选择器2{css}

1	`p,div,span,h1{color: red;}`

<P>p标签</p>
<div>div</div>
<span>span</span>
<h1>h1</h1>

C. 交集选择器

选中页面中同时满足多个选择器的标签
语法： 选择器1选择器2{css}

1	`p.box{color: red;}`

1
2
3

<p class="box">这是p标签：box</p>
<p>p标签</p>
<div class="box">这是div标签：box</div>

D. hover伪类选择器

选中鼠标悬停在元素上的状态，设置样式
语法： 选择器:hover{css}

a:hover{
    color: red;
    background-color: green;
}

1	`<a href="#">超链接</a>`

8. 背景相关属性

A. 属性

属性名	作用	取值
background-color	背景颜色	关键字，rgb法，rgba法等
background-image	背景图片	background-image: url(‘图片路径’);
background-repeat	背景平铺	repeat:水平垂直都平铺(默认) no-repeat:不平铺 repeat-x:水平方向平铺 repeat-y:垂直方向平铺
background-position	背景位置	background-position:水平方向位置垂直方向位置;

B.背景相关属性的连写形式

写法：background: color image repeat position

1	`background: pink url(./image/1.jpg) no-repeat center bottom;`

9. 元素显示模式

A. 块级元素

独占一行
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高

代表标签：div、p、h、ul等

B. 行内元素

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高

代表标签：a、span、b、u等

C. 行内块元素

一行可以显示多个
可以设置宽高

代表标签: input、textarea、button、select等

D. 元素显示模式转换

改变元素默认的显示特点，让元素符合要求

属性	效果
display:block	转为块级元素(常用)
display:inline-block	转为行内块元素(常用)
display:inline	转为行内元素

E. HTML嵌套注意

块级元素一般作为大容器，可以嵌套其他元素
但：p标签不能嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
但：a不能套a标签

10. CSS特性

A. 继承性

子元素有默认继承父元素样式的特点；但如果自己本身有相应的属性，就不会继承父元素的属性

1	`div{color: red;}`

<div>
    这是div标签中的文字
    <span>这是div中span的字,此时span中的字也变红</span>
</div>

B. 层叠性

给同一个标签设置不同样式时，样式会叠加
给同一个标签设置相同样式时，样式会覆盖掉，以最后样式生效

C. 优先级

下面介绍

11. CSS的优先级

定义：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级大小：
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important

12. 优先级的权重叠加计算

如果是复合选择器，需要通过权重叠加计算方法判断最终哪个选择器优先级最高最终生效。
公式：(0,0,0,0)==>(第一级,第二级,第三级,第四级)
复合选择器中：(行内样式个数,id选择器个数,类选择器个数,标签选择器个数)

比较规则：
从第一级开始比较，若能比较出来，则完成；否则继续下一级的比较；以此类推
例如：(1,0,0,0)>(0,2,0,0)>(0,1,0,1)>(0,0,5,0)

注意：

记住:(行内,id,类,标签)
!important永远是最高优先级，继承最低

div #one{color: orange;}
.father .son{color: skyblue;}
.father p{color: purple;}
div p{color: pink;}

1
2
3

<div class="father">
    <p class="son" id="one">猜我的颜色</p>
</div>

由于(0,1,0,1)>(0,0,2,0)>(0,0,1,1)>(0,0,0,2);所以最终orange颜色生效。

13. 盒子模型

盒子就是标签
每个盒子由内容区域(content)、内边距区域(padding)、边框区域(border)和外边距区域(margin)构成

A. 内容区域的宽度和高度

使用width和height属性设置盒子内容区域的大小

B. 边框区域

属性使用border;
语法： border: 粗细线条种类颜色;
例子：border: 10px solid #000;

C. 内边距区域

padding属性可以当作复合属性使用

一值(上下左右)： padding: 50px;
二值(上下左右)： padding: 10px 80px;
三值(上左右下): padding: 10px 20px 50px;
四值(上右下左): padding: 10px 20px 40px 80px;

D. 外边距区域

使用margin属性，与padding属性使用方式一样

E. 清除默认内外边距

使用以下方式：

*{
    margin:0;
    padding:0;
}

F. 版心居中

网页的有效内容在网页居中
使用：margin: 0 auto;

14. 结构伪类选择器

根据元素在HTML中的结构关系查找元素

选择器	说明
E:first-child{}	匹配父元素中第一个子元素，且是E元素
E:last-child{}	匹配父元素中最后一个子元素，且是E元素
E:nth-child(n){}	匹配父元素中第n个子元素，且是E元素
E:nth-last-child(n){}	匹配父元素中倒数第n个子元素，且是E元素

<ul>
    <li>第1个li元素,我会变绿吗</li>
    <li>第2个li元素</li>
    <li>第3个li元素,我会变黄吗</li>
    <li>第4个li元素,我会变红吗</li>
    <li>第5个li元素,我会变蓝吗</li>
</ul>

li:first-child{background-color: green;}
li:last-child{background-color: blue;}
li:nth-child(4){background-color: red;}
li:nth-last-child(3){background-color: yellow;}

15. 伪元素

元素：HTML设置的标签
伪元素：由CSS模拟出的标签效果

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意： content属性必须有，否则不生效

.father::before{
    content: '我爱';
    color: blue;
}
.father::after{
    content: '呀';
}

1	`<div class="father">喝开水</div>`

16. 浮动(不够详细)

用作网页布局

.content{
    width: 1226px;
    height: 460px;
    background-color: green;
    margin: 0 auto;
}
.left{
    width: 234px;
    height: 460px;
    background-color: blue;
    float: left;
}
.right{
    width: 992px;
    height: 460px;
    background-color: red;
    float: left;
}

<div class="content">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

17. 清除浮动

清除浮动给其他元素带来的影响

A. 额外标签法

在父元素内容的最后添加一个块级元素
给添加的块级元素设置： clear: both;

B. 单伪元素清除法(推荐)

用伪元素替代了额外标签
写法1：

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

写法2(用于解决浏览器兼容性)：

.clearfix::after{
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

C. 双伪元素清除法(推荐)

写法：

.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
}
.clearfix::after{clear:both;}

D. overflow法(推荐)

给父元素加上：overflow:hidden;

18. 定位

A. 定位的作用

让元素自由的摆放在网页的任意位置，一般用于盒子间的层叠情况

B. 定位的基本使用

(1) 定位方法
属性名：position

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

(2) 偏移值

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

19. 元素层级

A. 不同布局方式元素的层级关系

标准流<浮动<定位

B. 不同定位之间的层级关系

相对、绝对和固定默认层级相同
HTML写在后面的元素层级更高

20. 装饰

A. 垂直对齐方式

属性名: vertical-align

属性值	效果
baseline	默认
top	顶部对齐
middle	中部对齐
bottom	底部对齐

B. 光标类型

设置鼠标移动到元素上显示的样式
属性名: cursor

属性值	效果
default	默认，箭头
pointer	小手效果，可以点击
text	工字型，可以选择文字
move	十字光标，可以移动

C. 边框圆角

盒子的四个角变得圆润
属性名： border-radius
取值：数字+px，百分比

画一个正圆
- 盒子必须是正方形
- 设置border-radius: 50%;
胶囊按钮
- 盒子必须是长方形
- 设置border-radius: 盒子高度的一半

D. overflow溢出显示效果

解决溢出部分问题，溢出指盒子内容部分超过盒子的内容区域。
属性名： overflow

属性值	效果
visible	默认，溢出部分可见
hidden	溢出部分隐藏
scroll	显示滚动条
auto	自动显示或隐藏滚动条

E. 元素显示隐藏

让某元素本身在屏幕不可见
属性： visibility:hidden或display:none

F. 元素透明度

让元素整体变得更透明
属性名： opacity
属性值： 0~1之间的数字

1：完全不透明
0：完全透明

前端

#学习 #前端 #CSS

Markdown简单学习笔记上一篇

HTML学习笔记下一篇