css笔记 8.3

最新推荐文章于 2024-08-08 11:48:45 发布

溜溜梅353

最新推荐文章于 2024-08-08 11:48:45 发布

阅读量34

点赞数

文章标签： css 笔记前端

本文链接：https://blog.csdn.net/weixin_68597796/article/details/132085470

版权

css文字样式

字体属性

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体

p{font-family:"宋体", "楷体";}

字体样式

font-style用于指定斜体文字的字体样式属性。

这个属性有三个值：

normal正常 - 正常显示文本
italic斜体 - 以斜体字显示的文字
oblique倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

字体粗细

font-weight指定字体粗细

属性：正常（normal）加粗（bold）
100—900（400 相当于 normal/700 相当于 bold；一般情况加粗直接使用900）

p{font-weight:900;}

小型大写字体

font-variant指定以小型大写字体或者正常字体显示文本
属性：

normal - 默认属性值，正常显示文本
small-caps -浏览器以小型大写字母显示

p{    font-variant: small-caps;}

自定义引入字体

@font-face将自定义引入字体

属性：

src：必需。定义字体文件的 URL。
font-stretch：可选。定义如何拉伸字体。默认是 “normal”。
font-family:定义字体名字

@font-face {
    font-family: zdy;
    src: url(./Wesley__.ttf);
}
p{font-family: zdy;}

文本样式

文本阴影

text_shadow文本阴影
属性
水平方向位移，竖直方向外移，模糊度，颜色

p{text-shadow: 5px 2px 3px firebrick;}

文本修饰

text-decoration文本修饰（下划线、删除线）

属性值：

下划线：underline
删除线：line-througt
上划线：overline
无装饰：none

a{text-decoration: underline line-through;}

大小写

text-transform文本大小写（针对英文段落）

属性；

小写：lowercase
大写：uppercase
只针对首字母大写：capitalize

p{text-transform: capitalize;}

文本缩进

text-indent可以指定文本的首行缩进

p{text-indent: 2em;}

文本对齐

text-align指定文本对齐
属性：

center 居中
right 右对齐
justify 两端对齐

p{text-align: center;}

定义行高

line-height指定每一行的高度

p{line-height: 20px;}

文本间距

letter-spacing定义字与字之间的间距

p{letter-spacing: 4px;}

文本词间距（英文）

word-spacing定义词间距（英文）

word-wrap

属性：

break-work；到达最大宽度时强制换行
nowrao文本不换行

p{white-space: nowrap;}

css背景

背景固定

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

属性；

scroll 默认值。
fixed 当页面的其余部分滚动时，背景图像不会移动。

div{background-attachment: fixed;}

背景颜色

background-color 设置元素的背景颜色

background-color: red;

图像背景

background-image 把图像设置为背景

div{background-image: url(../img/微信图片_20220827103828.jpg);}

背景图片位置

background-position 设置背景图像的起始位置
属性：

left/right/center/bottom/top这几个属性值可以两两组合使用，如果只规定了一个关键词，那么第二个值将时"center"。
x% y% 第一个值是水平位置，第二个值是垂直位置; 左上角是 0% 0% 右上角是 100% 100%;如果仅规定了一个值，另一个值是 50%。

div{ background-position: center;}

背景图像重复

background-repeat 设置背景图像是否及如何重复
属性；

repeat重复
repeat-x横向重复
repeat-y纵向重复
no-repeat不重复

background-repeat: no-repeat;

背景图片的尺寸

background-size 规定背景图片的尺寸
属性：

像素/百分比设置宽高
ocover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
ocontain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

div{background-size: 100%;}

背景的绘制区域

background-clip 规定背景的绘制区域。
属性；

border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框

div{background-clip:content-box;}

背景图片定位区域

background-origin 规定背景图片的定位区域。
属性:

padding-box 背景图像相对与内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位

div{background-clip:content-box;}

背景简写

background 简写属性，作用是将背景属性设置在一个声明中。
当使用简写属性时，属性值的顺序为:

background-color
background-image
background-repeat
background-attachment
background-position

div{background: url(../img/sc16.png) no-repeat left top;}

边框样式

border 简写属性，用于把针对四个边的属性设置在一个声明
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式(none 定义无边框、dotted 定义点状边框、dashed 定义虚线、solid 定义实线、groove 定义 3D 凹槽边框、ridge 定义 3D 垄状边框、inset 定义 3D inset 边框、outset 定义 3D outset 边框。)
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色

其他样式：

作用	作用
border-bottom-color	设置元素的下边框的颜色
border-bottom-style	设置元素的下边框的样式
border-bottom-width	设置元素的下边框的宽度
border-bottom	用于把下边框的所有属性设置到一个声明中。
border-left	用于把左边框的所有属性设置到一个声明中
border-left-color	设置元素的左边框的颜色
border-left-style	设置元素的左边框的样式
border-left-width	设置元素的左边框的宽度
border-right	用于把右边框的所有属性设置到一个声明中
border-right-color	设置元素的右边框的颜色
border-right-style	设置元素的右边框的样式
border-right-width	设置元素的右边框的宽度
border-top	用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色
border-top-style	设置元素的上边框的样式
border-top-width	设置元素的上边框的宽度。

溜溜梅353

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css笔记 8.3

font-face将自定义引入字体src：必需。定义字体文件的 URL。font-stretch：可选。定义如何拉伸字体。默认是 “normal”。font-family:定义字体名字} p {line-height指定每一行的高度p {
复制链接

扫一扫