标签:背景图像 释放 :link url 设置字体 设置字体大小 class type strong
id选择器只能网页中的一个元素使用
id》类》标签
高级
层次选择器
结构伪类选择器
属性选择器
作用:能让某几个文字或者某个词语凸显出来
属性名 | 含义 | 举例 |
---|---|---|
font-family | 设置字体类型 | font-family:"隶书"; |
font-size | 设置字体大小 | font-size:12px; |
font-style | 设置字体风格 | font-style:italic; |
font-weight | 设置字体的粗细 | font-weight:bold; |
font | 在一个声明中设置所有字体属性 | font:italic bold 36px "宋体"; |
风格>粗细>大小>类型
属性 | 含义 | 举例 |
---|---|---|
color | 设置文本颜色 | color:#00C; |
text-align | 设置元素水平对齐方式 | text-align:right; |
text-indent | 设置首行文本的缩进 | text-indent:2em; |
line-height | 设置文本的行高 | line-height:25px; |
text-decoration | 设置文本的装饰 | text-decoration:underline; |
vertical-align | 垂直对齐方式 | middle。top。bottom |
属 性 名 | IE | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
Text-shadow | 9+ | 3.5+ | 2.0+ | 9.6+ | 4.0+ |
语法:
text-shadow :color x-offset y-offset blur-radius;
伪类名称 | 含义 | 示例 |
---|---|---|
a:link | 未单击访问时超链接样式 | a:link{color:#9ef5f9;} |
a:visited | 单击访问后超链接样式 | a:visited {color:#333;} |
a:hover | 鼠标悬浮其上的超链接样式 | a:hover{color:#ff7300;} |
a:active | 鼠标单击未释放的超链接样式 | a:active {color:#999;} |
设置伪类的顺序:a:link->a:visited->a:hover->a:active
值 | 说明 | 语法示例 |
---|---|---|
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 |
背景颜色
background-color
背景图像
background-image
背景重复方式
background-repeat属性
repeat:沿水平和垂直两个方向平铺
no-repeat:不平铺,即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
背景定位
background-position属性
值 | 含义 |
---|---|
Xpos Ypos | 单位:px, Xpos表示水平位置,Ypos表示垂直位置 |
X% Y% | 使用百分比表示背景的位置 |
X、Y方向关键词 | 水平方向的关键词: left、center、right 垂直方向的关键词: top、center、bottom |
背景属性
background属性
.title {
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
background:#C00 url(../image/arrow-down.gif)205px 10px no-repeat;
/* 背景颜色 背景图片 背景定位 背景平铺方式*/
}
背景尺寸background-size
属性值 | 描述 |
---|---|
auto | 默认值,使用背景图片保持原样 |
percentage | 当使用百分值时,不是相对于背景的尺寸大小来计算的,而是相对于元素宽度来计算的 |
cover | 整个背景图片放大填充了整个元素 |
contain | 让背景图片保持本身的宽高比例,将背景图片缩放到宽度或者高度正好适应所定义背景的区域 |
css渐变
线性渐变
颜色沿着一条直线过渡:从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合
属 性 名 | IE | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
Gradient | 10+ | 19.0+ | 26.0+ | 12.1+ | 5.1+ |
IE浏览器是Trident内核,加前缀:-ms-
Chrome浏览器是Webkit内核,加前缀:-webkit-
Safari浏览器是Webkit内核,加前缀:-webkit-
Opera浏览器是Blink内核,加前缀:-o-
Firefox浏览器是Mozilla内核,加前缀:-moz-
标准文档流:指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列。这也是元素默认的排列方式
标准文档流组成
块级元素(block)
<h1>…<h6>、<p>、<div>、列表
内联元素(inline)
<span>、<a>、<img/>、<strong>...
内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立
标签:背景图像 释放 :link url 设置字体 设置字体大小 class type strong
原文地址:https://www.cnblogs.com/joenx/p/13176028.html