html CSS层叠样式表 CSS布局
html标签
块级标签
自己单独占一行
h1 -- h6 ：标题(一级至六级) （h1+enter）
p : 段落 <p></p>不会首行缩进，但段落间间距大一些
hr : 水平线 </hr>单标签
ol li : 有序列表 （li*2+tab）
ul li ：无序列表
div : 在HTML中用来进行布局，实际上不会有任何样式，可作为一个容器
标签之间可以相互嵌套
行级标签
可以在一行逐一显示
a : 超链接 <a href = " http://www.baidu.com" target = "_blank"> 百度 </a>
属性
href : 链接地址
target: 页面打开方式
_self:在本页面打开（默认）
_blank:在新页面打开
<img src = "../img/hsz.jpg" >（相对路径）..返回上一层路径
img : 显示图片信息
属性
src : 资源地址
alt ：图片描述为文字，鼠标放上去显示的文字
span :行级标签，没有默认样式
CSS：层叠样式表(Alt+? 提示）
用来给html标签设置样式
<div style = "width:100px;height:100px;background：red；">（内联样式）
多个样式用分号隔开，宽度 高度 背景叫属性，格式为 属性：值；
如果样式有很多，把样式与标签分离
CSS样式有3种方式
内联样式：将css样式写在标签中
内部样式：将css样式定义在head标签中
head标签内
<style type="text/css"> 样式
选择标签
</style>
要想定义样式，先要选中标签，选择标签的方式有很多种（写在head中）
1:标签选择器：标签名{样式}如：（body中要设置样式的标签名为div）
div{
width:200px;
}
p{
width:300px;
background:red;
}
2: id选择器 : #id属性值{css样式} （body中<div id="first-div"> id唯一 需要时加属性）
#first-div{
background:red;
}
3：class选择器 ：.class属性值{css样式}
（body中<div class="class1"> class可相同 .与标签种类无关，至于class属性值有关）
.class1{
width:300px;
}
4：组合选择器
选择器1,选择器2{css样式}
#first-div,p{
width:200px;
}
5:包含选择器 （选择）
选择器1 选择器2{css样式}
#first-div p{width:300px;}
first-div中的div和first-div中p中的div
6：父子选择器
选择器1 > 选择器2{css样式}
#first-div > div{width:200px;}
7:通配符选择器（设置所有选择器都是这个样式）
*{border:1px solid black}
选择器的优先级：
越精确优先级越高
id > class > 标签名
CSS中注释
/* */
css属性
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h3{
font-family:"楷体";
font-size: 30px;
text-align: center;
}
p{
font-style: italic; //斜体
font-weight: bold;//加粗
color: red;
text-align: center;
text-decoration: overline;
}
a{//默认有下划线underline
text-decoration: none; //无下划线
}
</style>
</head>
字体
font-family:"楷体"
font-size:设置字体大小
font-style:设置字体样式
color:设置字体颜色
font-weight:设置字体加粗
text-align :设置字体居中
text-decoration:设置下划线 underline line-through overline
<style type="text/css">
div{
width:500px;//宽度
height: 500px;
border-left:1px solid red;
border-right:10px solid red;
border-top:20px solid red;
border-bottom:15px solid red;
}
</style>
border-left-color：black
边框
border-color:设置边框颜色
border-width:设置边框的宽度
border-style:设置边框的样式 solid实线 dashed虚线 dotted圆点 double 两条线
上面可简写成下面这样
border: 1px solid black;
可以单独设置每个边框的样式
border-left:1px solid black;
<style type="text/css">
div{
width:500px;//宽度
height: 500px;
background-color：red;
border:1px solid black;
background-image:url(img/1.jpg) //默认会重复，平铺
background-repeat:no-repeat
}
</style>
背景
background-color:设置背景颜色
background-image:设置背景图片
background-repeat:设置背景图片是否重复
简写方式
background:url(img/aaa.jpg) no-repeat red; ，空白部分被红色填充
background-position:设置图片位置
background-position-x:
background-position-y:
简写 background-position:right center
<style type="text/css">
ul{
border:3px solid #ccc;
/*list-style-type: square;*/
/*list-style-image: url(img/sanpang.png);*/
/*list-style-position: inside;*/
list-style: square url(img/sanpang.png) outside;
}
li{
border:2px solid red;
}
</style>
列表
list-style-type:设置列表标记的类型
list-style-image:设置列表图片
list-style-position:设置列表标记的位置 默认outside
CSS布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS布局</title>
<style type="text/css">
#first-div{
width: 100px;
height: 100px;
border: 10px solid #ffff00;
float: left ;/*浮动到左边*/
margin-left: 20px; /*该标签距离左边元素的外边距*/
}
/* RGB:red green blue
*每个颜色都有256中选择 0-255
* 两个十六进制表示一个颜色
* 000000-ffffff
* 黄色 = 红+绿
* ffffff 白色 000000黑色 网查调色板
* #000也可以 一位代表一个颜色
* */
#second-div{
width: 200px;
height: 200px;
border: 10px solid #ffff00;
float: left;
margin:40px 20px 30px 40px;
}/*两个都设成左浮动，会依次在左边排列显示，但当第一个设置左浮动，第二个不设时，会嵌套显示*/
</style>
<!--
浮动：
float：浮动
外边框：
margin-left：该标签距离左边元素的外边距
margin-right：该标签距离右边元素的外边距
margin-top：该标签距离上边边元素的外边距
margin-bottom：该标签距离下边元素的外边距
简写：
margin：上 右 下 左
margin：10px 20px 30px 40px;
margin:40px 上下左右均40px
margin:20px 40px 上下20 左右40
margin:20px 30px 40px 上20 下40 左右30
内边框：
padding-left:该标签中的内容距离该标签左边的边距
padding-right:该标签中的内容距离该标签右边的边距
padding-top:该标签中的内容距离该标签上边的边距
padding-bottom:该标签中的内容距离该标签下边的边距
简写方式同margin
div宽度需加上border边框 和padding左右
-->
</head>
<body>
<div id="first-div">
第一个div
</div>
<div id="second-div">
第二个div
</div>
</body>
</html>
