首页 前端知识 前端Html5/Css3—CSS美化

前端Html5/Css3—CSS美化

2024-09-04 23:09:44 前端知识 前端哥 867 39 我要收藏

第五章 CSS美化

5.1 字体样式

<span></span>能让某几个文字或者某个词语凸显出来
属性名含义举例
font在一个声明中设置所有字体属性font:italic :bold 36px “宋体”;
font-family设置字体类型font-family:“隶书”;
font-size设置字体大小font-size:12px;
font-style设置字体风格font-style:italic;
font-weight设置字体的粗细font-weight:bold;

5.1.1 font-family字体类型

  • font-family
p{
font-family:Verdana,"楷体";
}
body{font-family: Times,"Times New Roman", "楷体";}


5.1.2 font-size字体大小

  • font-size属性

px(像素)

em、rem、cm、mm、pt、pc

/* em   父亲元素字体大小*em
				如:父亲元素字体大小为10px,子元素字体大小为2em
				则2em相当于20px(10*2em)
				
	rem  根(html)元素字体大小*rem */
h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}

5.1.3 font-style字体风格

  • font-style属性
描述
italic浏览器会显示一个斜体的字体样式。
oblique浏览器会显示一个倾斜的字体样式。
inherit规定应该从父元素继承字体样式
normal默认值。浏览器显示一个标准的字体样式。

5.1.4 font-weight字体粗细

  • font-weight属性
描述
normal默认值。定义标准的字符。
bold定义体字符。
bolder定义更粗的字符。
lighter定义更细的字符
100、200、300、400、500、600、700、800、900定义由细到粗的字体,400等同于normal,700等同于bold

5.1.5 font属性

字体属性的顺序:字体风格→字体粗细→字体大小→字体类型

p span{
    font:oblique bold 12px "楷体";
}

5.2 文本属性

属性含义举例
color设置文本颜色color:#00C;
text-align设置元素水平对齐方式text-align:right/center/left/justify;
text-indent设置首行文本的缩进text-indent:20px;
line-height设置文本的行高line-height:25px;
text-decoration设置文本的装饰text-decoration:underline;
direction设置文本/书写方向。direction: rtl;文本方向从右到左
word-spacing设置字间距

5.2.1 text-align:属性值如下

说明
left把文本排列到左边。默认值:由浏览器决定
right把文本排列到右边
center把文本排列到中间
justify实现两端对齐文本效果
  • 当line-heigh和容器height一致时候,可以实现垂直居中

5.2.2 text-decoration:属性值如下

div{
				/* underline:文本下划线
				overline:文本上划线
				line-through:文本删除线 */
				text-decoration: underline;
			}

vertical-align:图片文字对齐方式

属性:middle、top、bottom

5.2.3 text-shadow文本阴影

text-shadow : color x-offset y-offset blur-radius;

	span{
				text-shadow: #0000FF 1px 1px 2px;
			}

5.3 color属性

RGB:

  • 十六进制方法表示颜色:前两位表示红色分量,中间两位表示绿色分量,最后两位表示蓝色分量
  • rgb(r,g,b) : 正整数的取值为0~255

RGBA

  • 在RGB基础上增加了控制alpha透明度的参数,其中这个透明通道值为0~1
color:#A983D8;

color:#EEFF66;

color:rgb(0,255,255);

/* 0.5表示透明程度 */
color:rgba(0,0,255,0.5);

5.4 超链接样式

<a href=""></a>
伪类名称含义示例
a:link未单击访问时超链接样式a:link{color:#9ef5f9;}
a:visited单击访问后超链接样式a:visited {color:#333;}
a:hover鼠标悬浮其上的超链接样式a:hover{color:#ff7300;}
a:active鼠标单击未释放的超链接样式a:active {color:#999;}

5.5 list-style-type列表样式

  • list-style-type:none/disc/circle/square/decimal
  • list-style-image:
说明语法示例
none无标记符号list-style-type:none;
disc实心圆,默认类型list-style-type:disc;
circle空心圆list-style-type:circle;
square实心正方形list-style-type:square;
decimal数字list-style-type:decimal

5.6 background-color背景颜色

5.7 background-img背景图像

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

5.7.1 背景重复方式

background-repeat属性

属性值说明
repeat沿水平和垂直两个方向平铺
no-repeat:不平铺,即只显示一次
repeat-x只沿水平方向平铺
repeat-y只沿垂直方向平铺

5.8 background-position背景定位

含义
Xpos Ypos单位:px,Xpos表示水平位置,Ypos表示垂直位置
X% Y%使用百分比表示背景的位置
X、Y方向关键词水平方向的关键词:left、center、right垂直方向的关键词:top、*center、bottom

5.9 背景属性简写

background:url(../image/arrow-down.gif) 20px 10px no-repeat;

5.10 background-size背景尺寸

属性值描述
auto默认值,使用背景图片保持原样
percentage当使用百分值时,不是相对于背景的尺寸大小来计算的,而是相对于元素宽度来计算的
cover整个背景图片放大填充了整个元素
contain让背景图片保持本身的宽高比例,将背景图片缩放到宽度或者高度正好适应所定义背景的区域

5.11 linear-gradient渐变

线性渐变:颜色沿着一条直线过渡:从左到右、从右到左、从上到下等,默认情况下是从上到下

div{
   /*兼容Webkit内核的浏览器*/
  -webkit-linear-gradient ( position,  color1,  color2,)

  /* 从上到下渐变 */
  background: linear-gradient(blue, pink);
  
  /* 指定为从右到左渐变 */
   background: linear-gradient(to right, blue, pink);
  
  /* 多种颜色渐变 */
  background: linear-gradient(red, yellow, blue, orange);
  
  /* 从 10%的位置开始渐变*/
  background: linear-gradient(blue, 10%, pink);
}

径向渐变:圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合

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

关于HTML的知识

2024-09-18 23:09:36

js简单实现轮播图效果

2024-09-18 23:09:36

CSS3美化网页元素

2024-09-18 23:09:27

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