前端-css

小毅西

已于 2023-08-23 22:02:01 修改

阅读量37

点赞数

文章标签：前端 css tensorflow

于 2023-08-23 12:18:34 首次发布

本文链接：https://blog.csdn.net/weixin_48605536/article/details/132447556

版权

1.CSS三种引入

行内样式表

就是将 CSS 代码放置在 HTML 代码内部

<a href="#" style="color:blue;font-size:16px;">hello Html</a>

特点：

与html高耦合，不利于后期维护
可以单独定义某个元素的样式
优先级高，不推荐

内部样式表

内部样式表也称为内嵌样式表，是指 CSS 代码内嵌到 HTML 代码中

二者处于同一个文件中，通常 CSS 代码放置在 HTML 代码的标签内部。

<head>    
<meta charset="UTF-8">      
 <title>内部样式</title>  
  <style>        
div {            
   width: 100px;           
   height: 100px;            
   background-color: red;      
  }   
 </style>
</head>
<body>              
    <div>    
    </div>
</body>

特点：

写在<head>标签中，一定程度把CSS代码于HTML代码进行了分离
无法应用于其他HTML文件，实现样式复用
优先级低于行内样式表

外部样式表

外部样式表是指 CSS 代码完全独立出来，单独放置在扩展名为.css 的文件中，在 HTML文件中，将 CSS 文件引入进来，形成关联

<head>

<title>Document</title>

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

</head>

rel 属性：声明被链接文档与当前文档的关系，必写
type 属性：被链接文档的类型，可写
href 属性：被链接文档的地址，必写。

特点：

与内部样式表一样，写在<head>标签
实现了CSS代码与HTML代码的彻底分离，方便复用，与后期维护
优先级低于内部样式
开发推荐

CSS优先级

行级样式表>内部样式表>外部样式表

2.CSS选择器

CSS选择器是指对CSS选择要修饰的元素

通用选择器

写法：* { }

作用：选中页面中的所有标签，一般用于定义最通用的属性，设置默认值

优先级：最低

标签选择器

写法：HTML标签名 { }

作用：选择页面中所有的对应标签

优先级：高于通用选择器

类选择器

写法：.类 { }
调用：在需要改变的样式的标签上，使用class="选择器名称"调用对应选择器

作用：修改所有调用选择器的标签

优先级：高于标签选择器

注意：

类名称是可以随意取名的，但是不能以数字开头
类名称表示一定意义
当页面需要对多个元素应用相同样式，则采用类选择器
类选择器可以应用不同标签

ID选择器

写法：#id名称{ }
作用：在需要改变样式的标签上，使用id="选择器名称"调用对应选择器

优先级：大于类选择器

注意：

id是唯一的，同一页面不能出现多个相同的id定义
id名称要求与类选择器相同
通常当页面中有唯一样式时，采用id选择器

后代选择器

写法：选择器1 选择器2 选择器3 .... { }div .li { }
class="li"可以是div的子代，也可以是后代

子代选择器

写法：选择器1>选择器2>选择器3....{ }div>ul { }
ul必须是div的直接子代，孙代以后不选中

交集选择器

写法：选择器1选择器2....{ }
选择器之间没有分隔符

元素必须同时具备选择器1&选择器2...才生效

并集选择器

写法：选择器1,选择器2,....{ }
选择器之间用逗号分隔

元素只要具备选择器1或者选择器2...即可生效

伪类选择器

写法：选择器名称:伪类状态{ }
伪类状态：

link未访问状态
visited已访问状态
hover鼠标指向时，即悬停在元素上方时
active激活选定状态(鼠标点下去没松开)
focus获得焦点时，(input常用)

超链接多种伪类共存时的顺序如下：

link---->visited---->hover----> active

选择器的优先级

第一原则“近者优先”，最内层选择器永远比外层优先
当作用于同一层时，可以根据选择器优先级权重进行计算
当优先级权重完全相同时，写在后面的选择器覆盖前面的选择器
!important 将当前CSS语句提升至最高权重，不推荐使用

3.CSS常用文本属性

字体

font-family：字体族，设置字体
font-style：设置字体样式，常用属性：正常normal 斜体italic

font：缩写形式
缩写形式：

font-style、font-weight、font-size/line-height、font-family

字体样式、字体粗细、字号/行高、字体族

注意：

使用时必须严格按照上述顺序
多个样式之间用空格分隔，且font-size/line-height 必须作为一对，用/分隔
font-size 和font-family 必须指定,其他样式不指定将采用默认样式

字号

font-weight：设置字体粗细， bold加粗，lighter细体，或者填写100~900 (400为正常，700为加粗)

font-size：设置字体大小，属性值通常为px或%，大多数浏览器默认16px

字体颜色

color 设置字体颜色

直接写颜色的英文名
十六进制写法
rgb写法

opacity设置透明度

注意：

使用opacity时当前元素以及子元素均会透明；

而使用rgba调整时，只会使当前元素透明，不会改变子元素透明度

文本属性

line-height

属性值表达：

像素单位
纯数值，正常行高的倍数
百分数，正常行高的百分数

案例：

height:50px line-height:50px

设置行高等于高度，则当前元素中文字垂直居中

text-align 设置块级元素中文字的水平对齐方式

letter-spacin设置字符间距，即字与字之间的间距

text-decoration文本修饰属性

属性：

underline 下画线
line-through 删除线
overline 上画线
none 不做修饰

overflow（overflow-x和overflow-y）控制超出范围文本的显示方式

属性：

auto 自动显示
scroll 始终显示滚动条
hidden 超出范围文本隐藏，可以通过overflow-x和overflow-y分别设置水平催着方向的隐藏

text-overflow 设置多余文字的显示方式

属性：

clip 裁剪文本
ellipsis 使用省略号代替多余文字

white-space设置元素内的空白符怎样处理

属性：

normal 默认，空白被忽略
nowrap 设置中文行末不断行显示
pre 空白被保留

案例：

如何让每行多余文字显示省略号？

white-space:nowrap; 如果是中文，需设置行末不断行 overflow:hidden; 设置控件超出范围text-overflow:ellipsis; 设置多余文本省略号显示

text-shadow 可对文本同时设置多个阴影，每个阴影效果之间以逗号分隔开

水平阴影距离必写数值越大阴影右移
垂直阴影距离必写数值越大阴影下移
阴影模糊距离可写数值越大阴影模糊
阴影颜色可写默认黑色

text-indent 首行缩进，可以使用像素值调整段落文字的首行缩进大小

text-indent:32px; // 首行缩进 32px，默认字体大小 16px 的情况下，将首行缩进两个字

text-stroke设置文字描边

超链接样式属性

a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被单击的链接 */

4.CSS过渡与变换

transition:过渡属性

简写顺序：property、duration、timing-function、delay

属性介绍：

ease：（逐渐变慢）默认值。
linear：（匀速）。
ease-in：（加速）。
ease-out：（减速）。
ease-in-out：（加速然后减速）。

transform:变化属性

transform定义元素向2D或3D变化

transform-origin改变转换元素位置

transform-origin 设置旋转元素的基点位置，2D 转换元素可以改变元素的 X 轴和 Y 轴

对于 3D 转换元素还可以更改元素的 Z 轴。

属性值：

x-axis，可以使用的值有：left、right、center、**px、百分比
y-axis，可以使用的值有：left、right、center、**px、百分比
z-axis，可以使用的值有：**px

5.CSS动画

@keyframes创建关键帧动画

基础语法：

@keyframes 动画名称{ 阶段 1{CSS 样式} 阶段 2{CSS 样式} 阶段 3{CSS 样式}}

二种写法

每一个阶段用百分比表示
使用from和to表示从某阶段到某阶段

使用animation调用关键帧动画

div{
/* 让 div 调用这个关键帧动画，5s 完成所有动画效果*/ animation: 动画名称 5s;
}

属性：

animation 简写属性
animation-name 规定动画名称
animation-duration 规定完成动画的时间
animation-timing-function 规定动画的速度曲线
animation-delay 规定动画何时开始
animation-iteration-count 规定动画播放次数
animation-direction 规定动画算法反向播放
animation-play-state 规定动画算法是否运行
animation-fill-mode 规定对象动画时间之外的状态

6.盒子

content 内容

padding 内边距

border 边框

margin 外边距

标准盒模型

一个元素所占据的总宽度= width + padding（左右）+ border（左右）+ margin（左右）

IE盒模型

一个块元素的总宽度= width + margin（左右）（即 width 已经包含了 padding 和 border）

切换盒模型

设置box-sizing

content-box 采用标准模式，默认
border-box 采用怪异模式

7.盒属性

margin外边距

属性

简写形式的 margin 可以有 1～4 个值。

写一个数值：上、下、左、右四个方向数值相等。

写两个数值：第一个数等于上下外边距，第二个数等于左右外边距。

写三个数值：上、右、下边距，左边默认等于右边。

写四个数值：上、右、下、左 4 个方向的边距。

当设置 margin: 0 auto; 时，代表块级盒子在父容器中水平居中。

结论：水平排放的盒子，水平间距是 margin 的累加

结论：垂直排放的盒子，垂直间距是合并的(去最大值)

解决方法：

父盒子添加 overflow：hidden
父盒子添加 padding
父盒子添加 border

border边框

属性：

border-style 为元素设置边框的样式
border-width 为元素的边框设置宽度
border-color 设置四条边框的颜色
border 简写，无序

overflow内容溢出控制

属性：

Visible（默认值）：内容不会被修剪，会呈现在元素框之外
auto：根据内容多少选择显示滚动条，文字多的时候显示滚动条。
scroll：无论文字多少，都会显示垂直和水平两个滚动条。
hidden：超出区域的文字直接隐藏，无法看到

outline外围线

外围线的属性写法与边框相同

外围线不会占用空间，会盖住周围的文字

box-shadow盒子阴影

属性：

X 轴阴影距离：必写，可正可负，正值右移，负值左移。
Y 轴阴影距离：必写，可正可负，正值下移，负值上移。
阴影模糊半径：可写，只能为正，默认值为 0。数值越大，阴影越模糊。
阴影扩展半径：可写，可正可负，默认值为 0。数值增大，阴影扩大；数值减小，阴影缩小。
阴影颜色：可写，默认为黑色。
内外阴影：可写，可选值：inset（内阴影），不选默认为外阴影。

border-radius边框圆角

属性值

border-radius: 40px 30px 20px 10px/40px 30px 20px 10px

代码含义：

“/”前后各有四个值，依次对应的是左上角、右上角、右下角、左下角。

而“/”前表示四顶点沿 X 轴移动的距离，

“/”后表示四顶点沿 Y 轴移动的距离。

border-image图片边框

图片路径（border-image-source）
图片切片宽度（border-image-slice）
边框宽度（border-image-width）
图片重复方式（border-image-repeat）
简写方式（border-image）

8.浮动

float 属性使元素脱离了常规文档流而表现为向右或向左浮动，由于浮动的元素不在文档流中，所以在文档流中浮动的元素就像不存在一样，其周围的元素也会重新排列。

属性：

left
right
none

clear清楚浮动

对不想浮动的元素使用

浮动只能打破文档流，不能打破文字流，所以文字不会动

属性：

left
right
both

子盒子浮动造成父盒子高度塌陷

解决方法：

在父元素中添加一个新的元素，为新元素设置 clear:both
为父元素添加 overflow: hidden 属性
为父元素添加伪类：after，对伪类设置 clear:both

9.定位

属性：

relative 相对定位
absolute 绝对定位
fixed 固定定位
static 没有定位，默认

以上三种定位方式均使用 top、left、bottom、right 调整位置。

当 left 和 right 同时存在，left 生效；当 top 和 bottom 同时存在，top 生效。

relative相对定位

相对于自己原来在文档流中的位置定位，当不指定 top、left 等定位值时，不会改变元素位置。
相对定位元素仍会占据原有文档流中的位置，而不会释放。

absolute绝对定位

相对于第一个非 static 的祖先元素（即使用了 relative、absolute、fixed 定位的祖先元素）进行定位。
如果所有祖先元素均未定位，则相对于浏览器左上角定位。
使用 absolute 的元素会从文档流中完全删除，原有空间释放不再占据。

fixed固定定位

固定定位是一种特殊的绝对定位，它与普通绝对定位的区别是无论父元素是否定位，子元素如果采用固定定位，都将相对于浏览器左上角定位，且固定在指定位置，不随浏览器滚动条的滚动而滚动。

使用定位实现元素的绝对居中

前提：块级元素

设置父子均为定位元素
对子元素设置

10.z-index

作用：设置定位元素的层叠顺序

使用要求

必须是定位元素
需要考虑父容器的约束

如果父容器没有设置z-index或者设置为 z-index:auto，则子容器不受约束

如果父容器设置了z-index，则子容器层叠顺序以父容器z-index为准

（此时子元素的z-index只能调整自己与其他子元素之间的层叠顺序）

z-index:auto与z-index:0的异同

z-index:auto与z-index:0处于同一平面

z-index:auto不会约束子元素的层次

z-index相同（处于同一平面的定位元素）的层叠关系

后来者居上，即写在后面的元素在上一层

11.网页布局

网页布局方式

固定布局
流体布局
弹性布局

响应式的实现方式

响应式布局没有固定的要求，只要能实现计算机站与手机站的不同效果显示，都可以称为响应式网站。

媒体查询
流体布局
弹性布局
通过 JavaScript、JQuery 进行判断来显示不同的布局页面
Bootstrap 等第三方框架。

固定布局概念

固定像素

假定使用1024px*768px分辨率

流体布局概念

固定百分比宽度

弹性布局详细

基本概念

容器与项目

容器（box）：需要添加弹性布局的父元素

项目（item）：弹性布局容器中的每一个子元素，成为项目

主轴与交叉轴

主轴：在弹性布局中，通过属性规定水平或垂直方向为主轴

交叉轴：与主轴垂直的另一方向，称为交叉轴

注意：

给父容器添加 display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式
容器添加弹性布局后，仅仅是容器中的项目采用弹性布局，而容器本身在文档流中的定位方式依然遵循常规文档流
display:flex; 容器添加弹性布局后，显示为块级元素。
display:inline-flex; 容器添加弹性布局后，显示为行级元素。
将父容器设为弹性布局后，子项目的 float、clear 和 vertical-align 属性将失效，但position 属性依然生效。

未添加弹性布局将采用常规文档流
添加弹性布局将打破常规文档流，不再按照常规文档流的上下排列，默认成了一行显示

作用于容器的属性

flex-direction主轴方向(项目排列方向)

属性：

row（默认值）主轴为水平，方向从左到右
row-reverse 主轴为水平，方向从右到左
column 主轴为垂直，方向从上到下
column-reverse 主轴为垂直，方向从下到上

flex-wrap控制换行

属性：

nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度。
wrap：换行显示，并且第一行在容器最上方。
wrap-reverse：换行显示，并且第一行在容器最下方。

flex-flow缩写形式

该属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap

justify-content主轴对齐

规定项目在主轴线上的对齐方式

flex-start（默认值）：项目位于主轴起点。
flex-end：项目位于主轴终点。
center：居中。
space-between：两端对齐，项目之间的间隔都相等（开头和最后的项目，与父容器边缘没有间隔）。
space-around：每个项目两侧的间隔相等。同时项目之间的间隔比项目与边框的间隔大一倍（开头和最后的项目，与父容器边缘有一定的间隔）

align-itmes交叉轴单行对齐

属性：

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
baseline：根据项目的第一行文字的基线对齐（文字的行高、字体大小会影响每行的基线）。
stretch（默认值）：如果项目未设置高度或设为 auto，则将占满整个容器的高度。

align-content交叉轴多行对齐

该属性规定每一行或每一列在另一方向上的对齐方式，即主轴在交叉轴的对齐方式。只有一行或一列时，该属性无效

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：如果项目未设置高度或设为 auto，则将占满整个容器的高度（占满整个交叉轴）。

作用于项目的属性

order项目排序

该属性规定项目的排列顺序，使用整数设置，数值越小越靠前，可以为负值。

未设置的项目默认为0

flex-grow项目放大比

该属性规定项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

第一个子项目设置flex-grow：1，其他为0，则第一个子项目占据剩余空间

flex-shrink项目缩小比

属性规定项目的缩小比例，默认为 1，即父容器宽度不足，子项目将缩小

第一个子项目设置flex-shrink：0，其他为2，则第一个子项目不被压缩，其他子项目压缩更严重

flex-basis伸缩基准值

如果主轴为水平，则设置这个属性后，相当于设置了项目的宽度，原宽度将失效。

flex缩写形式

该属性是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 flex:0 1 auto。

后两个属性可选，除默认值外，还有 none（0 0 auto）和 auto（1 1 auto）两个快捷设置值。

align-self自身对齐

属性定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的 align-items 属性

查看更多作品

了解更多知识查看w3school官方

小毅西

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端-css

就是将 CSS 代码放置在 HTML 代码内部。
复制链接

扫一扫