Web基础之CSS入门
一、什么是CSS：
CSS 指层叠样式表 (Cascading Style Sheets),是为了解决内容与表现分离的问题。
<body bgcolor='red'></body>
body为内容
bgcolor为表现
<body bgcolor='red'></body>
body为内容
bgcolor为表现
二、CSS的使用方式（样式表）：
1、内联样式表：
第一种定义css的方式：内链样式表
<body bgcolor="red" >
<body style="background-color: red" >
但是这种方式还是没有将内容和表现分离
<body bgcolor="red" >
<body style="background-color: red" >
但是这种方式还是没有将内容和表现分离
2、嵌入式样式表：
第二种定义css的方式：嵌入式样式表
<style type="text/css"></style>
需要将样式放在<head></head>中
<body bgcolor="yellow" >
<style type="text/css">
body{background-color:yellow}
</style>
但是这种方式还是没有将内容和表现完全分离
<style type="text/css"></style>
需要将样式放在<head></head>中
<body bgcolor="yellow" >
<style type="text/css">
body{background-color:yellow}
</style>
但是这种方式还是没有将内容和表现完全分离
3、引入式样式表：
第三种定义css的方式：引入式样式表
<link rel="StyleSheet" type="text/css" href="style.css">
style.css中
body{background-color:yellow}
这种方式完全将内容和表现完全分离
<link rel="StyleSheet" type="text/css" href="style.css">
style.css中
body{background-color:yellow}
这种方式完全将内容和表现完全分离
三、选择器
1、选择器分类：
通过选择器，我们可以定位到css样式需要修饰的目标，常用的选择器有：
<p id='p1' class='c1'>选我啊，选我啊</p>
标签选择器 p{color:red}
类选择器 .c1{color:red}
ID选择器 #p1{color:red}
组合选择器 如果有多个类型选择器使用同一种样式p,.p1,#c1,h1,h2,h2{color:red}
伪元素选择器 a:link{color:black}a:hover、a:active、a:visited
<p id='p1' class='c1'>选我啊，选我啊</p>
标签选择器 p{color:red}
类选择器 .c1{color:red}
ID选择器 #p1{color:red}
组合选择器 如果有多个类型选择器使用同一种样式p,.p1,#c1,h1,h2,h2{color:red}
伪元素选择器 a:link{color:black}a:hover、a:active、a:visited
2、选择器的优先级问题：
ID>类>标签
<p id='p1' class='c1'>选我啊，选我啊</p>
#p1{color:red}
.c1{color:blue}
p{color:yellow}
同级时选择离元素最近的一个
#p { color: red }
#p { color: #f60 }
执行颜色为#f60的
<p id='p1' class='c1'>选我啊，选我啊</p>
#p1{color:red}
.c1{color:blue}
p{color:yellow}
同级时选择离元素最近的一个
#p { color: red }
#p { color: #f60 }
执行颜色为#f60的
四、常用的CSS属性：
颜色属性
颜色属性表达方式有多种：
color：green
color：#ff6600
color：rgb（255,255,255）
color：rgba（255,255,255,1）
字体属性
font-size 字体大小
font-family：font-family：微软雅黑，serif，可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个
font-weight：normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)
颜色属性表达方式有多种：
color：green
color：#ff6600
color：rgb（255,255,255）
color：rgba（255,255,255,1）
字体属性
font-size 字体大小
font-family：font-family：微软雅黑，serif，可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个
font-weight：normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)
背景属性
背景颜色 background-color
背景图片 background-image
background-image:url(图片路径)，无背景图片值为none
背景颜色 background-color
背景图片 background-image
background-image:url(图片路径)，无背景图片值为none
背景重复 background-repeat
background-repeat：repeat/repeat-x/repeat-y/no-repeat
背景位置 background-position
横向（left,center,right）纵向（top,center,bottom）：background-position:left top;
直接使用数值：background-position:30px 30px;
background-repeat：repeat/repeat-x/repeat-y/no-repeat
背景位置 background-position
横向（left,center,right）纵向（top,center,bottom）：background-position:left top;
直接使用数值：background-position:30px 30px;
简写方式
background:背景颜色 url(图像) 重复 位置
background:#ff6600 url(images/bg,jpg) no-repeat top center
文本属性
text-align 横向排列
可选值为left，center，right
line-height 文本行高
%基于字体大小的百分比行高
数值 来设置固定值
text-indent 首行缩进
letter-spacing 字符间距
word-spacing
normal 默认
length设置具体的数值（可以设置负值）
inherit 继承
direction：ltr/rtl/inherit
text-transform：capitalize(单词首字母大写)lowercase/uppercase/inherit
text-align 横向排列
可选值为left，center，right
line-height 文本行高
%基于字体大小的百分比行高
数值 来设置固定值
text-indent 首行缩进
letter-spacing 字符间距
word-spacing
normal 默认
length设置具体的数值（可以设置负值）
inherit 继承
direction：ltr/rtl/inherit
text-transform：capitalize(单词首字母大写)lowercase/uppercase/inherit
边框属性
border-style 边框风格
border-bottom-style，border-top-style，border-left-style，border-right-style
属性值
none无边框/solid直线边框/dashed虚线边框/dotted点状边框/double双线边框
groove 凸槽边框/ridge 垄状边框/inset inset边框/outset outset边框
inherit继承
border-width 边框宽度
border-top-width，border-top-width，border-left-width，border-right-width
属性值：thin 细边框/medium 中等边框/thick 粗边框/inherit继承/px 固定值的边框
border-color 边框颜色
border-top-color，border-top-color，border-left-color，border-right-color
一个值：border-color：（上、下、左、右）；
两个值：border-color：（上下） （左右）；
三个值：border-color:（上） （左、右） （下）;
四个值：border-color：（上）（右）（下）（左）;
简写方式：
border：solid 2px #f60
border-style 边框风格
border-bottom-style，border-top-style，border-left-style，border-right-style
属性值
none无边框/solid直线边框/dashed虚线边框/dotted点状边框/double双线边框
groove 凸槽边框/ridge 垄状边框/inset inset边框/outset outset边框
inherit继承
border-width 边框宽度
border-top-width，border-top-width，border-left-width，border-right-width
属性值：thin 细边框/medium 中等边框/thick 粗边框/inherit继承/px 固定值的边框
border-color 边框颜色
border-top-color，border-top-color，border-left-color，border-right-color
一个值：border-color：（上、下、左、右）；
两个值：border-color：（上下） （左右）；
三个值：border-color:（上） （左、右） （下）;
四个值：border-color：（上）（右）（下）（左）;
简写方式：
border：solid 2px #f60
列表属性
标记的类型:list-style-type
属性值：none,disc（默认）,circle
标记的位置:list-style-position
inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit规定应该从父元素继承 list-style-position 属性的值。
设置图像列表标记:list-style-image
URL 图像的路径。
none 默认。无图形被显示。
inherit 规定应该从父元素继承 list-style-image 属性的值。
简写方式
list-style:square inside url('/images/a.jpg');
属性值：none,disc（默认）,circle
标记的位置:list-style-position
inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit规定应该从父元素继承 list-style-position 属性的值。
设置图像列表标记:list-style-image
URL 图像的路径。
none 默认。无图形被显示。
inherit 规定应该从父元素继承 list-style-image 属性的值。
简写方式
list-style:square inside url('/images/a.jpg');
五、DIV与SPAN
DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式;
DIV和span的区别在与， span是内联元素，div是块级元素。
<style type="text/css">
div{
background-color: green;
}
span
{
background-color: green;
}
</style>
<div>华信教育</div> 同时可以定义其宽度
<span>华信教育</span> 单独定义其宽度，没有效果
<style type="text/css">
div{
background-color: green;
}
span
{
background-color: green;
}
</style>
<div>华信教育</div> 同时可以定义其宽度
<span>华信教育</span> 单独定义其宽度，没有效果
六、案例源代码以及效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS应用</title>
<style type="text/css">
span{
color: white;
font-family: "微软雅黑";
font-weight: bolder;
font-size: 20px;
}
</style>
</head>
<body bgcolor="black">
<span >CSS应用入门</span>
<span >第一行文字</span>
<span >所有文字</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<style type="text/css">
ul{
list-style-type: circle;
}
ol li{
list-style-image: url(img/1.png);
/*list-style-type: square;*/
}
</style>
</head>
<body>
<ul>
<li>计算机学院</li>
<li>核科学学院</li>
<li>数理学院</li>
</ul>
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器应用</title>
<style type="text/css">
/*元素选择器*/
span{
color: white;
font-family: "宋体";
font-size: 50px;
font-weight: bolder;
}
/*ID选择器*/
#span1{
color: red;
font-family:"微软雅黑";
font-size: 50px;
font-weight: bolder;
}
/*类选择器*/
.span2{
color: green;
font-family:"楷体";
font-size: 50px;
font-weight: bolder;
}
/*组合选择器*/
p span{
color:yellow;
font-family:arial;
font-size: 50px;
font-weight: bolder;
}
a:hover{
color:red;
}
</style>
</head>
<body >
<span>这里是文字</span><br />
<span id="span1">第二段文字</span>
<span class="span2">又来了一个</span>
<p>
<span>这里是段落里面的文字</span>
</p>
<p>
<a href="http://www.taobao.com">访问淘宝</a>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景网页</title>
<style type="text/css">
#imgdiv{
background-image: url(head2.gif);
width: 100%;
height: 600px;
background-repeat: no-repeat;
}
#imgdiv span{
color:chartreuse;
font-size: 30px;
font-family: "微软雅黑";
}
</style>
</head>
<body >
<img src="head2.gif"/ height="300px;" height="300px;">
<div id="imgdiv">
<span>这是黄眼人</span>
</div>
</body>
</html>
七、总结
CSS入门主要学习了CSS的三种样式以及使用方法，五种选择器以及使用，了解了一下css的常用属性值，例如颜色属性，文本属性，字体属性，背景属性等；DIV与SPAN的存在仅仅是为了使用css样式；在学习过程中，新的学习体验是层次感，有了层次感，感觉知识就不那么杂了；
案例中遇到的问题，图片作为列表时，一定要主要图片的大小，可能图片没法显示；
<img>标签和div中的backgroung-img属性的区别：
<img>标签中不能再写其他的内容；
而在div中，backgroung-img仅仅是div的一个属性，div中还可以嵌入其他元素；
1436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
