HTML_CSS使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="文件位置">
</head>
<body>

</body>
</html>
<!--
CSS:面美化和布局控制
1.念:Cascading Style sheets 层叠样式表
层叠:多个样式可以作用在同一html的元素上,同生效
2.好
1.功能强大
2.将内容展示和式控制分离
降低耦合度,解耦
分工作更容易
提高开发效率
3.CSS使用:CSShtml合方式
1.内联样
标签内使用style性指定css代
如:<div style="color:red">hello css</div>
2.
在head标签内style标签,style标签标签容就是css代
如:<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color:blue;
}
</style>
</head>
3.外部
1.定css源文件。后css
div{
color:green
}
2.在head标签内,定link标签,引入外部的源文件
<link rel="stylesheet" href="文件位置">
<style>
@import "css文件"
</style>
4.css法:
1.格式:
选择器:{
性名1:1;
性名2:2;
}
选择器:筛选具有相似特征的元素
注意:
每一对属性需要使用;隔,最后一对属性可以不加;
5.选择器:筛选具有相似特征的元素

1.基础选择器:
1.id选择器:选择器具体的id的元素,建在一html面中id唯一
#id{}
2.元素选择器:选择具有相同标签的元素
标签{}
注意:id选择高于元素选择
3.类选择器:选择具有相同class的元素
.class{}
<p class="cls1"> 容 </p>
2.选择
1.选择所有元素:
*{}
2.选择器:
选择器1,选择器2{}
3.子选择器:筛选选择器1元素下的选择器2
选择器1 选择器2{}
4.父选择器:筛选选择器2的父元素选择器1
选择器1>选择器2{}
5.选择器:选择元素名性名=的元素
元素名[性名=""]{}
input[a="a"]{}
6.伪类选择器:选择一些元素具有的状态
元素:状态{}
如:<a>:
link:初始化状态
visited:被访问过状态
active:正在访问状态
hover:鼠标悬状态
a:状态{
color:
}
6.性:
1.字体、文本
font-size:字体大小
color:文本
text-align:对齐方式
line-height:行高
2.背景:
background:
法:background: url("路") no-repeat 不重 center 居中;
3.框:
border:框,
border:1px:像素 solid red:框色 border-radius: px
div水平居中:margin:auto

4.尺寸:
width:
height:高度
5.盒子模型:控制布局
margin:外
padding:内边
内边盒子大小
置盒子的width和height就是最的盒子大小,box-sizing:border-box
float:浮
left:左浮
right:右浮
center:居中
6.充:片居中:vertical-align :
middle:垂直居中



-->

猜你喜欢

转载自www.cnblogs.com/aikang525/p/11426889.html