CSS知识总结（一）
一.认识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知识总结（一）的更多相关文章
- CSS知识回顾--读《CSS 那些事儿》笔记
由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...
- 你该学点HTML/CSS知识的9大理由
每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘.或许你会莫名其妙,程序员学代码那是理所应当,但是作为一个作家.营销人员.财务工作者甚至是工人,为什么也需要学习代码呢? 好吧,下面我会告 ...
- WEBBASE篇： 第五篇， CSS知识3
CSS知识3 框模型: 一,外边距(上文) 二, 内边距 1,什么是内边距? 内边距就是内容与元素边缘之间的距离: 注: 内边距会扩大元素边框内所占的区域的 语法: padding: 四个方向的 ...
- WEBBASE篇： 第四篇， CSS知识2
CSS知识2 一, 尺寸 与 边框 CSS单位 1,尺寸单位:(1)px 像素 (2)% (3) in 英寸 lin = 2.54cm (4)pt 磅 1pt = 1/72in ppi ...
- WEBBASE篇： 第三篇， CSS知识1
第三篇, CSS知识1 一,CSS 介绍 CSS: Cascading Style Sheets ---样式表 HTML: 搭建网页结构: CSS: 在网页结构基础上进行网页的美化: 二,CSS的使用 ...
- 《HTML与CSS知识》系列分享专栏
收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站 ...
- Web前端基础怎么学？ JavaScript、html、css知识架构图
以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...
- css知识总结
---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握 ...
- 我收藏的技术知识图（每张都是大图）关于XX背后的知识、技术图，例如：Linux、Nginx架构、PHP知识卡、机会、HTML5移动、Android系统架构、YII架构的典型流程、Css知识表
我收藏的技术知识图(每张都是大图) HTML5Linux/Unix系统设计思想读书笔记 LinuxMVCJava线程MVCSpring MVCCSS3Nginx架构VimCliCommandsPHP知 ...
- 网页制作常用的CSS知识
在制作网页中,我们会用到很多CSS的知识,在这里我简单的总结了一些. div 划分区块 ul,li 无序列表(配合划分区块) ol,li 有序列表 a 超链接标签 p 段落标签 h 标题标签 i ...
随机推荐
- C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子)
第一次接触HtmlAgilityPack是在5年前,一些意外,让我从技术部门临时调到销售部门,负责建立一些流程和寻找潜在客户,最后在阿里巴巴找到了很多客户信息,非常全面,刚开始是手动复制到Excel, ...
- SQL Server-聚焦IN VS EXISTS VS JOIN性能分析（十九）
前言 本节我们开始讲讲这一系列性能比较的终极篇IN VS EXISTS VS JOIN的性能分析,前面系列有人一直在说场景不够,这里我们结合查询索引列.非索引列.查询小表.查询大表来综合分析,简短的内 ...
- angular2系列教程（八）In-memory web api、HTTP服务、依赖注入、Observable
大家好,今天我们要讲是angular2的http功能模块,这个功能模块的代码不在angular2里面,需要我们另外引入: index.html <script src="lib/htt ...
- Android如何制作漂亮的自适布局的键盘
最近做了个自定义键盘,但面对不同分辨率的机型其中数字键盘不能根据界面大小自已铺满,但又不能每种机型都做一套吧,所以要做成自适应,那这里主讲思路. 这里最上面的titlebar高度固定,下面输入的金额高 ...
- Unity3D 5.3 新版AssetBundle使用方案及策略
1.概览 Unity3D 5.0版本之后的AssetBundle机制和之前的4.x版本已经发生了很大的变化,一些曾经常用的流程已经不再使用,甚至一些老的API已经被新的API所取代. 因此,本文的主要 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- ExecuteOrDelayUntilScriptLoaded 还是 SP.SOD.executeFunc？
SharePoint 客户端 JS 开发时,要等待 SharePoint 对象都加载完毕再调用自己的方法(myFunction),可以有两种方式: ExecuteOrDelayUntilScriptL ...
- 在配有英特尔® Iris™ 显卡的系统上通过优化对 Just Cause 3 进行增强
高端 PC 继续通过高性能显卡驱动桌面游戏. 一流的"梦想机器"基于第六代智能 英特尔® 酷睿™ 处理器i7-6700K等 CPU,通常与高端独立显卡配合使用以运行要求最严苛的游戏 ...
- Jexus Web Server 完全傻瓜化图文配置教程（基于Ubuntu 12.04.3 64位）[内含Hyper-v 2012虚拟机镜像下载地址]
1. 前言 近日有感许多新朋友想尝试使用Jexus,不过绝大多数都困惑徘徊在Linux如何安装啊,如何编译Mono啊,如何配置Jexus啊...等等基础问题,于是昨日向宇内流云兄提议,不如搞几个配置好 ...
- CSS垂直居中总结
工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 <div class="container"> & ...