CSS学习笔记

hxznh

已于 2022-06-30 17:56:49 修改

阅读量50

点赞数

分类专栏：学习笔记文章标签： css 前端学习

于 2022-06-29 10:55:55 首次发布

本文链接：https://blog.csdn.net/hxznh/article/details/125515646

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS

页面美化和布局控制

**概念**: cascading style sheets 层叠样式表
- 层叠:多个样式可以作用在同一个 html 的元素上，同时生效
好处︰

1．功能强大

2．将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率

样式

内联样式：
- 在标签内使用style属性指定css代码
  如:
```
<div style="color : red; " >hello css</div>
```

内部样式

在 head 标签内，定义 style 标签，style 标签的标签体内容就是 css 代码

可以指定这个页面的所有 div 标签样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>

    <div> hello css </div> <br>
    <div> zjz </div>

</body>

外部样式

定义 css 资源文件

link 标签引入 css 资源文件， herf 指定 css 文件位置

<link rel="stylesheet" href="css_resources/a.css">

<!-- 或写为(不常用) -->
<style>
    @import "css_resources/a.css";
</style>

<!-- a.css -->
div{
    color: green;
}

基本语法

格式：

选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
    ...
}

选择器：
- 筛选有相似特征的元素
- 分类
  1. 基础选择器
    1. id选择器︰选择具体的id属性值的元素.建议在一个html页面中id值唯一
      语法∶#id属性值{}
    2. 元素选择器:选择具有相同标签名称的元素
      - 语法:标签名称{}
      - 注意:id选择器优先级高于元素选择器
    3. 类选择器:选择具有相同的class属性值的元素。
      - 语法: .class属性值{}
        注意:类选择器选择器优先级高于元素选择器
  2. 扩展选择器：
    1. 选择所有元素
      - *{}
    2. 并集选择器
      - 选择器1，选择器2{} ：选中标签1和标签2
    3. 子选择器
      - 选择器1 选择器2{} ：选中标签1下的标签2
    4. 父选择器
      - 选择器1 > 选择器2{}：选择标签2 上的标签1
    5. 属性选择器
      - 元素名称[属性名=属性值]
        
        input[type="text"]{ border: 5px solid; }
    6. 伪类选择器
      - 元素:状态{}
      - 如
        
        a:link{ color: brown; }
      - 状态：
        
        link：初始状态
        visited：被访问过
        actice：正在访问
        hover：鼠标悬浮
- 每一对属性用分号;隔开，属性名和值用冒号:隔开
属性
1. 字体、文本
  - font-size: 字体大小
  - color：文本颜色
  - text-align：对齐方式
  - line-height: 行高
2. 背景
  - background:
```
/* 背景可以是颜色或图片 	url 指定路径 	no-repeat 图片不重复填充 	center 图片居中显示 */background: url("css_resources/B.jpg") no-repeat center;
```
3. 边框
  - border：设置边框，复合属性
4. 尺寸
  - width ：宽度
  - height：高度
5. 盒子模型：控制布局
  - margin：外边距
  - padding：内边距
    - 默认情况下内边距会影响整个盒子大小
    - box-sizing:border-box ：设置盒子属性，锁定盒子大小为 width 和 height
  - float：浮动
    - left
    - right

常用辅助标签

div:
- 定义 HTML 文档中的一个分隔区块或者一个区域部分，不会产生任何样式。
- 常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

文本

文字溢出

CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容。

可以被裁剪：

这是一些无法容纳在框中的长文本。这是一些无法容纳在框中的长文本

也可以将其呈现为省略号（…）：

这是一些无法容纳在框中的长文本。这是一些无法容纳在框中的长文本

CSS 代码如下：

p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip; 
}

div.test1:hover {
  overflow: visible;
}

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body>

<h1>text-overflow 属性</h1>
<p>以下两段包含不适合其框的长文本。</p>

<h2>text-overflow: clip:</h2>
<p class="test1">这里有一些无法容纳在框中的长文本</p>

<h2>text-overflow: ellipsis:</h2>
<p class="test2">这里有一些无法容纳在框中的长文本</p>

</body>
</html>

换行规则

word-break 属性指定换行规则。

p.test1 {
  word-break: keep-all;	/* 此行将连字符打断 */
}

p.test2 {
  word-break: break-all;	/* 这些行将在任何字符处中断 */
}

书写模式

writing-mode 属性规定文本行是水平放置还是垂直放置。

p.test1 {
  writing-mode: horizontal-tb; 
}

span.test2 {
  writing-mode: vertical-rl; 
}

p.test2 {
  writing-mode: vertical-rl; 
}

属性	描述
text-align-last	指定如何对齐文本的最后一行。
text-justify	指定对齐的文本应如何对齐和间隔。
text-overflow	指定应如何向用户呈现未显示的溢出内容。
word-break	指定非 CJK 脚本的换行规则。
word-wrap	允许长单词被打断并换到下一行。
writing-mode	指定文本行是水平放置还是垂直放置。

过渡

CSS 允许平滑地改变属性

如需创建过渡效果，必须明确两件事：

要添加效果的 CSS 属性
效果的持续时间

注意：如果未规定持续时间部分，则过渡不会有效果，因为默认值为 0。

下面的例子展示了 100px * 100px 的红色 < div> 元素。 < div> 元素还为 width 属性指定了过渡效果，持续时间为 2 秒：

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

当指定的 CSS 属性（width）值发生变化时，将开始过渡效果。

现在，为 width 属性指定一个鼠标悬停在 < div> 元素上时的新值：

div:hover {
  width: 300px;
}

实例

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>transition 属性</h1>

<p>请把鼠标悬停在下面的 div 元素上，来查看过渡效果：</p>

<div></div>

<p><b>注释：</b>该效果在 Internet Explorer 9 和更早版本中不起作用。</p>

</body>
</html>

指定过渡的速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

下面的例子展示了可以使用的一些不同的速度曲线：

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）。

下例在启动之前有 1 秒的延迟：

div {
  transition-delay: 1s;
}

过渡 + 转换

下例为转换添加过渡效果：

div {
  transition: width 2s, height 2s, transform 2s;
}

过渡属性

属性	描述
transition	简写属性，用于将四个过渡属性设置为单一属性。
transition-delay	规定过渡效果的延迟（以秒计）。
transition-duration	规定过渡效果要持续多少秒或毫秒。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function	规定过渡效果的速度曲线。

背景

背景附着

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

实例

指定应该固定背景图像：

body {
  background-image: url("test.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

实例

指定背景图像应随页面的其余部分一起滚动：

body {
  background-image: url("test.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

hxznh

关注

0
点赞
踩
0

收藏

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

css 学习笔记
复制链接

扫一扫

专栏目录

CSS学习笔记

CSS

样式

基本语法

常用辅助标签

文本

文字溢出

文字溢出

换行规则

书写模式

过渡

指定过渡的速度曲线

延迟过渡效果

过渡属性

背景

背景附着

“相关推荐”对你有帮助么？