首页 前端知识 HTML5第五章CSS3美化网页元素

HTML5第五章CSS3美化网页元素

2024-09-03 02:09:49 前端知识 前端哥 979 603 我要收藏

一、字体样式

font-family:设置字体类型

p{font-family:Verdana,"楷体";}/*英文字体和中文字体需要加个逗号隔开*/
/*Verdana这个是英文字体一般英文字体都不会变*/

font-size:设置字体大小 px em rem cm mm pt pc

单位:

px(像素)

em根据父容器字体大小改变(em×父级大小px)

rem根据元素字体大小改变(rem×根元素字体大小px)

font-style:设置字体风格(倾斜)

p{
    font-style:italic;/*一般没啥用*/
}

font-weight:设置字体的粗细 normal bold bolder lighter

normal:默认字体

bold:粗体字体(对应数字700)

bolder:更粗的字体(对应数字900)

lighter:更细字体

p{
    font-weight:"900"/*这里字体大小最低100最高900*/
}

font:在一个声明中设置所有字体属性

font:italic bold 36px "宋体";/*后面两个必须是子大小和字体类型*/
/*font:风格  粗细  大小  类型*/

二、文本样式

color:设置文本颜色

单词,十六进制,rgb,rgba(透明度从0-1)

text-align:设置元素水平和齐方式(在块级元素中生效)

left:左 (默认是左) right:右 center:居中

text-indent:设置首行文本的缩写

link-height:设置文本的行高

text-decoration:设置文本的装饰

none:默认(默认不要下滑线)

underline:设置文本下划线

overline:设置文本上滑线

line-through:设置文本的删除线(也可以使用del标签)

vertical-align:垂直对齐方式

top:上 middle:中 bottom:下

text-shadow:设置阴影

text-shadow : color x-offset y-offset blur-radius;
/*color颜色,x-offset:x坐标,y-offset:y坐标,blur-radius模糊程度*/

三、伪类样式

a:link:未单击访问时超链接样式

a:visited;单击访问后超链接样式

a:hover:鼠标悬浮其上的超链接样式

a:active:鼠标单击未释放的超链接样式

设置伪类的顺序:a:link->a:visited->a:hover->a:active

四、列表样式

list-style:none(去除ul和ol的前缀)

五、背景样式

1.背景颜色

background-color

2.背景图像

background-image:url(背景图片 url路径);

3.背景重复方式

background-repeat:沿水平和垂直两个方向平铺

on-repeat:不平铺,即只显示一次

repeat-x:只沿水平方向平铺

repeat-y:只沿垂直方向平铺

background-position:图像唯一

background-position:x y
水平方向:left,center,right
垂直方向:tpo,center,bottom

background简写 背景颜色 背景图片路径 是否铺平

background:color image:url  repeat;

background-size:图片大小

ayto:默认值,使用背景图片保持原样

percentage:当使用百分值时,不是相对于背景的尺寸大小来计算的,而是相对于元素宽度来计算的

cover:整个背景图片放大填充了整个元素

contain:让背景图片保持本身的宽高比例,将背景图片缩放到宽度或者高度正好适应所定义背景的区域

4.背景颜色渐变

background:linear-gradient:背景颜色渐变

linear-gradient ( 方向,第一种颜色,第二种颜色,…);
background:-webkit-linear-gradinent(left top,red,green)

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17554.html
标签
评论
发布的文章

关于HTML的知识

2024-09-18 23:09:36

js简单实现轮播图效果

2024-09-18 23:09:36

CSS3美化网页元素

2024-09-18 23:09:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!