标签：位置 hello 文章 hidden hit pointer 删除线 盒子模型 微软
1、三种css样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--外链css样式--> <link rel="stylesheet" href="路径"> <style> /*内嵌css样式*/ div{ width: 100px; height: 100px; background: red; } </style> </head> <body> <!--行间样式--> <div style="background: white"></div> <!--css Cascading Style Sheet 层叠样式表——修饰、美化网页，化妆师 CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。 行间样式 > 内嵌css样式 > 外链css样式（在style之前引入） 外链css样式位于style之后时优先级大于内嵌css样式 --> </body> </html>
2、基本选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } /*元素选择器 选择相同的元素对相同的元素设置一种css样式 选中页面中所有的此元素*/ div{ width: 100px; height: 50px; background: aqua; } p{ width: 100px; height: 50px; background: aqua; } /* id选择器 给标签设置一个id属性，在写样式时，在id名字前面加个 # */ #box{ background: antiquewhite; } /* class选择器 给标签设置一个class属性，在写样式时，在class名字前面加个. 一般给具有相同属性的元素设置同一个class */ .wrap{ background: black; } </style> </head> <body> <!--基本选择器的优先级--> <!--id > class > 元素（标签）（TagName）> * --> <div>1</div> <div class="wrap">2</div> <div id="box" class="wrap">3</div> <div>4</div> <p>1</p> <p class="wrap">2</p> <p>3</p> </body> </html>
3、复杂选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } /* , 群组选择器 对几个有相同属性的选择器进行样式设置 两个选择器之间必须用逗号隔开*/ div,p{ width: 100px; height: 50px; background: white; } /* ~ 兄弟选择器 操作的对象是该元素下的所有兄弟元素*/ div ~ p{ width: 150px; height: 50px; background: aquamarine; } /* > 子代选择器 选择某个元素下面的子元素*/ div > p{ width: 150px; height: 50px; background: aquamarine; } /* + 相邻选择器操作的对象是该元素的同级元素选择div相邻的下一个兄弟元素选择到紧随目标元素后的第一个元素*/ p + p{ width: 150px; height: 50px; background: aquamarine; } </style> </head> <body> <!--div{$}*3 +tab（快速生成div标签并按顺序插入数字）--> <p>3</p> <div>kk</div> <p>4</p> <div>1 <span>1</span> </div> <div>2 <p>div1</p> <p>div2</p> </div> <div>3</div> <p>1</p> <p>2</p> </body> </html>
4、后代选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } li{ width: 50px; height: 50px; background: aqua; } /* 后代选择器*/ div ul li{ width: 50px; height: 50px; background: aqua; } /*ol.box li == ol[class=box] li */ ol[class=box] li{ width: 50px; height: 50px; background: aqua ; } #box{ background:blue; } div ol li.wrap{ background: black; } </style> </head> <body> <!-- 复杂后代选择器 1.先比id(最高位) class（中间位） tagName（个数位） 2.id选择器个数不相等，id越多，优先级越高 3.id选择器个数相同,则看class,class多的优先级高 4.class个数相等，就看tagName个数 --> <div> <ul class="box"> <li id="box" style="background: red">ul1</li> <li>ul2</li> <li>ul3</li> <li>ul4</li> </ul> <ol class="box"> <li>ol1</li> <li>ol2</li> <li class="wrap">ol3</li> </ol> </div> <ul> <li>ul1</li> <li>ul2</li> <li>ul3</li> <li>ul4</li> </ul> <ol> <li>ol1</li> <li>ol2</li> <li>ol3</li> </ol> </body> </html>
5、伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*LoVeHAte爱恨原则*/ a:link{/*link 未被点击的链接*/ color: blueviolet; } a:visited{/*已被点击的链接*/ color: blue; } a:hover {/*鼠标悬停其上的元素 */ color: red; background: aqua; font-size: 20px; /*cursor: default 默认（a标签默认手指，其他标签默认箭头）*/ /*cursor: pointer; 手指*/ /*cursor: wait; 等待*/ /*cursor: help;帮助*/ } a:active{/*鼠标已经再其上按下但是还没有释放的元素*/ color: yellowgreen; } div{ width: 50px; height: 50px; background: aqua; } /*改变的是div本身*/ /*!*div:hover{*! */ /*width: 100px;*/ /*height: 100px;*/ /*background: bisque;*/ /*}*/ p{ width: 20px; height: 20px; background: red; display: none; } /*改变的是div的后代 p元素*/ div:hover p{ width: 30px; height: 30px; background: blue; display: block; } </style> </head> <body> <a href="http://www.baidu.com">百度</a> <div> <p></p> </div> </body> </html>
6、css文字属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*font-family 字体类型浏览器默认的字体是微软雅黑，字体中有多个字体的时候， 如果前面的字体没有就使用后面的字体*/ .box1{ font-family: Algerian,"宋体"; } /* font-size 字体大小 单位 px rem em % px 谷歌浏览器默认字体大小16px,最小是12px rem 相对于html(根标签)的字体大小 em 等于父级的字体尺寸——相对于父级字体大小而言的 % 相对于父容器中字体的%调整 这个要知道 */ .box2{ font-size: 20px; } .box3{ font-size: 12px; } .box4{ font-size: 2rem; } #box{ font-size: 30px; } #box div{ /*font-size: 2em;*/ font-size: 50%; } /* font-weight 字体粗细 关键字 normal 默认字体 lighter 较细 bold 加粗 bolder 很粗 给值 只能100-900的整百数 400相当于正常的 700相当于bold */ .box5{ font-weight: bold; } .box6{ font-weight: 700; font-style: italic; } /* font-style 字体类型 normal 默认 文字正常 italic 文字斜体（属性） oblique 文字斜体 */ /* color 文字颜色 关键字 英文单词 red green 16进制（0-9 a-f） #5544aa #54a #abd456 #dddddd #ddd rgb(0-255,0-255,0-255) r red g green b blue rgba(0-255,0-255,0-255,0-1) r red g green b blue a alpha(透明度) 0 完全透明 1 完全不透明 */ .box7{ /*color: aqua;*/ color: rgb(224, 62, 69); } .box8{ /*color: #222add;*/ color: rgba(224, 62, 69,0.2); } </style> </head> <body> <div class="box1">hello 001 abc</div> <div class="box2">hello 001 abc</div> <div class="box3">hello 001 abc</div> <div class="box4">hello 001 abc</div> <div class="box5">hello 001 abc</div> <div class="box6">hello 001 abc</div> <div class="box7">hello 001 abc</div> <div class="box8">hello 001 abc</div> <div id="box"> <div>hello 001 abc</div> </div> </body> </html>
7、css文本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
/*
white-space: 换行方式
normal 正常换行
nowrap 不换行
*/
/*
text-indent 首行缩进（em）
line-height 行高（和盒子高度一样时垂直居中）
letter-spacing 字距
word-spacing 词距
*/
/*
text-align 文本水平对齐方式
left 默认值 向左对其
right
center
*/
/*
text-transform 文本大小写
none 默认值 无转换发生
uppercase 转换成大写
lowercase 转换成小写
capitalize 将英文单词的首字母大写
*/
p {
width: 400px;
background: aqua;
/*white-space: nowrap;*/
text-indent: 2em;
line-height: 30px;
/*letter-spacing: 5px;*/
/*word-spacing: 20px;*/
/*text-transform: uppercase;*/
/*text-transform: lowercase;*/
text-transform: capitalize;
}
div {
width: 50px;
height: 50px;
background: antiquewhite;
line-height: 50px;
text-align: center;
/*text-decoration: underline;*/
/*text-decoration: overline;*/
text-decoration: line-through;
}
/*
text-decoration 下划线 删除线 上划线
none 默认值，可以用这个属性去掉已经有下划线或者删除线或者上划线的样式
underline 下划线，一般用于文章的重点表明
overline 上划线
line-through 删除线
*/
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>Python [1] （英国发音：/?pa?θ?n/ 美国发音：/?pa?θɑ?n/）, 是一种面向对象的解释型计算机程序设计语言，
由荷兰人Guido van Rossum于1989年发明，第一个公开发行版发行于1991年。</p>
<div>1</div>
<a href="#">55555</a>
</body>
</html>
8、css背景属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /* background-color 背景色 background-image 背景图片 background-repeat 背景平铺 repeat 平铺 默认 repeat-x 平铺x repeat-y 平铺y np-repeat 不平铺 注意：只有背景图片的宽高小于被设置的元素的宽高，才会有平铺效果 background-position 背景位置 x轴 y轴 x轴 left center right y轴 top center bottom 如果只给一个值，默认在x轴，y轴默认center(50%) % px background-size 背景大小 % px 给一个值的时候，默认x轴，y轴默认auto auto会等比缩放 cover 等比例缩放直到铺满x,y轴 可以铺满整个框 但是不一定能看到完整的图片 contain 等比例缩放x轴或者y轴其中的一个方向 不一定铺满 但是可以看到整个图片 */ div{ width: 520px; height: 700px; border: 1px solid red; background-color: aqua; background-image: url("img/0.jpg"); background-repeat: no-repeat; /*background-position: 10px 50%;*/ /*background-size: 180px 176px;*/ /*background-size: cover;*/ /*background-size: contain;*/ /*background: aqua url("img/0.jpg") no-repeat 10px center/300px 298px;*/ /*background: color image repeat position/size*/ } </style> </head> <body> <div></div> </body> </html>
9、盒子模型
盒子是由内容(content)、内边距(padding)、外边距(margin)、边框(border)组成的
①边框（border）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /* 盒子模型 盒子是由内容(content)、内边距(padding)、外边距(margin)、边框(border)组成的 */ /* border:边框 类型 颜色; border-width border-style solid实线 dashed虚线 dotted点线 double双边框 border-color 一个值的时候： 代表四个方向值一样 上右下左（顺时针） 二个值的时候： 上下 右左 三个值的时候： 上 右左 下 四个值的时候： 上 右 下 左 border-width 边框大小 border-top-width 上边框大小 border-right-width 右边框大小 border-bottom-width 下边框大小 border-left-width 左边框大小 border-top-width:0 border-style 边框样式 border-top-style 顶部边框类型 border-right-style 右边边框类型 border-bottom-style 底部边框类型 border-left-style 左边边框类型 border-color 边框颜色 border-top-color 顶部边框颜色 border-right-color 右边边框颜色 border-bottom-color 底部边框颜色 border-left-color 左边边框颜色 */ div { width: 150px; height: 250px; /*border: 10px solid red;*/ border-width: 5px 10px 15px 20px; border-style: solid dotted dashed double; border-color: red blue aqua fuchsia; } </style> </head> <body> <div></div> </body> </html>
②内边距（padding）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /* padding 内边距，边框与内容之间的距离 一个值的时候： 代表四个方向值一样 上右下左（顺时针） 二个值的时候： 上下 右左 三个值的时候： 上 右左 下 四个值的时候： 上 右 下 左 */ div{ width: 300px; height: 200px; border: 1px solid red; /*padding: 20px;*/ /*padding-left: 50px;*/ /*padding-top: 50px;*/ padding: 50px 0 50px; } </style> </head> <body> <div> padding 内边距，边框与内容之间的距离 一个值的时候： 代表四个方向值一样 上右下左（顺时针） 二个值的时候： 上下 右左 三个值的时候： 上 右左 下 四个值的时候： 上 右 下 左 </div> </body> </html>
③外边距（margin）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /* margin 外边距 元素与其他元素的距离（边框以外的距离） 一个值的时候： 代表四个方向值一样 上右下左（顺时针） 二个值的时候： 上下 右左 三个值的时候： 上 右左 下 四个值的时候： 上 右 下 左 margin: auto; 快速左右居中 垂直方向： margin-bottom,margin-top 取两者之间的较大值 水平方向： margin-left,margin-right 取两者的和 overflow:hidden; 超出隐藏，解决内边距重叠问题 */ div{ width: 300px; height: 200px; background: antiquewhite; /*border: 1px solid red;*/ /*margin: 50px;*/ /*margin: auto;*/ /*display: inline-block;*/ overflow: hidden; } .box{ /*margin-top: 100px;*/ } p{ width: 50px; height: 50px; background: aqua; /*margin: 100px;*/ margin: 100px; } </style> </head> <body> <div> <p></p> </div> <div class="box"></div> </body> </html>
④盒子大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div{ width: 150px; height: 150px; background: aqua; border: 10px solid red ; padding: 20px; margin: 50px; } /* 盒子大小=样式宽 + 内边距 + 边框 盒子宽度=左border+右border+width+左padding+右padding 盒子高度=上border+下border+height+上padding+下padding */ </style> </head> <body> <div></div> </body> </html>
标签：位置 hello 文章 hidden hit pointer 删除线 盒子模型 微软
原文地址：https://www.cnblogs.com/wangwei13631476567/p/9160839.html
