web前端学习日志4

最新推荐文章于 2024-04-29 04:28:15 发布

sun_flower_ice

最新推荐文章于 2024-04-29 04:28:15 发布

阅读量254

点赞数 3

文章标签：前端学习 css

本文链接：https://blog.csdn.net/sun_flower_ice/article/details/125433603

版权

css背景样式

background-color:背景颜色

background-image:背景图片

background-repaet:背景图片的平铺方式

background-position:背景图片的位置

backgound-attachment:背景图随滚动条的移动方式

url(背景地址）默认：会水平垂直都铺满背景图

代码如下：

<title>Document</title>

<style>

div{ width:300px; height:300px; background-color :red; background-image:url(./img/dog.jpg);}

</style>

</head>

<body>

</body>

</html>

平铺方式：repeat-x(x轴平铺）、repeat-y（y轴平铺）、repeat（x,y都进行平铺，默认值)、no-repeat(都不平铺）

背景位置：x y: number(px、%)|单词

x：left、center、right

y: top、center、bottom

滚动方式：

scroll:默认值（背景位置是按照当前元素进行偏移的，图片跟随背景容器一起滚动）

fixed（背景位置是按照浏览器进行偏移的，图片消失只剩下背景容器滚动，注释background-position,图片不跟随背景容器滚动）

css边框样式

border-style:边框样式

solid:实线

dashed:虚线

dotted:点线

border-width:边框大小

px...

border-color:边框颜色

red #f00.....

边框也可以针对某一边进行单独设置：border-left-style:中间是方向 left、right、top、bottom

颜色：透明颜色 transparent

代码如下：

<style>

body{ background-coor:green;}

div{ width:0px; height:0px;

border-top-color:transparent;

border-top-style:solid;

border-top-width:30px;

border-right-color:red ;

border-right-style:solid;

border-right-width:30px;

border-bottom-color:transparent ;

border-bottom-style:solid;

border-bottom-width:30px;

border-left-color:transparent ;

border-left-style:solid;

border-left-width:30px;

}

</style>

</head>

<body>

</body>

</html>

css文字样式

font-family:字体类型

英文字体：Arial，'Times New Roman'

中文字体：微软雅黑，宋体

中文字体的英文名称

微软雅黑：'Microsoft YaHei'

宋体:SimSun

代码如下：

<style>

div{ font-family: Arial;}

</style>

</head>

<body>

<div>这是一段文字</div>

<p>这是一段文字</p>

</body>

</html>

css文字样式

衬线体和非衬线体

注意：1、设置多字体方式目的：设置的字体类型识别更多的计算机，引用更多的设备

2、引号的问题目的：让有空格的字体成为一个整体

font-size字体大小：

默认大小：16px

值描述

xx-small 最小
x-small 较小
small 小
medium 正常
large 大
x-large 较大
xx-large 最大

把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。（字体大小一般为偶数）

默认值：medium。

smaller把 font-size 设置为比父元素更小的尺寸。larger把 font-size 设置为比父元素更大的尺寸。length把 font-size 设置为一个固定的值。%把 font-size 设置为基于父元素的一个百分比值。inherit规定应该从父元素继承字体尺寸。

写法：number(px)|单词(small large....不推荐使用）

font-weight：字体粗细

模式：正常（normal) 加粗（bold)

写法：单词|number (100、200、300.....900,一百到五百都是正常的，六百到九百都是加粗的)

font-style:字体样式

模式：正常（normal）斜体（italic)

写法：单词

注意：oblique也是表示斜体，用法较少

区别：1、italic带有属性斜体字体的才可以设置倾斜操作

2、oblique没有倾斜属性的字体也可以设置倾斜操作

sun_flower_ice

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端学习日志4

前端
复制链接

扫一扫