一.认识CSS

　1.什么是CSS？

　　CSS (Cascading Style Sheet) 层叠样式表

　　是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

　　由于CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，因此不同的浏览器可能需要不同的前缀。

 前缀  浏览器 
 -webkit  chrome和safari
 -moz  firefox
 -ms  IE
 -o  opera

　2.CSS能做什么？

　　使用CSS可以有效地对页面进行布局。

　　使用CSS样式可以对页面字体、颜色、背景和其他效果实现精确描述，同时对它们的修改和控制变得更加快捷。

　　CSS可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的代码，那么整个站点的所有页面都会随之发生变动。

　　CSS可以支持多种设备，比如手机、PDA、打印机、电视机、游戏机等。

　　*目的：将表现与结构分离，便于后期维护。

　

　3.CSS语法结构

　　CSS 语法由三部分构成:选择符(selector)、属性(property)和值(value)

　　　　selector {property:value;}

　　属性是你想要设置的样式属性，每个属性都有一个值，属性和值用冒号 ":" 分开

　　每个选择符可以有多个属性值，之间用分号 ";" 隔开

　　例如：

<style type="text/css">

    body {background-color:#ccc;}

</style>

　4.如何引入CSS？

　　将CSS应用到网页中有：3种方式 （行内样式表、内部样式表、外部样式表）

　　a.行内样式表（位于html元素内部）

　　　行内样式是指将CSS样式编码直接写在HTML标签中的style属性里，

　　　*注意：行内样式不需要写选择器。

　　　例如：

<body style="background-color:#ccc;">

　　b.内部样式表（位于<head>标签内部）

　　　内部样式作为页面中的一个单独部分，由<style>标签定位在<head>标签之中。

　　　例如：

<head>

    <style type="text/css">

    body{

        background-color:#ccc;

    }

    </style>

</head>

　　c.外部样式表

　　　外部样式表是将CSS样式代码单独放在一个外部文件".css"中，再由网页文件".html"进行调用。

　　　*尽量使用外部样式表这种方式，目的是让我们的html结构与表现形式分开

/* "style.css"代码 */

body{

    background-color:#cccccc;

}

<!-- "index.html"代码 -->

<head>

    <link rel="stylesheet" type="text/css" href="style.css" />

</head>

　5.样式优先级

　　a.写法优先权（就近原则）

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

　　b.选择符优先权

　　　选择符的比较（从低到高）:

　　　通配符"*"

　　　类型选择符"标签名为选择符名称的"

　　　子选择符">"

　　　包含选择符

　　　class选择符

　　　属性选择符

　　　id选择符

　　　行内样式

　　　!important[慎用]

　6.样式继承

　　HTML中的标签会继承部分父标签的样式。

　　比如 body { color:red;} ，那么body中的所有标签及标签下的所有子标签的文本都将变成红色。

　　*!important的用法

　　在两个相同类型的css样式定义中，优先执行后面一个

　　例如：

p{font-size:15px; font-size:20px;}

　　这种情况下，执行"font-size:20px;" 。

　　但是可以通过!important语法,提升某一句样式表的重要性,使及优先执先 !important标注的语句

　　例如：

p{font-size:15px!important; font-size:20px;}

　　这时，执行"font-size:15px" 。

　7.CSS代码注释（快捷键：Ctrl+/）

　　例如：

/* 头部样式开始 */

#header{

    background:#ccc;

}

/* 头部样式结束 */

　　CSS代码注释可以帮助我们对自己写的CSS样式进行说明，如说明某段CSS代码是什么地方、功能、样式等说明，以便我们以后维护具有一看即懂的方便性；

　　同时在团队开发的时候合理适当的注解有利于团队看懂css样式对应html的位置，以便顺利快速开发网页。

CSS知识总结（一）的更多相关文章

  1. CSS知识回顾--读《CSS 那些事儿》笔记

    由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...

  2. 你该学点HTML/CSS知识的9大理由

    每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘.或许你会莫名其妙,程序员学代码那是理所应当,但是作为一个作家.营销人员.财务工作者甚至是工人,为什么也需要学习代码呢? 好吧,下面我会告 ...

  3. WEBBASE篇： 第五篇， CSS知识3

    CSS知识3 框模型: 一,外边距(上文) 二, 内边距    1,什么是内边距? 内边距就是内容与元素边缘之间的距离: 注: 内边距会扩大元素边框内所占的区域的 语法: padding: 四个方向的 ...

  4. WEBBASE篇： 第四篇， CSS知识2

    CSS知识2 一, 尺寸 与 边框 CSS单位 1,尺寸单位:(1)px 像素   (2)%   (3) in 英寸  lin = 2.54cm (4)pt 磅 1pt = 1/72in    ppi ...

  5. WEBBASE篇： 第三篇， CSS知识1

    第三篇, CSS知识1 一,CSS 介绍 CSS: Cascading Style Sheets ---样式表 HTML: 搭建网页结构: CSS: 在网页结构基础上进行网页的美化: 二,CSS的使用 ...

  6. 《HTML与CSS知识》系列分享专栏

    收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站 ...

  7. Web前端基础怎么学？ JavaScript、html、css知识架构图

    以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...

  8. css知识总结

    ---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握 ...

  9. 我收藏的技术知识图（每张都是大图）关于XX背后的知识、技术图，例如：Linux、Nginx架构、PHP知识卡、机会、HTML5移动、Android系统架构、YII架构的典型流程、Css知识表

    我收藏的技术知识图(每张都是大图) HTML5Linux/Unix系统设计思想读书笔记 LinuxMVCJava线程MVCSpring MVCCSS3Nginx架构VimCliCommandsPHP知 ...

  10. 网页制作常用的CSS知识

    在制作网页中,我们会用到很多CSS的知识,在这里我简单的总结了一些. div    划分区块 ul,li 无序列表(配合划分区块) ol,li 有序列表 a 超链接标签 p 段落标签 h 标题标签 i ...

随机推荐

  1. NoSql数据库使用半年后在设计上面的一些心得

    NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...

  2. video.js

    1.github地址 2.常用API: class : video-js: video-js应用视频所需的风格.js功能,比如全屏和字幕. vjs-default-skin: vjs-default- ...

  3. 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  4. JS实现页面进入、返回定位到具体位置

    最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...

  5. Lind.DDD.LindMQ的一些想法

    回到目录 很久就想写一套属于自己的消息队列组件,前段时候看了汤雪华同学的EQueue,感觉还是不错的,他也是看了rabbitMQ之后写的Equeue,在设计上与前者有类似的地方,而大叔这次准备写一个L ...

  6. arcgis api for js入门开发系列八聚合效果(含源代码)

    上一篇实现了demo的图层控制模块,本篇新增聚合效果,截图如下(源代码见文章底部): 聚合效果实现的思路如下: 1.map.html引用聚合包,项目已经包含进来了的聚合文件夹: <script ...

  7. BPM SharePoint解决方案分享

    一.需求分析 SharePoint作为微软推出的协同类平台产品,为客户提供了门户.内容.文档.流程.社区.搜索.BI等一系列的解决方案,然而其流程功能由于设计理念差异,不能完全满足客户的需求,主要原因 ...

  8. Android—Service与Activity的交互

    service-Android的四大组件之一.人称"后台服务"指其本身的运行并不依赖于用户可视的UI界面 实际开发中我们经常需要service和activity之间可以相互传递数据 ...

  9. Android Retrofit 2.0 使用-补充篇

    推荐阅读,猛戳: 1.Android MVP 实例 2.Android Retrofit 2.0使用 3.RxJava 4.RxBus 5.Android MVP+Retrofit+RxJava实践小 ...

  10. git远程库GitHub

    首先,注册一个GitHub(github.com)帐号,免费获得Git远程仓库 由于本地Git仓库和GitHub仓库之间的传输是通过SSH加密的,所以,需要一点设置: 第1步:创建SSH Key.在用 ...