PC端CSS笔记

前端小斌

已于 2022-08-26 11:03:03 修改

阅读量288

点赞数

分类专栏：前端笔记文章标签：前端 css3

于 2022-04-28 22:13:27 首次发布

本文链接：https://blog.csdn.net/weixin_50169534/article/details/123864106

版权

前端笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、CSS简介

1.1 简介

层叠样式表
网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式而最终我们能看到只是网页的最上边一层
总之一句话，CSS用来设置网页中元素的样式

1.2 什么是 CSS？

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

1.3 CSS语法

在这里插入图片描述

p {
  color: red;
  text-align: center;
}

二、CSS编写位置

2.1 行内式：（不常用）

提示：行内样式表简单编写当前样式（不常用）

<p style="color: red">

2.2 内嵌式：（练习）

提示：style 标签写在 head 标签中

<style>里面写装饰</style>

2.3 外联式：（重点）

提示：需要通过 link 标签在网页引入

<link rel="stylesheet" href="./02.css">

rel 定义当前文件与连接文档的关系，在这里“stylesheet”表示连接文档是一个样式文件
href 定义所链接外部样式文件的URL，可以是相对路径，也可以是绝对路径

三、选择器

3.1 元素选择器

作用：根据标签名来选中指定的元素
语法：标签名 {}

p{
  color: red;
}

3.2 id选择器

作用：根据元素的id属性值选中一个元素
要求：不能重复
语法：#id属性值 {}

#red{
    color: red;
}

3.3 类选择器

作用：根据元素的class属性值选中一组元素
语法：.class属性值 {}

.blue{
    color: blue;
}

3.4 通配选择器

作用：选中页面中的所有元素
语法: *属性值 {}

*{
    color: red;
}

3.5 后代选择器

作用：选中指定元素内的指定后代元素
语法: 元素1 元素2 {}

ul li {
    color: red;
}

3.6 子选择器

作用：选择亲儿子
语法; 元素1>元素2 {}

ul>li {
    color: red;
}

3.7 并集选择器

作用：同时选择多个选择器
语法：元素1,元素2 {}

div,p {
    color: red;
}

3.8 交集选择器

作用：选择同时满足多个元素
语法：选择器1选择器2 {}

p.box {
    color: red;
}

3.9 链接伪类选择器

元素1:hover {
            效果
        }
a:hover {
    background-color: red;
}

a:link 没有点击过的(访问过的)链接
a:visited 点击过的(访问过的)链接
a:hover 鼠标经过的那个链接
a:active 鼠标正在按下还没有弹起鼠标的那个链接

为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。

3.10 :focus 伪类选择器（重要）

作用：把获得光标的input表单元素选取出来,即鼠标点击哪个框，哪个框就变粉色
语法：元素:focus {}

元素:focus {
            效果
       }
input:focus {
    color: pink;
}

四、权重优先级和叠加

4.1 优先级

继承 < 通配 < 标签 <类 <id < 行内 < !important

4.2 权重叠加

选择器	权重
!important	无穷大
内联样式	1,0,0,0
id选择器	0,1,0,0
类和伪类选择器	0,0,1,0
元素选择器	0,0,0,1
通配选择器	0,0,0,0
继承的样式	没有优先级

五、CSS属性

5.1 文本颜色

语法：color：颜色值；
颜色值：英文单词、16进制、rgb(0-255,0-255,0-255) 、rgba(0-255,0-255,0-255,0-1[透明度])

5.2 文字大小

语法：font-size：字体大小；
字体大小值：px/em/rem
拓展：在浏览器中最小是12px，正常是16px

5.3 文本加粗

语法：font-weight：值；
大小值：100-900的整百、bold加粗、normal默认、lighter变细

5.4 首行缩进

语法：text-indent：值；
缩进值：数字【px/pt/em/rem】
拓展：首行缩进两格用 2em

5.5 文本水平对齐

语法：text-align：值；
对齐值：left、right、center、justify

5.6 文本字体

语法：font-family：值；
字体值：文字、英文、文字引入链接

5.7 文本垂直对齐

语法：vertical：值；
对齐值：top、buttom、center

5.8 行高

语法：line-height：值；
行高值：数字【px/pt/em/rem】

5.9 文本属性简写

语法：font: style weight size/line-height family;
必要属性：字体大小，字体样式
注意事项：

1、简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。
2、顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。

p {
	font: 20px "楷体";
}

5.10 列表属性

代码	作用	值
list-style-type	列表前的类型	circle空心圆 disc实心圆 square实心正方形 none 去除圆点
list-style-positon	位置	left/right/buttom/top/center/
list-style-image	把前面的换成图片	url(地址)
list-style	简写	list-style: type position image

六、边框和圆角

6.1 边框

语法：border: border-wdith | border-style | border-color;

属性：	作用：
border-width	定义边框粗细，单位px/百分比
border-style	solid 实线边框 dashed 虚线边框 dotted 点线边框
border-color	边框颜色 transparent透明

注意：

从上面开始沿着顺时针的方向执行如果没有值则执行对边的值如果对边也没有值则执行初始值

值的写法：

两个值分别是（上下左右）三个值分别是（上左右下）四个值分别是（上右下左）

6.2 表格的细线边框：

border-collapse: collapse;
collpase 表示合并的意思

/*
小三角的写法：
三角形大小取决于边框的粗细
*/
.box {
        width: 0;
        height: 0;
         /*兼容性*/
        line-hegiht: 0;
        font-size: 0;
         /*边框越大三角形越大*/
        border: 10px solid transparent;
        /*需要那个三角填那个方位*/
        bolder-top-color: pink;
}
.box {
  /*梯形*/
     width: 0;
     height: 0;
     /* 分别是上、右、下、左 */
     border-color: transparent  #b9b9b9 transparent transparent;
     /* 边框粗细 */
     border-width: 25px 12px 0 0;
     /* 边框样式 */
     border-style: solid;
     /* 提高权重 */
     z-index: 1;
}

6.3 圆角

语法：border-radius: 参数值px/%
拓展：

如果是正方形，想要设置一个圆，吧数值修改为高度或宽度的一半，可以写为50%或50px
如果是矩形，设置高度的一半就行
如果想要半圆需要一个矩形，高的一半，高的一半，0，0
如果想要扇形需要一个正方形，宽高的一半，0，0，0

七、背景

7.1 背景颜色

语法：background-color:背景颜色;
颜色值：颜色的英语/16进制的颜色（#fff）/rgb（255,255,255）/rgba(255,255,255,0.3)

7.2 背景图片

语法： background-image:url（路径）；
注意：默认平铺，不撑开盒子需要加宽高

7.3 背景图片平铺

语法：background-repeat:repeat repeat-x repeat-y no-repeat ；

代码	作用
repeat	默认平铺
no-repeat	不平铺
repeat-x	沿着水平
repeat-y	沿着垂直

7.4 背景图片位置

语法:background-position:2/1[px 百分比 left/right/top/bottom] ；

7.5 背景图缩放

语法：background-size：[px/cover/contain/百分比] ；

值	作用
contain	包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover	覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

7.6 背景附着

语法：background-attachment:背景附着；
附着值: fixed固定/scroll滚动

7.7 简写方式

语法：background: 背景颜色背景图片地址背景平铺背景滚动背景位置
完整写法：background:color image repeat position/size;

八、文档流

8.1 块元素（常用）

属性：display: block;
特点：

独占一行（一行显示一个）
宽高默认是父元素的宽度，高度有内容撑开
可以设置宽高
代表元素标签：div、p、h系列、ul、li、dl、dd……

8.2 行内元素（不常用）

属性：display: inline;
特点：

一行显示多个
宽度和高度默认有内容撑开
不可以设置宽高
代表元素标签：a、span、ins、strong……

8.3 行内块元素（常用）

属性：display: inline-block;
特点：

一行显示多个
可以设置宽高
代表元素标签：input、button、img（特殊情况Chrome调试工具显示inline）……

8.4 元素显示模式的转换（重要）

转换为块元素：display: block;（显示元素隐藏）
转换为行内元素：display: inline;
转换为行内块：display: inline-block;
隐藏元素：dispaly:none

九、浮动

9.1 语法

注意：

浮动元素不能通过 text-align:center或 margin:0 auto;让浮动本身元素水平居中

div {
    float: left;
}

9.2 简介

脱离标准流的控制（浮）移动到指定位置（动），俗称（脱标）
浮动的盒子不在保留原先的位置
left 左浮动、right 右浮动

9.2 浮动（float）的元素特征

浮动元素会脱离标准流简称（脱标）在标准流中不占位置。
浮动元素比标准流高半个级别，可以覆盖标准流中的元素。
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动。
浮动元素会受到上面元素边界的影响。
浮动的特点：一行显示多个可以设置宽高
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果
所以浮动为半脱标状态

十、清除浮动

10.1 直接给父元素高度（了解）

优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度，如：新闻列表，京东推荐模块

10.2 额外标签法（了解）

操作：

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

<style>
    .clear {
        clear: both;
    }
</style>

<div slass="clear"></div>

缺点：会在页面添加额外的标签，会让页面的 HTML 结构变得复杂

10.3 单伪元素清除法（常用）

操作：用伪元素代替了额外标签

.clearfix::after{	
    /*伪元素必加条件*/				
    content: ' ';	
    /*转换为块级元素*/			
    display: block;	
    /*清除浮动*/			
    clear: both;	
    /*补充写法：在网页中看不到伪元素*/			
    height: 0;
    /*隐藏元素占位置*/
    visibility: hidden;
}
/*兼容性*/
.clearfix {
    *zoom: 1;
}

优点：直接给要清除的元素加类就行

10.4 双伪元素清除法（最常用）

.clearfix::backdrop,	
.clearfix::after {	
            /*转换为块级元素*/
            content: '';	
            /*转换为块级元素*/	
            display: table;	
 }				
.clearfix::after {	
          /*清除浮动*/
         clear: both;		
}	
/*兼容性*/
.clearfix {
    *zoom: 1;
}

优点：项目中使用，直接给标签加类即可清除浮动。

10.5 清楚浮动(overflow）

给父元素添加overflow属性，将属性值设置为hidden ， auto，或scroll

.box {
    overflow: hidden;
}

优点：使用方便。

十一、盒子模型

11.1 CSS3 盒子模型

CSS3 中可以通过 box-sizing 来指定盒子模型，有两个值 centent-box、border-box、这样我们计算盒子大小的方式就发生了改变
可以分两种设置:

centent-box 默认撑大
border-box 盒子原来大小

前提是不让 padding 和 border 不会撑大盒子

div {
    width: 100px;
    height: 100px;
    background: red;
    padding: 10px;
    border: 5px solid #ccc;
    /*不撑大盒子*/
    box-sizing: border-box;
}

11.2 内边距

用法：内间距padding用在文字或内容间使用
语法：padding: 值;
边距值：px/%/方位词
属性：

padding-left 左内边距
padding-right 右内边距
padding-top 上边距
padding-bottm 下边距

注意：padding 会撑开盒子
如果盒子没有指定 width/height 属性，则 padding 不会撑大盒子

11.3 外边距margin盒子于盒子间使用

属性：

margin-left 左内边距
margin-right 右内边距
margin-top 上边距
margin-bottm 下边距

上下取最大，左右取和，解决方法避免，只写一个 margin

外边距可以让块级盒子水平居中的两个条件：

盒子必须指定了宽度（width）。
盒子左右的外边距都设置为 auto 。

语法：

margin: 0 auto;

塌陷解决方案：

可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加 overflow:hidden
清除浮动

十二、定位

12.1 相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动（不脱标）
代码：position: relative;
特点：

需要配合方位属性实现移动
相对于自己原来位置进行移动
在页面中占位置，没有脱标

应用场景：

配合绝对定位组CP（子绝父相）
用于小范围的移动

12.2 绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动（脱标）
代码：position:absolute;
特点：

需要配合方位属性实现移动
默认相对于浏览器可视区域进行移动
在页面中不占位置，以脱标。

应用场景：

配合绝对定位组CP（子绝父相）

拓展：让绝对定位水平居中

left:50% 让盒子左移动到父元素的水平位置
margin-left 父元素的一半

12.3 子绝父相水平居中写法

方法一：

先让子盒子往右移动父盒子的一半 left: 50%;
再让子盒子往左移动自己的一半 transform: translatex(-50%);

方法二：

先让盒子往右移动父盒子的一半 left：50%；
在让盒子往左移动自己的一半 margin-left：50%；

方法三：

设置方位偏移值top/right/bottom/left
设置外边距 margin：auto；

12.4 固定定位

介绍：死心眼定位，相对于浏览器进行移动。（脱标）
代码：position: fixed;
特点：

需要配合方位属性实现移动
相对于浏览器可视化区域进行移动
在页面中不占位置，以脱标

应用场景

让盒子固定在屏幕中的某个位置

固定定位 fixed 固定在版心右侧

让笃定定位的盒子 left:50% 走到浏览器的一半
让盒子 margin-left 版心的一半

12.5 不同布局方式元素层级关系

标准流 < 浮动 < 定位
不同定位之间的层级关系：

相对，绝对，固定默认层级相同
此时HTML中写在下面的元素层级更高，会覆盖上面的元素

12.6 更改定位元素层级

场景：改变定位元素的层级
属性名：z-index
属性名：数字
数字越大，层级越大

div {
    float: left;
    z-index: 1;
}

前端小斌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PC端CSS笔记

一、CSS简介1.简介层叠样式表网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式而最终我们能看到只是网页的最上边一层总之一句话，CSS用来设置网页中元素的样式2.什么是 CSS？CSS 指的是层叠样式表* (Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中3.CSS语法p { color: red; t
复制链接

扫一扫