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

CSS入门

2016-02-17 13:17 543 查看

前文讲了html，html用来虽然可以实现页面上添加的元素内容。但是通过html我们不能指定元素的放置的位置、大小、字体的颜色等等。要实现这些东西就需要用到CSS样式来实现

使用css样式的时候，要在需要添加样式的元素前用<div></div>包裹住。这样我们设计的样式的才能生效。<div>标签中加入style关键字进行设置，语法：style = 'key1:value1;key2:value2;'
例如要将<h1>标签以红色字体打印出来的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="color: red">
<h2>红色字体</h2>
</div>
</body>
</html>

运行的结果如下：

这种方式是直接在<div>标签里修改。但是一个网页可能有几十个甚至上百个元素组成。其中很多元素都用到了相同的样式。如果每个<div>都这么修改的话就太浪费时间了。所以css也可以提供了类似于面相对象一样的方法。我们叫做选择器的。选择器的种类很多，具体的事例如下：
标签选择器
用来对所有指定的标签添加属性，例如把所有的<div>标签包含的内容加上背景色

div{ background-color:red; }
<div > </div>

class选择器
用来对具有相同class值的内容添加属性

.bd{ background-color:red; }
<div class='bd'> </div>

id选择器
用来给指定id添加样式，要注意每个网页中id的值必须是唯一的

#idselect{ background-color:red; }
<div id='idselect' > </div>

关联选择器
表示层级关系，例如只对id值为idselect的标签下面的<p>标签添加样式。而其他标签不受影响
#idselect p{ background-color:red; }

<div id='idselect' > <p>p标签测试 </p> <h2>h2标签测试</h2> </div>

组合选择器
表示同时对多个标签添加样式

a,div,p{ color: red; }

属性选择器
表示符合指定标签中的某个属性条件的内容添加样式，例如对input标签中type类型为text的元素添加
宽度和高度样式

input[type='text']{ width:100px; height:200px; }

伪选择器和伪元素选择器

a:link{color:#FF0000} /*正常链接状态下样式*/
a:visited{color:#0000FF} /*被访问之后的样式*/
a:hover{color:#00FF00} /*鼠标经过的样式*/
a:active{color:#FF00FF} /*超链接被激活的样式*/

通过以上的这些选择器的配合使用，我们就可以高效的对各种元素配置样式

元素的样式有很多种，下面介绍接种长期用的样式

position 的 0.0位置表示图片的左上角
挖洞看图

margin padding
外边距和内边距

padding
内边距就是增加自己的高度宽度等数值

<body>
<div style="background-color: red;height: 100px;border: 3px solid blue" >
<div style="background-color: green;height: 20px;padding-top: 10px;"></div>
</div>
</body>

margin
外边距就是调整的是自己与boarder边框的距离

<body>
<div style="background-color: red;height: 100px;border: 3px solid blue" >
<div style="background-color: green;height: 20px;margin-top: 10px;"></div>
</div>
</body>

margin 可以调整居中
居中 margin : 0 auto

position
默认 absolute相对于整个屏幕的绝对定位
fixed - 固定在浏览器窗口的位置永远不动
relative - 一定是包含absolute标签的 absolute会相对于relative定义的框体内部相对位置定位
absolute -
<div style =“position:relative"
<div style = “postion:absolute"
<div/>

<body>
<a style="position: fixed;left: 30px;top: 30px">返回顶部</a>
<div id="content" style="height: 2000px;background-color: aqua">
<div style="position: relative;background-color: aliceblue;width:300px;margin: 0 auto;height: 300px; ">
<h1>修改数据</h1>
<a style="position: absolute;right: 0;bottom: 0">dadsasda</a>
</div>
</div>
</body>

display 三个属性
None 隐藏不显示
block 变成块级标签
inline 变成内联标签
float

<body>
<div style="background-color: red">
<div style="float: left">111</div>
<div style="float: left">222</div>
<!-- 必须要clear 否则浮动之后就没有背景色了-->
<div style="clear: both"></div>
</div>
</body>

overflow 滚轴效果
如果overflow:hidden 会导致超出显示高度的部门隐藏掉

<div style="overflow:hidden;background-color: red;height: 50px;width: 100px">
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
</div>

如果overflow:auto 如果超出显示高度就会在右侧添加下拉滚轴

<div style="overflow:auto;background-color: red;height: 50px;width: 100px">
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
dasdadads<br/>
</div>

透明度
filter:alpha(opacity=50) IE的语法
-moz-opacity:0.5 firefox的语法
opacity:0.5 chrome的语法
z-index 图层数
z-index:

<body>
adadadadadaddasdadad
<div style="height: 2000px;">
<input type="button" value="提交数据"/>
<div style="z-index: 1;opacity: 0.5;position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: black"></div>
<div style="z-index: 2;position: fixed;left: 50%;top: 50%;margin-left: -150px;margin-top: -50px;">
<div style="background-color: white;width: 300px;height: 100px;">
<input/>
<input/>
<input/>
<input/>
</div>
</div>
</div>
</body>
</html>

页面分割布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin:0 auto;
}
.pg-header{
height:48px;
background-color: rgb(51,122,183);
}
.pg-body .menu{
background-color: aqua;
position: absolute;
top:50px;
left: 0;
bottom: 0;
width: 200px;
overflow: auto;
}
.pg-body .content{
background-color: darkorange;
position: absolute;
right: 0;
top: 50px;
bottom: 0;
left: 210px;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-body">
<div class="menu">
<a>123</a>
<a>123</a>
</div>
<div class="content">
dasdasdadsasdasdad
<div style="height: 1000px;">
<h1 style="color: red">dasdasdads</h1>
</div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 入门 CSS

相关文章推荐

新的分享

章节导航