学习前端的第五天

最新推荐文章于 2024-09-06 17:35:33 发布

Robergean

最新推荐文章于 2024-09-06 17:35:33 发布

阅读量132

点赞数

分类专栏：笔记文章标签： css html html5

本文链接：https://blog.csdn.net/Robergean/article/details/117248601

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

好的，今天是学习前端知识的第5天，我又来整理笔记了。
今天主要学得内容比较少，就是扩充了一些常用的属性和markdown文本的使用。

一、常用属性相关知识

关于字体相关属性：

1、浏览器默认字体大小是16px，支持的最小字体大小是12px，谷歌浏览器支持的默认字体是微软雅黑

2、单位：

px像素，固定的意思
pt点、榜的意思，这是打印行业里面使用的单位，可以保证设计出来的设计稿，最终的效果不改变
pt转换成px 9pt = 12px 9/12 = 3/4 = 0.75
em 相对于容器字体大小的单位，可以根据字体大小改变
em和px转成，1em = 16px

3、text-indent:2em; 首行缩进，推荐使用单位是em， letter-spacing 字间距

4、color 文本颜色

英文单词形式，red、orange、white、yellow、green、pink、blue、black、purple等等
十六进制形式，0-F之间数字和字母组成的颜色值例如：#fff 、#000
rgb()形式，red、green、blue 计算机三原色

5、font-family字体

字体属性可以有多属性值，属性值和属性值之间使用逗号隔开
一次性可以给字体属性设置多种类型的字体，浏览器会默认找第一个，如果不支持就第二个，以此类推，如果都不支持就以默认字体显示
中文字体必须使用双引号包裹，英文字体如果是一组词必须使用英文，如果是单个单词就不用

6、font 是字体属性的一些属性的缩写形式

二、常用属性

文字加粗
font-weight:bolder（更粗）/ bold（加粗）/ normal（常规）/ 100-900

说明：在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形，
100-400 一般
500常规字体
600-900加粗字体

文字倾斜
font-style:italic / oblique / normal（取消倾斜，常规显示）

说明：italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果

文字属性简写：font:12px/24px "宋体"; 值1是字号，值2是行高，值3是字体
font-size:12px; 
line-height:24px;
font-family:"宋体";

说明：font属性值应按以下次序书写（各个属性之间用空格隔开）
顺序：font-style font-weight font-size / line-height font-family
+ 简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。
+ 顺序不能改变 ，这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,在没有设定font-weight , font-style , 他们会使用缺省值（默认值）。

text-decoration:none / underline / overline /line-through
说明:	
none：没有修饰
underline：添加下划线
overline：添加上划线
line-through：添加删除线

定义列表符号样式
list-style-type:disc（实心圆）/ circle（空心圆）/ square （实心方块）/ none（去掉列表符号）;
list-style-type:none; ==list-style:none;

使用图片作为列表符号
list-style-image:url(所使用的路径以及全称)；

定义列表符号的位置
list-style-position:outside（外边）; / inside（里边）;
list-style:none;去掉列表符号

背景图的固定
语法：
选择服(background-attachment:scroll（滚动）/ fixed（固定）;)
说明：
fixed 固定，不随内容一块滚动；
scroll:随内容一块滚动。

css边框属性
border:边框宽度	边框风格	边框颜色;	例如：border:1px solid #ff0000
边框：border,网页中很多修饰性线条都是由边框来实现的。
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线) / dashed(虚线) / dotted(点划线) / double(双线)可单独设置一方向边框。

border-bottom:边框宽度 边框风格 边框颜色;	底边框
border-left:边框宽度 边框风格 边框颜色;	左边框
border-right:边框宽度 边框风格 边框颜色;	右边框
border-top:边框宽度 边框风格 边框颜色;	上边框