首页前端开发HTMLHTML CSS样式基础的必看教程

HTML CSS样式基础的必看教程

时间2024-05-09 05:10:04发布访客分类HTML浏览52
导读: 一、css 1.什么是css? Cascading Style Sheet 级联样式表 改变样式的一个工具,说白了,就是为了让我们的页面好看, HTML底层封装了css这样一个工具。 2.怎么使用css...
  一、css   1.什么是css?   Cascading Style Sheet 级联样式表   改变样式的一个工具,说白了,就是为了让我们的页面好看,   HTML底层封装了css这样一个工具。   2.怎么使用css   a、style 风格、样式   这个关键词写到标签内部,可以修改标签的样式   注意:写在标签内部!也就是> 里面   3.css样式,分为三种   a、行内样式表   

111111111111

  其中:style="color:#0FC"就是改变当前这个标签的样式。   b、内部样式表   选择器:告诉程序,我们要改变谁的样式。   id选择器:   1、在标签内加上id属性   2、在写之前,要加上#   类选择器:   1、在标签内加上class属性   2、类选择器,写之前,要加上。   注意:以。开头   标签选择器:   注意:   1、style里面要写上type属性,标识这是改变css   2、选择器后面要加上一对{ } ,   3、每一句改变样式之后,要加上;   c、外部样式表   写在我们网页的外面   1、新建一个css   2、在css中写上相对应的样式   3、将css样式导入网页   a、   b、 @import url("css路径");   d、样式表的优先级   行内样式表> 内部样式表> 外部样式表   e、选择器的优先级   id选择器> 类选择器> 标签选择器   f、并集选择器   通过一个详细的描述或者说地址来查找某一个或者某一组相对应的标签   p,#id,.class{ }   会改变所有p、id和class所覆盖的标签样式,中间用英文输入法的","号隔开   g、交集选择器   h3.cecond{ }   会先查找h3标签,再查找所有h3标签里面的类名为second的标签修改属性   中间没有任何东西进行连接   h、后代选择器   会根据所写的标签或者选择器,进行一层一层的查找,直到最后查找到所需要的标签,中间用" "隔开   小结:   标签选择器是直接应用于所有的HTML标签   类选择器可以在页面中多次使用   id选择器在页面中只能使用1次   i、css属性   1、字体样式:   font-style: 设置字体风格   font-weight: 设置字体粗细   font-size: 设置字体尺寸   font-family: 设置字体系列   font: 把以上所有的设置全部设置在一个属性中   2、文本样式:   color: 设置字体颜色   line-height: 设置行高   text-align: 设置文本的对齐方式   text-decoration:设置文本的装修,例如:underline、none、line-through   3、背景属性:   background-color: 设置背景颜色   background-image: 设置背景图片   background-position:设置背景的位置   background-repeat: 设置背景的填充方式   background 设置背景,把以上所有的设置全部设置在一个属性中   4、列表属性:   list-style-image: 将列表设置为列表标识   list-style-type: 设置列表的标识类型,disc实心圆,circle空心圆,   square正方形   list-style: 把以上所有的设置全部设置在一个属性中   5、超链接的伪类   a:link{ 未访问的链接   color:#F00;   }   a:visited{ 已访问的链接   color:#6F6;   }   a:hover{ 鼠标悬浮改变样式   color:#FCC;   }   a:active{ 鼠标长按改变样式   background-color:#0FF;   }   6、cursor属性   url 设置自定义鼠标样式   default 默认光标   pointer 超链接的指针   wait 程序正在忙   help 指示可用的帮助   text 指示文本   crosshair 十字型   move 可移动指针   7、盒子模型   a、什么是盒子模型?   把相对应的元素放入到一个容器中,可以进行相对应的处理   移动或者处理这个盒子模型的同时,整个在盒子模型中的元素都会跟着   被处理。   边距:   内边距:   padding:top,left,right,bottom   外边距:   margin:top,left,right,bottom   b、浮动   什么是浮动?   其实原理就是align   浮动的属性:   left: 左浮动   right: 右浮动   none: 不浮动   clear属性: 清除浮动,both全部清除   c、overflow属性   当有元素溢出时,应如何处理   visible 默认的   auto 自动的   hidden 隐藏   scroll 加上滚动条   d、iframe标签   内联框架。   可以导入其他东西。      src:导入其他的页面路径   width:调整导入的页面的宽度,px是单位,可以不加,默认就是px   height:调整导入的页面的高度   scrolling:是否显示滚动条   frameborder:是否显示边框,1表示显示,0表示不显示   e、position属性   定位。   相对定位:   relative,相对他原来的位置,进行移动。   绝对定位:   absolute,   fixed   定位到网页的某个地方,一直不变。   static   偏移值的设定   X轴(left、right 属性)与Y轴(top、bottom属性)   可取值:像素或百分比

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: HTML CSS样式基础的必看教程
本文地址: https://pptw.com/jishu/656008.html
最新html&css入门详解 HTML、CSS学习计划总结分享

游客 回复需填写必要信息