引言
在上一篇中,说到了html的相关标签的使用,下面主要介绍css的相关知识点。
html:负责网页的结构
css: 负责网页的美观(样式)
css的使用方式
(1)行内样式
注意:
1)使用标签的style属性进行css控制,css写在style属性值中
2)弊端:只能控制一个标签的样式
(2)内部样式
注意:
1)使用style的标签进行css控制,css内容写在style标签体内
2)一次控制多个标签的样式
3)和html标签混杂在一起,不好维护。css内容无法在多个html页面中重用
(3)外部样式(推荐使用)
注意:
1)建立独立后缀为css的文件,css内容写在该文件中
2)在使用css的html页面中,导入外部css文件
CSS语法
选择器(selector):使用选择器来选择需要添加样式的标签。
CSS属性(property):给选择的标签添加什么样式。例如, 字体大小,颜色,背景…..
CSS值(value):添加样式的具体值。12px , 红色,背景图片….
一、 选择器
标签选择器
作用: 选择同名的标签
注意:选择到所有同名的标签
类选择器
作用: 选择同类的标签
注意:
1)选择的标签必须有class的属性。同类的标签使用同名
2)当一个标签同时被标签选择器和类选择器选择,那么类选择器优先!!!
id选择器
作用: 选择一个标签
注意:
1)选择的标签必须有id属性。
2)在同一个html页面中,建议不要出现两个同名的id属性的标签,后面使用javascript代码选择标签的时候,getElementById(“id属性值”)
3)id选择器的优先级最高!
并集选择器
作用: 当多个选择器的css内容相同,那么可以使用并集选择器来合并css内容。
交集选择器
作用: 选择某个选择器中的子标签。
通用选择器
作用; 选择所有的标签
伪类选择器
作用:控制标签在不同状态下的样式。
标签有四种状态:
link: 没有访问过的状态
hover: 鼠标经过的状态
active:鼠标激活(按下但没有松开)的状态
visited: 已经被访问过的状态(鼠标点下且松开)
相关的代码表示在下面显示:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css语法及选择器title>
<style type="text/css">
/*1.标签选择器*/
div{
font-size:18px;
color:#0F0}
/*2.类选择器*/
.d1{
font-size:24px;
color:#00F}
/*3.id选择器
注意:
1.当一个标签同时被标签选择器,类选择器,id选择器同时选中的时候,id选择器起作用,此时id选择器的优先级最高
2.在一个网页中不允许存在同名的id值,以后我们在我们js中经常会通过标签的id属性去点对点的找到对应的标签
*/
#d2{
font-size:14px;
color:#F0F}
/*4.并集选择器*/
.d1,.d3{
font-size:16px;
color:#090}
/*5.交集选择器*/
div span{
font-size:18px;
color:#3F9}
style>
head>
<body>
<div>div1div><br />
<div>div2div><br />
<div class="d1">div3div><br />
<div class="d1" id="d2">div4div><br />
<div class="d3">div5div><br />
<div><span>divv中的span标签span>div><br />
<span>独立的span标签span>
body>
html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伪类选择器title>
<style type="text/css">
/*link:没有访问过的状态*/
a:link{
font-size:14px;
color:#F00
}
/*visited:已经访问过的状态*/
a:visited{
font-size:24px;
color:#F0F}
/*hover:鼠标划过的状态*/
a:hover{
font-size:18px;
color:#00F}
/*active:鼠标按下后没有松开的状态*/
a:active{
font-size:18px;
color:#FF0}
style>
head>
<body>
<a href="3_css语法及选择器.html">伪类选择器a>
body>
html>
结果如下图所示(下图展示的是鼠标滑过时的状态)
二、常用的CSS属性和值
CSS文本
CSS字体
CSS背景
CSS列表
CSS表格
CSS边框
相关标签的代码表示形式如下所示:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css文本属性和值title>
<style type="text/css">
div{
/*color:颜色*/
color:#F00;
/*字符间距*/
letter-spacing:10px;
/*对齐方式*/
text-align:center;
/*文本修饰 下划线-underline,中划线(line-through),上划线-overline,没:none*/
text-decoration:underline;
/*单词间距*/
word-spacing:10px
}
style>
head>
<body>
<div>薛之谦 的 愿望是 世界和平div>
body>
html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css字体title>
<style type="text/css">
div{
/*字体类型*/
/* font-family:宋体;*/
/*字体大小*/
/* font-size:36px;*/
/*字体样式*/
/* font-style:italic;*/
/*字体粗细*/
/* font-weight:bold;*/
/*简写:样式、粗细、大小、类型*/
font:italic bold 36px 宋体;
}
style>
head>
<body>
<div>薛之谦的心愿是世界和平div>
body>
html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css背景title>
<style type="text/css">
body{
/*背景颜色*/
/* background-color:#966;*/
/*背景图片*/
/*background-image:url(../../../../../Pictures/Saved%20Pictures/21654167370059749.jpg);*/
/*设置背景图片是否重复,或如何重复
not-repeat: 不重复
repeat-x: x轴重复
repeat-y: y轴重复
repeat: x和y轴重复(默认)
*/
/*background-repeat:repeat-x;*/
/*background-repeat:repeat-y;*/
/* background-repeat:no-repeat;*/
/*background-repeat:repeat;*/
/*设置背景的起始位置
参数一:显示的图片需要从那个位置开始显示
参数二:你的图片显示的位置*/
/* background-position:top center;*/
/*简写属性:颜色 图片 重复 位置*/
background:#966 url(../../../../../Pictures/Saved%20Pictures/IMG_20161107_091700.jpg) no-repeat top center;
}
style>
head>
<body>
body>
html>
结果如下:
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">
"Content-Type" content="text/html; charset=utf-8" />
css列表</title>
- 薛之谦
- 黄晓明
- 方大同
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css表格title>
<style type="text/css">
table{
/*合并表格的边框*/
border-collapse:collapse}
style>
head>
<body>
<table border="1" align="center" height="300" width="400">
<tr align="center">
<th>姓名th>
<th>语文th>
<th>数学th>
tr>
<tr align="center">
<td>张三td>
<td>89td>
<td>77td>
tr>
<tr align="center">
<td>李四td>
<td>89td>
<td>99td>
tr>
<tr align="center">
<td>王五td>
<td>78td>
<td>88td>
tr>
table>
body>
html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css边框title>
<style type="text/css">
div{
height:300px;
width:300px;
/*设置颜色*/
/*border-bottom-color:#F00;
border-top-color:#0F9;
border-left-color:#90C;
border-right-color:#FF6;*/
/*实线:solid*/
/* border-bottom-style:solid;*/
/*点划线:dotted*/
/* border-left-style:dotted;*/
/*双实线:double*/
/* border-right-style:double;*/
/*虚线:dashed*/
/* border-top-style:dashed;*/
/*简写属性*/
border: 3px solid #F00;}
style>
head>
<body>
<div>薛之谦div>
body>
html>
结果如下:
三、盒子模型
定义:可以把html页面上每个标签看做是一个盒子。
盒子相关的属性:
宽度和高度(width和height): 决定这个盒子的容量
内边距(padding): 盒子边框与内容的距离
边框(border): 盒子的厚度
外边距(margin): 盒子与盒子之间的距离
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子模型title>
<style type="text/css">
div{
width:200px;
height:200px;
border:6px solid #F00}
#d1{
width:200px;
height:200px;
padding-top:15px;
padding-left:20px;
margin-bottom:10px;
}
style>
head>
<body>
<div id="d1">div1div>
<div >div2div>
body>
html>
结果如下:
四、 CSS定位
相对定位:relative(相对自己之前的位置)
绝对定位:abosolute(相对父标签的位置)
固定定位:fixed(相对浏览器位置固定,不随着滚动条的拖动而位置改变)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css定位title>
<style type="text/css">
div{
height:300px;
width:300px;
border:3px solid #F00}
#d1{
/*相对定位,相对于自己之前的位置*/
/*position:relative;
top:20px;
left:20px;*/
/*绝对定位:相对于自己的父标签而言*/
/*position:absolute;
top:10px;
left:10px;*/
/*固定定位:相对于浏览器而言*/
position:fixed;
top:100px;
left:500px;}
style>
head>
<body>
<div>div1div>
<div id="d1">div2div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
body>
html>