以下内容均来自 慕课网

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

CSS 代码语法

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。

从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。

内联式 css样式表就是把css代码直接写在现有的HTML标签中。

嵌入式 css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。

外部式 css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内， eg ： <link href="style.css" rel="stylesheet" type="text/css" />

优先级：内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。即 <link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。

什么是选择器？

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

标签选择器：标签选择器其实就是html代码中的标签。 p{font-size:12px;line-height:1.6em;}

类选择器 ： .类选器名称{ css样式代码; }        // 用 （.）

ID选择器：  #setGreen{ color:green; }   // 用 （#）

　　类和ID选择器的区别 相同点：可以应用于任何元素；不同点：1、ID选择器只能在文档中使用一次。2、可以使用类选择器词列表方法为一个元素同时设置多个样式。

子选择器：即大于符号(>),用于选择指定标签元素的第一代子元素。 .food>li{border:1px solid red;}

包含（后代）选择器：包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。 .first span{color:red;}

　　子选择器和包含选择器区别：>作用于元素的第一代后代，空格作用于元素的所有后代。

通用选择器：使用一个（*）号指定，它的作用是匹配html中所有标签元素。 * {color:red;}

伪类选择器：它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色， a:hover{color:red;}

　　关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。

分类选择符：当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色： h1,span{color:red;}

CSS 入门的更多相关文章

  1. [HeadFist-HTMLCSS学习笔记][第七章CSS入门：加一点样式]

    CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...

  2. CSS入门教程——定位(positon)

    CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用.   定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...

  3. 第六十九节，css入门基础

    css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...

  4. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  5. 胖虎都看得懂的CSS入门

    CSS入门 CSS是什么 摘自维基百科 层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...

  6. 【Python全栈-CSS】CSS入门

    CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...

  7. day 31 html(二) 和css入门

    前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门 一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...

  8. HTML与CSS入门经典(第9版)试读 附随书源码 pdf扫描版​

    HTML与CSS入门经典(第9版)是经典畅销图书<HTML与CSS入门经典>的最新版本,与过去的版本相同,本书采用直观.循序渐进的方法,为读者讲解使用HTML5与CSS3设计.创建并维护世 ...

  9. css入门知识点整理

    css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...

  10. H5教程（二），CSS入门（一）选择器

    这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1.  CSS简介 1.1  CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...

随机推荐

  1. Eclipse、MyEclipse使用git插件(egit)

    在开发Java.JavaEE等相关程序时,我们会用到Eclipse或者MyEclipse,同时使用到git作为版本控制软件,所以我们需要在这些IDE上集成git插件,而egit正是Eclipse基金会 ...

  2. 小学生之Java中迭代器实现的原理

    一. 引言 迭代这个名词对于熟悉Java的人来说绝对不陌生.我们常常使用JDK提供的迭代接口进行java collection的遍历: Iterator it = list.iterator();wh ...

  3. LINQ Enumerable

    System.Linq.Enumerable类,提供了数十种称为扩展方法的共享方法,帮助您操作所有实现IEnumerable(of T)接口的类中的数据.由于Enumerable类的扩展方法可以处理许 ...

  4. Asp.net 回车默认按钮

    <head> <script type="text/javascript"> function OnKey()      {          if (ev ...

  5. MySQL查看数据库大小、表大小和最后修改时间

    查看数据库表基本信息. select * from information_schema.TABLES where information_schema.TABLES.TABLE_SCHEMA = ' ...

  6. swift 闭包 由浅入深 优化

    //: Playground - noun: a place where people can play import UIKit ////////////////////////////////// ...

  7. Caused by: java.lang.NullPointerException, java.lang.reflect.InvocationTargetExc

    java.lang.reflect.InvocationTargetException at sun.reflect.NativeMethodAccessorImpl.invoke0(Native M ...

  8. CodedDFS日志配置

    本文根据Log4j的配置属性,编写了用于记录BMBR编码的日志 author: zyumeng Blog: [url] http://www.cnblogs.com/zyumeng/ [/url] 利 ...

  9. 转载：Struts2.3.15.1升级总结

    转载网址:http://blog.csdn.net/amosryan/article/details/10350481 由于大家都懂的原因,涉struts2的项目需要将struts2相关包升级至2.3 ...

  10. PHP高效的敏感词过滤方法

    <?php // 测试文件demo.php $badword = array( '张三','张三丰','张三丰田' ); // array_combine() 函数通过合并两个数组来创建一个新数 ...