滨州公司网站建设,企业策划推广,西安免费做网站公司,wordpress突然500官方文档
CSS指的是层叠样式#xff08;Cascading Style Sheets#xff09;地址#xff1a;CSS 教程离线文档#xff1a;放大放小#xff1a;ctrl鼠标滚动为什么需要css#xff1a;简化修改HTML元素的样式#xff1b;将html页面的内容与样式分离提高web开发的工作效率Cascading Style Sheets地址CSS 教程离线文档放大放小ctrl鼠标滚动为什么需要css简化修改HTML元素的样式将html页面的内容与样式分离提高web开发的工作效率针对前端开发可以让html元素内容样式CSS分离更好控制页面
css快速入门
应用实例simple_css.html,使用css完成下面页面
完成如下网页显示 !DOCTYPE html
html langenheadmeta charsetUTF-8titlecss 快速入门/title!--1.在head标签内出现了style typetext/css/style2.表示要写css内容3.div{}表示对div元素进行样式的指定4.width300px属性表示对div样式的具体指定可以有多个5.如果有多个使用(即分号分开即可最后属性可以没有建议写上6.当运行页面时div就会被div{}渲染修饰--style typetext/cssdiv{width:200px;height:100px;background-color:gold;}/style/headbody!--使用传统方法--divhello,北京/divbr/divhello,上海/divbr/divhello,天津/divbr//body
/html
css语法
1.css语法可以分为两部分1选择器2声明
2.声明由属性和值组成多个声明之间用分号分隔 3.最后一条声明可以不加分号建议加上
4.一般每行只描述一个属性
5.css注释/*注释内容*/类似java
!DOCTYPE html
html langenheadmeta charsetUTF-8titlecss快速入门/title!--1.在head标签内出现了style typetext/css/style2.表示要写css内容3.div{}表示对div元素进行样式的指定div就是一个选择器元素/标签选择器4.width300px属性表示对div样式的具体指定可以有多个5.如果有多个使用(即分号分开即可最后属性可以没有建议写上6.当运行页面时div就会被div{}渲染修饰7.小经验在测试css时可以通过修改颜色或者大小来看8.css注释/*注释内容*/类似java快捷键ctrl/--style typetext/cssodiv{width:200px;height:100px;background-color: red;}/style/headbody!--使用传统方法--divhello,北京/divbr/divhello,上海/divbr/divhello,天津/divbr//body
/html 常用样式-字体颜色
介绍
颜色可以颜色名比如green也可以写rgb值比如rgb200200,200和十六进制表示值比如#708090使用十六进制更多 应用实例 color.html
!DOCTYPE html
html langenheadmeta charsetUTF-8title颜色/title!--颜色可以颜色名比如green也可以写rgb值比如rgb200200,200和十六进制表示值比如#708090--style typetext/css/*颜色可以颜色名比如green也可以写rgb值比如rgb200200,200和十六进制表示值比如#708090colorrgb255,222,1//color#ff7d44//colorred*/div{/*有三种方式指定颜色1.英文2.16进制#ff7d44【使用最多】3.三原色rag1,1,1*/color:#ff7d44;}/style/headbodydiv努力学习/div/body
/html
常用样式-边框border
应用实例border.html !DOCTYPE html
html langenheadmeta charsetUTF-8title边框/titlestyle typetext/cssdiv{width:300px;height:100px;border:1px dashed blue;/*dashed虚线*//*border:1px solid blue;//实线框*/}/style/headbodydiv学习/div/body
/html
常用样式-宽度width/高度height
宽度/高度像素值100px也可以是百分比值50%
应用实例如上所示 常用样式-背景颜色 !DOCTYPE html
html langenheadmeta charsetUTF-8title背景/titlestylediv{width:200px;height:100px;background-color: #ff7d44;}/style/headbodydiv学习/div/body
/html
常用样式-字体样式
1.font-size指定大小可以按照像素大小
2.font-weight指定是否粗体
3.font-family指定类型
!DOCTYPE html
html langenheadmeta charsetUTF-8title字体样式/titlestyle typetext/css/*说明1.font-size指定大小可以按照像素大小2.font-weight指定是否粗体3.font-family指定类型*/div{border:1px solid black;width:300px;font-size:40px;font-weight:bold;font-family:华文新魏;/*前提是电脑中安装有该字体*/}/style/headbodydiv学习/div/body
/html
常用样式-DIV居中
!DOCTYPE html
html langenheadmeta charsetUTF-8title文本/titlestyle typetext/css/*说明1.font-size指定大小可以按照像素大小2.font-weight指定是否粗体3.font-family指定类型4.margin-left margin-right 如果设置为auto表示左右居中*/div{border:1px blue solid;/*顺序不要求*/width:300px;background:aliceblue;font-size:40px;font-weight: bold;font-family: 新宋体;margin-left:auto;margin-right:auto;}/style/headbodydiv学习/div/body
/html
常用样式-文本居中
!DOCTYPE html
html langenheadmeta charsetUTF-8title文本/titlestyle typetext/css/*说明1.font-size指定大小可以按照像素大小2.font-weight指定是否粗体3.font-family指定类型4.margin-left margin-right 如果设置为auto表示左右居中5.text-align:center表示文本居中text-align文本位置left center right*/div{border:1px blue solid;/*顺序不要求*/width:300px;background:aliceblue;font-size:40px;font-weight: bold;font-family: 新宋体;margin-left:auto;margin-right:auto;text-align:center;}/style/headbodydiv学习/div/body
/html 常用样式-超链接去下划线 !DOCTYPE html
html langenheadmeta charsetUTF-8title超链接去掉下划线/title!--1.decoration修饰--style typetext/cssa{text-decoration:none;/*表示不需要修饰*/}/style/headbodya hrefhttp://www.baidu.com点击到百度/a/body
/html
常见样式-表格细线 !DOCTYPE html
html langenheadmeta charsetUTF-8title表格细线/titlestyle typetext/css/*设置边框border1px solid black将边框合并border-collapsecollapse指定宽度width设置边框给tdth指定即可border1px solid black1.tabletrtd表示组合选择器2.就是table和tr还有td都用统一的样式指定可以提高复用性*/table,tr,td{width:300px;border:1px solid black;border-collapse:collapse;}/style/headbodytable tr!--合并了3列--td aligncentercolspan3第1行第1列/td/trtr!--合并行跨行 row行--td rowspan2第2行第1列/tdtd第2行第2列/tdtd第2行第3列/td/trtrtd第3行第2列/tdtd第3行第3列/td/trtr!--合并行跨行row行--td rowspan2第4行第1列/tdtd第4行第2列/tdtd第4行第3列/td/trtrtd第5行第2列/tdtd第5行第3列/td/tr/table/body
/html
常用样式-列表去修饰 !DOCTYPE html
html langenheadmeta charsetUTF-8title列表去修饰/titlestyle typetext/cssul{/*说明list-stylenone表示去掉默认的修饰*/list-style:none;}/style/headbodyulli三国演义/lili红楼梦/lili西游记/lili水浒传/li/ul/body
/html
