CSS入门系列(一)概述&和html结合的方式
来源:互联网 发布:域名a记录查询 编辑:程序博客网 时间:2024/05/16 11:13
CSS入门系列(一)概述&和html结合的方式
自己在关注招聘信息的时候经常发现很多公司都要求要有前端的基础,不一定搞前端,但是前端的基础是要有的。所以,我就学习了一下前端的技术。
本文系列是在毕向东java视频的基础上总结的,自己也是边学习边总结,主要还是为自己能复习和回顾。如何能对大家也有帮助,那就更好了。另外提示,本系列的总结默认是已经知道了html的一些基础知识。
目录
- CSS入门系列一概述和html结合的方式
- 目录
- CSS介绍
- Html与CSS如何在网页代码中相结合的呢
- 第一种方式
- 第二种方式
- 第三种方式
- 第四种方式
- 样式的优先级
- CSS代码格式
1. CSS介绍
CSS是层叠样式表(Cascading Style Sheets)用来定义网页的现实效果。CSS将网页内容和显示样式进行分离(降低了耦合性,这样就增强了扩展性),提高显示的功能。
2. Html与CSS如何在网页代码中相结合的呢?
一共有4种结合方式
1. 第一种方式
所有的Html标签都有style属性,style属性样式的值就是css代码。以div标签为例:
<div style="background-color:#06F"> 这是一个div区域</div>
这代码中是设置一行中的背景颜色,如果想有多种属性,可以用分号分开
<div style="background-color:#06F;color:#F00"> 这是一个div区域</div>
这样就把前景的汉字的颜色设置为红色。
2.第二种方式
使用style标签的 方式,可以减少代码的复用性。
我们把样式直接独立出来,而且我们希望样式能在页面一加载的时候就有,所以我们把样式写在head标签中。而且我们还要知道这个标签是谁的样式标签,所以要有个范围。
<style type="text/css">div{background-color:#06F;color:#F00}</style>
这样body中的div区域所有的样式都是style定义的,但是如果你又在div中重新定义了样式,那么新样式会覆盖之前定义的,这也是层叠样式表的由来。
3.第三种方式
考虑如果有多个html文件都有div的问题,为了提高代码的复用性,我们直接创建一个css文件,把样式写在css文件中,然后在html中引用这个css文件。以上面的例子讲解,css文件命名为div.css,其中的代码如下:
div{background-color:#06F;color:#F00}
然后在html中,代码改为:
<style type="text/css">@import url(div.css)</style>
针对这种方式有一种改进,就是不直接在html中引用,而是创建一个专门的css,把所有的样式都导入到这个css文件中,而html只需要只需要导入这个css文件即可。
4. 第四种方式
使用html连接,和第三种的区别是:第三种是css文件的导入,而第四种是html直接链接css文件。在html中写如下代码:
<link rel="stylesheet" href="div.css" type="text/css" />
3. 样式的优先级
样式是会出现覆盖的,其优先级是,从上到下, 从外到内,由低到高。总结就是后加载的为主。但是后面还是有细节的优先级就不一定了。
4.CSS代码格式
选择器名称{属性名:属性值;属性名:属性值…}如果一个属性有多个属性值,用空格隔开。
- CSS入门系列(一)概述&和html结合的方式
- 30-CSS-01-CSS(概述&和html结合的方式一二)
- CSS和HTML结合的方式
- CSS和HTML的结合方式
- html和css结合的方式
- (1)CSS和HTML结合方式
- 30-CSS-02-CSS(和html结合的方式三四)
- CSS-css与html的结合方式
- JavaScript---基本语法学习(一)JavaScript概述、Java和JavaScript的区别、和HTML结合方式、数据类型、运算符和表达式
- CSS和HTML的四种结合方式
- CSS和HTML的四种结合方式
- css和html的四种结合方式
- css和html结合的三种体现方式
- CSS入门系列(四)CSS样式的结合应用
- CSS 概述&与html结合四种方式
- css(层叠样式表)和html结合的四种方式
- css与html的结合方式
- HTML与CSS的结合方式
- [Usaco08Jan] Cow Contest
- KNN(K-最近邻法) —matlab 和 python 学习记录
- Android学习6
- <poj-1936>All in All
- 回溯算法解题总结
- CSS入门系列(一)概述&和html结合的方式
- 堆和栈的区别
- 1061. Dating (20)
- windows配置apache+php+mysql
- java集合
- Android学习7
- 速记OSI七层协议模型
- 开通博客 记录我的Java开发之路
- HDU5015 233 Matrix