学习目标

  • 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. SSM-Spring-17：Spring中aspectJ注解版

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- AspectJ AspectJ是一个面向切面的框架,它扩展了Java语言,定义了AOP 语法,能够在编译期提供 ...

  2. 关于TCP/IP，必知必会的十个经典问题[转]

    关于TCP/IP,必知必会的十个问题 原创 2018-01-25 Ruheng 技术特工队   本文整理了一些TCP/IP协议簇中需要必知必会的十大问题,既是面试高频问题,又是程序员必备基础素养. 一 ...

  3. bug排查小结

    mysql cpu利用率偏高,并且长时间居高不下. show processlist 发现有一个单表查询的sql语句出现的频率比较高, 这个单表查询中规中矩,where语句中条件都使用”=“连接,再加 ...

  4. servlet文件上传及下载

    servlet3.0中提供了对文件上传的直接支持,不需要借助任何第三方上传组件,直接使用Servlet3.0提供的API就能够实现文件上传功能. servlet 代码: package ni.jun. ...

  5. 数据分析工具Pandas

        参考学习资料:http://pandas.pydata.org 1.什么是Pandas? Pandas的名称来自于面板数据(panel data)和Python数据分析(data analys ...

  6. CSS操作笔记

    编写css样式:1. 标签的style属性2. 写在head里面 style标签中写样式- id选择区#i1{background-color: #2459a2;height: 48px;}- cla ...

  7. top_channel_args.go

    , fmt.Sprintf("%s: closing %s", proto, listener.Addr())) }

  8. BZOJ_5249_Luogu_P4364_[2018多省省队联测]_IIIDX_九省联考2018_JLOI2018_线段树

    BZOJ_5249_[2018多省省队联测]IIIDX_线段树 Description [题目背景] Osu听过没?那是Konano最喜欢的一款音乐游戏,而他的梦想就是有一天自己也能做个独特酷炫的音乐 ...

  9. ArcGIS API for JavaScript 入门教程[1] 渊源

    ->对于萌新,你可能需要了解一下这个东西是什么 ->对于已经知道要用这个东西的开发者,你可能需要了解一下它的底层机制 不针对大牛.龟速更新ing. 转载注明出处.博客园&CSDN& ...

  10. React Native 之极光推送jpush-react-native 手把手配置

    这是 react native 配置极光推送使用的组件,比较常用https://github.com/jpush/jpush-react-native 先把组件地址贴出来,方便大家使用参考.如果这个大 ...