什么是CSS
Cascading Style Sheet,层叠级联样式表
CSS 表现(美化网页)
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…
CSS优势:
(1)内容和表现分离
(2)网页结构表现统一,可以实现复用
(3)样式十分丰富
(4)建议使用独立于html的css文件
(5)利于SEO,容易被搜索引擎收录
CSS作用:
(1)有效传递页面信息
(2)美化网页,吸引用户
(3)凸显页面主题
(4)提高用户体验
CSS的导入方式
1.行内样式
<h1 style="color: red"></h1>
2.内部样式表
<head>
<style>
h1{
color: red;
}
</style>
<head>
3.外部样式表
<head>
<link rel="stylesheet" href="a.css">
</head>
同级下新建一个a.css文件:
h1{
color: red;
}
优先级:就近原则,看谁离元素更近。
基本选择器
作用:选择页面上的某一个或某一类元素
1.标签选择器
标签选择器会选择到这个页面上所有这个标签的元素
<head>
<style>
h1{
color: red;
background: green;
}
</style>
</head>
<body>
<h1>hello</h1>
<h1>world</h1>
</body>
2.类选择器
好处是可以给标签归类,同一个class是同一类,可以复用
<head>
<style>
.c1{
color: red;
background: green;
}
.c2{
color: blue;
background: white;
}
</style>
</head>
<body>
<h1 class="c1">hello</h1>
<h1 class="c2">world</h1>
<h1 class="c1">!!!</h1>
</body>
3.id选择器
id必须保证全局唯一
<head>
<style>
#c1{
color: red;
background: green;
}
</style>
</head>
<body>
<h1 id="c1">hello</h1>
</body>
优先级:id选择器>类选择器>标签选择器
层次选择器
1.后代选择器
h1 em {color:red;}
这可以把h1下的所有em标签进行渲染。
2.子选择器
h1 > strong {color:red;}
这可以把h1下的strong子元素标签进行渲染,和后代选择器相比,它只渲染一代。
3.相邻兄弟选择器
h1 + p {margin-top:50px;}
这可以把紧接着h1元素后的p元素(同级)进行渲染,这只会影响到1个p标签。
h1标签也可以被".类名"替换。
4.通用兄弟选择器
p ~ span {color: red;}
这可以把紧接着p元素后的所有span元素(同级)进行渲染。
p标签也可以被".类名"替换。
结构伪类选择器
伪类用于定义元素的特殊状态。
/* ul的第一个子元素是li可以匹配并渲染*/
ul li:first-child{
color:red;
}
/* ul的最后一个子元素是li可以匹配并渲染*/
ul li:last-child{
color:blue;
}
/*选中p的父元素,选择它的第n个子元素,如果这个子元素是p,则进行渲染*/
p:nth-child(2){
color:green;
}
/*选中p的父元素,选择它的第n个p类子元素进行渲染*/
p:nth-of-type(2){
color:yellow;
}
属性选择器
属性名=属性值(正则)
=:绝对等于
*=:包含
^=:以…开头
$=:以…结尾
/*选中有id属性的a标签 */
a[id]{
color:red;
}
/*选中有id是first的a标签 */
a[id=first]{
color:green;
}
/*选中有class属性包含link的a标签 */
a[class*="link"]{
color:blue;
}
/*选中href属性以http开头的a标签 */
a[href^=http]{
color:yellow;
}
字体样式
span标签:重点要突出的字,用span标签套起来。
<head>
<style>
.title{
font-size:50px;
}
</style>
</head>
<body>
欢迎学习<span class="title">Java</span>
</body>
字体样式:
font-family:楷体; /*字体*/
font-size:50px; /*字体大小*/
font-weight:bold; /*字体粗细*/
文本样式
color:red; /*颜色*/
text-align:center; /*排版*/
text-indent:2em; /*段落首行缩进*/
line-height:100px; /*行高*/
text-shadow:blue 10px 10px 5px; /*阴影颜色,水平偏移,垂直偏移,阴影半径*/
/*如果要让文字上下对齐,只要把height和line-height设置为一致即可*/
text-decoration:underline; /*下划线,line-through中划线,overline上划线*/
超链接伪类
/*鼠标悬浮*/
a:hover{
color:red;
}
/*鼠标按住未释放*/
a:active{
color:green;
}
列表样式
<head>
<style>
.nav{
width:100px;
background:grey;
}
ul li{
height:30px;
/* none去掉,circle空心圆,decimal数字,square正方形*/
list-style:none;
}
a{
font-size:14px;
text-decoration:none;
color:black;
}
a:hover{
color:orange;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="">a</a> <a href="">b</a> <a href="">c</a></li>
<li><a href="">d</a> <a href="">e</a> <a href="">f</a></li>
<li><a href="">g</a> <a href="">h</a> <a href="">i</a></li>
</ul>
</div>
</body>
背景图像应用及渐变
<head>
<style>
div{
width:1000px;
height:700px;
border:1px solid red;
/*设置背景图片*/
background-image:url("h.jpg");
}
.div1{
/*不同的重复方式*/
background-repeat:repeat-x;
}
.div2{
background-repeat:repeat-y;
}
.div3{
background-repeat:no-repeat;
}
.div4{
/*缩小或放大图片直到恰好撑满区域,可能会丢失部分信息,不需要再设置no-repeat*/
background-size: cover;
/*图片的位置在水平方向上取正中间,垂直方向上取最上面*/
background-position:center 0;
/*这两条语句配合起来,极端条件会出现两种情况:
1.图像的纵和区域的纵契合(竖区域放横图片),会截取图像中间部分
2.图像的横和区域的横契合(横区域放竖图片),会截取图像最上面的部分
*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
有关渐变,直接使用这个工具网站:
渐变网站
盒子模型及边框使用
margin:外边距
padding:内边距
border:边框
#box{
/*边框粗细 边框样式 边框颜色*/
/*其中样式还可以是dashed,虚线*/
border:1px solid red;
}
有些标签是带有一个默认的margin的,可以覆盖调整。
内外边距及div居中
/*padding一样*/
margin-right:5px;
margin-bottom:5px;
margin-left:5px;
margin-top:5px;
/*margin的妙用,实现了左右居中*/
margin:0 auto;
/*代表上下左右四个方位*/
margin: 0;
/*代表上下(第一个参数)左右(第二个参数)*/
margin:0 1px;
/*四个参数代表上、右、下、左*/
margin:0 1px 2px 3px;
盒子的计算方式:
margin+border+padding+内容的宽度(高度)
圆角边框及阴影
/*圆角边框*/
border-radius:10px;
/*左上、右下变成10px,左下右上变成20px*/
border-radius:10px 20px;
/*四个参数分别为左上、右上、右下、左下*/
border-radius:10px 20px 30px 40px;
/*画圆:圆角=半径*/
/* 阴影的水平位置、垂直位置、模糊距离、阴影颜色*/
box-shadow:10px 10px 100px yellow;
display和浮动
/*变成块元素*/
display:block;
/*变成行内元素*/
display:inline;
/*是块元素,但是可以内联在一行*/
display:inline-block;
/*消失*/
display:none;
使用display可以实现将列表横置等功能。
这是一种实现行内元素排列的方式,但是我们很多情况都使用float。
/*会让图片或文字左浮,但是当页面大小变化时,会重新排版,不好*/
float:left;
overflow及父级边框塌陷问题
/*内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。*/
overflow:scroll;
/*内容会被修剪,并且其余内容是不可见的。*/
overflow:hidden;
/*不允许右边有浮动元素*/
clear:right;
/*不允许左边有浮动元素*/
clear:left;
/*不允许两边有浮动元素*/
clear:both;
父级边框塌陷问题解决:
1.增加父级元素的高度
不推荐这种方法。高度无法确定,一次次地试高度很麻烦,何况不能从本质上解决问题。
2.在最后一个子元素后增加一个空的div标签,清除浮动
clear:both;
这种方法也很有效,但是加了一个空的div,造成代码的冗余。
3.在父级元素中加上如下属性:
overflow:hidden;
overflow是溢出管理的意思,但是有一点不好,在有下拉菜单的时候,下拉菜单会显示不出来。
4.在父级中添加一个伪类after:
#father:after{
content:'';
display:block;
clear:both;
}
这种方法虽然有些麻烦,但是没有任何副作用,对文件中的其他元素没有任何影响。
相对定位
相对定位:相对于原来的位置进行定位。
position:relative;
top:5px; //离上面距离+5px,即向下移动
bottom:-5px; //离下面距离-5px,即向下移动
left:5px; //离左边距离+5px,即向右移动
right:-5px; //离右边距离-5px,即向右移动
绝对定位及固定定位
绝对定位:基于XXX定位,上下左右。
1.如果没有父级元素,相对于浏览器定位。
2.假设有父级元素,相对于父级元素定位。
3.在父级元素范围内移动。
position:absolute
固定定位:不管浏览器怎么动,位置固定不变。
position:fixed
z-index及透明度
z-index设置元素的堆叠顺序。
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
/*在后面出现,离用户更远*/
z-index:-1;
文本和背景色都受到不透明级别的影响。
opacity:0.5;