1.CSS:
css三大特性:
层叠性: 多种css样式的叠加,采用就近原则
继承性: 子代继承父代
优先级: 考虑权重(可叠加),如 .box ul li : 0,0,1,2 注:没有进位
| 继承或* | 0,0,0,0 |
| 每个标签 | 0,0,0,1 |
| 每个类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内样式 | 1,0,0,0 |
| 每个!important | 无穷大 |
css的三种方式:
内部样式: 一般位于title标签之后
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>行内式: 只对其所在的标签及嵌套在其中的子标签起作用,优先级最高
<a href="xxx" style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </a>外链式: 将所有的样式放在一个或多个.css文件中
<head>
<link rel="stylesheet" href="CSS文件的路径" />
</head>2.字体样式:
font-size:字号大小 单位:px、em 网页中普遍使用14px+
font-family:设置字体 宋体、黑体、微软雅黑
font-weight:字体粗细 normal、bold、bolder、lighter或者100的整数倍
font-style:字体风格 设置normal(标准字体)、italic(斜体)、oblique(倾斜)
注: 选择器{font: [font-style] [font-weight] font-size font-family; }
3.外观属性:
color: 文本颜色,值分别可以为预定义颜色、十六进制、RGB
line-height: 行间距,即字符的垂直间距(行高),实现垂直居中,只需要将其余height相等即可
text-align: 文本水平对齐方式,值为center、left、right
text-indent: 首行缩进,值为em(字符宽度的倍数,建议使用)、lem(一个汉字的宽度)
text-decoration: 文本的装饰,大多数用于给链接和列表修改装饰效果
| 值 | 作用 |
| none | 默认,即标准文本 |
| underline | 文本下划线 |
| overline | 文本上的一条线 |
| line-through | 删除线 |
4.选择器
基础选择器:
1).通配符选择器: 作用范围最广,能匹配页面中所有的元素
* {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}/* 一般情况写在css文件开头,用于清除所有标签自带样式,以方便用户自定义样式 */
* {
margin: 0;
padding: 0;
}2).元素选择器: 为页面中同类型的标签统一设置样式
标签名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}3).类选择器: 多个元素中定义相同的class属性
.类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}4).id选择器: 一个id对应一个元素,页面不允许有相同id属性值出现,但是允许相同class值
#id名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}复合选择器:
1).交集选择器: 由标签选择器和class选择器构成,且两个选择器间不能有空格
/* 选择的是类名为one的超链接标签 */
a.one{
font-size:20px;
}2).并集选择器: 各个选择器(任何基础选择器)通过逗号连接形成
/* class属性值为box的和所有p标签和id属性值为nav的三个选择器 */
.box,p,#nav{
color:#F00;
}3).后代选择器: 用来选择元素的后代(包括父,子,孙...) 语法:最外层的标签写在最前面,内存标签写在后面,中间用空格分开
/* class属性值为box下的所有p标签 */
.box p{
color:red;
}4).子代选择器: 只能选择作为某元素子元素的元素,即父子关系
.box>p{
color:red;
}伪类选择器:
:link 未访问的链接
:visited 已经访问的链接
:hover 鼠标移动到链接上
:active 选定的链接
注:如果使用伪类选择器,可以不写,但是不能颠倒顺序
/* 为a标签设置未访问时颜色为红色 */
a:hover{
color:red;
}5.标签的类型:
block: 块级元素,独占一行,可以设置宽高及对齐方式等属性
inline: 行内元素,不具有独立的区域,不可设置宽高等属性,常用于文本的样式
注:和相邻行内元素在一行上;高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效;默认宽度就是它内容的宽度;行内元素只能容纳文本或则其他行内元素(除a标签)
inline-block: 行内块元素,如<img />、<input />、<td></td>deng,可设置高度,行高等属性
display: 类型转换, 如行转块: display:block;
6.背景:
| background-color | 背景颜色 |
| background-image | 背景图片(输入路径) |
| background-repeat | 是否平铺,repeat、no-repeat、repeat-x、repeat-y |
| background-position | 背景位置,top、center、bottom...或者百分数 |
| background-attachment | 固定或滚动,scroll(滚动)、fixed(固定) |
或者整体设置:
background:背景颜色 图片地址 是否平铺 是否滚动 背景位置;
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
