前端CSS 背景颜色background及font

前端开发需要网络吗 腾讯前端开发面试 web前端开发中级面试题
背景颜色background
<div id=”nav”> 整体区域;
<div id=”nav-center”> 窗口安全区域;
</div>
</div>
Margin:auto 水平居中;
Padding: 将字隔开,撑开;
Display:block; 将字进行块状化,便于调节字的位置;
Background:
Color:背景颜色;
Image:图片背景;
Repeat: background-repeat:no-repeat (不平铺) repeat-x(横着铺)、repeat-y(竖着铺) 平铺方式
Attachment:background-attachment:fixed(不滚动);scroll(滚动) 背景是否跟随网页走动设置;缺省默认 滚动;
Position: background-position:left、right、center(水平方向) top、center、(bottom底部)(垂直方向) 如果定位只有一个位置另一个位置默认居中; 背景定位
Size:background-size:cover;(图片以宽为基准拉伸)contain(图片以高为基准拉伸(有一定缺陷)) 改变背景图片大小;
使用数值是最好的;
地址引用:url(……………图片地址路径); 进行引用; 例如:图片;
Text-shadow: 1px 1px 2px black; 四个值(不可省略(水平))(不可省略(垂直))( 阴影模糊度)(阴影颜色()不可省略) 为文本添加阴影效果等
Font-szie:字体尺寸设置;
线性渐变: linear gradients;以线为基准渐变;
径向渐变: radial gradients;以一个点向外扩散;
线性渐变的用法:
Background:linear-gradient(方向,渐变开始的颜色,渐变1颜色,渐变2颜色…);颜色渐变效果;
例如:Background:linear-gradient(to right,red,yellow,green,blue);
方向:to right
To+方向:默认从上到下渐变;
To+2个方向:对角方向渐变;
Deg: 颜色角度 数值+deg; 例如:135deg;
径向渐变:background:radial-gradient(颜色,颜色2.。。。。);
例如:background:radial-gradient(red 5%,orange 15px,green 30px);
圆的渐变效果:
例如:background:radial-gradient(circle,red,orange,green);
Circle:圆 书写时在圆的参数后面要添加“,”;
Repeating: 渐变重复效果;
例如:background: repeating-radial-gradient(circle,red,orange,green);( 圆的渐变重复效果)
background: repeating- linear -gradient(circle,red,orange,green);(上下渐变重复效果)
border-radius:将图片变成圆形;正变形边角锐化
例如:border-radius:200px 0px 200px 0px;
浏览器兼容:
-webkit-border-radius:200%,10%,16%; 适用于谷歌浏览器
-o-border-radius:200%,10%,16%; 适用于苹果浏览器
-moz-border-radius:200%,10%,16%; 适用于火狐浏览器
-ms-border-radius:200%,10%,16%; 适用于IE浏览器
J k
html:超文本标记语言: (hypertext markup language)
构成框架网页: 构成网页的基础;
<br> 标记;
<!doctype html> 版本说明路
<html>
<head>
需要求起作用。不在网页显示
描述和说明的内容
<title>标题名称<title>
</head>
<body>
网页显示的内容:
<meta>说明标签 单标签
<meta charset=”utf-8”>
<meat 属性=“属性值”>
<b>加粗</b>
<strong>加粗</strong>
<em> 斜体</em>
<i> 斜体</i>
<del>删除线</del>
<s>删除线</s>
<u>下划线</u>
<sub>上标</sub>
<sup>下标</sup>
</body>
</html>
文字:
文字设置
字体:font
Font-family 文本字体
Font-style 文本样式
Font-size 字体大小
Font-weight 字体粗细
Font-variant 小型大写字母或者正常字体显示文本
文本:text
Color 颜色
Line-height 行高
Text-align 文本对齐(水平对齐)
Vertical-align (垂直对齐) text-top
Word-spacing 字间距(单词之间的距离)
Letter-spacing 字符距离
Text-shadow 阴影设置
Direction 设置文本方向(rtl:右到左)
Text-indent 首行缩进
Text-decoration 设置删除线 overline 上面
Line-through 删除线
Underline 下划线
容器标签:
Div span header footer section nav
自定义容器标签:
Text-transform:文本转换
Uppercase 大写字母
Lowercase 小写
Capitalize 首字母大写
自定义字体引用:
@font-face{
Font-family:myfont;
Src:url(字体文件);
}
Display(显示)
Visibility(可见性)
Display:none;
Visibility:hidden;
隐藏的元素不占用空间
隐藏的元素仍占用空间与未隐藏之前占用一样的空间
Display:block把行内标签以块标签的方式显示
Display:inline把块标签以行内标签的方式显示
Display:inline-block把块标签以行内标签的方式显示,保留块标签的特性
定位:position
Position:static;
Relative;相对定位 以自身定位
Absolute;绝对定位 以父级定位
Fixed;固定定位 以浏览器定位
z-index: 层叠样式:负数为被覆盖
布局(雪碧图)
前端开发到底难不难学需要英语吗 前端开发需要学php 软件开发与前端开发区别
» 本文来自:前端开发者 » 《前端CSS 背景颜色background及font》
» 本文链接地址:https://www.rokub.com/38120.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!