您的位置：首页 > Web前端 > CSS

前端基础之CSS

2016-01-26 00:35 483 查看
在学习css之前，我们需要对HTML的知识有基本的了解！

什么是CSS?

CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，我把它叫作“层叠样式表”，我感到这样顺口一 点，没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生，实际上无论你用Internet Explorer还是 Netscape Navigator在网上冲浪，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工 具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，为什么同样内容的网页，有的人做出来有 几十KB，而高手做出来只有十几KB，CSS在其中的作用是不言而喻的。

谈谈 css 样式存在的三种方式：

第一、二种 方式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--
<h2> 第二种方式，结合<span class="c1">c1</span>使用，其中 .c1 中 “.” 代表class选择器</h2>
-->
<style>
.c1{
background-color: red;border: 10px solid green;
}
</style>
</head>
<body>

<h3>css 第一种存在方式</h3>
<div style="background-color: red;border: 5px solid green;">css 第一种方式 div</div>
<div style="background-color: red;border: 5px solid green;">css 第一种方式 div</div>

<h3>css 第二种存在方式: 使用"class = "c1名字"</h3>
<span class="c1">css 第二种方式 </span>
<span class="c1">css 第二种方式 </span>
<span class="c1">css 第二种方式 </span>

</body>
</html>

演示效果如下：



第三种方式：

可将公共样式写在一个".css"结尾文件中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="common.css">

</head>
<body>

<h3>css 第三种存在方式: 调用自定义.css结尾文件</h3>
<span class="c1">css 第三种方式 </span>
<span class="c1">css 第三种方式 </span>
<span class="c1">css 第三种方式 </span>

</body>
</html>

common.css 中内容：

.c1{
background-color: red;border: 10px solid green;
}

直接引用common.css 文件中的内容，截图如下





三种样式优先级是怎样的呢？1>2>3 这里不再举例

选择器：

class 选择器

上面的第二种、第三种方式都使用了class选择器

class 选择器效果如下：



下面的操作都写在css1.html一个文件中来进行举例（当然你也可以写在common.css 文件中）

id 选择器：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="common.css" />

<!--
<h2> .c1 中 “.” 代表class选择器</h2>
-->

<style>
<!--
.c1{
background-color: red;border: 6px solid green;
}
-->
#c2{
font-size: 20px;
}

</style>

</head>
<body>

<h2>id 选择器</h2>
<div id="c2">how are you</div>
<!--
<div class="c1">css 第三种方式 div</div>
<div class="c1">css 第三种方式 div</div>
<div class="c1">css 第三种方式 div</div>
-->

</body>
</html>

id 选择器截图如下：



标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="common.css" />

<!--
<h2> .c1 中 “.” 代表class选择器</h2>
-->

<style>

.c1{
background-color: red;border: 6px solid green;
}

#c2{
font-size: 20px;
}

div{
color: red;
}

</style>

</head>
<body>

<h2>id 选择器</h2>
<div id="c2">how are you</div>

<h2>标签选择器</h2>
<div>allen Yang</div>
<!--
<div class="c1">css 第三种方式 div</div>
<div class="c1">css 第三种方式 div</div>
<div class="c1">css 第三种方式 div</div>
-->

</body>
</html>

在标签选择器中定义颜色，默认这些标签中的所有字体颜色一起改变

标签选择器效果如下：



在标签中再定义颜色，优先级更高，当前字体颜色改变，如下效果：



如果你想在标签中定义一个图片，直接使用 标签即可!

<img src="1.png">

外边距和内边距

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>外边距</h2>
<div style="border: 1px solid red;height: 70px;">
<div style="background-color: green;height: 50px;margin-top: 10px;margin-left: 10px;margin-right: 10px;margin-bottom: 20px";></div>
</div>

<h2>内边距</h2>
<div style="border: 1px solid red;height: 90px;">
<div style="background-color: green;height: 60px;padding-top: 10px;";></div>
</div>
</body>
</html>

显示效果如下:



应用差距：





display样式：

display:none ,隐藏
display:block ，把内联标签转换成块级标签
display:inline, 把块级标签转换成内联标签

display 三种应用显示效果如下：

隐藏效果：



原始效果：



将块级标签变成内联标签，将内联标签变成块级标签后 效果：



cursor样式：（鼠标摆放后显示各种不同的效果）

cursor 伪造超链接

pointer、help、wait、move、crosshair

下面介绍下pointer，其他的不再介绍了！

pointer：

<h2>cursor：伪造超链接</h2>
<p>
<span style="cursor: pointer;color: green">pointer</span>
</p>

显示效果如下：



浮动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.w-letf{
width: 20%;
background-color: red;
height: 400px;
float: left;
}
.w-center{
width: 40%;
background-color: green;
height: 400px;
float: left;
}
.w-right{
width: 20%;
background-color: blue;
height: 400px;
float: left;
}
</style>

</head>
<body>
<div class="w-letf"></div>
<div class="w-center"></div>
<div class="w-right"></div>

</body>
</html>

显示效果如下:



position样式：

如果你你想让效果样式一直处于浏览器底部：推荐使用：fixed
如果你想在让效果样式在一个固定标签页底部：推荐使用：absolute

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a style="position: fixed;right: 0;bottom: 0px;">返回顶部</a>

<div style="height: 200px;margin-top: 50px;border: 4px solid green;position: relative">
<a style="position: absolute;right: 0;bottom: 0px">返回顶部</a>

</div>

</body>
</html>

显示效果如下：



透明样式：

可以利用 display：none 结合做，之后介绍...

持续更新中...

更多链接：http://www.w3school.com.cn/css/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航