css层叠样式表Cascading Style Sheets)CSS能够对网页中元素位置的排版进行像素级精确控制实现美化页面的效果能够做到页面的样式和结构分离css控制页面的展示效果html 决定页面结构基础语法规范选择器{一条/N条声明}选择器决定针对谁修改找谁声明决定修改啥干啥声明的属性是键值对使用区分键值对使用区分键和值!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{color:red;font-size:40px;}/style/headbodyphello world/pp你好/ph1hello world/h1/body/htmlcss就像渲染器一样可以改变样式颜色之类的显示效果引入方式内部样式表将css嵌套到html页面中,用style上述代码是内部样式表行内样式表行内样式表比内部样式表优先级高h1stylecolor:blue;font-size:50px;hello world/h1外部样式实际开发中最常用的方式创建一个css文件使用link 标签引入csslinkrelstylesheethref[css文件路径]选择器的种类基础选择器单个选择器构成标签选择器类选择器id 选择器通配符选择器上面用的p就是标签选择器类选择器bodypclassmeal吃饭/ppclasssleep睡觉/ppclasswork工作/ppclassplay game玩游戏/p/body.meal{color:red;}.sleep{color:blue;}.work{color:green;}.play{color:purple;}.game{font-size:80px;}play game可以用play和game叠加3. id选择器以#开头表示id选择器pidmeal吃饭/ppidsleep睡觉/p#meal{color:red;}#sleep{color:blue;}通配符选择器使用 * 选取所有的标签通配符选择器在实际应用开发中用来针对页面中所有的元素默认样式进行消除主要用来消除边距*{background-color:yellow;}复合选择器把多种基础选择器综合运用起来后代选择器子选择器并集选择器伪类选择器后代选择器ulliidmeal吃饭/liliidsleep睡觉/li/ulolclasslistliidmeal吃饭/liliidsleep睡觉/liliidplayahref#点击/a/li/ol/* ol li { color: red; } *//* .list li { color: red; } */li a{color:red;}伪类选择器,定义元素的状态a:link 选择未被访问过的链接a:visited 选择已经被访问过的链接a:hover 选择鼠标指针悬停上的链接a:active 选择活动链接鼠标按下了但是未弹起ahref#不跳转/abrinputtypebuttonvalue按钮style a{color:black;}a:hover{color:red;}a:active{color:green;}input[typebutton]{color:blue;}input:hover[typebutton]{color:red;}input:active[typebutton]{color:green;}/style字体字体设置div{font-family:宋体;font-size:30px;}设置字体颜色color:red;color:#ff0000;color:rgb(255,0,0);字体粗细font-weight:lighter;粗细font-style:oblique;斜体文本对齐h1{text-align:left;/* tdext-decoration: overline; */}h2{text-align:center;text-decoration:line-through;删除线}h3{text-align:right;}p{text-indent:2em;首行缩进text-decoration:underline;下划线}a{text-decoration:none;无下划线}背景设置style body{background-color:#23aeb8;背景颜色}div{background-image:url(../img/man.png);背景图片background-repeat:no-repeat;背景平铺方式width:700px;宽height:400px;高background-position:center;背景位置}/stylebackground-position: x y;圆角矩形border-radius:length;div{width:400px;height:400px;border:2px green solid;/* border-radius: 200px; */圆形/* border-radius: 50%; */圆形/* border-top-left-radius: 20px; 左上 border-top-right-radius: 50px; 右上 border-bottom-right-radius: 100px; 右下 border-bottom-left-radius: 200px; */左下border-radius:20px 50px 100px 200px;}元素显示模式块级元素行内元素a{display:block;}将行级元素转化为块级元素盒模型边框 border内容 content内边距 padding外边距 marginborderdiv{width:200px;height:200px;/* border-width: 10px; border-style: solid; border-color:green; */border:10px solid green;box-sizing:border-box;不改变盒子的大小}paddingdiv{width:200px;height:200px;/* padding-left: 20px; padding-top: 20px; *//* padding: 20px; */padding:20px 10px 30px 40px;/* padding: 上 右 下 左 */}外边距div{border:solid green 5px;width:200px;height:100px;/* margin-top: 20px; margin-right: 30px; margin-bottom: 40px; margin-left: 50px; *//* margin: 20px 30px 40px 50px;margin: 上 右 下 左 *//* margin:auto; */text-align:center;}弹性布局div{border:solid green 5px;width:400px;height:200px;margin:20px auto;display:flex;/* justify-content: space-between; */align-items:end;}div span{width:50px;height:50px;background-color:#23aeb8;text-align:center;line-height:50px;}