多层样式重叠时,按“就近原则”覆盖:行内样式>内嵌样式>链接样式>浏览器默认样式。
p{ /*选择器*/
font-size:12px; /*字号*/
color:blue; /*颜色*/
font-weight:bold; /*加粗*/
}
- 添加方法一:行内样式,
style
作为<p></p>
的属性添加,只对当前标签起作用。
<p style = "color:red"> /*行内样式*/
- 添加方法二:内嵌样式,嵌入到
<head></head>
标签中,针对多个标签起作用。
<style type="text/css">
p{
color: red;
} /*内嵌样式,只对当前页面的所有p标签有用*/
</style>
- 添加方法三:外部单独文件,命名为 style.css,选择大括号形式设置属性。
<link rel="stylesheet" href="css/style.css"/> /*html文件引用*/
<!--html文件内代码-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Lorem ipsum.</p>
</body>
</html>
<!--style.css文件内代码-->
p{
color: red;
font-size: 12px;
}
-
标签选择器:定义在某种标签上使用。
-
类别(class)选择器:可作用于多个网页元素,
-
ID选择器:用#号开头定义,有唯一性,只能唯一被引用一次,
在这里插入代码片
-
嵌套声明:
<p></p>
标签嵌套<span></span>
标签,写作p span{ }
。 -
集体声明:作用于
<h1></h1>
和<p></p>
标签上,写作h1,p{ }
。 -
全局声明:
*{ }
,针对所有网页元素。
单位 | 描述 |
---|---|
px | 像素 |
em | 字符,自适应用户字体 |
% | 百分比 |
颜色 | 描述 |
---|---|
rgb(red,green,blue) | 每个分量取0-255 |
rgb(red%,green%,blue%) | 百分比值0%-100% |
rgba(red,green,blue,a) | a值为设置不透明度,0.0-1.0 |
#rrggbb | 十六进制数表示 |
属性 | 描述 | 取值 |
---|---|---|
color | 文本颜色 | red #f00 rgb(255,0,0) |
letter-spacing | 字符间距 | 2px -3px (字符相互重叠) |
line-height | 行高 | 14px 1.5em 120% |
text-align | 对齐 | center left right justify (两端对齐) |
text-decoration | 装饰线 | none overline underline line-through |
text-indent | 首行缩进 | 2em |
text-shadow | 阴影 | 水平偏移-垂直偏移-模糊度-颜色 |
字体 | 描述 | 取值 |
---|---|---|
font | 在一个声明中设置所有字体的属性 | font:bold 18px ’幼圆‘ |
font-family | 字体系列,若没有第一种字体,则使用第二种,没有第二种则使用第三种 | font-family:"Hiragino Sans GB","Microsoft YaHei",san-serif; |
font-size | 字号 | 14px 120% |
font-style | 斜体 | italic(斜体更强) oblique |
font-weight | 粗体 | bold |
背景 | 描述 |
---|---|
background-color | 颜色 |
background-image | url(”logo.jpg“) 图片会覆盖掉背景颜色 |
background-repeat | 图片填充方式,默认为棋盘格填充(repeat );横向填充(repeat-x );纵向填充(repeat-y );只显示一次(no-repeat ) |
background: 颜色 图片 repeat
超链接 | 描述 |
---|---|
a:link | 普通的、未被访问的超链接 |
a:visited | 用户已访问 |
a:hover | 鼠标指针悬浮在上面的 |
a:active | 被鼠标点击的 |
伪类选择器用“:”标记。
定义四种超链接样式的优先级为:Love & Hate
a:link{
text-decoration : none; /*无下划线装饰*/
color : #09f; /*浅蓝色*/
} /*未访问*/
a:visited{
color : #f00; /*红色*/
} /*已访问*/
a:hover{
text-decoration : underline;
color :#03c; /*深蓝色*/
} /*鼠标悬停*/
a:active{
text-decoration : none; /*无下划线装饰*/
color : #03c;
} /*活跃*/
设置悬停文本变大:
a{
font-size:22px;
}
a:hover{
font-size : 120%;
}
列表/表格
好的这个没保存不见了
列表:list-style&&list-style-image&&list-style-type&&list-style-position
表格:width&&height&&border&&border-collapse
CSS 动画
<style type="text/css">
p {
width: 100px;
height: 100px;
background-color: antiquewhite;
}
p:hover {
animation-duration: 1s;
animation-delay: 200ms;
animation-name: kaopu;
animation-iteration-count: infinite;/* 动画无限循环 */
animation-direction: nomal;/* 动画变大以后再变小 */
}
@keyframes kaopu {
to{
width: 200px;
height: 200px;
background-color: orange;
}
}
</style>
CSS的布局和定位
盒子模型
属性 | 描述 | 取值 |
---|---|---|
overflow | 超出内容显示方法 | hidden scroll auto |
border-width | px thin medium thick | |
border-style | dashed dotted solid double |
border:width style color
.line{
height:1px;
width:500px;
border-top:1 px solid #e5e5e5;
}
margin:top right bottom left
bottom缺省和top相等,left与right相等,margin属性垂直外边距自动合并,水平居中auto。
CSS的定位机制
- 文档流
flow
为默认的定位效果,上下排列。
元素分类:block
、inline
、inline-block
,不同类像元素可通过display
相互转换。
block
元素独占一行,可以设置height、width、margin、padding
属性。常见的block
元素有:<div> <p> <h1>~<h6> <ol> <ul> <table> <form>
。
a{
display:block;
}<!--将超链接显示为block类型-->
inline
元素不单独占用一行,宽度够用则所有inline
都在一行显示,不可以设置width、height
。常见的inline
元素有<span> <a>
。
inline
元素有间隙问题,一般将其转为block
类型,如嵌套在<p>
标签内或<ul><li>
标签内。inline-block
类型元素,不单独占用一行,元素的各个标签都可以设置。常见的为<img>
标签。
导航条示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mysite</title>
<style>
*{
padding: 0;
margin: 0;
}
#nav{
width: 300px;
margin: 100px auto;/*0表示上下边距*/
font-size: 0;/*可解决inline元素默认间距问题*/
}
a{
display: inline-block;
width: 80px;
height: 30px;
font-size: 14px;
text-align: center;
line-height: 30px;/*与height值相同则可以达到垂直居中效果*/
text-decoration: none;
border-bottom: 1px solid #ccc;
}
a:hover{
color: white;
background-color: #ccc;
border: 1px solid;
border-left-color: orange;
border-right-color: orange;
border-top-color: orange;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
</div>
</body>
</html>
- 浮动定位
float
默认情况下,两个div盒子是垂直排列的;要把区域拆分成若干列时通常采用浮动定位。
float
属性可以设置浮动clear
属性可以清除浮动,单向清除浮动,则被清除侧不会有元素显示了position
属性
- 层定位
layer
让网页元素像图层一样叠在一起