【生意多】-免费发布分类信息
当前位置: 首页 » 新闻 » 教程 » 正文

CSS 标签 基础用法

放大字体  缩小字体 发布日期:2020-06-23 22:54:36    浏览次数:15
导读

  ▲在{}之前的部分就是 选择器 ,选择器指明了{}中的样式的作用对象,也就是作用于网页的哪些元素}  子选择器仅指它的直接后代或者说是第一代后代,而后代选择器是作用于所有子后代元素 后代选择器通过空格来进行选择 而子选择器是通过 来选择  权值规则:标签的权值为1;类选择符权值为10; ID选择符的权值最高是10

  ▲在{}之前的部分就是 选择器 ,选择器指明了{}中的样式的作用对象,也就是作用于网页的哪些元素}

  子选择器仅指它的直接后代或者说是第一代后代,而后代选择器是作用于所有子后代元素 后代选择器通过空格来进行选择 而子选择器是通过 来选择

  权值规则:标签的权值为1;类选择符权值为10; ID选择符的权值最高是100,还有一个比较特殊的权值--继承,有些文献显示它只有0.1

  在HTML中对于同一个元素有多个CSS样式存在,而且有相同的权重,会根据这些CSS样式的前后顺序来决定,处于最后面的样式将被应用(后面的会覆盖前面的样式)

  ▲{当网页制作者不设置CSS样式时,浏览器会根据自己的一套样式来显示网页。样式优先级为: 浏览器默认样式 网页制作者样式 用户自己设置的样式,但注意 !important 样式是个例外,权值高于用户自己设置的样式。}

  ▲{这里注意不要设置不常用的字体,如果用户本地电脑上没有安装你设置的字体的话就会显示浏览器默认的字体 一般常使用的是 微软雅黑 (Microsoft Yahei 或者 微软雅黑)(第一种比第二种方法兼容性更加好一些)}

  在CSS中,HTML中的标签大体被分为三种类型:块状元素、内联元素(行内元素)、内联块状元素

  ▲块级元素的特点:每个块级元素都从新的一行开始,并且其后的元素也另一行;元素的高度、宽度、行高、以及顶和底边距都可设置;元素的宽度在不设置的情况下是它本身父容器的100%(和父容器的宽度一致)

  ▲内联元素的特点:和其他元素都在一行上;元素的宽度、高度及顶部和边部的边距不可设置;元素的宽度就是它包含的文字或图片的宽度,不可改变。

  特征:块状元素都会在所处的元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%实际上,块状元素都会以行的形式都会以行的形式占据位置

  在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示(内联元素不像块状元素一样独占一行)

  使块状模型并排显示,任何元素在默认情况下都是不能浮动的,但是可以用CSS定义浮动,如div,p,table,img等元素

  绝对定位是将元素从文档流中拖出来,然后使用left,right,bottom,top属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位,如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口

  相对定位是通过left这些属性确定元素在正常文档流中的偏移位置,相对定位完成的过程是首先按static(float)方式生成了一个元素,然后相对于以前的位置移动。偏移前的位置保持不动。

  由于视图是固定的,他不会随着浏览器窗口的滚动条滚动而滚动固定定位的元素始终位于浏览器窗口内视图的某个位置,不会受文档流的影响。

  3.十六进制颜色 这种颜色现在也是比较普遍使用色方法 其原理是grb设置 但是对每一项的值由0~255变成了十六进制的00-ff   例如: p{color:##00ffff;}

  像素指的是显示器上面的小点 css规划中假设 “90像素=1英寸”实际情况是浏览器会使用显示器的实际像素有关

  ▲特殊情况:当font-size设置单位为em时 此时计算的标准以p的父元素的font-size为基础

  如果被设置的元素为行内元素时,水平居中是通过给父元素设置 text-align:center来实现的

  方法:1.加入table标签 利用的是table标签的长度自适应性 即不定义长度也不默认父元素body的长度 其长度根据其内在文本长度决定的,因此可以看作一个定宽度块状元素 利用定宽度块状元素居中的margin的方法使其居中

  第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

  2.设置display:inline方法:与第一种类似 显示类型为行内元素 进行不定宽元素的属性设置

  这种方法相比较第一种方法的优势是不用增加无语义标签,但也存在着一些问题,它将块状元素的display类型改为inline,变成了行内元素,所以少了一些功能,比如设定长度值

  方法是通过设置父元素的height(该元素的高度)和line-height(行高,在文本中行与行之间的基线的距离)高度一致来实现的

  ▲vertical-align是一个竖直居中的属性,在父元素设置此样式会对inline-block类型的子元素都有用

  只要出现以上两句之一,元素的display类型就会自动变为以display:inline-block(块状元素)的方式显示,就可以设置元素的width和height,且默认宽度不占满父元素

  分类块元素 (行元素)内联元素 (行内元素)块元素的特点:单个块元素在浏览器中默认独占一行两个块元素不能够在一行显示, 他们会自动换成两行显示块元素可以设置宽高等属性. 内联元素:多个内联元素可以在一行显示内联元素不能够设置宽高, 设置了也没有用, 不会显示出效果内联元素的宽高由他们本身的内容多少来支撑, 内容多,宽高自动增加.2.常用块元素

 
关键词: css标签
(文/小编)
打赏
免责声明
• 
本文为小编原创作品,作者: 小编。欢迎转载,转载请注明原文出处:http://www.31duo.com/news/show-311274.html 。本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们。
 

(c)2016-2019 31DUO.COM All Rights Reserved浙ICP备19001410号-4

浙ICP备19001410号-4