知识点,标签,属性"/>
【前端】一些小的知识点,标签,属性
文章目录
- H5/CSS3
- align对齐属性
- hr标签的常用属性
- font 属性
- 文本格式化标签
- 特殊字符标签
- 锚点
- 文本居中
- 首行缩进
- 外链CSS
- 字体样式属性
- 文本外观属性
- CSS3新增的选择器
- 伪元素选择器
- 盒子模型的总宽度与总高度
- border属性
- padding属性
- margin属性
- box-shadow属性
- box-sizing属性
- background属性
- background-repeat图像平铺属性
- background-position图像位置属性
- background-attachment图像固定属性
- background-size图像大小属性
- background-origin图像相对位置
- background-clip背景图像的裁剪区域
- RGBA模式和opacity属性
- 常见的块元素
- 常见的行内元素
- 常见的行内块元素
- display
H5/CSS3
align对齐属性
left :设置标题文字左对齐(默认值)
center:设置标题文字居中对齐
right:设置标题文字右对齐
hr标签的常用属性
属性名 | 含义 | 属性值 |
---|---|---|
align | 设置水平线的对齐方式 | 可选择left、right、center三种值,默认为center,居中对齐 |
size | 设置水平线的粗细 | 以像素为单位,默认为2像素 |
color | 设置水平线的颜色 | 可用颜色名称、十六进制#RGB、rgb(r,g,b) |
width | 设置水平线的宽度 | 可以是确定的像素值,也可以是浏览器窗口的百分比,默认为100% |
font 属性
属性名 | 含义 |
---|---|
face | 设置文字的字体,例如微软雅黑、黑体、宋体等 |
size | 设置文字的大小,可以取1到7之间的整数值 |
color | 设置文字的颜色 |
文本格式化标签
标签 | 显示效果 |
---|---|
<b></b>和<strong></strong> | 文字以粗体方式显示(XHTML推荐使用strong) |
<i></i>和<em></em> | 文字以斜体方式显示(XHTML推荐使用em) |
<s></s>和<del></del> | 文字以加删除线方式显示(XHTML推荐使用del) |
<u></u>和<ins></ins> | 文字以加下划线方式显示(XHTML不赞成使用u) |
特殊字符标签
特殊字符 | 描述 | 字符的代码 |
---|---|---|
空格符 | ||
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
¥ | 人民币 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
° | 摄氏度 | ° |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 平方2(上标2) | ² |
³ | 立方3(上标3) | ³ |
锚点
用“<a href="#id名">链接文本</a>”创建链接文本
使用相应的id名标注跳转目标的位置
文本居中
text-align: center;
首行缩进
text-indent:2em;
外链CSS
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
字体样式属性
font-size属性用于设置字号。
font-family属性用于设置字体。
font-weight属性用于定义字体的粗细。
font-style属性用于定义字体风格。normal:默认值,浏览器会显示标准的字体样式;normal:默认值,浏览器会显示标准的字体样式;oblique:浏览器会显示倾斜的字体样式;
font综合属性用于综合设置字体样式。
@font-face属性是CSS3的新增属性,用于定义服务器字体。@font-face{font-family:字体名称;src:字体路径;}
word-wrap属性用于实现长单词和URL地址的自动换行
长度单位 | 说明 |
---|---|
em | 相对于当前对象内文本的字体尺寸 |
px | 像素,最常用,推荐使用 |
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
pt | 点 |
文本外观属性
color颜色
letter-spacing字间距
word-spacing单词之间的间距
line-height行间距
text-align
text-transform 控制英文字符的大小写
- 其可用属性值如下:
- none:不转换(默认值)
- capitalize:首字母大写
- uppercase:全部字符转换为大写
- lowercase:全部字符转换为小写
text-decoration文本的下划线,上划线,删除线
- 其可用属性值如下:
- none:没有装饰(正常文本默认值)。
- underline:下划线。
- overline:上划线。
- line-through:删除线。
text-indent首行文本的缩进
white-space设置空白符的处理方式
- 其属性值如下:
- normal:常规(默认值),文本中的空格、空行无效,满行(到达区域边界)后自动换行。
- pre:预格式化,按文档的书写格式保留空格、空行原样显示。
- nowrap:空格空行无效,强制文本不能换行,除非遇到换行标签<br />。内容超出元素的边界也不换行,若超出浏览器页面则会自动增加滚动条。
text-shadow文本添加阴影效果。
-
text-shadow:h-shadow v-shadow blur color;
text-overflow标示对象内溢出的文本
- 其属性值如下:
- clip:修剪溢出文本,不显示省略标签“…”。
- ellipsis:用省略标签“…”标示被修剪文本,省略标签插入的位置是最后一个字符。
CSS3新增的选择器
属性选择器、关系选择器、结构化伪类选择器、伪元素选择器4类
伪元素选择器
伪元素选择器 | 举例 | 说明 |
---|---|---|
::before | p::before | 表示在p标签的内容前面插入内容。 |
::after | p::after | 表示在p标签的内容后面插入内容。 |
盒子模型的总宽度与总高度
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
宽度属性width和高度属性height仅适用于块级元素,对行内元素无效(<img />和<input />标签除外
border属性
设置内容 | 样式属性 | 常用属性值 |
---|---|---|
边框样式 | border-style:上边 [右边 下边 左边]; | none无(默认)、solid单实线、dashed虚线、dotted点线、double双实线 |
边框宽度 | border-width:上边 [右边 下边 左边]; | 像素值 |
边框颜色 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
综合设置边框 | border:四边宽度 四边样式 四边颜色; | |
圆角边框 | border-radius:水平半径参数/垂直半径参数; | 像素值或百分比 |
图片边框 | border-images:图片路径 裁切方式/边框宽度/边框扩展距离 重复方式; |
属性 | 说明 |
---|---|
border-image-source | 指定图片的路径 |
border-image-slice | 指定边框图像顶部、右侧、底部、左侧内偏移量。 |
border-image-width | 指定边框宽度 |
border-image-outset | 指定边框背景向盒子外部延伸的距离。 |
border-image-repeat | 指定背景图片的平铺方式 |
padding属性
padding:5px /*四个方向内边距为5像素宽度*/
padding:5px 3px /*上下内边距为5像素,左右内边距为3像素*/
padding:5px 3px 4px /*上内边距为5像素,左右内边距为3像素,下内边距为4像素*/
margin属性
margin:5px /*四边外边距为5像素宽度*/
margin:5px 3px /*上下外边距为5像素,左右外边距为3像素*/
margin:5px 3px 4px /*外边距:上为5像素,左右为3像素,下为4像素*/
为了更方便地控制网页中的元素,制作网页时,通常先清除元素的默认内外边距。
*{padding:0; /*清除内边距*/margin:0; /*清除外边距*/
}
制作网页时,经常使块级元素水平居中。
p{ margin: 0 auto; }
box-shadow属性
box-shadow:像素值1 像素值2 像素值3 像素值4 颜色值 阴影类型;
box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #333 inset;
参数值 | 说明 |
---|---|
像素值1 | 表示元素水平阴影位置,可以为负值(必选属性)。 |
像素值2 | 表示元素垂直阴影位置,可以为负值(必选属性)。 |
像素值3 | 阴影模糊半径(可选属性)。 |
像素值4 | 阴影扩展半径,不能为负值(可选属性)。 |
颜色值 | 阴影颜色(可选属性)。 |
阴影类型 | 内阴影(inset)/外阴影(默认)(可选属性)。 |
box-sizing属性
box-sizing: content-box/border-box;
content-box:浏览器对盒模型的解释遵从W3C 标准,当定义width和height时,它的参数值不包括border和padding。
border-box:当定义width和height时,border和padding的参数值被包含在width和height之内。
background属性
background-repeat图像平铺属性
平铺属性值 | 含义 |
---|---|
repeat | 沿水平和竖直两个方向平铺(默认值) |
no-repeat | 不平铺(图像位于元素的左上角,只显示一次) |
repeat-x | 只沿水平方向平铺 |
repeat-y | 只沿竖直方向平铺 |
background-position图像位置属性
位置属性取值 | 含义 |
---|---|
单位数值 | 设置图像左上角在元素中的坐标,例如background-position:20px 20px; |
预定义的关键字 | 水平方向值:left、center、right。 |
垂直方向值:top、center、bottom。 | |
百分比 | 0% 0% :图像左上角与元素的左上角对齐。 |
50% 50%:图像50% 50%中心点与元素50% 50%的中心点对齐。 | |
20% 30%:图像20% 30%的点与元素20% 30%的点对齐。 | |
100% 100%:图像右下角与元素的右下角对齐,而不是图像充满元素。 |
background-attachment图像固定属性
固定属性取值 含义
scroll 图像随页面元素一起滚动(默认值)。
fixed 图像固定在屏幕上,不随页面元素滚动。
background-size图像大小属性
属性值 | 说 明 |
---|---|
像素值 | 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会默认为auto; |
百分比 | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会默认为auto; |
cover | 把背景图像扩展至足够大,使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中; |
contain | 把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域; |
background-origin图像相对位置
- 在上面的语法格式中,background-origin属性有三种取值,分别表示不同的含义,具体解释如下。
- padding-box:背景图像相对于内边距区域来定位。
- border-box:背景图像相对于边框来定位。
- content-box:背景图像相对于内容框来定位。
background-clip背景图像的裁剪区域
- 在语法格式上,background-clip属性和background-origin 属性的取值相似,但含义不同,具体解释如下。
- border-box:默认值,从边框区域向外裁剪背景。
- padding-box:从内边距区域向外裁剪背景。
- content-box:从内容区域向外裁剪背景。
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] ;
RGBA模式和opacity属性
rgba(r,g,b,alpha);
p{background-color: rgba(255,0,0,0.5);}
opacity:0-1;
常见的块元素
<h1>—<h6>
<div>
<p>
<li>
<ul>
<ol>
常见的行内元素
<strong>
<b>
<a>
<em>
<span>
<u>
常见的行内块元素
<input>
<img>
<td>
display
inline
- 此元素将显示为行内元素(行内元素默认的display属性值)。
block
- 此元素将显示为块元素(块元素默认的display属性值)。
inline-block
- 此元素将显示为行内块元素,可以对其设置宽高和对齐等属性,但是该元素不会独占一行。
none
- 此元素将被隐藏,不显示,也不占用页面空间。
更多推荐
【前端】一些小的知识点,标签,属性
发布评论