学习目标

  • 1、CSS简介
  • 2、CSS语法
  • 3、样式的创建
  • 4、两种引入外部样式表的区别
  • 5、样式表的优先级和作用域
  • 6、CSS选择器
  • 7、选择器的权重
  • 8、浮动属性的简单应用
  • 9、HTML、CSS注释

一、CSS简介

css:层叠样式表 英文全名：cascading style sheets
,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。
目前推荐遵循的是W3C发布的CSS3.0.
用来修饰XHTML或者XML等样式文件的计算机语言。
1998年5月21日由w3C正式推出的css2.0

二、CSS语法

CSS语法：选择符{属性：属性值；属性：属性值；}

选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素.
属性：属性是指定元素所具有的属性，它是css的核心，css2共有150多个属性
属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜色值等。
说明：
1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
2）属性必须放在花括号中，属性与属性值用冒号连接。
3）每条声明用分号结束。
4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。
5）在书写样式过程中，空格、换行等操作不影响属性显示。

三、样式的创建(内部样式表 外部样式表 内联样式表)

A、内部样式表

语法：
<style type="text/css">
/*css语句*/
</style>

注：使用style标记创建样式时，最好将该标记写在<head></head>;

B、外部样式

*方法一：外部样式表的创建：
<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />
说明：
使用link元素导入外部样式表时，需将该元素写在文档头部，即<head>与</head>之间。
rel（relation）：用于定义文档关联，表示关联样式表；
type：定义文档类型；

*方法二：外部样式表的导入
<style type="text/css">
@import url(目标文件的路径及文件名全称);
</style>
注：@和import之间没有空格 url和小括号之间也没有空格；必须结尾以分号结束；

C、内联样式 （行间样式，行内样式，嵌入式样式、内嵌样式）

语法：<标签 style="属性：属性值;属性:属性值;"></标签>

例：<div style="width:500px; height:200px;"></div>

四、两种引入外部样式表link和import之间的区别

扩展知识点：link和import导入外部样式的区别：

差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。

差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom(document object model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

五、样式表的优先级

A、内联样式表的优先级别最高
B、内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。

C、作用域：内联样式的作用域最小，只能应用于当前元素，其次是内部样式表，能应用于当前HTML文件，最后是外部样式表，能应用于所有链接的HTML文件。

好程序员web前端分享CSS基础篇的更多相关文章

  1. 好程序员web前端分享HTML基础篇

    好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基 ...

  2. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  3. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  4. 好程序员web前端分享值得参考的css理论：OOCSS、SMACSS与BEM

    好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCS ...

  5. 好程序员web前端分享12个CSS高级技巧汇总

    好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-chil ...

  6. 好程序员web前端分享18个用CSS制作出来的东西

    好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和 ...

  7. 好程序员web前端分享想要学习前端需要学那些课程

    好程序员web前端分享想要学习前端需要学那些课程,仔细思考了一下如何回答好这个话题,其实前端是一个涵盖面非常之广泛的一个职位,所需知识体系非常庞杂,与传统语言“想要精一行,必先通一门” 有很大差别, ...

  8. 好程序员web前端分享前端学习路线自学如何找到工作

    好程序员web前端分享前端学习路线自学如何找到工作,自学能不能学会WEB前端并且找到WEB前端开发岗位的工作取决于自身条件,如果基础好,自律性强那么将会容易很多,还有就是自学最难克服的并不是知识点,而 ...

  9. 好程序员web前端分享如何理解JS的单线程

    好程序员web前端分享如何理解JS单线程,JS本质是单线程的.也就是说,它并不能像JAVA语言那样,两个线程并发执行. 但我们平时看到的JS,分明是可以同时运作很多任务的,这又是怎么回事呢? 首先,J ...

随机推荐

  1. SpringCloud实战-Feign声明式服务调用

    在前面的文章中可以发现当我们通过RestTemplate调用其它服务的API时,所需要的参数须在请求的URL中进行拼接,如果参数少的话或许我们还可以忍受,一旦有多个参数的话,这时拼接请求字符串就会效率 ...

  2. web网络协议

    一.OSI七层模型   OSI参考模型是国际标准化组织ISO(International Standards Organization )制定的模型,把计算机与计算机之间的通信分成七个互相连接的协议层 ...

  3. selenium chromedriver与谷歌浏览器版本映射表

    chromedriver版本 支持的Chrome版本 v2.35 v62-64 v2.34 v61-63 v2.33 v60-62 v2.32 v59-61 v2.31 v58-60 v2.30 v5 ...

  4. ubuntu 16.04启用root用户方法

    1.使用:sudo passwd root设置root的密码,如下图所示: 2.使用su root来测试是否可以进入root用户,如果出现#说明已经设置root用户的密码成功,如下图所示:

  5. [TJOI2015] 棋盘

    Description 为了提高智商,ZJY去新世界旅游了.可是旅游过后的ZJY杯具的发现要打开通往原来世界的门,必须要解开门上面画的谜题.谜题是这样的:有个\(n\)行\(m\)列的棋盘,棋盘上可以 ...

  6. MySQL基本命令1

    在ubuntu系统中操作命令:登录:mysql -uroot -p启动:service mysql start停止:service mysql stop重启:service mysql restart ...

  7. bzoj 1076 奖励关 状压+期望dp

    因为每次选择都是有后效性的,直接dp肯定不行,所以需要逆推. f[i][j]表示从第i次开始,初始状态为j的期望收益 #include<cstdio> #include<cstrin ...

  8. layer使用总结

    1.询问框的使用 主要体现在删除等重要操作 让用户进行二次确认的场景 //询问框 layer.confirm('您是如何看待前端开发?', { btn: ['重要','奇葩'] //按钮 }, fun ...

  9. es2.4.6 java api 工具类

    网上找了很久没找到2.4.X 想要的java api 工具 自己写了一个,分享一下 导入所需的jar <!-- ElasticSearch begin --> <dependency ...

  10. 带你由浅入深探索webpack4（二）

    在前一篇文章已经介绍了webpack4从入门到一些核心常用的用法,大家可以从上一篇文章看起.带你由浅入深探索webpack4(一) 接着上一章,接下来我们会继续探讨webpack4中的各种实用用法,让 ...