CSS/样式笔记
CSS编写格式：
方法一：
<style>
//该位置放置标签属性例如超链接<a></a>
a{
//该位置设置标签该标签属性
color：#red；
//清除所有超链接下划线
text-decoration：none；
}
</style>
方法二：
1.
直接创建CSS文件在文件中编写CSS代码，
在html文件<head>里导入
导入格式：
<link href="CSS文件路径" rel=“stylesheet”/>
2.
直接在<style>标签中导入
@import url（“css文件路径”）
方法一：
<style>
//该位置放置标签属性例如超链接<a></a>
a{
//该位置设置标签该标签属性
color：#red；
//清除所有超链接下划线
text-decoration：none；
}
</style>
方法二：
1.
直接创建CSS文件在文件中编写CSS代码，
在html文件<head>里导入
导入格式：
<link href="CSS文件路径" rel=“stylesheet”/>
2.
直接在<style>标签中导入
@import url（“css文件路径”）
CSS选择器：
1.标签选择器：就是找到所有指定标签进行样式化
格式：标签名{样式1；样式2...}
2.类选择器：使用类属性值首先要给html标签指定对应的class属性值
格式：
.class的属性值{样式1，样式2...}使用时在标签当中输入属性class=“类名”（属性值不能以数 字开头且类选择器优先于标签选择器）
格式：
.class的属性值{样式1，样式2...}使用时在标签当中输入属性class=“类名”（属性值不能以数 字开头且类选择器优先于标签选择器）
3.ID选择器
格式：#i的属性值{样式1，样式2...}
4.交集选择器：就是对选择器1中的选择器2里面的数据进行样式化
格式：选择器1 选择器2{
样式1，样式2...
}
5.并集选择器：对指定的选择器进行统一样式化
格式：选择器1 ，选择器2{
样式1，样式2...
}
格式：#i的属性值{样式1，样式2...}
4.交集选择器：就是对选择器1中的选择器2里面的数据进行样式化
格式：选择器1 选择器2{
样式1，样式2...
}
5.并集选择器：对指定的选择器进行统一样式化
格式：选择器1 ，选择器2{
样式1，样式2...
}
6.通配选择器：
*{样式1，样式2...}
伪类选择器：
对元素某种状态进行样式修改
a：link{color：red}没有被访问时----红色
a:visited{color:green}被访问后的颜色-----绿色
a:hover{}鼠标经过的状态
a:active{}被选中状态
*{样式1，样式2...}
伪类选择器：
对元素某种状态进行样式修改
a：link{color：red}没有被访问时----红色
a:visited{color:green}被访问后的颜色-----绿色
a:hover{}鼠标经过的状态
a:active{}被选中状态
盒子模型：
把html的边框比作一个合资的边框
格式：
div{
border-style：solud；
height：
width：
padding-left：左边距
padding-top：顶间距
}
相对定位：
相对于元素原本位置进行移动
使用方式：positio：relative；
绝对定位：相对于整个页面移动
使用方式：positio：absolute；
固定定位：指定位置之后将无法拖动
使用方法：positio：fixed
把html的边框比作一个合资的边框
格式：
div{
border-style：solud；
height：
width：
padding-left：左边距
padding-top：顶间距
}
相对定位：
相对于元素原本位置进行移动
使用方式：positio：relative；
绝对定位：相对于整个页面移动
使用方式：positio：absolute；
固定定位：指定位置之后将无法拖动
使用方法：positio：fixed
浙公网安备 33010602011771号