CSS:
???1.css的引入方式
???2.基础选择器
???3.高级选择器
???4.选择器的优先级
???5.伪类选择器
???6.字体样式
???7.文本样式
???8.背景
???9.盒模型border
???10.margin
???11.padding
1.css的引入方式
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>css的引入方式</title> ???<!--内链式--> ???<style type="text/css"> ???????h2{ ???????????font-size: 30px; ???????????color: red; ???????} ???</style> ???<style type="text/css"> ???????/* 外链式：导入式 ?实际用的少 ???????????使用import是 先加载html 在加载css ???????????import 是css2.1特有的，对于不兼容css2.1的浏览器是无效的eg:IE5以下 ???????*/ ???????@import url(‘./css/index.css‘); ???</style> ???<!--外链式：链接式 ???????使用link是html css同时加载的！！ ???????link 是XHTML ???--> ???<link rel="stylesheet" type="text/css" href="./css/index.css"></head><body> ???<div> ???????<!--内嵌式 ???????????优先级：内嵌式 > 内链式； ?一般不写内嵌式，以后不好维护！ ???????--> ???????<h1 style="font-size: 10px;color: yellow">我是h1路飞学城</h1> ???????<h2>我是h2路飞学城</h2> ???</div></body></html>
2.基础选择器
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>基础选择器</title> ???<style type="text/css"> ???????/*通配符选择器*/ ???????*{ ???????????padding: 0; ???????????margin: 0; ???????????color: #868686; ???????} ???????/*id选择器*/ ??/* 父内容一般不设 高度 子内容填充*/ ???????#container{ ???????????width: 968px; ???????????background-color: antiquewhite; ???????????margin: 0 auto; ??/*内容居中显示*/ ???????} ???????/* 标签选择器*/ ???????h1{ ???????????color: rgba(158,232,149,0.73) ???????} ???????/*类选择器*/ ???????.content{ ???????????width: 968px; ???????????background-color: red; ???????} ???????img{ ???????????width: 968px; ???????} ???????/*子代选择器*/ ???????ul>li{ ???????????color: aqua; ???????} ???????/*后代选择器*/ ???????ul a{ ???????????color: green; ???????} ???</style></head><body> ???<!-- 上中下 布局 --> ???<div id="container"> ???????<div class="header"> ???????????<h1>路飞学城</h1> ???????</div> ???????<div class="content"> ???????????<h3>我是内容</h3> ???????????<img src="./images/homesmall1.png" alt="图片1"> ???????</div> ???????<div class="header"> ???????????<ul> ???????????????<li>1 <a href="javascript:">哈哈</a></li> ???????????????<li>2</li> ???????????????<li>3</li> ???????????????<li>4</li> ???????????????<li>5</li> ???????????</ul> ???????</div> ???</div></body></html>
3.高级选择器
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>高级选择器</title> ???<style type="text/css"> ???????/*群组选择器*/ ???????.title,.content,.footer{ ???????????width: 968px; ???????????/*height: 300px;*/ ???????????margin: 0 auto; ???????????background-color: beige; ???????????border: 1px solid red; ???????} ???????/*交集选择器*/ ???????p.p1{ ???????????color: green; ???????} ???????p#title1{ ???????????font-size: 30px; ???????????color: red; ???????} ???????/* 毗邻标签 紧跟着h3标题的标签*/ ???????h3+p{ ???????????color: aqua; ???????} ???????/*兄弟选择器*/ ???????h3~p{ ???????????color: rgba(120,46,232,0.73) ???????} ???????/*属性选择器 ?????????找到所有class=baidu的选择器 ???????*/ ???????[class=‘baidu‘]{ ???????????color: green; ???????} ???????/*找到所有class开头是btn 的选择器*/ ???????[class^=‘btn‘]{ ???????????font-size: 20px; ???????????color: yellow; ???????} ???????/*找到以...结尾的选择器*/ ??????[class$=‘ault‘]{ ???????????font-size: 40px; ???????????color: red; ???????} ???</style></head><body> ???<div class="title"> ???????<p class="p1" id="title1">我是一个段落</p> ???</div> ???<div class="content"> ???????<h3>我是三级标题</h3> ???????<a href="javascript:">百度一下</a> ???????<p>我是另一个段落</p> ???????<h3>我是三级标题</h3> ???????<p>我是另一个段落</p> ???????<h3>我是三级标题</h3> ???????<p>我是另一个段落</p> ???????<p>我是另一个段落</p> ???????<p>我是另一个段落</p> ???</div> ???<div class="footer"> ???????<a href="https://www.baidu.com" class="baidu">百度</a> ???????<a href="https://www.baidu.com" class="btn-default">百度一下</a> ???????<a href="https://www.baidu.com" class="baidu">百度</a> ???????<a href="https://www.baidu.com" class="btn-index">百度二下</a> ???</div> ???<!-- ???????总结： ???????????基础选择器： ???????????????1.标签选择器 ???div ???????????????2.类选择器 ????.div1 ???????????????3.id选择器 ????#box ???????????????4.通配符选择器 ?* ???????????高级选择器： ???????????????1.群组选择器 ?中间用, ???????????????????.title,.content,.footer{} ???????????????2.交集选择器 ?选择器之间不能有空格，第一个标签必须是标签选择器，第二个标签可以是id或者类选择器 ???????????????????p.p1{} ??p#title1{} ???????????????3.后代选择器 ?选择器之间用 空格 ???????????????????ul a{} ???????????????4.子代选择器 ?选择器之间用 > ???????????????????ul>li{} ???????????????5.毗邻选择器 ?选择器之间用 + ?紧跟着h3标题的标签 ???????????????????h3+p{} ???????????????6.兄弟选择器 ?选择器之间用~ ???????????????????h3~p{} ???????????????7.属性选择器 ????????????????????[class=‘baidu‘]{} ????????????????????[class^=‘btn‘]{} ????????????????????[class$=‘ault‘]{} ???????????css样式优先级： ???????????????行内样式 > 内部样式表 > 外部样式表 ???????????????ID选择器 > 类选择器 > 标签选择器 ???--></body></html>
4.选择器的优先级
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>优先级</title> ???<style type="text/css"> ???????#div1{ ???????????background-color: yellow; ???????} ???????.box{ ???????????background-color: green; ???????} ???????div{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: red; ???????} ???????????</style></head><body> ???<!-- 选择器的优先级 id > 类 > 标签--> ???<div id="div1" class="box">哈哈</div></body></html>
5.伪类选择器
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>伪类选择器</title> ???<style type="text/css"> ???????/*超链接未被访问时的状态*/ ???????a:link{ ???????????background-color: yellow; ???????} ???????/*鼠标单击时超链接的状态*/ ???????a:visited{ ???????????color: green; ???????} ???????/*鼠标悬停时超链接的状态*/ ???????a:hover{ ???????????font-size: 30px; ???????????color: aqua; ???????} ???????/*鼠标点击不松手超链接的状态*/ ???????a:active{ ???????????color: blue; ???????} ???????/*获取焦点时的样式*/ ???????input:focus{ ???????????background-color: red; ???????} ???????/* ???????总结： ???????????爱恨情仇原则：love / hate ???????*/ ???????/*伪元素选择器*/ ???????p:first-letter{ ???????????font-size: 30px; ???????} ???????p:before{ ???????????content: ‘哈哈‘; ???????????color: red; ???????} ???????p:after{ ???????????content: "$$"; ???????????color: green; ???????} ???</style></head><body> ???<ul> ???????<li><a href="#">百度一下</a></li> ???????<li><a href="#">hao123</a></li> ???????<li><a href="#">博客</a></li> ???</ul> ???<form action=""> ???????<input type="text" name=""> ???</form> ???<p>来呀，你好啊！</p></body></html>
6.字体样式
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>字体样式</title> ???<!--内链式 --> ???<style type="text/css"> ???????p{ ???????????/*设置字体大小*/ ???????????font-size: 30px; ???????????/*推荐设置斜体的时候使用oblique*/ ???????????/*font-style: italic;*/ ???????????font-style: oblique; ???????????/*设置字体的粗细*/ ???????????font-weight: bolder; ???????????/*设置字体的类型*/ ???????????font-family:"微软雅黑"; ???????????/*设置字体的颜色*/ ???????????color: red; ???????} ???</style></head><body> ???<!-- ???????默认字体大小是 16px = 1em ?????????????????????0.75em = 12px ???--> ???<p>这里是个p!!</p></body></html>
7.文本样式
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>文本样式</title> ???<style type="text/css"> ???????.box1{ ???????????width: 500px; ???????????height: 200px; ???????????background-color: red; ???????????color: rgba(85,26,139,0.73); ???????????/*上下删除线 overline line-through */ ???????????text-decoration: underline; ???????????/*设置鼠标的形状*/ ???????????cursor: pointer; ???????????/*设置首行缩进*/ ???????????text-indent: 20px; ???????????font-size: 20px; ???????????/*left right center justify 两端对齐只针对英文 ?*/ ???????????text-align:justify; ???????????/*设置阴影 左右 上下 0-1 color */ ???????????text-shadow:0px 0px 1px #fff; ???????????/*行高 ???????????????规律： 当行高=盒子的高度时，文本会垂直居中 ???????????*/ ???????????line-height: 200px; ???????????text-align: center; ???????} ???</style></head><body> ???<div class="box1"> ???????my name is alice ???</div> ???<a href="">天空飘个五个字</a></body></html>
8.背景
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>背景</title> ???<style type="text/css"> ???????#img{ ???????????width: 990px; ???????????height: 980px; ???????????/*设置背景颜色*/ ???????????/*background-color: yellowgreen;*/ ???????????/*background-image: url("./images/homesmall1.png");*/ ???????????/*!* repeat-x repeat-y no-repeat *!*/ ???????????/*background-repeat: no-repeat;*/ ???????????/*background-position: 10px 20px;*/ ???????????/*简写*/ ???????????/*background:url("./images/homesmall1.png") no-repeat 20px 30px yellowgreen;*/ ???????????background: red; ???????????padding-top:10px; ???????????border: 5px solid blue; ???????} ???</style></head><body> ???<div id="img"> ???</div></body></html>
9.盒模型border
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>border</title> ???<style type="text/css"> ???????.wrap{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: #000000; ???????????/* ???????????border-top-width: 5px; ???????????border-bottom-width: 10px; ???????????border-left-width: 15px; ???????????border-right-width: 20px; ???????????border-top-color: red; ???????????border-bottom-color: yellowgreen; ???????????border-left-color: yellow; ???????????border-right-color: blue; ???????????border-top-style: solid; ???????????border-bottom-style: dashed; ???????????border-left-style: dotted; ???????????border-right-style: double; ???????????*/ ???????????/* 四个值 上 右 下 左 */ ???????????/* ???????????border-style: dotted dashed double solid; ???????????border-width: 5px 10px 15px 20px; ???????????border-color: blue red yellow slateblue; ???????????*/ ???????????/* 三个值 上 左右 下*/ ???????????/* ???????????border-style: dotted double solid; ???????????border-width: 5px 10px 20px; ???????????border-color: blue yellow slateblue; ???????????*/ ???????????/* 两个值 上下 左右 */ ???????????/* ???????????border-style: dotted solid; ???????????border-width: 5px 20px; ???????????border-color: blue yellow; ???????????*/ ???????????/* 一个值 上下左右 */ ???????????/* ???????????border-style: dotted; ???????????border-width: 20px; ???????????border-color: blue; ???????????*/ ???????????/*简写*/ ???????????/*border: 10px solid yellow;*/ ???????} ???</style></head><body> ???<div class="wrap"></div></body></html>
10.margin
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>margin</title> ???<style type="text/css"> ???????.box1{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: #ff5776; ???????????/* ???????????margin-top: 20px; ???????????margin-left: 40px; ???????????margin-bottom: 20px; ???????????margin-right: 40px; ???????????*/ ???????????/* 上 右 下 左*/ ???????????/*margin: 20px 30px 40px 50px;*/ ???????????/* 上 左右 下*/ ???????????/*margin: 20px 30px 40px;*/ ???????????/* 上下 左右*/ ???????????/*margin: 20px 40px;*/ ???????????/*margin-bottom: 50px;*/ ???????????/* margin: 0 auto;使盒子元素水平居中 ?*/ ???????????margin: 0 auto; ???????} ???????/* ???????总结： ???????????垂直方向的特殊性；水平方向没有这种特性； ???????????当两个垂直外边距相遇时，会形成一个外边距，称为 外边距合并，已大的为基准！！ ???????????注意：父子级盒子 嵌套 设置外边距 会形成外边距合并，影响页面布局， ?????????????????解决办法：给父元素添加 border ???????????解释： ???????????????所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之（以最大的为基准）。 ???????????????毗邻的定义为： ???????????????????同级或者嵌套的盒元素，并且他们之间没有非空内容，padding或者border分割。 ???????????????解决办法：（子债父还） ???????????????????1.父级或子元素使用浮动或者绝对定位absolute,浮动或绝对定位不参与margin的折叠。 ???????????????????2.父级overflow:hidden ???????????????????3.父级设置padding(破坏非空白的折叠条件) ???????????????????4.父级设置border ???????*/ ???????.box2{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: yellow; ???????????margin-top: 100px; ???????????border: 1px solid chartreuse; ???????????/*padding: 1px;*/ ???????????/*overflow: hidden;*/ ???????} ???????.child{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: #868686; ???????????margin-top: 150px; ???????} ???????span{ ???????????background-color: #ff5776; ???????} ???????.span1{ ???????????margin-left: 40px; ???????} ???????.span2{ ???????????margin-left:20px; ???????} ???????????</style></head><body> ???<div class="box1"></div> ???<div class="box2"> ???????<div class="child"></div> ???</div> ???<span class="span1">12345</span> ???<span class="span2">54321</span></body></html>
11.padding
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>padding</title> ???<style type="text/css"> ???????.box1{ ???????????width: 100px; ???????????height: 200px; ???????????background-color: #ff5776; ???????????/* ???????????内边距：内容区域到边框的距离 ???????????????内边距会扩大元素所在的区域 ???????????注意： ???????????????为元素设置内边距 只能影响自己，不会影响其他的元素； ???????????*/ ???????????/* ???????????padding-left: 20px; ???????????padding-top: 30px; ???????????padding-right: 40px; ???????????padding-bottom: 40px; ???????????*/ ???????????/* ???????????padding: 10px 20px 30px 40px; ???????????padding: 10px 30px 50px; ???????????padding: 10px 20px; ???????????*/ ???????????padding: 10px; ???????} ???</style></head><body> ???<div class="box1"> ???????12345 ???</div></body></html>前端开发 - CSS - 上
原文地址：https://www.cnblogs.com/alice-bj/p/8972228.html