🌈个人主页:王子玉博客
🔆 收录专栏:HTML&CSS
❤️ 分享网站: 《Python自学网》👉👉基础入门到逐步深入 | 适合新手入门到精通
体系课程:web开发、爬虫、自动化运维、自动化测试、GUI图形界面化
~~
🙏 如果觉得博主文章对你有所帮助的话,还望大家多多支持呀!关注 | 点赞 | 收藏 | 评论
HTML& CSS系列文章类目
文章目录
字体样式属性font-size:字号大小font-style:字体风格font-weight:字体粗细font-family:字体1/正常使用2/ @font-face 自定义字体3/ font:综合设置字体样式(重点) 文本样式属性color:文本颜色line-height:行间距text-align:水平对齐方式text-indent:首行缩进text-decoration:文本装饰 背景相关属性background-color:背景色background-image:背景图片(css3属性)background-size:背景图片尺寸(css3属性)background-repeat:背景平铺(是否重复图片, 以填充元素)background-position:定位背景位置background-attachment :背景附着background:背景简写 cursor:鼠标样式属性属性值合集自定义光标字体样式属性
font-size:字号大小
属性值可以是绝对单位,使用频率高,如px。也可以使用相对单位,如em,使用频率较少。
例子:
<div style="font-size: 16px">绝对单位:px</div><div style="font-size: 1em;">相对单位:em</div> /* 由于浏览器一般默认的字体大小是16px,所以.em的父元素body的字体大小是16px,name .em的1em相对于父元素body就是16px,所以.px和.em的字体大小一致 */
网页效果:
font-style:字体风格
正常(默认值)、斜体,倾斜
属性值:
注意:除了css实现字体斜体,还有标签i和em之外,但css是没有语义的
例子:
<div>默认:normal,可不设置 </div><div style="font-style: italic;">斜体:italic </div><div style="font-style: oblique;">倾斜:oblique </div>
网页效果:
font-weight:字体粗细
定义字体的粗细,属性值有normal、bold、lighter、bolder、100~900(100的整数倍)
属性值:
注意:字体加粗除了css外,还有标签b和strong,但是css是没有语义的
例子:
<div>默认:normal,可不设置 </div><div style="font-weight: bold;">加粗:bold </div><div style="font-weight: lighter;">细:lighter</div><div style="font-weight: bolder;">粗:bolder</div><div style="font-weight: 400;">数值:400</div><div style="font-weight: 700;">数值:700</div>
网页效果:
font-family:字体
1/正常使用
网页中常用的字体有宋体、微软雅黑、黑体、Arial 、 Helvetica 、 sans-serif等,为了照顾不同电脑的字体安装问题,尽量只使用宋体和微软雅黑字体。
Arial :无衬线体Helvetica:是西方最常用的一种字体sans-serif 是一种通用字体族 , 末尾都加上它,保证前面设置的字体, 没找到时, 可以使用这个字体族的字体,每个人电脑上都是有的
一般网页字体设置大概这样:
font-family: "Microsoft YaHei",SimSun,SimHei,Arial,Helvetica,sans-serif
注意事项:
网页中正文字体一般使用14px+,尽量使用偶数字号,ie6老式浏览器支持奇数会有bug中文字体名要加英文引号(单引号双引号都可),英文字体一般不加引号,如果需要同时设置英文字体和中文字体,那么英文字体必须在中文之前如果字体中包含空格、#、$等特殊符号,那么字体就必须加引号,如font-family: "Times New Roman"
在 CSS 中设置字体名称,尽量用英文字体名称或者Unicode编码,以免出现不匹配时的乱码错误,xp系统是不支持中文字体名称的可以同时指定多个字体,之间用逗号隔开,表示如果浏览器不支持第一个字体就尝试下一个,直到找到合适的字体尽量使用系统默认字体,保证用户在任何浏览器中都能正常显示
一般字体有:
使用Unicode编码:font-family: "\5B8B\4F53"
,表示设置字体为宋体 。
例子:
<div style="font-family: 'Microsoft YaHei', SimSun,LiSu;">多个字体</div><!-- 双引号里面用单引号 --><div style="font-family: SimSun, '微软雅黑';">中英文字体</div><div style="font-family: SimSun;">宋体</div><div style="font-weight: 'Microsoft YaHei';">微软雅黑</div><div style="font-family: \5B8B\4F53;">Unicode编码:宋体</div>
网页效果:
2/ @font-face 自定义字体
需要的材料和步骤:字体文件、定义、使用
1、字体文件,如:my-font.ttf
2、定义:
@font-face {font-family: 'waykey'; /* 起个自己的字体名称,调用的是起的waykey名字*/src: url("./fonts/my-font.ttf"); /*指定字体文件的源路径*/}
3、使用:
body{font-family: "waykey","sans-serif";}
3/ font:综合设置字体样式(重点)
用font综合设置字体的样式,属性值应按以下次序书写:
选择器{font: font-style font-weight font-size/line-height font-family;}
注意:
简写时,每个属性值之间用空格分开样式 和 粗细可以交换,不影响font-size和line-height只能通过斜杠/组成一个值,不能分开写顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用
例子:
p{/* 单个写法: */font-size: 30px; /* 字号 */line-height: 1.6; /* 行高 */font-style: italic; /* 字体风格 */font-weight: bold; /* 字体粗细 */font-family: SimSun; /* 字体 *//* 整体写法: */font: italic bold 30px/1.6 SimSun;font: bold 30px SimSun;font: 30px SimSun; }
文本样式属性
color:文本颜色
取值方式:
例子:
p{/* 颜色单词 */color:red; /* rgb */ color: rgb(0, 0, 0);/* 黑色 */color: rgb(255, 0, 0);/* 红色 */color: rgb(0, 255, 0);/* 绿色 */color: rgb(0, 0, 255);/* 蓝色 */color: rgb(255, 255, 255);/* 白色 *//* rgba */ color: rgb(0, 0, 0); /* 完全透明 */color: rgba(0, 0, 0, 0.5); /* 半透明 */color: rgba(0, 0, 0, 1); /* 完全不透明 *//* #fffff 16进制 和 简写 */ color: #000000; /* #000 */ color: #ffaa66; /* #fa6 */color: #ee33ee; /* #e3e */ color: #bbeeee; /* #bee; */ /* 透明色 :transparent */ background-color: red;color: transparent; }
line-height:行间距
行与行之间的距离,也就是字符的垂直间距,一般叫做行高。
注意:
取值单位一般有三种:px 、% 、em一般情况下,行距比字号大7 8像素左右就可以了
例子:
p{line-height: 20px;line-height: 1.6%; /*百分号可以省略 line-height: 1.6 */line-height: 2em;}
text-align:水平对齐方式
设置文本内容的水平对齐,相当于html中的align对齐属性
属性值:
注意:
有足够的宽度才可以居中行级元素不能水平居中,因为行级元素空间是用内容撑起来的没有多余空间(比如a元素 span元素)
例子:
p{text-align: left;text-align: right;text-align: center;}
text-indent:首行缩进
设置首行文本的缩进
属性值单位:不同单位的数值、不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%。
注意:
允许使用负值建议使用em作为单位(1em 就是一个字的宽度 ,如果是汉字的段落, 1em 就是一个汉字的宽度)
text-decoration:文本装饰
通常用于给链接修改装饰效果
属性值:
注意:
清除超链接文本的下划线 :text-decoration:none;
多个值可以使用空格拼接
例子:
p{text-decoration: underline; text-decoration: overline underline; }
背景相关属性
background-color:背景色
属性取值和上面定的color一样,这里不在说明,直接看上面就行
语法:
background-color : hex(16进制) | rgb |rbga...
注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不受影响
background-image:背景图片(css3属性)
语法:
background-image : none | url (图片地址路径)
属性值:
注意:如果背景图片太小, 不够标签尺寸 , 默认会自动复制图片进行完全填充
background-size:背景图片尺寸(css3属性)
语法:
background-size: length|percentage|cover|contain;
取值单位: px、 %、或 通过cover和contain来对图片进行伸缩
参数:
length:第一个值width 、第二个值height 分别设置背景图片宽度和高度percentage:以父元素的百分比来设置背景图像的宽度和高度cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域contain:把背景图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
注意:
第一个值设置宽度,第二个值设置高度如果只设置一个值,则第二个值会被设置为 “auto”,图片会等比缩放
例子:
background-size:auto; /* 默认值,不改变背景图片的高度和宽度 */background-size:100px 50px; /* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放*/background-size:10%; /* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时也将其作为图片宽度来等比缩放 */background-size:cover; /* 将背景图片等比缩放填满整个容器 */background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
background-repeat:背景平铺(是否重复图片, 以填充元素)
语法:
background-repeat : repeat | no-repeat |repeat-x | repeat-y
属性值:
注意:设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素
例子演示:
/*统一css代码,改变repeat属性值*/div{width: 600px;height: 200px;background-size: 100px;background-color: pink;background-image: url(./1.jpg);/* background-repeat: no-repeat; */}
默认平铺:图片尺寸小于容器尺寸
不平铺:no-repeat
横向上平铺:repeat-x
纵向上平铺:repeat-y
background-position:定位背景位置
语法:
background-position : x || y
属性值单位: 数值、百分比%、方位名词
参数:
注意:
position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位值为负数往反方向移动 ( 如雪碧图 定位值可以为负值)如果只指定了一个值,该值将用于横坐标,纵坐标将默认为50%或canter如果精确单位和方位名字混合使用,则必须是x坐标在前,y坐标后面实际工作用的最多的是背景图片居中对齐
例子演示:
/*统一css代码,改变position属性值*/div{width: 600px;height: 200px;background-size: 100px;background-color: pink;background-image: url(./1.jpg);background-repeat: no-repeat;/* background-position: right 50%; */}
左上,默认:background-position: left top
左中:background-position: left center 或 left 50%
左下:background-position: left bottom
右上:background-position: right top
右下:background-position: right bottom
右中:background-position: right center 或 right 50%
居中:background-position:center 或 50%
background-attachment :背景附着
语法:
background-attachment : scroll | fixed
参数:
scroll : 背景图片随着页面的滚动而滚动,这是默认的fixed : 背景图片不会随着页面的滚动而滚动local:背景图片会随着元素内容的滚动而滚动
background:背景简写
background属性的值的书写顺序官方并没有强制标准,为了可读性,建议顺序如下:
background: 背景图片地址 背景平铺 背景滚动 背景位置/背景大小 背景颜色
例子:
如下可写成:background: url(./1.jpg) no-repeat right 50%/400px pink;
div{width: 600px;height: 400px;background-size: 400px;background-color: pink;background-image: url(./1.jpg);background-repeat: no-repeat;background-position: right 50%;}
注意:
遇到位置和尺寸大小都写的话,位置在前(先横后纵)/ 尺寸在后属性值之间用空格隔开
cursor:鼠标样式属性
cursor:鼠标
属性值: 很多…pointer 最常用
属性值合集
自定义光标
创建的鼠标文件格式是.cur或.ico,通过cursor属性来调用,格式如下:
cursor:url(路径地址);
注意:
当浏览器不支持光标图片或光标文件不能正常加载时,大多数浏览器要求必须指定一个备用的光标,否则cursor属性无效。如:
cursor:url(路径地址),pointer;