一.认识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. LeetCode-3LongestSubstringWithoutRepeatingCharacters(C#)

    # 题目 3. Longest Substring Without Repeating Characters Given a string, find the length of the longes ...

  2. .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验

    不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...

  3. 关于Raid0,Raid1,Raid5,Raid10的总结

    RAID0 定义: RAID 0又称为Stripe或Striping,它代表了所有RAID级别中最高的存储性能.RAID 0提高存储性能的原理是把连续的数据分散到多个磁盘上存取,这样,系统有数据请求就 ...

  4. Java类变量和成员变量初始化过程

    一.类的初始化 对于类的初始化:类的初始化一般只初始化一次,类的初始化主要是初始化静态成员变量. 类的编译决定了类的初始化过程. 编译器生成的class文件主要对定义在源文件中的类进行了如下的更改: ...

  5. 仿陌陌的ios客户端+服务端源码项目

    软件功能:模仿陌陌客户端,功能很相似,注册.登陆.上传照片.浏览照片.浏览查找附近会员.关注.取消关注.聊天.语音和文字聊天,还有拼车和搭车的功能,支持微博分享和查找好友. 后台是php+mysql, ...

  6. SMBus set up a 2-byte EEPROM address for read/write

    Sequencer Engine spec: http://www.analog.com/media/en/technical-documentation/data-sheets/ADM1260.pd ...

  7. PHP安装

    工具 http://www.cnblogs.com/xiwang6428/p/4315049.html http://www.iteye.com/news/22672 1 安装:sudo apt-ge ...

  8. BZOJ3198[SDOI2013]SPRING

    Description Input Output Sample Input 3 3 1 2 3 4 5 6 1 2 3 0 0 0 0 0 0 4 5 6 Sample Output 2 HINT 题 ...

  9. 个人也能申请微信小程序获得APPID和手机测试效果

    微信小程序昨晚火爆公测,我也第一时间注册了小程序账号开启公测之旅. 注册过程可以看文档:https://my.oschina.net/imhoodoo/blog/780901 进入后台之后我们其实主要 ...

  10. Alwayson的IP冲突

    Alwayson的IP冲突 https://social.technet.microsoft.com/Forums/office/en-US/4d50cb1c-eef7-4dcc-b937-3c8eb ...