CSS 概述

举报
运气男孩 发表于 2020/06/19 01:37:57 2020/06/19
【摘要】 CSS 概述


1.css认识

  层叠样式表 Cascading Style Sheets 是用来规定HTML文档的呈现形式,简单地说就是给网页设置布局样式,丰富网页的呈现状态,如果说吧HTML标签比作词组可以写成作文,那么CSS就是字体,字体颜色,修饰词,以及纸张背景等。

image.png

2.CSS 定义和使用

CSS样式由一条或多条以分号隔开的样式声明组成,每条声明包含着一个CSS和该属性的值,属性和值用冒号分割。  

例:  color:red;font-size:54

3.CSS 使用方式

  • 内嵌样式:直接在元素上应用样式,使用全局属性style定义。

    内嵌css样式的段落


  • 文档内嵌样式:上面的内嵌样式用起来比较随意,而且属性优先级是最高的,但是如果要批量管理样式的话就有些麻烦,比如需要将一个网页中的所有段落的字体大小改成12px,那么如果一个一个去使用全局属性style改的话效率太低了。

    image.png

  • 外部样式表:单独以.css为文件扩展名定义的样式表。

试想一下如果一套样式要在多个网页中进行使用的话,那我们如果在每个HTML文档中都定义相同的一个选择器的话,在开发中叫做代码冗余,不是一个优秀程序员该有的习惯,在编程的过程中,有一段代码如果重复写了两次或考虑到此模块的代码可能在其他地方会用到的时候,我们就要学会将其当独封装起来,便于我们后期重用。

定义文件styles.css

p {

       color:red;

       font-size: 12px;

}

a{

         background-color:green;

          paddomg:5px

 }

导入外部样式表:

image.png

样式表中也可以导入其他的样式表

image.png

浏览器样式:即一个元素未设置样式时,浏览器应用在它身上的默认样式,这些样式会因为浏览器而略有差异,不过大体一致。


3.CSS 样式的层叠和继承

  • 样式层叠:即浏览器显示元素时,元素的CSS属性值应用的优先级。

    (1):元素内嵌样式:用元素的群居属性style定义的样式

     (2):文档内嵌样式:定义在style元素中的样式  

    (3):外部样式:用link元素导入的样式  

    (4):用户样式:用户在custom.css中定义的样式  

    (5):浏览器样式:浏览器应用的默认样式

  • 样式冲突:如果有两个同一层次的样式,并且里面都有相同的属性时,这个时候就要去解决冲突,解决冲突的前提是我们要了解浏览器默认是如何处理这些属性的。

    优先级:  (1)样式的寻则其中id值的数目  (2)选择器中其他属性和伪类的数目  (3)选择器中元素名和为元素的数目

  • 样式继承:浏览器在显示某元素时,如果找不到其样式属性,那么就会遵循继承机制。也就是使用父类元素的样式属性。

  • image.png


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200