Acwing Web应用课CSS学习笔记中

CSS学习笔记中

借用y总的标签笔记 仅供学习笔记提供

文章目录

一、文本

text-align

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

<body>
    <h4>悯农</h4>
    <div class="mydiv">
        锄禾日当午,<br>
        汗滴禾下土。<br>
        谁知盘中餐，<br>
        粒粒皆辛苦。<br>
    </div>
</body>



h4 {
    text-align: center;
}

.mydiv {
    text-align: center;
}

显示样式：
在这里插入图片描述
在这里插入图片描述
它是有继承关系的 子类标签要跟着父类标签

line-height

line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。每行的高度

补充知识点：长度单位
单位 描述
px 设备上的像素点
% 相对于父元素的百分比
em 相对于当前元素的字体大小
rem 相对于根元素的字体大小
vw 相对于视窗宽度的百分比
vh 相对于视窗高度的百分比
例如em
在这里插入图片描述
rem会变成相同大小
在这里插入图片描述

letter-spacing
CSS 的 letter-spacing 属性用于设置文本字符的间距。
字的间距
text-indent
text-indent属性能定义一个块元素首行文本内容之前的缩进量。

text-indent:3em; /*每行缩进3个字符*/

text-decoration
text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。
如果去掉链接中的下划线

text-decoration:none;

text-shadow
text-shadow为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。
这个是坐标系 x y 坐标 偏移量 r 是 半径 color是颜色
css中同等地位的标签都是用逗号隔开
阴影也可以有多个

在这里插入图片描述

在这里插入图片描述

二、字体

font-size
font-size CSS 属性指定字体的大小。因为该属性的值会被用于计算em和ex长度单位，定义该值可能改变其他元素的大小。
默认是16px

.mydiv{
	font-size:1.5pm;  /*这是字体大小*/
	font-style:italic; 这是斜体
	font-style:normal; 这是正常
}

font-style
font-style CSS 属性允许你选择 font-family 字体下的 italic 或 oblique 样式。

font-weight
font-weight CSS 属性指定了字体的粗细程度。 一些字体只提供 normal 和 bold 两种值。加粗 填一个1-1000的值 数越大越粗 并且数值没有单位

font-family
CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。
属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。

.mydiv>p:nth-child(3) {
     font-family: serif; 带衬线字体
		
 }

在这里插入图片描述

 font-family: sans-serif; 不带衬线字体
 font-family: monospace; 等宽字体
 font-family:cursive;草书字体
  font-family:fatansy;艺术字体

三、 背景

background-color

CSS属性中的background-color会设置元素的背景色, 属性的值为颜色值或关键字”transparent”二者选其一。

background-image

CSS background-image 属性用于为一个元素设置一个或者多个背景图像。

.mydiv>p:nth-child(3) {
    width: 300px;
    height: 300px;
    background-image: url('/static/images/mountain.jpg');
    background-color: lightblue;

    background-size: 50px; 设置背景图片的宽度和高度 如果是二维的话
    要是想全覆盖图层的话  改为cover
     background-size: contain; 背景不超过所定义的大小 与cover对应
    background-repeat: no-repeat;
}

渐变色：linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))

background-size

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

background-repeat

background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

background-position

background-position 为背景图片设置初始位置。

background-position: 50px -20px;
background-position: center 20px;
background-position: right bottom;

在这里插入图片描述
size如果只写一个的话 那就是对所有的都成立
opacity是透明度 0.2或者为多少

background-attachment

div*div可以直接迅速 相当于快捷键
background-attachment
CSS 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

  background-attachment: fixed;  背景图片固定位置

四、边框

border-style

border-style 是一个 CSS 简写属性，用来设定元素所有边框的样式。
比如excel里面的框 border-style:dotted 点 inset 内嵌
border-style:solid dotted inset ; 写两个 第一个就是上下 第二个指的是左右 写三项 最后一项是第二项的对边值 写四个 指的是上右下左

border-width

border-width属性可以设置盒子模型的边框宽度。
border-width:2px 4px 6px ;

border-color

CSS属性border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color
颜色也可以写四个 同上
border-radius
CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
控制矩形的四个角 border-radius:5px 0 0 0 ;
半径等于边长的一般
border-raduis:50%; 头像是圆的
border-collapse
border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。
把table的边框重叠在一起 如果table和td一起设置的话

五、元素展示格式

5.1 display

block：针对div

  • 独占一行 默认宽度是100%
  • width、height、margin(外边距)、padding(内边距 可改变内部文字的大小)均可控制
  • width默认100%。

inline：span

  • 可以共占一行
  • width与height无效，水平方向的margin与padding有效，竖直方向的margin与padding无效
  • width默认为本身内容宽度

inline-block

span{
background-color : lightblue;
display:inline-block;
}
  • 可以共占一行
  • width、height、margin、padding均可控制
  • width默认为本身内容宽度

div换成span 就加入display: inline ;
span 换成div 就加入 display:block;

5. 2 white-space

white-space CSS 属性是用来设置如何处理元素中的 空白 (en-US)。

div {
     width: 100px;
     height: 200px;
     background-color: lightblue;
     white-space: nowrap; / normal 不换行  / 换行效果
 }

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.3 text-overflow

text-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号或显示一个自定义字符串。

5. 4 overflow 默认是auto

CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。
auto和hidden 用的比较多

在这里插入图片描述
text-overflow: ellipsis; 超出行宽 用省略号 但是对纵向超出无影响
代替

text-overflow: ellipsis;
posted @   依嘫  阅读(34)  评论(0)  编辑  收藏  举报
相关博文：
· Acwing Web应用课CSS学习笔记上
· Acwing Web应用课笔记-html基础标签上
· Web应用课 第三讲 文本、字体、背景、边框、展示格式
· CSS属性
· CSS基础教程学习
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示