java之学习记录 3 - 1 - css部分记录

最新推荐文章于 2024-01-23 18:29:53 发布

dear_Zzzx

最新推荐文章于 2024-01-23 18:29:53 发布

阅读量90

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/dear_zx/article/details/111263354

版权

html 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

css

4 篇文章 1 订阅

订阅专栏

css引入方式：

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

@import url(css/test01.css);

加载顺序不同
- @import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面。
- 如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面；
@import方式导入css样式，它是不支持javascript的动态修改的。而link支持。

css伪类：

CSS伪类可对css的选择器添加一些特殊效果

伪类属性列表：
- :active 向被激活的元素添加样式。
- :hover 当鼠标悬浮在元素上方时，向元素添加样式。
- :link 向未被访问的链接添加样式。
- :visited 向已被访问的链接添加样式。
- :first-child 向元素的第一个子元素添加样式。

超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

背景属性（部分记录）：

background-attachment 背景图像是否固定或者随着页面的其余部分滚动
- 默认值是 scroll：默认情况下，背景会随文档滚动
- 可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像

background-attachment: fixed;

列表属性：

CSS列表属性作用如下：
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
有两种类型的列表：(list-syle-type)
- 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
- 有序列表 - 列表项的标记有数字或字母使用CSS，可以列出进一步的样式，并可用图像作列表项标记。
  - none：无标记。（去除标记）
  - disc：默认。标记是实心圆。
  - circle：标记是空心圆。
  - square：标记是实心方块。
  - decimal：标记是数字。
  - decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)
  - lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)
  - upper-roman：大写罗马数字(I, II, III, IV, V, 等。)
  - lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
  - upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)

边框属性：

border-style取值：

轮廓属性：

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓和边框的区别：
- 边框 (border) 可以是围绕元素内容和内边距的一条或多条线；
- 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

盒子阴影：

box-shadow：1 2 3 4 5;
- 1：水平偏移
- 2：垂直偏移
- 3：模糊半径
- 4：扩张半径
- 5：颜色

渐变：

background:linear-gradient([方向/角度]，颜色列表)；

[]内可省略

<style>
div{
    width: 200px;
    height: 60px;
    margin: 10px;
}
.a1 {
    background: linear-gradient(red,black);
}
.a2 {
    background: linear-gradient(red,black,pink, green);
}
.a3 {
    background: linear-gradient(to left,red,black);
}
.a4 {
    background: linear-gradient(to top left,red,black);
}
.a5 {
    background: linear-gradient(30deg,red,black);
}
</style>
<body>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
    <div class="a4"></div>
    <div class="a5"></div>
</body>

径向渐变：以圆心向外发散

background: radial-gradient(颜色列表);

<style>
div {
    width: 200px;
    height: 200px;
    margin: 10px;
}
.a1 {
    background: radial-gradient(red, black);
}
.a2 {
    background: radial-gradient(red, black, pink, green);
}
.a3 {
    border-radius: 50%;
    background: radial-gradient(red, black);
}
</style>
<body>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
</body>

背景位置：

background-origin：指定了背景图像的位置区域

border-box : 背景贴边框的边
padding-box : 背景贴内边框的边
content-box : 背景贴内容的边

<style>
div {
    background: url("img/1.jpg") no-repeat;
    width: 200px;
    height: 80px;
    margin: 20px;
    border: 10px dashed black;
    padding: 20px;
}
.a {
    background-origin: border-box;
}
.b {
    background-origin: padding-box;
}
.c {
    background-origin: content-box;
}
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>

背景裁剪：

background-clip:
- border-box 边框开切
- padding-box 内边距开切
- content-box 内容开切

<style>
div {
    width: 200px;
    height: 80px;
    border: 10px dashed red;
    background-color: darkcyan;
    margin: 20px;
    padding: 20px;
}
.a {
    background-clip: border-box;
}
.b {
    background-clip: padding-box;
}
.c {
    background-clip: content-box;
}
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>

背景大小：

background-size:
- cover 缩放成完全覆盖背景区域最小大小
- contain 缩放成完全适应背景区域最大大小

<style>
div {
    background: url("img/1.jpg") no-repeat;
    width: 200px;
    height: 100px;
    border: 2px solid red;
    margin: 20px;
}
.a {
    background-size: cover; /* 完全覆盖 */
}
.b {
    background-size: contain; /* 完全适应 */
}
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>

过渡动画：

1、过渡：

从一个状态到另一个状态，中间的“缓慢”过程；
缺点是，控制不了中间某个时间点。 t
ransition｛1 2 3 4｝
- 1：过渡或动画模拟的css属性
- 2：完成过渡所使用的时间（2s内完成）
- 3：过渡函数。。。
- 4：过渡开始出现的延迟时间

transition: width 2s ease 1s;

目前，css3只开发出部分的过渡属性，下图所示：

<style>
div{
    width: 100px;
    height: 50px;
    border: 2px solid red;
}
.a{
    transition: width 2s linear 1s; /*1秒过后，div在2秒内匀速缓慢的变宽*/
}
div:hover{ 
    width: 300px;
} /*触发div变宽*/
</style>
<body>
    <div class="a">Hello</div>
</body>

2、动画：

从一个状态到另一个状态，过程中每个时间点都可以控制。

关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}... }
动画属性：animation{ 1 , 2 , 3 , 4 , 5 }
- 1：动画帧
- 2：执行时间
- 3：过渡函数
- 4：动画执行的延迟（可省略）
- 5：动画执行的次数

需求1：一个元素从左向右移动，3秒内执行2次

<style>
div{
    width: 700px;
    border: 1px solid red;
}
@keyframes x{
    from{ margin-left: 0px;}
    to{ margin-left: 550px;}
}
img{
    animation: x 3s linear 2;
}
</style>
<body>
    <div>
        <img src="img/cat.gif">
    </div>
</body>

需求2：一个元素从左向右移动，3秒内执行完成。无限次交替执行

infinite：无限次

alternate：来回执行（交替，一去一回）

<style>
.wai{
    width: 600px;
    height: 100px;
    border: 2px solid red;
}
.nei{
    width: 40px;
    height: 80px;
    margin: 5px;
    background: red;
}
.nei{
    animation: x 3s linear infinite alternate;
}
@keyframes x{
    0%{ margin-left: 0px; }
    25%{ background: yellowgreen; }
    50%{ background: goldenrod; }
    75%{ background: palevioletred;}
    100%{
        background: coral;
        margin-left: 550px;
    }
}
</style>
<body>
    <div class="wai">
        <div class="nei"></div>
    </div>
</body>

dear_Zzzx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java之学习记录 3 - 1 - css部分记录

css引入方式：<link href="css/test01.css" rel="stylesheet"/>@import url(css/test01.css);<link>和@import的区别：加载顺序不同 @import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面。如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面； @import方式导入c
复制链接

扫一扫