CSS基础学习

作者 : 去看你博客 本文共1216个字,预计阅读时间需要4分钟 发布时间: 2019-10-13 共416人阅读

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

HTML、CSS、JavaScript关系

  • HTML是网页内容的载体
  • CSS样式是表现(外观控制)
  • JavaScript是行为,用来实现网页特效效果

为什么学习CSS

  • CSS简化HTML相关标签,网页体积小,下载快
  • 解决内容与表现分离的问题
  • 更好的维护网页,提高工作效率

学习内容

  • CSS基础语法
  • CSS使用方法
  • CSS选择器
  • CSS优先级
  • CSS命名规范

CSS样式规则

CSS规则由两部分组成:选择器,声明

CSS样式规则
CSS样式规则

CSS引用

  1. 写在<head></head>标签内:
  2. <style type=“text/css”>
  3. CSS样式…
  4. </style>

CSS注释

  • html注释:<!–注释语句–>
  • CSS注释:/*注释语句*/

CSS使用方法

1.如何引用CSS样式

  • 行内样式(内联样式)
  • 内部样式表(嵌入样式)
  • 外部样式表(Link链入)
  • 导入式

2.CSS使用方法区别

CSS使用方法区别
CSS使用方法区别

3.CSS使用方法优先级

行内样式>内部样式>外部样式

 

说明:
  1. 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
  2. 最后定义的优先级最高(就近原则

4.CSS选择器

  • 标签选择器
  • 类选择器
  • ID选择器
  • 全局选择器
  • 群组选择器
  • 后代选择器

CSS选择器规则方法请看下面文章:

链接伪类

链接的4中状态:激活状态,已访问状态,未访问状态, 和鼠标悬停状态。

链接伪类
链接伪类

链接伪类的顺序::Link > :Visited > :Hover > :Active

1.a:hover 必须置于 a:link 和 a:visited 之后,才有效

2.a:active 必须置于 a:hover 之后,才有效

3.伪类名称对大小写不敏感。

CSS使用方法优先级

  • !important声明高
  • CSS使用方法的优先级

行内样式>内部样式>外部样式

注:link链入外部样式和style内部样式优先级,取决于先后顺序。

  • 样式表中优先级

id选择器>class选择器>标签选择器>通配符

权值相同 权值不同
就近原则 使用权值高的

CSS样式命名规则

采用英文字母、数字以及“-”和“_”命名

  • 以小写字母开头,不能以数字和“-”、“_”开头
  • 命名形式:单字,连字符,下划线和驼峰
  • 使用有意义命名

 

1. 本站付费资源来源于网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
去看你博客 » CSS基础学习

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
评论后隐藏内容依旧不可见怎么办?
首次在本站评论需要经过审核通过后才可显示,为了您的评论能尽快通过审核请勿恶意评论,评论通过后会在第一时间通过邮件的方式发送到您在本站的注册邮箱内!
下载后无法正常运行如何提供售后支持?
每一个程序都经过严格的测试后发布上线,99%的问题都是安装方法错误或环境缺少扩展导致。普通用户不提供技术售后(可进行留言,我们收到之后尽可能去解答,但不保证马上解决),会员用户可随时随地享受优质的售后技术支持与问题解答。更多说明请参考 VIP介绍。

8 评论

  1. hi 🙂 bross 🙂

    1. 前端前景还是蛮好的。

发表评论