1.CSS Cascading(级联)Style(样式)Sheet(表)层叠样式表
作用:修饰页面。修饰字体的大小、颜色、元素的精确定位。
优点:多个样式共同起作用
将样式信息和数据信息分离
2.样式表:css和html结合的方式
1. 内联式样式表
优点:优先级最高
缺点:样式内容和展示数据内容杂糅在一起
特点:只能给当前标签施加样式
2. 内嵌式样式表
<style type="text/css" >
p{
color:#3cf3c3;
}
</style>
特点:给当前页面的所有的某个标签施加样式
3. 外部样式表
<style type="text/css">
@import url("1.css");
</style>
<link rel="stylesheet" type="text/css" href="1.css" />
优先级:内联>内嵌 就近原则
3.css选择器
1. 类选择器
.class1{ }
2. id选择器
# id1{ }
3. 标签选择器(html选择器)
div{ }
4. 属性选择器
p[id*=xx|id^=xx|id]{ }
table>tr{ }
table td { }
7. 组合选择器
用逗号隔开
8. 伪类选择器
a:link{ }
a:hover{ }
a:active{ }
a:visited{ }
4.字体属性
color: red; 颜色
font-style:normal|italic|oblique; 是否斜体
font-variant:normal|small-caps; 小型的大写字母
font-weight:normal|bold|bolder|lighter|100~900; 加粗
font-size:small|medium|large|50%|500px;字体大小
line-height:50%|300px;行高
font-family:宋体; 字体类型
font:style|variant|weight|size|height|family; 复合属性
text-decoration:none|underline|overline|line-through;
text-transform:none|capitalize|uppercase|lowercase;
5.文本属性
text-align:left|right|center|justify;
vertical-align:top|middle|bottom;
6.背景属性
background-color:red;
background-image:url("");
background-repeat:no-repeat|repeat|repeat-x|repeat-y;
background-attachment:fixed;
background-position: ;
background:
7.列表属性
list-style-image:url();
list-style-position: outside|inside;
list-style-type: disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha ;
list-style:image|position|type;
8.边框属性
border-width:
border-style:none|hidden|dotted|dashed|solid|double
border-color:
border:width|style|color;
border-right:width|style|color;
border-left-width:
border-left-style:
border-left-color:
9.外边框属性
margin:top|right|bottom|left;
10.内边框属性
padding:top|right|bottom|left;
作用:修饰页面。修饰字体的大小、颜色、元素的精确定位。
优点:多个样式共同起作用
将样式信息和数据信息分离
2.样式表:css和html结合的方式
1. 内联式样式表
优点:优先级最高
缺点:样式内容和展示数据内容杂糅在一起
特点:只能给当前标签施加样式
2. 内嵌式样式表
<style type="text/css" >
p{
color:#3cf3c3;
}
</style>
特点:给当前页面的所有的某个标签施加样式
3. 外部样式表
<style type="text/css">
@import url("1.css");
</style>
<link rel="stylesheet" type="text/css" href="1.css" />
优先级:内联>内嵌 就近原则
3.css选择器
1. 类选择器
.class1{ }
2. id选择器
# id1{ }
3. 标签选择器(html选择器)
div{ }
4. 属性选择器
p[id*=xx|id^=xx|id]{ }
```
<p id="xx" >1</p>
<p id="yyxx" >2</p>
<p id="yyzz" >3</p>
<p >4</p>
```
5. 父子选择器
table>tr{ }
```
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
```
6. 祖先后代选择器
table td { }
7. 组合选择器
用逗号隔开
8. 伪类选择器
a:link{ }
a:hover{ }
a:active{ }
a:visited{ }
4.字体属性
color: red; 颜色
font-style:normal|italic|oblique; 是否斜体
font-variant:normal|small-caps; 小型的大写字母
font-weight:normal|bold|bolder|lighter|100~900; 加粗
font-size:small|medium|large|50%|500px;字体大小
line-height:50%|300px;行高
font-family:宋体; 字体类型
font:style|variant|weight|size|height|family; 复合属性
text-decoration:none|underline|overline|line-through;
text-transform:none|capitalize|uppercase|lowercase;
5.文本属性
text-align:left|right|center|justify;
vertical-align:top|middle|bottom;
6.背景属性
background-color:red;
background-image:url("");
background-repeat:no-repeat|repeat|repeat-x|repeat-y;
background-attachment:fixed;
background-position: ;
background:
7.列表属性
list-style-image:url();
list-style-position: outside|inside;
list-style-type: disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha ;
list-style:image|position|type;
8.边框属性
border-width:
border-style:none|hidden|dotted|dashed|solid|double
border-color:
border:width|style|color;
border-right:width|style|color;
border-left-width:
border-left-style:
border-left-color:
9.外边框属性
margin:top|right|bottom|left;
10.内边框属性
padding:top|right|bottom|left;