青岛seo整站优化哪家专业,网络运营师,企业管理软件管理系统,自动全屏网站模板一、css简介 1、层叠样式表#xff1a;叠加效果#xff0c;不同css对同一html修饰#xff0c;冲突部分#xff0c;优先级高作用#xff0c;不冲突部分#xff0c;共同作用 2、css作用 (1)修饰html (2)替代了标签自身的颜色#xff0c;字号等属性#xff0c;提高…一、css简介 1、层叠样式表叠加效果不同css对同一html修饰冲突部分优先级高作用不冲突部分共同作用 2、css作用 (1)修饰html (2)替代了标签自身的颜色字号等属性提高复用性 (3)html内容与样式分离便于后期维护 3、css引入方式 (1)内嵌样式 div stylecolor:red;font-size:100内嵌方式/div (2)内部样式写在head中 style typetext/css div{color:red;font-size:100} input{color:red;font-size:100} /style (3)web全局样式 1.创建css文件 2.键入div{color:red;font-size:200px} 3.引入该css文件 link refstylesheet hrefcssDemo.css typetext/css (4)import方式 基本不用原因迟滞于html加载css不支持js动态修改部分低ie版本不支持 小结 style:告知浏览器使用css去解析 ref:css和html的关系 引入写在head中 内部样式也写在head中 二、css选择器 1、基本选择器 (1)、标签/元素选择器 style div{color:red;font-size:10px} /style (2)、id选择器 style #div1{color:red;font-size:10px} /style div iddiv1id选择器/div (3)、class选择器 style .style1{color:red;font-size:10px} .style2{color:pink;font-size:10px} /style div classstyle1id选择器1/div div classstyle1id选择器2/div div classstyle2id选择器3/div 优先级总结id选择器类选择器标签选择器 2、属性选择器 style input[typetext]{background-color:green} input[typepassword]{background-color:yellow} /style form nameinput typetext value/ passwordinput typepassword value/ /form 3、a标签伪元素选择器 语法鼠标放到链接上有四种状态 静止状态 a:link{css属性} 悬浮状态 a:hover{css属性} 点击状态 a:active{css属性} 释放状态 a:visited{css属性} style typetext/css a:link{background-color:white} a:hover{background-color:pink} a:active{background-color:red} a:visited{background-color:green} /style a href#hit me/a 4、层叠选择器 语法适用于div嵌套给其中指定的元素修饰 style #div1 .div1class span{color:red;font-size:100px} .body2 .div2class span{color:pink;font-size:50px} /style 三、css属性 1、文字属性 font-size:字体大小 font-family:字体类型 2、文本属性 color:颜色 text-decoration:下划线 属性值none/underline text-align:对齐方式 属性值left/right/center 3、背景属性 background-color:背景颜色 background-image:背景图片 background-repeat:平铺方式 属性值repeat-x/repeat-y/repeat 4、列表属性 list-style-type 属性值很多用时查 可以在li前面加图片效果很棒 格式list-style-image:url(xxx.gif); 5、尺寸属性 width:宽 height:高 6、显示属性 display 属性值none/inline style typetext/css span{display:none;color:red} /style script typetext/javascript function deal(){ document.getElementById(span).style.displayinline; } /script form usernameinput typetext value span idspan对不起您的输入有误/spanbr passwordinput typepassword valuebr input idbtn typebutton valuebutton οnclickdeal() /form 7、浮动属性 float: 属性值 left:向左浮 right向右浮动 clear: 属性值 left:清除左浮动 right清除右浮动 both:左右均清除 style typetext/css #div1{background-color:red;width:50px;height:60px;float:left} #div2{background-color:green;width:50px;height:60px;float:left} #div3{background-color:pink;width:50px;height:60px;float:left} /style div iddiv1/div div iddiv2/div div iddiv3/div 8、盒子模型 查资料转载于:https://www.cnblogs.com/pecool/p/8052022.html
