网站前台设计软件,免费建网站平台哪个好,怎么做一网站,大连百度首页优化HTML画页面--》这个页面就是页面上需要的元素罗列起来#xff0c;但是页面效果很差#xff0c;不好看#xff0c;为了让页面好看#xff0c;为了修饰页面---》CSS CSS的作用#xff1a;修饰HTML页面 用了CSS之后#xff0c;样式和元素本身做到了分离的效果。---》降低了代…HTML画页面--》这个页面就是页面上需要的元素罗列起来但是页面效果很差不好看为了让页面好看为了修饰页面---》CSS CSS的作用修饰HTML页面 用了CSS之后样式和元素本身做到了分离的效果。---》降低了代码的耦合性
【2】HTML和CSS的关系 先有HTML先有页面修饰页面--》CSS
【3】CSS名字 CSScascading style sheets (层叠样式表)
层叠样式的叠加 样式表各种各样样式的集合
【1】内联样式
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbody!--书写方式内联样式行内样式在标签中加入一个style属性CSS的样式作为属性值多个属性值之间用;进行拼接--h1 stylecolor: deeppink;font-family: 宋体;这是一个h1标题/h1/body
/html
【2】内部样式
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title!--书写方式内部样式head标签中加入一个style标签在里面定位到你需要修饰的元素然后在{}中加入你要修饰的样式。--style typetext/cssh1{color: royalblue;font-family: 宋体;}/style/headbodyh1这是一个标题/h1/body
/html
【3】外部样式 首先要创建一个css文件css文件的后缀.css
h1{color: red;font-family: 宋体;
}
再创建html页面
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title!--引入外部CSS资源link--link relstylesheet typetext/css hrefcss/mystyle.css//headbodyh1这是一个标题/h1/body
/html
【4】实际开发中三种书写方式用的最多的是 第三种外部样式因为这种方式真正做到了 元素页面和样式 分离
【5】三种书写方式优先级 就近原则
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title!--引入外部CSS资源link--style typetext/cssh1{color: yellow;}/stylelink relstylesheet typetext/css hrefcss/mystyle.css//headbodyh1 stylecolor: red;这是一个标题/h1/body
/html 选择器
基本选择器
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css/*【1】基本选择器元素选择器通过元素的名字进行定位它会获取页面上所有这个元素无论藏的多深都可以获取到格式元素名字{css样式;}* */h1{color: red;}i{color: blue;}/*【2】基本选择器类选择器应用场合不同类型的标签使用相同的类型格式.class的名字{css样式;}*/.mycls{color: green;}/*【3】基本选择器id选择器应用场合可以定位唯一的一个元素不同的标签确实可以使用相同的id但是一般我们会进行人为的控制让id是可以唯一定位到一个元素。格式#id名字{css样式;}*/#myid{color: yellow;}/style/headbodyh1我是i一个/i标题/h1h1我是一个标题/h1h1 classmycls我是一个标题/h1h1我是一个标题/h1h2 classmycls我是h2标题/h2h2我是h2标题/h2h2 idmyid我是h2标题/h2/body
/html
优先级别 id选择器class选择器元素选择器
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css.mycls{color: red;}/*#myid{color: yellow;}*/h1{color: greenyellow;}/style/headbodyh1 classmycls idmyid我是标题/h1/body
/html关系选择器
div 和 span
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css/*我们可以通俗的理解把div理解为一个“塑料袋”div属于块级元素--》换行span属于行内元素--》没有换行效果span:里面的内容占多大span包裹的区域就多大*/div{border: 1px red solid;}span{border: 1px greenyellow solid;}/style/headbodydiv马士兵马士兵br /马士兵马士兵/divdiv马士兵/divspan马士兵马士兵/spanspan马士兵/spanspan马士兵/span/body
/html
div和span 结合css用于页面的布局。divcss 用于页面布局。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css/*关系选择器:* 后代选择器只要是这个元素的后代样式都会发生变化* div下面的所有h1标签样式都会改变*//*div h1{color: red;}*//*关系选择器子代选择器只改变子标签的样式*/divh1{color: royalblue;}spanh1{color: yellow;}/style/headbodydivh1这是标题/h1h1这是标题/h1h1这是标题/h1h1这是标题/h1h1这是标题/h1spanh1这是标题/h1h1这是标题/h1h1这是标题/h1h1这是标题/h1h1这是标题/h1/span/div/body
/html
属性选择器
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css/*属性选择器*/input[typepassword]{background-color: red;}input[typetext][valuezhaoss1]{background-color: yellow;}/style/headbodyform用户名input typetext valuezhaoss1 /用户名2input typetext valuezhaoss2 /密码input typepassword value123123 /input typesubmit value登录 //form/body
/html
伪类选择器 向某些选择器添加特殊效果。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css.mycls:hover{color: red;}/style/headbodyh1 classmycls我是标题/h1/body
/html
一般伪类选择器都用在超链接上
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css/*设置静止状态*/a:link{color: yellow;}/*设置鼠标悬浮状态*/a:hover{color: red;}/*设置触发状态*/a:active{color: blue;}/*设置完成状态*/a:visited{color: green;}/style/headbodya hrefindex.html超链接/a/body
/html
总结
本篇文章通过简单的例子说明了HTML和CSS的基础知识介绍了如何通过不同方式书写CSS以及如何使用各种CSS选择器和优先级管理样式帮助理解如何将HTML与CSS结合使得网页美观且结构清晰。但CSS有很多技术如浮动定位盒子模型等等有兴趣可以去了解一下。
