第五章 CSS样式基本知识

　　内联式css样式，直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。
　　内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
　　　　<p style="color:red">这里文字是红色。</p>
　　嵌入式css样式，写在当前的文件中
嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：
　　　　<style type="text/css">
span{
color:red;
}
</style>
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
　　外部式css样式，写在单独的一个文件中
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内 （不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
　　　　<link href="base.css" rel="stylesheet" type="text/css" />
　　注意：
　　　　1、css样式文件名称以有意义的英文字母命名，如 main.css。
　　　　2、rel="stylesheet" type="text/css" 是固定写法不可修改。
　　　　3、<link>标签位置一般写在<head>标签之内。

　　三种方法的优先级
有的小伙伴问了，如果有一种情况：对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？记住他们的优先级：内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。
　　其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。
　　但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下。

第六章 CSS选择器

　　什么是选择器？
每一条css样式声明（定义）由两部分组成，形式如下：
　　　　选择器{
样式;
}
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
　　　　标签选择器
 标签选择器其实就是html代码中的标签。例如下面代码：p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。
　　　　类选择器
 类选择器在css样式编码中是最常用到的。
　　　　　　语法：
　　　　　　　　.类选器名称{css样式代码;}
注意：1、英文圆点开头
　　　　　　　　　　　　　　　　　　　　　　　　2、其中类选器名称可以任意起名（但不要起中文噢）
　　　　　　使用方法：
　　　　　　　　第一步：使用合适的标签把要修饰的内容标记起来，如下：<span>胆小如鼠</span>

　　　　　　　　第二步：使用class="类选择器名称"为标签设置一个类，如下：<span class="stress">胆小如鼠</span>


　　　　　　　　第三步：设置类选器css样式，如下：.stress{color:red;}/*类前面要加入一个英文圆点*/
　　　　ID选择器
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
　　　　　　1、为标签设置id="ID名称"，而不是class="类名称"。
　　　　　　2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

　　　　类和ID选择器的区别：
　　　　　　相同点：可以应用于任何元素
不同点：
　　　　　　1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。


　　　　　　2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

　　　　子选择器
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如：
　　　　　　.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
　　　　包含(后代)选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如：
　　　　　　.first span{color:red;}
这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。
　　　　请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
　　　　总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
　　　　通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：* {color:red;}
　　　　伪类选择符
更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hover{color:red;}
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。
　　　　关于伪选择符：
　　　　　　关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
　　　　分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
　　　　　　h1,span{color:red;}
它相当于下面两行代码：
　　　　　　h1{color:red;}
span{color:red;}

一、HTML和CSS基础--HTML+CSS基础课程--第3部分的更多相关文章

  1. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  2. Bootstrap<基础一> CSS 概览

    HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 B ...

  3. Html 之div+css布局之css基础

    Css是什么 CSS即层叠样式表(Cascading StyleSheet). 在网页制作时采用层叠样式表技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码 ...

  4. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  5. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  6. 前端总结·基础篇·CSS（二）视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  7. 前端总结·基础篇·CSS（三）补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  8. css简单的一些基础知识

    css层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...

  9. #WEB安全基础 : HTML/CSS | 文章索引

    本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...

  10. 阶段02JavaWeb基础day01html&css

    HTML 基础 概念 全写: HyperText Mark-up Language 译名: 超文本标记语言 超级文本标记语言是一种规范,一种标准, 超文本标记语言它通过标记符号来标记要显示的网页中的各 ...

随机推荐

  1. c++实现快排出现错误

    #include"header_file.h" using namespace std; void swap(int a,int b) { int t; t=a; a=b; b=t ...

  2. 快速上手如何使用FluentData

    http://blog.itpub.net/29511780/viewspace-1194048/ 目录:  一.什么是ORM? 二.使用ORM的优势 三.使用ORM的缺点 四.NET下的ORM框架有 ...

  3. 求三数中Max和猜拳游戏

    方法一: Console.WriteLine("请输入三个数字:"); int a = int.Parse(Console.ReadLine()); int b = int.Par ...

  4. --hdu 2124 Repair the Wall(贪心)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2124 Ac code : #include<stdio.h> #include<st ...

  5. WPF 复制和粘贴

    /// <summary> /// 复制或剪切文件到剪切板 /// </summary> /// <param name="files">文件路 ...

  6. 详谈OC(object-c)深浅复制/拷贝-什么情况下用retain和copy

    读前小提示:对于深浅复制有一个清楚的了解,对于学习oc的朋友来说,至关重要.那么首先,我们要明白深浅复制是如何定义的呢.这里为了便于朋友们理解,定义如下. 浅 复 制:在复制操作时,对于被复制的对象的 ...

  7. 几款web开发常用jquery特效代码

    特效网:http://www.xwcms.net  1.图片拖动特效http://www.xwcms.net/js/tpdm/32946.html2.弹出层焦点图特效:http://www.xwcms ...

  8. 在生产环境使用Docker部署应用

    导读 Docker现在越来越流行,但是真正在生产环境部署Docker还是个比较新的概念,还没有一个标准的流程.作者是ROR的程序员,作者结合平时的部署经验,联系Docker的特点,向大家分享了其在生产 ...

  9. UIImage 和 iOS 图片压缩UIImage / UIImageVIew

    UIImageView 制作气泡 stretchableImageWithLeftCapWidth http://blog.csdn.net/justinjing0612/article/detail ...

  10. 让jar程序在linux上一直执行

    当我们把java程序打成jar包后,放到linux上通过putty或其它终端执行的时候,如果按照:java -jar xxxx.jar执行,当我们退出putty或终端的时候,xxxx.jar这个程序也 ...