id与class的区别
- id：一对一 先找到结构与内容，再给其定义样式
- class：一对多 先定义好一种样式，再套给多个结构/内容
背景样式
背景属性：
- background-color：规定要使用的背景颜色。
- background-position：规定背景图像的位置。
- background-size：规定背景图片的尺寸。
- background-repeat：规定如何重复背景图像；默认值repeat。
- background-origin：规定背景图片的定位区域，position的位置及背景图片的相对基点由该属性决定。默认值为padding-box；如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果
- background-clip：规定背景颜色的绘制区域，不改变position与背景图片的位置相对起始点（由background-origin属性决定）。默认值为border-box
-
background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。
- 固定的情况下：background-position会根据浏览器定位
- 非固定的情况下：background-position会根据元素本身定位
- fixed(固定)情况下，背景图像超出元素范围不显示*/
-
background-image：规定要使用的背景图像；多张图片可通过
,隔开，其他属性按图片顺序依次匹配，同样按,隔开。
属性代码示例1：
<head>
<meta charset="UTF-8">
<title></title>
<style>
.bgcolor {
width: 1000px;
height: 1000px;
background-color: #ccc;
}
.bgimage {
margin-left: 50px;
padding: 100px;
width: 1000px;
height: 500px;
background-color: #ffc;
/* 背景图片 */
background-image: url('submit.gif');
/* 不允许重复，默认值是允许重复 */
background-repeat: no-repeat;
/* 背景图片显示的位置，图片显示在范围内的右边，从图片的顶部开始显示(可以将height设置小一点看效果) */
/* background-position: right center; */
/* background-position也可以通过像素、百分比实现，从bgimage容器中的100(从左到右，百分比也是同理),20(从上到下，百分比也是同理)像素处开始显示 */
background-position: 100px 20px;
/* 背景图像固定，不随内容滚动,直到被其他容器覆盖 */
background-attachment: fixed;
/* CSS3新增属性 规定背景图片的尺寸 200宽 100高*/
background-size: 200px 100px;
/* CSS3新增属性 规定 background-position 属性相对于什么位置来定位 */
/* 如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。 */
/* 该属性没有继承性 */
/* background-origin: padding-box相对于内边距|border-box相对于border外边距|content-box相对于内容框; */
/* 因为有padding: 100px的属性，所以实际的position为200px 120px; */
/* 效果查看：http://www.w3school.com.cn/tiy/c.asp?f=css_background-origin */
background-origin: content-box;
/* CSS3新增属性 规定背景的绘制区域 */
/* 属性值与origin一样；无继承性;有attachment属性也一样有效*/
background-clip: content-box;
}
</style>
</head>
<body>
<div class="bgcolor">
<div class="bgimage">
<p>随意输入的内容</p>
<p>随意输入的内容</p>
<p>随意输入的内容</p>
<p>随意输入的内容</p>
<p>随意输入的内容</p>
<p>随意输入的内容</p>
<p>随意输入的内容</p>
<p>随意输入的内容</p>
<p>随意输入的内容</p>
</div>
</div>
</body>
代码示例2：clip、origin、size
<head>
<meta charset="UTF-8">
<title>背景相关属性clip-origin-size</title>
<style>
* {
margin: 0px;
padding: 0px;
}
strong {
color: #ff0000;
display: block;
margin: 0.8em 0em;
}
.inline_block {
display: inline-block;
/*inline-block的对齐方式vertical-align是根据默认baseline来排列的，
baseline是通过vertical-align来设置的，如top bottom middle等*/
/*如果不添加该属性，inline-block的元素排列有时候会出现上下不一致*/
vertical-align: top;
/*display:inline-block元素间会有间隙，所以使用-margin解决；
或者不使用inline-block，直接用float解决*/
margin-left: -9px;
margin-right: 1em;
background-color: yellow;
padding: 5px;
}
/*第一个inline-block元素不需要添加-margin，因没有间隙*/
.first_inline_block {
margin-left: 0px;
}
.background_clip div, .background_origin div {
background: url("../public/img/2.jpg") #333333 no-repeat;
color: #ffff00;
width:200px;
height: 100px;
text-align: center;
border: 1em dashed #0000ff;
/*规定背景图像的大小*/
background-size: 50px;
padding: 1em;
}
/*若下方选择器存在统一的样式，如.background_clip div；
这个统一样式前面跟了父元素，那么下方的选择器也需要跟上父元素，否则无效；
若.background_clip div修改为.border_box,.padding_box,.content_box，那么下方只需写.border_box即可，
不需要加上父元素*/
.background_clip .border_box {
-webkit-background-clip: border-box;
background-clip: border-box;
}
.background_clip .padding_box {
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.background_clip .content_box {
-webkit-background-clip: content-box;
background-clip: content-box;
}
.background_origin .border_box {
-webkit-background-origin: border-box;
background-origin: border-box;
}
.background_origin .padding_box {
-webkit-background-origin: padding-box;
background-origin: padding-box;
}
.background_origin .content_box {
-webkit-background-origin: content-box;
background-origin: content-box;
}
</style>
</head>
<body>
<h2>background-clip 规定背景颜色绘制范围的属性</h2>
<strong>该属性不改变背景绘制起始点，只规定背景绘制的范围</strong>
<div class="background_clip">
<section class="inline_block first_inline_block">
<h3>background-clip:border-box</h3>
<div class="border_box">背景绘制区域包含border</div>
</section>
<section class="inline_block">
<h3>background-clip:padding-box</h3>
<div class="padding_box">背景绘制区域包含padding，不包含border</div>
</section>
<section class="inline_block">
<h3>background-clip:content-box</h3>
<div class="content_box">背景绘制区域包含content，不包含border、padding</div>
</section>
</div>
<br/>
<hr/>
<h2>background-origin 规定背景图片从相对位置开始绘制的属性</h2>
<strong>该属性规定背景图片绘制的相对起始点</strong>
<div class="background_clip background_origin">
<section class="inline_block first_inline_block">
<h3>background-clip:border-box</h3>
<h3>background-origin:border-box</h3>
<div class="border_box">背景图片绘制起始点从border边缘开始</div>
</section>
<section class="inline_block">
<h3>background-clip:padding-box</h3>
<h3>background-origin:padding-box</h3>
<div class="padding_box">背景图片绘制起始点从padding外沿开始</div>
</section>
<section class="inline_block">
<h3>background-clip:content-box</h3>
<h3>background-origin:content-box</h3>
<div class="content_box">背景图片绘制起始点从content外沿开始</div>
</section>
</div>
</body>
代码示例2效果图
文本样式
文本属性
- color：文本颜色
- line-height：文本行高
- letter-spacing：字符间距
- word-spacing：单词间距
- text-align：文本水平对齐方式
- text-decoration：文本修饰，如下划线、删除线等；多属性值可同时使用，即同时拥有多种修饰
- text-indent：文本首行缩进
-
text-transform：文本大小写转化
- capitalize：每个单词首字母大写
- uppercase：所有字母都为大写
- lowercase：所有字母都为小写
-
direction：文本的书写方向，默认为ltr(从左到右)；当文档中使用
lang="ar" (即语言设置为阿拉伯语)时，无需搭配unicode-bidi属性即可实现direction指定的文字书写方向；其他语言中，若没有unicode-bidi配合，则与text-align显示的效果一样 -
unicode-bidi：unicode-bidi 属性与direction属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言。该属性为不可动画属性<small>(即不可在动画属性中使用该属性)</small>
- normal：对象不打开附加的嵌入层，对于内联元素，隐式重排序跨对象边界进行工作。
- embed：创建一个附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序。
- bidi-override：创建一个附加的嵌入层，严格按照direction属性的值重排序。忽略隐式双向运算规则。
如在unicode-bidi:bidi-override属性的元素下让对象内部进行隐式重排序(即按输入的文本排序)，可以通过给该子元素添加unicode-bidi:embed属性值完成
- white-space：设置如何处理元素内的空白
- word-wrap：属性允许长单词或 URL 地址换行到下一行
- word-break：属性规定自动换行的处理方法
- text-shadow：设置文本阴影效果，4个参数x,y,blur,color
white-space、word-wrap、word-break的区别（代码示例）：
<head>
<meta charset="UTF-8">
<title>white-space、word-wrap、word-break的区别</title>
<style>
p.test1 {
/*单词级：先根据浏览器默认的方式处理换行，
再根据单词的换行方式进行处理*/
word-wrap: break-word;
}
p.test2 {
/*浏览器级*/
word-break: break-all;
}
p.test3 {
/*浏览器级*/
white-space: nowrap;
}
p {
width: 11em;
border: 1px solid #000000;
}
</style>
</head>
<body>
<h3>word-wrap:break-word; </h3>
<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<h3>word-break:break-all; </h3>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<h3>white-space:nowrap;</h3>
<p class="test3">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<h3>默认情况</h3>
<p>This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p><b>注释：</b>目前 Opera 不支持 word-break 属性。</p>
</body>
上述代码示例效果图
direction、text-aligin与unicode-bidi的用法（代码示例）
<head>
<meta charset="UTF-8">
<title>direction与unicode-bidi用法</title>
<style>
section {
border: 1px solid;
margin-top: 10px;
}
.direction {
/*规定文字方向为从右到左*/
direction: rtl;
}
.align {
/*设置文本水平对齐方式为left*/
text-align: left;
}
.bidi-override {
/*创建一个附加的嵌入层，并严格按照direction属性值排序*/
unicode-bidi: bidi-override;
}
.embed {
/*创建一个附加的嵌入层，并将对象进行隐式重排序*/
unicode-bidi: embed;
color: #f00;
}
</style>
</head>
<body>
<section>
<h3>阿拉伯语言与非阿拉伯语言下的direction属性：
<small>下方 1 2 3 4 5 6 为阿拉伯语</small>
</h3>
<p class="direction">
1 2 3 4 5 6 阿拉伯语自动根据direction指定方向排序，其他语言内部进行隐式重排序；
若没有设置水平对齐方向，则根据direction设置水平对齐
</p>
<p class="direction align">
1 2 3 4 5 6 阿拉伯语自动根据direction指定方向排序，其他语言内部进行隐式重排序；
若设置了水平对齐方向，则根据text-align设置水平对齐
</p>
</section>
<section>
<h3>非阿拉伯语情况下通过unicode-bidi实现根据direction属性排序</h3>
<p class="direction">只有direction:rtl的情况</p>
<p class="direction align">只有direction:rtl与text-align:left的情况</p>
<p class="direction bidi-override">direction:rtl与unicode-bidi:bidi-override的情况</p>
<p class="direction bidi-override">direction:rtl与unicode-bidi:bidi-override的情况,<span
class="embed">这部分文字按代码书写顺序排序</span></p>
</section>
</body>
上述代码示例效果图
文本样式综合代码示例
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
height: 40px;
margin-top: 20px;
background-color: #ccc;
width: 380px;
}
.color {
color: #ff0;
}
.direction {
direction: rtl;
}
.direction span {
display: inline-block;
}
.textAlign {
text-align: right;
}
.lineHeight {
line-height: 40px;
}
.letterSpacing {
letter-spacing: 1em;
}
.wordSpacing {
word-spacing: 1em;
}
.decoration {
/*多属性值可同时使用*/
text-decoration: line-through overline;
}
.textIndent {
text-indent: 1em;
}
.textTransform {
text-transform: uppercase;
}
.whiteSpace {
/* 多的空格合并，但不换行;默认会换行 */
white-space: nowrap;
}
.textShadow {
/*设置文本阴影效果，x、y坐标偏移量、模糊程度，阴影颜色*/
text-shadow: 0.3em 0.3em 0.1em #f00;
}
.overflowWrap {
overflow-wrap: break-word;
}
</style>
</head>
<body>
<div>
<section>
<h2>CSS文本</h2>
<p class="color">color</p>
<p class="direction">
<span>direction:rtl</span><span>下</span><span>块</span><span>元</span><span>素</span><span>从</span><span>右</span><span>向</span><span>左</span>
</p>
<p class="textAlign">text-align 文本整体位于右侧</p>
<p class="lineHeight">line-height=height的效果</p>
<p class="letterSpacing">letter spacing 字符间距</p>
<p class="wordSpacing">word spacing 单词间距</p>
<p class="decoration">text-decoration </p>
<p class="textIndent">text-indent 首行缩进</p>
<p class="textTransform">text-transform，原小写全转换为大写</p>
<p class="whiteSpace">white-space nowrap 空白处理方式 这里不换行这里不换行这里不换行这里不换行这里不换行</p>
<p class="textShadow">CSS3新增属性 text-shadow</p>
<p class="overflowWrap">werwerjlsdjfksjkdlfjsldjfksdlfjksdfjwerwerjlsdjfksjkdlfjsldjfksdlfjksdfj当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行</p>
</section>
</div>
</body>
上述代码示例效果图
自定义字体
使用@font-face定义自定义字体，请看如下代码示例：
<style>
@font-face {
/*定义自定义字体名称为myfont*/
font-family: myfont;
/*自定义字体源 local表示客户端字体*/
src: local("Arial111"),
/*local可以存在多个，也可以不存在；不存在的情况下直接调用服务端字体*/
local("Verdana111"),
/*url表示自定义(服务端)字体地址*/
url("../public/font/myfont.ttf"),
/*url可以存在多个，1是考虑到字体不存在可以引用下一个，2是考虑到浏览器不兼容的情况可以使用下一个*/
url("../public/font/myfont.otf");
}
p{
/*使用自定义的字体myfont*/
font-family:myfont;
}
</style>
链接样式
链接的四种状态：
- a:link 未被访问过的链接，链接的原始状态
- a:visited 已经被访问过的链接状态
- a:hover 鼠标移动到链接上时的状态
- a:active 鼠标移动到链接上并按下时(未抬起)的状态
列表样式与表格样式
列表样式属性
- list-style: 简写列表项样式
- list-style-image: 列表图标的图片，无法设置大小，只占默认空间大小
- list-style-position: 列表图标位置，指定列表图标放置的位置(inside:在内容区域内，outside[默认]:在内容区域外)
- list-style-type: 列表图标的形状，存在list-style-image时，此属性无效
list-style-image不可以设置图片大小，但是css3中background-image可以设置大小，所以可以将list-style设置为none，通过背景样式来实现列表项图像标志的大小
表格样式属性
-
border-collapse：折叠表格边框的属性，若值为collapse，则table、tr、td的边框合并，合并后的border样式决定关系如下：
- table、tr、td都设置border样式，外边框和横线由tr决定，内竖线由td决定
- 只有table和td设置了border样式，外边框由table决定，其他都由td决定
- 只有td设置了border样式，全有td决定表格边框样式
代码示例：
table, th, td { padding: 5px; text-align: center; } td, th { border: 1px dotted #ff0000; } tr { /*未折叠状态下，tr的border不会显示*/ border: 1px solid #0000FF; } table { border: 1px solid #000; } table { /* 折叠border，table、tr、td的边框折叠成一条 * 折叠后的border样式： * 1.table、tr、td都设置border样式，外边框和横线由tr决定，内竖线由td决定 * 2.只有table和td设置了border样式，外边框由table决定，其他都由td决定 * 3.只有td设置了border样式，全有td决定表格边框样式*/ border-collapse: collapse; }
##轮廓样式outline
该样式在盒子模型成位于最外层，即在border之外，且不会被文档流计入宽高。在chrome中，当搜索栏处于获取焦点的状态时，可见外面的一个轮廓就是chrome针对input获取焦点时默认的outline样式
#####代码示例
```html
<head>
<meta charset="UTF-8">
<title></title>
<style>
p {
/* 轮廓outline 属性值依次为颜色 线条样式 线条宽度(粗) */
outline: #ff0 dashed 10px;
border: #000 dotted 10px;
}
input {
border: 5px solid;
/*获取焦点后，input会被渲染上浏览器默认的轮廓样式，通过自定义轮廓样式取消*/
outline: none;
}
input:focus {
outline: #ff0000 dotted 5px;
}
</style>
</head>
<body>
<p>轮廓:轮廓的粗细不影响元素的宽高，而border会影响元素的宽高；轮廓在border之外</p>
<input type="text" placeholder="获取焦点后显示轮廓">
</body>
上述代码示例效果图
input获取焦点时的效果图
