分享更有价值
被信任是一种快乐

CSS基础知识及使用方法是什么

文章页正文上

这篇文章主要介绍“CSS基础知识及使用方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS基础知识及使用方法是什么”文章能帮助大家解决问题。
  CSS介绍
  CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。
  当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。
  每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
  注释是代码之母。–摘自哪吒语录
  行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
  嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下:
  外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可。推荐使用此方式。
  注意:
  样式类名不要用数字开头(有的浏览器不认)。
  标签中的class属性如果有多个,要用空格分隔。
  通用即代表所有
  解析:第一个div 后面的div包括嵌套的标签都会被渲染
  div div {color: deeppink}
  不怎么常用的属性选择免费云主机、域名
  当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
  例如:
  上面的代码为div标签和p标签统一设置字体为红色。
  通常,我们会分两行来写,更清晰:
  多种选择器可以混合起来使用,比如:。c1类内部所有p标签设置字体颜色为红色。
  –关于标签嵌套:通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
  常用的给首字母设置特殊样式:
  before和after多用于清除浮动。
  继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。
  此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。
  我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。
  此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。
  我们上面学了很多的选择器,也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式,那浏览器根据什么来决定应该应用哪个样式呢?
  其实是按照不同选择器的权重来决定的,具体的选择器权重计算方式如下图:
  除此之外还可以通过添加 !important方式来强制让样式生效,但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。
  万不得已可以使用!important
  width属性可以为元素设置宽度。
  height属性可以为元素设置高度。
  块级标签才能设置宽度,内联标签的宽度由内容来决定。
  font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。
  简单实例:
  如果设置成inherit表示继承父元素的字体大小值。
  font-weight用来设置字体的字重(粗细)。
  值
  描述
  normal
  默认值,标准粗细
  bold
  粗体
  bolder
  更粗
  lighter
  更细
  100——900
  设置具体粗细,400等同于normal,而700等同于bold
  inherit
  继承父元素字体的粗细值
  颜色属性被用来设置文字的颜色。
  颜色是通过CSS最经常的指定:
  十六进制值 – 如: #FF0000
  一个RGB值 – 如: RGB(255,0,0)
  颜色的名称 – 如: red
  还有rgba(255,0,0,0.3),第四个值为alpha, 指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间。关于“CSS基础知识及使用方法是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注云技术行业资讯频道,小编每天都会为大家更新不同的知识点。

相关推荐: html5怎么实现图片的3D旋转效果

本篇内容主要讲解“html5怎么实现图片的3D旋转效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html5怎么实现图片的3D旋转效果”吧!   完整代码如下所示:   HTML5 3D旋转图片相册 可鼠标悬停 …

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册