css
33 css
基本选择器
1.元素选择器
p {color: "red";}
2.ID选择器
#i1 {
background-color: red;
}
3.类选择器
复制代码
.c1 {
font-size: 14px;
}
p.c1 {
color: red;
}
复制代码
注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。
属性选择器
/*用于选取带有指定属性的元素。*/
[username] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
[username='z'] {
color: red;
}
/*寻找div里面的username=z*/
div[username='z'] {
color: red;
}
组合与嵌套
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器,只是div里面的p变*/
div p {
color: red;
}
/*逗号表示并列关系id=d1和class=c1 */
#d1, .c1 {
color: red;
}
</style>
</head>
<body>
<div id="d1">
div
<p>
div-p
<span>
div-p-span
</span>
</p>
</div>
<p>
pppppppp
</p>
<span class="c1">sapn11111</span>
<div id="d2">
div
</div>
</body>
伪类选择器 超链接配合着
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
color: gray;
}
/*鼠标悬浮时候的样式， 掌握主*/
a:hover {
color: beige;
}
/*按住鼠标左键不放松的样式*/
a:active {
color: green;
}
/*访问之后的样式*/
a:visited {
color: blue;
}
</style>
</head>
<body>
<a href="">点我哦</a>
</body>
</html>
违元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*第一个字母*/
p:first-letter {
color: red;
font-size: 24px;
}
/*在什么什么之前加的东西 content要写这个*/
p:before {
content: 'kill is 活着';
font-size: 28px;
color: blue;
}
/*解决父标签塌陷问题 在什么什么之后*/
p:after {
content: 'kill and 死亡';
font-size: 28px;
color: green;
}
</style>
</head>
<body>
<p>
人活着是为了是什么
</p>
<!--<ul>-->
<!-- <li></li>-->
<!-- <li></li>-->
<!-- <li></li>-->
<!-- <li></li>-->
<!-- <li></li>-->
<!--</ul>-->
</body>
</html>
选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <style>-->
<!-- #d1 {-->
<!-- color: blue;-->
<!-- }-->
<!-- </style>-->
<!-- <link rel="stylesheet" href="mycss.css">-->
<style>
#d1 {
color: red;
}
.c1 {
color: green;
}
div {
color: blue;
}
</style>
</head>
<body>
<!--
选择器优先级
1. 选择器相同的情况
离谁越近就听谁的
后执行的把前面覆盖
2. 选择器不同的情况
行内式 > id选择器 > 类选择器 > 标签选择器
-->
<!--<div id="d1" style="color: black">div</div>-->
<div id="d1" class="c1" style="color: black">div</div>
</body>
</html>
设置长宽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
}
span {
/*行内元素不能设置宽和高*/
/*设置了也没用*/
/*width: 100px;*/
/*height: 100px;*/
background: green;
}
</style>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>
字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-size: 20px;
颜色的英文名
color: limegreen;
范围是0-255
color: rgb(101,119,120);
a的范围是0-1
color: rgba(101,119,120, 0.9);
颜色编号，表示的颜色最多，1600w
color: #757575;
color: red;
font-weight: bolder;
/* 范围是100-900的整数*/
font-weight: 800;
}
</style>
</head>
<body>
<p>
块级标签才能设置宽度，内联标签的宽度由内容来决定。
</p>
</body>
</html>
文字属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*text-align: left;*/左边对齐 默认值 /*text-align: center;*/居中对齐 /*text-align: right;*/右对齐 /*text-decoration: underline;*/定义文本下的一条线。 /*text-decoration: line-through;*/定义穿过文本下的一条线。删除线 /*text-decoration: overline;*/定义文本上的一条线。 font-size: 20px; text-indent: 40px; } a { /*掌握 默认。定义标准的文本。*/ text-decoration:underline; } </style></head><body><p>块级标签才能设置宽度，内联标签的宽度由内容来决定。块级标签才能设置宽度，内联标签的宽度由内容来决定。块级标签才能设置宽度，内联标签的宽度由内容来决定。块级标签才能设置宽度，内联标签的宽度由内容来决定。块级标签才能设置宽度，内联标签的宽度由内容来决定。块级标签才能设置宽度，内联标签的宽度由内容来决定。块级标签才能设置宽度，内联标签的宽度由内容来决定。块级标签才能设置宽度，内联标签的宽度由内容来决定。块级标签才能设置宽度，内联标签的宽度由内容来决定。</p><a href="">点我</a></body></html>
背景属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; /*background: red;背景色*/ /*background-color: red;*/ background-image: url("1234.png"); /*background-repeat: repeat-x;*/ /*!*background-repeat: repeat-y;*! 背景图片只在垂直方向上平铺y轴上下铺*/ /*!*background-repeat: no-repeat;*!背景图片不平铺*/ /*background-position: center center ;*/居中 /*background-position: 20px 50px;*/ /*只要前缀一样的情况，都可以简写*/ background: center center url("1234.png"); border: 3px solid red; solid实线 background-attachment: fixed; } </style></head><body> <div></div></body></html>
边框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p { dotted：点状虚线边框。 none无边框，dashed 矩形虚线边框，solid 实线边框 /*border: 1px solid red;*/ /*border-width: 3px;*/ /*border-style: dotted;*/ /*border-color: red;*/ /*border-left-color: red;*/ /*border-left-style: solid;*/ /*border-left-width: 10px;*/ /*border-top-color: green;*/ /*border-top-style: dotted;*/ /*border-top-width: 5px;*/ /*border-right-color: green;*/ /*border-right-style: dotted;*/ /*border-right-width: 5px;*/ /*border-bottom-color: green;*/ /*border-bottom-style: dotted;*/ /*border-bottom-width: 5px;*/ border: 3px solid red; } div { width: 200px; height: 200px; background: red; /*border-radius: 100px;*/ /*border-bottom-left-radius: 100px;*/ /*border-bottom-right-radius: 100px;*/ border-radius: 50%; /*用这个属性能实现圆角边框的效果。 将border-radius设置为长或高的一半即可得到一个圆形。*/ } </style></head><body><!--<p>ppppppppp</p>--><div></div></body></html>
display属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*#d1 {*/ /* width: 100px;*/ /* height: 100px;*/ /* background: red;*/ /* display: inline-block;*/ 块级元素转成行级元素+块级元素 /*}*/ /*#d2 {*/ /* width: 100px;*/ /* height: 100px;*/ /* background: green;*/ /* display: inline-block;*/块级元素转成行级元素+块级元素 /*}*/ /*#d3 {*/ /* width: 100px;*/ /* height: 100px;*/ /* display: block;*/ 行级元素转块级元素 /* background: red;*/ /*}*/ /*#d4 {*/ /* width: 100px;*/ /* height: 100px;*/ /* display: block;*/行级元素转块级元素 /* background: green;*/ /*}*/ #d5 { width: 100px; height: 100px; /*隐藏*/ /*display: none; */ 隐藏空间不在 background: red; } #d6 { width: 100px; height: 100px; display: block; background: green; } </style></head><body><!--<div id="d1"></div>--><!--<div id="d2"></div>--><!--<span id="d3">span1</span>--><!--<span id="d4">span2</span>--><!--<div id="d5" style="visibility: hidden"></div>--> 隐藏空间还在<div id="d5" ></div><div id="d6"></div></body></html>
css盒子模型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; /*margin-top: 50px;*/ /*margin-left: 30px;*/ } p { /*margin: 0;*/ /*margin-left: 30px;*/ /*margin-top: 50px;*/ /*margin-right: 40px;*/ /*margin-bottom: 20px;*/ /*margin:10px;*/ /*第一个值代表上下，第二个代表左右*/ /*margin:10px 20px;*/ /*第一个值代表上，第二个代表左右,第三个代表下*/ /*margin:10px 20px 30px;*/ /*上 右 下 左*/ /*margin:10px 20px 30px 40px;*/ } /*#d1 {*/ /* width: 100px;*/ /* height: 100px;*/ /* background: red;*/ /* margin-bottom: 20px;*/ /*}*/ /*#d2 {*/ /* width: 100px;*/ /* height: 100px;*/ /* background: green;*/ /* margin-top: 50px;*/ /*}*/ #d1 { width: 200px; height: 200px; border: 3px solid red; } p { width: 20px; height: 20px; background: green; /*margin-left: 90px;*/ /*水平居中*/ margin: 0 auto; } </style></head><body><!--<p>--><!-- ppppppp--><!--</p>--><!--<div id="d1"></div>--><!--<div id="d2"></div>--><div id="d1"> <p id="p1"></p></div></body></html>
浮动float
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { width: 100px; height: 100px; background: green; float: left; 浮起来靠左浮动 } #d2 { width: 110px; height: 110px; background: red; /*float: left;*/ } </style></head><body><div id="d1"></div><div id="d2"></div></body></html>
浮动带来的问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { border: 3px solid blue; } #d2 { width: 100px; height: 100px; background: green; float: left; } #d3 { width: 100px; height: 100px; background: red; float: left; } /*#d4 {*/ /* !*height: 100px;*!*/ /* !*清除浮动*!*/ /* clear: left;*/ /*}*/ /*伪元素清除法*/ .clearfix:after { content: ''; display: block; clear: both; } </style></head><body><div id="d1" class="clearfix"> <div id="d2"></div> <div id="d3"></div> <div id="d4"></div></div></body></html>
溢出属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p { width: 100px; height: 100px; border: 3px solid red; /*overflow: hidden;*/ overflow: scroll; } </style></head><body><p>由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。</p></body></html>
溢出案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background: darkgrey; 背景色 } #d1{ width: 120px; height: 120px; border: 3px solid white; 边框3px实线白色 border-radius: 50%; 设置百分之50变成圆形 margin: 0 auto; 居中显示 overflow: hidden; 溢出隐藏 } #d1 img{ width: 100%; 宽度以父标签为准 } </style></head><body><div id="d1"> <img src="1234.png"></div></body></html>
定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { width: 100px; height: 100px; background: red; /*默认值，不能移动位置*/ /*position: static;*/ /*相对定位了， 只要改为relative， 那么就算你位置不发生移动，标签的性质也已经发生了改变 有不能移动位置改为可以移动位置 */ position: relative; left: 100px; top: 100px; /*right: 100px;*/ /*bottom: 100px;*/ } #d2 { width: 100px; height: 100px; background: red; position: relative; margin-left: 100px; } #d3 { width: 100px; height: 100px; background: green; position: absolute; left: 100px; top: 100px; } #d4 { width: 50px; height: 200px; background: red; /*固定定位*/浏览器不动的地方 position: fixed; right: 20px; bottom: 100px; } </style></head><body><!--static：默认的，不能移动位置relative:相对定位 相对于他自己本身定位absolute:绝对定位 相对于父标签定位， 如果没有父标签相对于bodyfixed：固定定位 相对于浏览器窗口--><!--<div id="d1"></div>--><!--<div id="d2">--><!-- <div id="d3"></div>--><!--</div>--><div style="height: 500px;background: red"></div><div style="height: 500px;background: green"></div><div style="height: 500px;background: orange"></div><div id="d4">回到顶部</div></body></html>
opacity
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p { color: red; opacity: 0.2;越小越透明0-1范围 } </style></head><body><p>hello</p></body></html>
z-index
/*z-index 值表示谁压着谁，数值大的压盖住数值小的，只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-indexz-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。*/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; /*background: #4e4e4e;*/ } .cover { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; } .modal { width: 200px; height: 200px; background: white; position: fixed; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; z-index: 1000; 数字大的在最外层 直接看到的那层，z轴的数据距离我们的距离 } </style></head><body><div>里面的内容</div><div class="cover"></div><div class="modal"> <p> 用户名：<input type="text"> </p> <p> 密码:<input type="text"> </p> <p> <input type="submit" value="登录"> </p></div></body></html>
