CSS入门
cascading style sheets
层叠样式表
现在有了CSS,html中大部分的
表示样式的标签就废弃了
现在表现形式的工作
全都交给了CSS
html文档也就变得更简洁了
css的定义方法
选择器 {属性:值 ; 属性:值 ; 属性:值}
选择器是把样式和页面元素关联起来的一个东西
比如说
div{
width:100px;
height:100px;
background:gold;
}
我们在head标签里面 加上style标签
<head>
<style>
div{
width:100px;
height:100px;
background:green;
}
</style>
</head>
这样我们就得到了一个宽100,高100,背景绿色的
一个样式
CSS引入方式
CSS引入页面的方式有三种
1.行间样式
通过标签的style属性,在标签上直接写样式
<div style="width:100px; height:100px">
</div>
这样就是把style直接写到标签里面
2.内嵌式
通过style标签,在网页上创建嵌入的样式表
<style type="text/css">
</style>
3.外链式
通过link标签,链接外部样式文件到页面中
<link rel="stylesheet" href="./css/abc.css">
这样就引入了
当前文件夹下的css文件夹下的abc.css文件
类选择器
.blue{ color:blue }
.big{ font-size:20px }
<div class="blue big"> </div>
这就是类选择器的使用
可以直接放到class属性里面
可以放多个
层级选择器
.big { font-size:10px }
.big .red { color:red }
<div class="big">
<p class="red"> abc </p>
</div>
.big .red就是针对被big嵌套的red
也就是说只有父级满足了.big,
里面的red才会生效
要分清楚border 和 padding还有margin
border: 20px solid #000
padding: 20px solid #f00
padding会把盒子撑大
上右下左
padding: 20px 30px 40px 50px;
这三个挺乱的
要算清楚
两个值的话就是
上下 左右
margin: 20px auto;
这样就变成了上下20px
然后东西就左右居中了
盒子的真实尺寸
盒子宽度= width+ padding +border
盒子高度= width+ padding +border
平时要算好哦
设置元素浮动--float
浮动分为
1.左浮动 float:left
2.右浮动 float:right
7835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
