目录
三种引入方式
1.内部模式
<style>
.box{
width:300px;
height:300px;
backgrounf-color:***
}
</style>
<div class="box">ABC</div>
2.行内模式（不推荐）
<div style="**" width="**" height="**" background-color="**">
</div>
3.外部模式（推荐）
<link rel="stylesheet" herf="地址">
<div class="box2">ABC</div>
CSS基本结构
选择器{
属性名： 属性值；
属性名： 属性值；
属性名： 属性值；
}
1.基本选择器
标签选择器
<style>
p{
color:***; 选中网页所有p标签（标签名）
}
</style>
<p>ABC</p>
id选择器
<style>
#box1{
color:***; 选中所有id（#+id名）
}
</style>
<div id="box1">ABC</div>
类选择器
<style>
.box2{
color:***; 选中所有类（.+类名）
}
</style>
<div class="box2">ABC</div>
通配符选择器
*{
/*background-ctolor: ****; 所有全变
}
包含选择器
1.子代选择器
.a>li{
background-color: ***; 选中亲生儿子
}
2.后代选择器
.a li{
background-color: ***; 找到后代所有的元素
}
<ul class="a">
<li>1<li>
<li>1<li>
<ul>
<li>2<li>
<li>2<li>
</ul>
</ul>
复合选择器
div,
p,
span{
color: A;
}
属性选择器
<body>
<input type="text"><br />
<input type="password"><br />
</body>
<style>
input[type="password"]
{
background-color: ***;
}
input[type^="te"]
{
background-color：****；
}
input[type$="l"]
{
background-color: ***;
}
input[type*="e"]
{
background-color: ****;
}
结构伪类选择器
伪类选择器
a:hover{
font-size:40px; 鼠标选中字体悬浮,悬浮字体大小改变；
cursor：cell; 鼠标样式变成“+”
}
a:visited{
color:pink; 点击后颜色改变
}
a:active{
font--size:50px; 点击后但未放开的字体大小
}
a:hover+div{
background-color:***; 控制<div>z
display:none; 不显示
}
结构伪类选择器
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ul:first-child{
background-color:pink:
}
first-child:第一行
last-child:最后一行
nth-child(5):第5行
nth-child(even):第偶数行
nth-child(odd):第基数行
li:nth-child(3):先将所有的排序，再找到第三行
li:nth-of-child(3):先找到li，再将li排序，再找到第三行
伪元素选择器
ul li::before{
（无空格） content:"**"; 必须加的东西
}
before:li之前添加
after：li之后添加
placeholder：表单提示词
selection：文字选中时变色
文本相关样式
CSS具有重叠性,后面的会覆盖前面的重复指令
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>段落</p>
ul li{
list-style:none; 无序列表去小圆点
}
p{
text-indent:2em; 首行缩进2当前字体大小的字
font-size:20px; 鼠标选中字体悬浮,悬浮字体大小改变；
text-align：center 文本水平对齐
text-decoration:none; 去下划线
}
元素显示模式转换
内元素，块元素，行内块元素
display: inline-block; 转换成行内块元素
背景
baby{
w+h+b
b-color:**;
b-image:url("地址")；
b-repeat:no-repeat; 不重复放置
b--attachment:fixed; 固定，滑动图不变
b-position:top left; 背景位置
b-size:700px 500px 背景大小
background:fixed url(地址) no-repeat; 放照片且不重复
}
边框
div<border-radius:10px 边框圆角的角度
border-width:10px; 边框宽度
border-style:solid; 边框样式
border-color: 边框颜色
合并相邻边框
<table cellspacing="0"></table> 单元格之间的空格为0
table{
border-collapse:collapse; 合并相邻边框
}
阴影
box-shadow：20px 20px 10px 10px 颜色； 背景阴影
text-shadow：20px 20px 10px 10px 颜色； 颜色阴影
轮廓线
style
input[type="text"]
{
outline:none; 外部线取消
outline-style:groove; 线样式
}
<input type="text">
<input type="password">
防拖拽
style
textarea{
resize:none; 放拖拽
vertical-align:top(middle,tottom) 文字对齐方式
}
隐藏元素
visibility:hidden; 元素隐藏，位置保留
display：none； 脱离文档流原来位置不在保留
opacity：0； 透明度
绝对定位
.father{
w+h+b
position:relative; 相对定位
}
.son{
w+h+b;
top：500px； 距离网页顶端500px
left：500px； 距离网页左端500px
position:absolute; 绝对定位：不保留原来位置。
}
子绝父相：
父亲没有相对定位继续向上找，谁有相对定位以谁作为参考移动；如果没找到，则相对于浏览器。
固定定位
div
{
position:fixed 相对于可视区进行定位/
}
粘性定位
<style>
.one{
position: sticky; 当到达一定位置时，它就会停止随滚动移动
top: 0px;
background-color: pink;
}
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
