标签：大小 去掉 lock top contain class 背景图片 解决 loaded
cascading style sheet 层叠样式表
表现：表现（美化网页）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: chartreuse;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
<link rel="stylesheet" href="CSS/style.css"> 把样式卸载样式表里
优势：CSS和代码分离。网页结构统一，可以复用。样式十分丰富，利用SEO，容易被搜索引擎收录
<h1 style="color: chartreuse">我是标题</h1> 行内标签加入style 行内 优先级最高
head 加style标签 如上 内部
用link链接 外部
标签选择器
类选择器
id 选择器
<style>
.woshi{
color: chartreuse;
}
.wobushi{
color: brown;
}
</style>
<h1 class="woshi">我是标题</h1>
<h1 class="wobushi">我是标题</h1> 类选择器
id选择器
#+id 全局唯一
id选择器>类选择器>标签选择器
body h1{
} 后代选择器
body>h1{
} 子选择器
.wobushi +h1{
} 相邻兄弟选择器 向下边。
.wobushi~h1{
} 通用兄弟选择器 向下全部 包括自己
ul li:first-child{
} 选中标签第一个
h1:nth-child(2){
} 选中第二个h1标签 如果前边有其他标签，会被阻碍，按顺序
h1:nth-of-type(2){
} 直接在父类中查找h1的第二个元素，按类型
p:hover{
color: aqua;
} 鼠标移上去会有颜色变化
p[]{
} []中可以只填属性，也可以填具体属性和名称
以什么开头用^ 以什么结尾用$
span：重点要突出的字用span套起来
字体样式：font-family: ;设置书法字体
font-weight: ;粗细
text-indent: 2em; 首行缩进两个字
line-height: 50px; 行高大小
text-decoration: 设置字体上中下线
vertical-align：middle 文本图片水平对齐
text-shadow： 文字阴影
在li标签中
list_style: 可以设置前边小点点 none表示去掉
背景图片
background-image：url(" ") 默认平铺满
background-repeat：repeat-x 水平平铺
background-repeat：repeat-y 水平平铺
background-repeat：none-repeat 不平铺
background ：red url("") 270px 10px no-repeat 颜色，图片，位置，平铺方式
margin：外边距
padding：内边距
border：边框 粗细，样式，颜色
border-radius： 圆角边框
块级元素，独占一行
div h1~h6 p div 列表
行内元素
span a img strong
块级元素可以包括行内元素
display
block 块
line 行
line-block 既是块，又是行
左右浮动，常用
可以用clear清除
clear: right 右侧不能有浮动
clear：left 左侧不能有浮动
clear：both 两侧都不能浮动
?
解决浮动塌陷问题
1.把父级块设置的大一些 基本不用
2.设置一个div {
clear：both
margin：0
padding：0
}
3.在父级元素加入overflow 设置滚动条
4.父类添加一个伪类 #father：after{
content："";
display:block;
clear:both;
?
}推荐使用
相对定位
position：relative；
top：
left：
bottom：
right： 距离哪边多少px
绝对定位
如果父级元素没有设置，则相对于浏览器定位
在父级元素内定为，
固定定位
直接定死 不会随着滚动条移动而动
z-index
标签：大小 去掉 lock top contain class 背景图片 解决 loaded
原文地址：https://www.cnblogs.com/ltdh/p/12434557.html
