安庆做网站,大型网站怎么做seo,云南网站建设是什么,要给公司做一个网站怎么做的吗CSS3HTMLCSSJavaScript结构表项交互如何学习#xff1f;CSS是什么CSS怎么用(快速入门)CSS选择器(重点难点)美化网页(文字、阴影、超链接、列表、渐变...)盒子模型浮动定位网页动画(特效效果)1、初识CSS1.1、什么是CSSCascading Style Sheet(层叠样式表)CSS#xff1a;表现(美…CSS3HTMLCSSJavaScript结构表项交互如何学习CSS是什么CSS怎么用(快速入门)CSS选择器(重点难点)美化网页(文字、阴影、超链接、列表、渐变...)盒子模型浮动定位网页动画(特效效果)1、初识CSS1.1、什么是CSSCascading Style Sheet(层叠样式表)CSS表现(美化网页)字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动...1.2、发展史CSS1.0CSS2.0 DIV(块)CSSHTML与CSS结构分离网页变得简单利于SEOCSS2.1 浮动和定位CSS3.0 圆角边框、阴影、动画.... 浏览器兼容性1.3、快速入门Titlecolor:red;}我是标题建议使用这种规范CSS优势内容和表现分离网页结构表现统一可以实现复用样式十分丰富建议使用独立于HTML的css文件利于SEO容易被搜索引擎收录1.4、css的三种导入方式Titlecolor:green;}我是标题拓展外部样式两种写法链接式导入式import是CSS2.1特有的2、选择器作用选择页面上的某一种元素或者某一类元素2.1、基本选择器2.1.1、标签选择器选择一类标签语法 标签名 标签名{ 声明1 声明2 }Titleh1{color: #dcff4f;background: deepskyblue;border-radius: 14px;}p{font-size: 80px;}学Java学Java狂神说2.1.2、类选择器 class选中所有class属性一致的标签可以跨标签语法 .类名{ 声明1 声明2 }Title好处可以多个标签归类是同一个class可以复用*/.one{color:wheat;}.two{color:red;}.three{}标题1标题2标题32.1.3、id选择器全局唯一语法 #id名{ 声明1 声明2 }Title不遵循就近原则固定的id选择器类选择器标签选择器*/#one{color: aquamarine;}.style1{color:red;}h1{color: #dcff4f;}标题1标题2标题3标题4标题5优先级不遵循就近原则固定的id选择器类选择器标签选择器2.2、层次选择器HTMLp0p1p2p3p4p5p62.2.1、后代选择器在某个元素的后面 祖爷爷 爷爷 爸爸 我/*后代选择器*/body p{background: red;}2.2.2、子选择器只有当前选择的下一代/*子选择器*/body p{background: blueviolet;}2.2.3、相邻兄弟选择器同辈 对下不对上只有一个/*相邻兄弟选择器*/.active p{background: cadetblue;}2.2.4、通用选择器当前选中元素的向下的所有元素/*通用兄弟选择器*/.active ~ p{background: green;}2.3、结构伪类选择器伪类条件Titleul li:first-child{background: #dcff4f;}/*ul的第最后一个子元素*/ul li:last-child{background: blueviolet;}/*选中p1:定位到父元素选中当前的第一个元素选中当前元素的父级元素选中父级元素的第n个但第n个元素必须是是当前元素否则选不中*/p:nth-child(3){background: cadetblue;}/*先选中当前元素的父级元素然后选中父级元素的第n个和当前元素同类型的元素*/p:nth-of-type(3){background: wheat;}/*鼠标移动到上面会发生变化*/a:hover{background: black;}12231h1p1p2p3li1li2li32.4、属性选择器(常用)classid结合属性名属性名 属性值(正则)** 绝对等于 *** 包含^ 以...开头$ 以...结尾Titlefloat: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: blue;text-align: center;color: gainsboro;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/*1.属性名2.属性名属性值(正则)3. 绝对等于 * 包含4.^ 以...开头5.$ 以...结尾*//*选中存在id属性的元素 a[]{} */a[id]{background: #2be24e;}/*选中idfirst*/a[idfirst]{background: #ff0b2f;}/*class中有link的*/a[class * link]{background: cadetblue;}/*选中href中以http开头的*/a[href^http]{background: #ff0b2f;}/* 选中href中以pdf结尾的*/a[href$pdf]{background: #2be24e;}123456789103、美化网页元素3.1、为什么要美化网页有效的传递页面信息美化网页页面漂亮才能吸引用户凸显页面主题提高用户体验span标签重点要突出的字使用span套起来Titlefont-size: 50px;}欢迎学习java3.2、字体样式font-family: Arial Black, 楷体;}h1{font-size: 50px;color: #ff0b2f;}.p1{font-weight: bold;}font: oblique bolder 16px 楷体 ;}3.3、文本样式颜色 color: rgb/rgba/单词;对齐方式 text-align: center;水平居中首行缩进 text-indent: 2em;行高 height: 300px;块高 line-height: 300px;行高 行高和块高度一致就可以实现单行文本上下居中装饰划线 text-decoration:文本图片水平对齐 vertical-align: middle;Titlecolor: rgba(0,255,255,0.9);text-align: center;/*文本居中*/}.p1{text-indent: 2em;}.p3{background: blue;height: 300px;line-height: 300px;}/*下划线*/.l1{text-decoration: underline;}/*中划线*/.l2{text-decoration: line-through;}/*上划线*/.l3{text-decoration: overline;}/*超链接去下划线*/a{text-decoration: none;}/*水平对齐 参照物 a b */img,span{vertical-align: middle;}123123123123123123123
