什么是CSS?
·CSS指层叠样式表(cascading style sheets)
·样式定义如何显示HTML元素
·样式通常存储在样式表中
·把样式添加到HTML4.0中是为了解决内容与表现分离的问题
·外部样式表可以极大提高工作效率
·外部样式通常存储在CSS文件中
·多个样式可层叠为一个
选择器的使用
-
派生选择器
说明:派生选择器是以标签的层级关系来定位元素的
例:
body{ background-color:black } -
id选择器
说明:id选择器是以标签中id属性的值来定位元素的(id是唯一的)
例:假设id等于name
则:#name{ background-color:black } -
类选择器
说明:类选择器是以标签中class属性的值来定位元素的(class属性可以有多个一样的值)
例:假设class值等于pass(可以有多个)
则:.pass{ background-color:black } -
属性选择器
说明:属性选择器是以标签中属性的名称来定位元素的
例:title属性
1.[title]{ color : red }:设置所有title属性的样式
2.[title=xxx]{ color : red }:设置所有title=xxx属性的样式
3.[title~=xxx]{ color : red }:设置所有title中包含xxx属性的样式。适用于由空格分隔的属性值
4.[title|=xxx]{ color : red }:设置所有title中包含xxx属性的样式。适用于由连字符分隔的属性值
如何将CSS文件插入到HTML文档中?
1.方式一(外部样式表)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
2.方式二(内部样式表)
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
3.方式三(内联样式表)
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
各类样式
* {
margin: 0;/*使外边界边框都为零*/
padding: 0;/*使内边框都为零*/
}
body {/*为整个文本添加一个背景图片*/
}
background-image: url(bj_zhuce.jpg);/*添加一个图片*/
background-position:0 -60px/*切图,调整图片位置*/
background-repeat:no-repeat;/*禁止图片重复*/
background-repeat:repeat;/*图片重复*/
background-repeat:repeat-y;/*垂直方向图片重复*/
background-color: white;/*创建背景颜色*/
background: linear-gradient(to left top,#54dff4,#b071fe);/*渐变色*/
background-position:center;/*切图,调整图片位置*/
background-size:100px 100px;/*规定背景图片的尺寸*/
height: 100px;/*设立标签元素的高度*/
height: 100%;/*设立高度*/
width: 550px;/*设立元素的宽度*/
width: 60%;/*设立宽度*/
margin: 0 50px;/*外边框*/
margin: 0 auto;/*文本居中*/
margin-top: 45px;/*设立标签元素距离上面的距离*/
margin-left: 45px;/*设立标签元素距离左边的距离*/
margin-bottom: 30px;/*设立标签元素距离下边的距离*/
margin-right: 30px;/*设立标签元素在定位中距离右边的距离*/
left:30px;/*设立标签元素在定位中距离左边的距离*/
top:6px;/*设立标签元素在定位中距离上边的距离*/
line-height: 30px;/*文本上下定位*/
font-size: 12px;/*调整文本大小*/
font-weight:bold;/*字体加粗*/
font-weight:数字;/*字体变细 */
font-family;/*调整字体*/
text-align: center;/*文本居中*/
text-shadow:0 0 5px #333;/*为文字增加阴影*/
color: #37B5F9;/*设立文本颜色*/
float: left;/*使文本元素向左浮动即由竖行变为横行*/
float: right;/*向右浮动*/
display: inline-block;/*既具有块元素也具有文本元素,使行内元素的宽高发生改变*/
display:none;/*隐藏文本*/
display: block;/* 使其具有块元素 或 显示文本*/
text-decoration: none;/*去除边框,去除下划线*/
text-decoration: underline;/* 添加下划线 */
border: 1px solid #ccc;/*边框的宽度及颜色*/
border-left: 1px solid #ccc;/*左边框的宽度及颜色*/
border-width:/*边框宽度*/
border-style:/*边框样式*/
border-color:/*边框颜色*/
border-collapse:/*规定是否合并表格边框*/ collapse合并; separate分开;
border-spacing:/*规定相邻单元格边框之间的距离*/
border-radius: 3px;/*为该正方形设立圆角,3px表示圆角大小*/
box-shadow:0 0 15px #666;/*为边框添加阴影及颜色包括位置*/
position: relative;/*相对定位元素的定位是相对其正常位置,相对定位元素经常被用来作为绝对定位元素的容器块。*/
position: absolute;/*绝对定位*/
position:fixed;/*固定定位*/
position:static;/*静态定位*/
cursor: pointer;/*鼠标悬浮变成小手*/
cursor: default;/*鼠标移到某个位置时显示为箭头*/
empty-cells:hide;/*如果你的表格是空的就隐藏*/
user-select:none;/*禁止选中文本*/
outline:none;/*禁止选中文本框*/
opacity:0.56;/*透明度*/
list-style-type:none;/*去点*/
overflow:hidden;/*隐藏多余部分,需要给特定的宽高*/
overflow:scroll;/*用滚动条显示多余部分,需要给特定的宽高*/
overflow:auto;/*自动处理溢出,需要给特定的宽高*/
position:absolute; clip:rect(0px 50px 200px 0px)/*如何设置元素的形状。此元素被剪裁到这个形状内,并显示出来。*/
/*垂直排列图像*/
img.top{vertical-align:text-top}
img.bottom{vertical-align:text-bottom}
text-shadow:5px 5px 5px #ff0000;/*为文本设置阴影,可规定水平阴影、垂直阴影、模糊距离以及阴影的颜色*/
word-warp:break-word;/*强制单词自动换行*/
text-align-last/*设置如何对齐最后一行或紧挨着强制转换符之前的行*/
规定动画:/*不通用*/
text-indent: 2em;/*缩进两个字符*/
animation:myfirst 5s;/*适用于IE浏览器*/
-moz-animation:myfirst 5s;/*适用于Firefox浏览器*/
-webkit-animation:myfirst 5s;/*适用于Safari和Chrome浏览器*/
-o-animation:myfirst 5s;/*适用于Opera浏览器*/
过度属性:
transition:.3s;/*用于在一个属性中设置四个过度属性,适用于IE浏览器*/
-webkit-transition:.3s;/*用于在一个属性中设置四个过度属性,适用于Safari和Chrome浏览器*/
-moz-transition:.3s;/*用于在一个属性中设置四个过度属性,适用于Firefox浏览器*/
-ms-transition:.3s;/*用于在一个属性中设置四个过度属性,适用于IE浏览器*/
/**\9:表示在 IE6 IE7 IE8浏览器中显示**/
/* *: 表示仅在IE6 IE7浏览器中显示*/
/* _: 表示仅在IE6浏览器中显示*/
/* *+: 表示仅在IE7浏览器中显示*/
tr:nth-child(even) {
background-color: #ccc;/* 奇数行设置颜色 */
}
cellspacing="0"/*单元格间距为零*/
empty-cells/*规定是否显示表格中的空单元格上的边框和背景。*/
border-spacing/*规定相邻单元格边框之间的距离。*/
border-collapse/*规定是否合并表格边框。collapse(合并)/separate(分开)*/
我们能够以不同的方法为链接设置样式。能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态:
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
!important:/*设置优先级*/
text-overflow: ellipsis;/*文字超出部分用省略号代替*/
white-space: nowrap;/*禁止换行*/
overflow:scroll;/*添加滚动条(不管有没有超出)*/
overflow:auto;/*超出部分添加滚动条(横向或纵向)*/
transform: translateY(-50%);/*div垂直居中*/
box-sizing: border-box;/*解决满宽度,加边框,div挤出问题*/
min-width: 800px;/*设置和返回元素的最小宽度*/
箭头:
.jt:before{
content: "";
display: block;
background-color: white;
width: 10px;
height: 3px;
border-radius: 10px;
transform: rotate(45deg);
margin-top: -4px;
margin-left: 11px;
}
.jt:after{
content: "";
display: block;
background-color: white;
width: 10px;
height: 3px;
border-radius: 10px;
transform: rotate(-45deg);
margin-top: 4px;
margin-left: 11px;
}
@media screen and (min-width:900px):用于设置响应式布局
/*当屏幕最小宽度为900px时,相当于笔记本PC端*/
@media screen and (min-width:900px){
#header,#footer{
width:800px;
}
}