为了写页面硬着头皮上HTML，一切从0开始，但愿我能OK!
html5.jpg
【css语法】：属性名：属性值
【css引入方式】
1.行间样式的引入
写法：在标签中，写入style="......",引号当中写css相应的样式
<div style="width: 100px;height: 20px;background: red;">css样式</div>
2.内部样式表的引入
(1).标签名选择器
写法：在head标签里，写一个style的标签，在标签中通过选择器来控制样式。div{...}
(2).ID选择器
(3).class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
/*内部样式*/
width: 100px;height: 20px;background: red;
}
#box{
/*id样式*/
background: blue;
}
.fire{
/*class样式*/
background: green;
}
</style>
</head>
<body>
<div>css样式</div>
<div>css央视2</div>
<div id="box">id样式</div>
<div class="fire">class样式</div>
</body>
</html>
3.外部样式表的引入
<link rel="stylesheet" href="css文件路径">
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/1.css">
</head>
<body>
<div>css样式</div>
<div>css央视2</div>
<div id="box">id样式</div>
<div class="fire">class样式</div>
</body>
</html>
1.css
div {
width: 100px;height: 20px;background: red;
}
#box{
background: blue;
}
.fire{
background: green;
}
4.选择器之间的优先级：
标签名选择器<class选择器<id选择器<行间样式
5.css宽、高、背景设置
宽：width
高：height
背景：background
背景色：background-color:颜色值英文单词/十六进制/rgb三要素值
背景图：background-image:url("图片路径")
背景图平铺：background-repeat:no-repeat/repeat-x/repeat-y
背景图定位：background-position：第一个值(X轴位置) 第二个值(Y轴位置)
备注：第一个值：left/center/right/30px
第二个值：top/center/bottom/40px
复合写法：background：color image position repeat
背景图滚动：background-attachment：fixed；
【css盒模型】
1.边框 border
(1).复合写法 border：border-width border-style border-color
border-width 边框宽度
border-style 边框样式 solid-实线/dashed-虚线/dotted-点线
border-color 边框颜色 值(颜色单词 十六进制 RGB)
(2)单一写法：
border-left: 2px dashed blue;
border-right: 4px dashed red;
border-top: 6px dotted green;
border-bottom: 8px dashed yellow;
(3)边框透明
border-bottom: 8px dashed transparent;
(4).边框圆角
border-radius: 2%(4px)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height:300px;
background-image: url("image/1.jpg");
/*复合边框*/
/*border: 4px solid red;*/
/*单一边框,宽度 类型 颜色/透明度*/
border-left: 2px dashed blue;
border-right: 4px dashed red;
border-top: 6px dotted green;
border-bottom: 8px dashed transparent;
border-radius: 2%
}
</style>
</head>
<body>
<div>testdiv</div>
</body>
</html>
2.填充padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 20px;
border: 1px dashed red;
/*padding复合写法*/
padding: 10px;
/*第一个值代表上下，第二个值代表左右*/
padding:10px 20px;
/*padding单一写法*/
padding-left:2px;
padding-top:4px;
padding-bottom:6px;
padding-right:8px;
}
</style>
</head>
<body>
<div>善金科技</div>
</body>
</html>
3.外边距 margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 20px;
border: 1px dashed red;
/*margin*/
margin: 10px;
/*第一个值代表上下，第二个值代表左右*/
margin:10px 20px;
/*margin*/
margin-left:2px;
margin-top:4px;
margin-bottom:6px;
margin-right:8px;
}
</style>
</head>
<body>
<div>善金科技</div>
</body>
</html>
【css3选择器】
1、子选择器 >
举例：div>span
解释：那么样式文件只影响div下的span，而不会影响到在下一级的span
2、相邻选择器 +
举例：p+strong
解释：P标签相邻的标签strong会受影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css基础</title>
<style>
/*子选择器*/
div>span{
border: 1px solid red;
}
/*相邻选择器*/
p+strong{
border: 1px solid green;
}
</style>
</head>
<body>
<header>CSS3选择器演示
<!-- 子选择器 -->
<div>
<span>子span1</span>
<p>
<span>孙子span</span>
</p>
<span>子span2</span>
<!-- 相邻选择器 -->
<p>我的p标签1</p>
<strong>我是strong1</strong>
<span>我是span3</span>
<p>我的p标签2</p>
</div>
</header>
</body>
</html>
网友评论