CSS入门
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS入门相关的知识，希望对你有一定的参考价值。
前文讲了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入门的主要内容，如果未能解决你的问题，请参考以下文章